Responsive Design System with Multi-Dimension Widget State Management
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Responsive graphical design tools require significant effort from graphic designers and developers to create multiple versions of a design optimized for different screen sizes and orientations, with existing solutions often necessitating manual modifications across various dimensions and lacking intuitive methods for interactive design elements.
Innovation Solution
A system with a graphical user interface that allows users to specify designs with responsive widgets and masters, enabling the same design element to be edited across multiple dimensions, using absolute position specifications and object model event handlers for more complex responsiveness, and providing editing modes to manage changes effectively.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If multiple versions of a design are manually created for different screen sizes and orientations, then the design can be optimized for each specific dimension, but the design effort and time required increase significantly
Solution Approach 1:
The patent implements a single design system that functions across multiple dimensions and orientations simultaneously. A unified design canvas allows creators to define elements once with automatic adaptation to various screen sizes, orientations, and resolutions, eliminating the need to manually create separate design versions for each dimension while maintaining optimization for all target platforms
Solution Approach 2:
The patent introduces a new dimension of abstraction by implementing responsive design parameters that operate independently from specific screen dimensions. The system uses logical dimension specifications (e.g., orientation flags, breakpoint thresholds) rather than fixed pixel values, allowing the design to adapt across the entire spectrum of possible screen sizes without requiring manual specification for each dimension
2Ease of manufacture
If automated procedures are used to modify design elements such as reducing white space and font sizes, then the manual specification process is alleviated, but the design lacks interactive widget customization across dimensions
Solution Approach 1:
The patent implements dynamic widget configuration where interactive elements can have different states and properties depending on the target dimension. Widgets automatically adapt their behavior, layout, and characteristics based on responsive breakpoints and orientation specifications, enabling both automated adaptation and interactive customization across different screen sizes and orientations simultaneously
Solution Approach 2:
The system allows design parameters to change based on dimension specifications. Widgets can have parameter sets defined for different orientations and screen sizes, with the system automatically selecting and applying the appropriate parameters when rendering for a specific dimension, thus providing both automated adaptation and fine-grained control over interactive elements
3Productivity
If design elements are copied automatically from one dimension version to another, then the initial setup is simplified, but manual modifications are still required across various dimensions
Solution Approach 1:
The patent merges the specification process for multiple dimensions into a single unified workflow. Design elements are defined once in a master canvas with associated responsive parameters, and the system automatically propagates and adapts these elements across all target dimensions. This eliminates the need to manually copy and modify elements for each dimension while maintaining the ability to perform targeted adjustments when needed
Data Source
AI summary
Embodiments of the present invention provide tools and methods for the development and specification of a responsive graphical design. A graphical user interface allows a user to specify a design. The graphical user interface has a area for displaying a rendering of the design according to a first dimension specification. The system also has a dimension specification interface that allows the user to set a second dimension specification. The system also has a widget interface that allows the user to (i) add a widget to said design, (ii) specify a first state for the widget when the design is rendered according to the first dimension specification, and (iii) specify a second state for the widget when the design is rendered according to the second dimension specification.