Getting The Most From Your Wireframes
WHY USE WIREFRAMES IN UI DESIGN?
The Purpose of Wireframing and Importance of Wireframe Tools
When designing a website, it’s essential for a UX designer to view everything in simple black-and-white diagrams before the time and effort can be invested into visual design details and content creation. The wireframing process involves arranging the elements on a page to give a clear view of what works and what still needs to be refined and provides a deliverable to promote clear communication.
A wireframe is a UX design tool often referred to as the blueprint of a website – a map of where each element will be located within the website. They nail down the information architecture and give an idea of the site’s functionality and flow before considering visual design. Wireframes are extremely useful design tools both when designing the website as well as communicating between stakeholders and designers.
WHAT WILL THE WIREFRAME LOOK LIKE?
Structure
How wireframe templates are structured depends on user research and requirements. The goal of the site and any necessary information or features must be established before beginning the design process. After deciding which elements must be included, each block can be formatted as it is laid out on the page with other elements.
Defining Levels of Fidelity
The styling of the blocks within a wireframe depends on the level of fidelity. Fidelity refers to how close the website wireframe appears to the real, finished design. Although fidelity is often stated as being low or high, it is a continuous spectrum that allows for interpretation by individual wireframes designers.
Low-Fidelity Wireframes
Low-fidelity wireframes typically have rough layouts in greyscale that show the location of each element on the screen, but the development process doesn’t show details of how the elements will look. A set of circles may represent icons and a row of squares may represent cards. Text can either be represented as several narrow rectangles or as “lorem ipsum” text, a fake language used by wireframe designers to create a natural-looking block of text that doesn’t distract from the layout. Headers can also be utilized within low-fi wireframes as placeholders to indicate what topic the section addresses.
A low-fi wireframe can be viewed directly through the Adobe XD browser preview here. Simply use your mouse to scroll in order to view the full page.
High-Fidelity Wireframes
High-fidelity wireframes tend to vary more in appearance than low-fidelity wireframes, but generally simulate the user experience design of the final product design. They utilize the final layout and other polished design elements such as colors and fonts drawn from the approved style tile. Final content such as real photos or copy are often not included and placeholders are used instead while content is still being created by other project teams. high-fidelity prototypes can also include interaction design states such as what buttons will look like when hovered over with a mouse. If interaction states are included, the wireframes are often linked together so that the website can be navigated by clicking on different elements in the navigation or on the pages.
A high-fi wireframe can be viewed directly through the Adobe XD browser preview here. Simply use your mouse to scroll in order to view the full page. Elements can be hovered or clicked on to interact as they would in a real browser.
WHAT TYPE OF FEEDBACK SHOULD BE LEFT ON A WIREFRAME?
UNDERSTANDING ADOBE XD
Before leaving feedback, it’s important to understand the nuances of Adobe XD, a rapid prototyping tool that allows users to view wireframes in their browser. Tips on how to view designs in Adobe XD can be read here in order to ensure the wireframe is being viewed in a way to simulate the final design as closely as possible.
FEEDBACK BASED ON FIDELITY
Each wireframing process stage prioritizes a different goal, so leaving feedback is highly dependent on which wireframe fidelity is being viewed.
Low-Fidelity Feedback
The low-fidelity wireframe is an ideal time to request changes to the organization of sections since it becomes harder and harder to change the layout as the design process moves forwards. Common requests center around adding, removing, re-purposing, or rearranging sections. Low-fi wireframes are also a great time to discuss if a section will have a lot of content and need an extra paragraph or can be condensed to just a set of icons.
High-Fidelity Feedback
The high-fidelity wireframe is great for mentioning colors, patterns, icons, or the layout of sections or specific elements. The information architecture of the user interface design has already been defined, so the focus should be moved to visual styling. It’s important to note that copy and images are likely not finalized at this stage as they are still being created by other teams.
After leaving feedback, the wireframe designer will either make changes to the design or leave replies with answers to questions and professional recommendations.
WHAT TO EXPECT AFTER APPROVING A WIREFRAME?
After the design team has a wireframe approved, the project can move on to the next stage in the design process depending on the fidelity of the wireframe. For a low-fidelity wireframe, the next stage is to move on to a higher fidelity wireframe and begin to incorporate visual styling. High-fidelity wireframes begin with the homepage and move on to the inner pages after the homepage is approved. For a high-fidelity wireframe, the next stage of the design process is to switch focus to development and finalizing the copy and images based on design decisions made during the feedback stage.
Questions? Fill out the form below to give us a shout.
CONTACT US