close

Wireframe

Commonly, it is a well-known canvas with blocks of different shades of gray. Color accents are rarely used here. For practical purposes, the wireframe acts as a skeleton for future design.


There are high and low fidelity wireframes. Hi-Fi are designed to display details that are usually missing in Lo-Fi wireframes. With their help, designers will be able to accurately reproduce the hierarchy of all page elements.

 

Earth Tribe Wireframes by Adam Kalin

Here's a typical example of a Hi-Fi wireframe where you can see the main elements of the site's home page. In this case you can see pieces of text content, but they are not necessary. It is common to use placeholder text such as Lorem Ipsum

Wireframes vs Others

Wireframes, prototypes, and mockups are all different forms of presentation for the design. But mockups and prototypes are more detalized and closer to the final product. They are both presented in color format.

 

Mockups is a design of a web page or application that features most of its final design. But they are not active, unlike prototypes. The last ones are created to test the product. They are living pages with some active elements. A prototype is already an almost finished design.

6 Wireframe Building Steps

  1. Draw your idea on paper

    In fact, a wireframe is just a more advanced sketch. When you want to analyze a few ideas before choosing the best one, you can quickly create a wireframe on paper. Thus, you will be able to recreate the simplest possible algorithms for performing targeted actions
     

  2. Choose the correct canvas size

    As for choosing the right canvas size for your site wireframe, first you need to answer the two following questions. Is the site fluid, fixed, or responsive? What is the planned minimum / maximum screen resolution?

     

    Most often, designers set the width to 1920px.
     

    Choosing the wrong size and scale for a wireframe sometimes results in poor usability. A canvas that is too large in practice can be compressed several times, which means that the components on it will also shift.

  3. Use a grid

    The grid helps to create a wireframe for all graphic design elements: logo, menu, slider, shapes, images, etc. Thanks to this skeleton, you can position all these elements harmoniously, as well as choose their relative and absolute sizes. In fact, grids provide the design flexibility needed to adapt the wireframe to different screen sizes. That is a step towards creating a responsive design.

  4. Use Lorem Ipsum text and colors

    The generated Lorem Ipsum text in the right amount will help you understand how to place text blocks and see a schematic representation of the design in the form that will be shown to end users.

  5. Add the comments

    To ensure that you and the design team do not have any misunderstandings, leave comments.

  6. Ask for feedback

    Collect feedback from the testing, content and development teams. They can offer you some ways to optimize and simplify the ways you have created for users to interact with interface elements.

Useful Tools

share the term