Previous
¶ Wireframes
¶ What it is
In the design production process, wireframes are typically monochrome drawings before the UI screens. It offers a detailed description of the page or screen's layout, interactions, and features. As a result, the stakeholders clearly understand how the main features work and how the Information will be presented.
¶ Why it is useful
Building the early draft of the design requires many changes to get it right; thus, rough wireframes can save designers much time. Designers can also use wireframes to get early feedback from clients and users, ensuring they are on the right track.
¶ When to use it
Wireframes are like blueprints for architects when they design a building. They are used in the early stage of each sprint. When UX designers have precise feature requirements and the user flows are done, they can start working on the wireframes.
¶ How is it done
- Decide the level of fidelity of the wireframes based on your goal.
- Create a high-level structure for the wireframes. Designers can group the wireframes base on feature, flow, or relevance.
- Design the rough layout of each screen using boxes and section titles
- Design the interaction for each feature, using simple shapes and frames for components.
- You can also demonstrate the Information hierarchy using elements of different sizes for high-fidelity wireframes.
- Add connectors between screens to show the interaction flow when it’s necessary.
- Add additional text Information if parts of the wireframes need clarification.
¶ Do's & Don't
Do's
- Develop a strong understanding of the features and Information of the product before working on wireframes.
- Focus on high-level interactions and rough layouts of pages or screens.
- Add documentation and flow connectors so your wireframes can be easily understood.
Don't
- Don’t worry about the details, such as the size of the components and text, at this stage; it will slow you down.
¶ Tools needed
- Pen & Paper
- Figma
¶ Example
¶ GenAI Tool Use Case
¶ Streamlining Copy Ideation in Wireframes
By selecting a frame and providing a company description, Relume Ipsum swiftly generates copy mapped to the text layers within the frame. Moreover, the tool allows selective locking of text layers, ensuring that the AI generates content only for the unlocked layers.
Key Steps Tutorial:
- Select a text box to open Relume Ipsum
- Describe the company name and requirements
- Text replacement successful
Other Inspirational Tool:
Diagram
(Automator) automates design tasks in Figma. and (Magician) generates AI-suggested copy.
Uizard
Generate UI designs from text prompts, convert hand-drawn sketches into wireframes, and transform screenshots into editable designs.