Webpage Grid Definition for Design Resolution Adaptation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing graphic design applications struggle to efficiently adapt designs created on specific canvas resolutions for display at alternative resolutions, particularly when publishing designs as webpages.
Innovation Solution
The system generates webpage data by processing design element objects into element-grid records, which are then used to create a webpage grid definition, allowing for automatic reflowing, grouping, and ordering of design elements to accommodate different display resolutions.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If a design is created on a specific canvas resolution (e.g., 800×600), then the design maintains its original quality and intent, but it cannot be efficiently displayed at alternative resolutions without manual recreation
Solution Approach 1:
The design is segmented into discrete design elements (text, images, shapes) with defined properties including grid position, size, and layer information. This segmentation allows the system to process and reposition individual elements automatically when adapting to different resolutions, eliminating the need for manual recreation of entire designs at each resolution.
Solution Approach 2:
The system implements dynamic resolution adaptation by using a grid-based coordinate system that can be scaled and transformed. Design elements are positioned relative to grid lines rather than fixed pixel coordinates, enabling automatic recalculation of positions and sizes when the display resolution changes, thus providing dynamic adaptability across multiple resolutions.
2Manufacturing precision
If multiple versions of a design are manually created for different resolutions, then each version can be optimized for its specific display, but the time and effort required to create and maintain these versions increases significantly
Solution Approach 1:
A single master design file serves multiple display resolutions through automatic grid-based transformation. The design element data structure and grid system are designed to be resolution-agnostic, allowing the same source file to be automatically adapted for various screen sizes and devices, making the system universal across different resolution requirements.
Solution Approach 2:
The system performs preliminary organization of design elements into a grid-based hierarchical structure during the design creation phase. Elements are assigned grid coordinates, layer information, and size parameters that enable automatic transformation. This preliminary structuring prepares the design for rapid adaptation to different resolutions without requiring manual adjustment at each stage.
3Measurement precision
If design elements are processed into detailed element-grid records with unique column and row gridlines, then the system achieves precise control over element positioning and layout, but the data processing complexity increases
Solution Approach 1:
The system uses a virtual grid overlay that is conceptually superimposed on the design canvas without physically altering the original design elements. The grid lines and their intersections serve as reference points for positioning, but the actual design data remains separate. This copying approach allows precise measurement and positioning while keeping the processing complexity manageable by working with coordinate transformations rather than complex geometric calculations.
Data Source
AI summary
Described herein is a computer implemented method for generating webpage data. The method includes processing a set of design element objects to generate a set of element-grid records, each record corresponding to a design element and including a unique column start, a unique column end, a column start offset and a column end offset. The set of element-grid records is processed to generate a webpage grid definition that defines a grid including a plurality of columns and a plurality of rows. A first design element and a second design element have a same horizontal start position and the webpage grid definition defines: a unique column start gridline for the first design element; a unique column start gridline for the second design element; and a zero-width first column between the first and second column gridlines.