Getting the Most From Your Wireframes

Wireframes are often referred to as the blueprint of a website–a map of where earch 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 both when designing the website as well as communicating between stakeholders and designers. 

01. Why use wireframes?

When designing a website, it’s essential to view everything in simple black-and-white diagrams before the time and effort can be invested into visual design details and content creation. Arranging the elements on a page gives a clear view of what works and what still needs to be refined and provides a deliverable to promote clear communication. 

02. What will the wireframe look like?


How a wireframe is structured depends on research and user 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 designers. 

Low-Fidelity Wireframes

Low-fidelity wireframes typically have rough layouts in greyscale that show the location of each element on the screen, but don’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 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 design of the final product. 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 teams. High-fi wireframes can also include interaction 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.

03. 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 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 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 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 designer will either make changes to the design or leave replies with answers to questions and professional recommendations. 

04. What to expect after approving a wireframe?

After a wireframe is 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. 

Leave a Reply

Your email address will not be published. Required fields are marked *