GUI Prototypes from Component Slices for Faster Wireframing
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing graphical user interface (GUI) prototyping methods are inefficient and require designers to manually design all components, which is time-consuming and limits the ability to create realistic and functional prototypes quickly.
Innovation Solution
A method and system that decomposes a draft wireframe into component slices, using machine learning models like generative adversarial networks (GANs) to automatically generate a complete and functional GUI prototype by adding missing components based on user input, enhancing the prototyping process with AI-driven automation.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Manufacturing precision
If designers manually design all GUI components, then the prototype quality and completeness are improved, but the time consumption and work efficiency deteriorate
Solution Approach 1:
The system segments the GUI design process into two parts: (1) manual creation of key component slices by designers, and (2) automated generation of complete wireframes and prototypes by the system. This segmentation allows designers to focus on critical components while the system handles routine generation, resolving the contradiction between quality and efficiency
Solution Approach 2:
The system performs preliminary actions by automatically generating complete wireframes and prototypes based on manually created component slices. This preliminary automated generation reduces the manual workload required for complete prototype creation while maintaining quality standards
2Reliability
If designers manually design all GUI components, then the completeness and functionality of prototypes are improved, but the time required to create prototypes increases
Solution Approach 1:
The system provides self-service functionality by automatically generating complete wireframes and functional prototypes from manually created component slices. This self-service capability ensures prototype completeness without requiring designers to manually create every component, thereby reducing prototyping time while maintaining reliability
3Productivity
If the system automatically generates complete wireframes and prototypes, then the productivity and speed of prototyping are improved, but the complexity of the system increases
Solution Approach 1:
The system uses component slices as an intermediary between manual design input and automated prototype generation. This intermediary approach simplifies the system architecture by breaking down the complex generation process into manageable steps: creating component slices, assembling wireframes, and generating prototypes, thereby improving productivity without excessive complexity increase
Data Source
AI summary
A method of generating a prototype of a graphical user interface (GUI). The method includes acquiring a draft wireframe representing a GUI design, the draft wireframe including one or more wireframe components, and decomposing the draft wireframe into one or more component slices, each component slice including a respective wireframe component of the one or more wireframe components. The method also includes generating a component slice sequence including the one or more component slices and at least one additional component slice selected based on the draft wireframe, constructing a wireframe based on the component slice sequence, and generating a prototype of the GUI design based on the constructed wireframe.