Wireframes
Last updated
Was this helpful?
Last updated
Was this helpful?
Wireframes are prototypes. However, not all prototypes are wireframes. Let's have a look at this YouTube video to understand the difference:
Wireframes are skeletal blueprints that outline the structure and layout of a user interface without focusing on visual design elements such as colors, images, or typography. They are like the blueprint designed by an architect for a construction project, like the one below:
Three reasons why they are important:
Clarity and communication - Wireframes provide a clear visualisation of the interface layout, allowing designers to communicate design concepts and ideas effectively to team members and stakeholders. They serve as a common reference point for discussing and refining design decisions.
User focus - By stripping away visual distractions, wireframes shift the focus to the core elements of the user experience, such as navigation, content organisation, and interaction flow. This helps ensure that the final design meets the needs and expectations of the target audience.
Iteration and flexibility - Wireframes are inherently flexible and easy to iterate upon, enabling designers to explore multiple design variations and refine the interface iteratively. Rapid prototyping with wireframes allows for quick experimentation and validation of design hypotheses before investing time and resources into detailed mockups.
Before seeing some example, let’s see some best practices:
Collaboration - Encourage collaboration among team members by sharing wireframes early and often. Solicit feedback from designers, developers, and stakeholders to ensure alignment with project goals and requirements.
Use annotations - Supplement wireframes with annotations or notes to provide context and clarify design decisions. Annotations can explain functionality, indicate user interactions, or highlight areas for further discussion. You can do this using arrows pointing to your notes or numbering the different areas of the wireframe and creating a legend that explains each number.
Test early and often - In a working setting, wireframes are not created by guesswork but through the research results and are changed according to users' feedback during the usability tests.
There are generally three types of wireframes: low-fidelity, mid-fidelity, and high-fidelity. Each type serves a different purpose and has distinct characteristics:
Low-fidelity wireframes are rough sketches or basic representations of the user interface. They can be on paper or in digital format.
They focus on layout, content organization, and functionality without detailing visual design elements.
Typically created quickly using pen and paper or digital tools like wireframing software.
Used primarily for ideation, brainstorming, and concept validation in the early stages of the design process.
Low-fidelity wireframes are simple and easy to iterate upon, allowing for rapid exploration of design ideas.
You have here a sketch example (credit Winnie Nguyen)
Mid-fidelity wireframes are more detailed than low-fidelity wireframes but still lack the visual polish of high-fidelity wireframes.
They include additional elements such as placeholder text, icons, and basic styling to provide a clearer representation of the final design.
Created using wireframing software allowing for greater precision and customization. You will use Figma as it’s free, but you can create them with Sketch, Adobe xD or like once upon a time with graphic softwares as CorelDraw and Photoshop. You can create them out of the blue, or you can download some template like this one on Figma: https://www.figma.com/community/file/968075681196720832/mid-fidelity-wireframe
Used for refining the layout, interaction flow, and content hierarchy of the user interface.
Mid-fidelity wireframes strike a balance between speed and detail, making them suitable for collaborative design reviews and usability testing.
You have here a mid-fidelity example (credit Ismael Lima)
High-fidelity wireframes closely resemble the final design regarding visual appearance and functionality.
They include detailed visual elements such as colors, typography, images, and interactive components.
Used for presenting the final design concept to stakeholders, developers, and clients for approval.
High-fidelity wireframes are also used for user testing to gather feedback on specific design details and interactions.
Here below, you can see the different passages from low to high fidelity:
Low Fidelity vs. High Fidelity (Youtube Video, 3 Minutes)
How I create Wireframes in Figma (Youtube, 5 Minutes)
Low Fidelity, High Fidelity Prototypes (Article)
Typography Guidelines (Article) and Type Scale
You can leave comments here.
