What are wireframes and why are they important?

Julia BenderDesignLeave a Comment

Example of Low and High Fidelity Wireframes

One important stage of the interface design process is turning any type of inspiration, ideas, or sketches of your interface into wireframes. Wireframes provide a hierarchy of information to your design. They help to prioritize content in order to determine how much space should be allocated to different types of content.

There are generally two types of wireframes: low fidelity (low fi) and high fidelity (hi fi).

Low Fidelity

Low fidelity wireframes are a very simple visual breakdown of your interface design’s structure. It helps to give an idea of where different interface elements will be placed. Low fi wireframes can be pretty abstract looking, using only grayscale lines and boxes to indicate the site’s content. The designer can annotate the wireframes to break down exactly what their thought process to the design is. Other designers may take a more detailed approach to low fi wireframes. It is usually just a preference for the designer.

Low Fidelity Wireframe

High Fidelity

High fidelity wireframes can start to incorporate type, but generally aren’t going to use the final font choice. These wireframes will use simple and clean fonts such as Helvetica or Roboto. This will give the designer a better idea of how large or small the typeface will need to be, how many lines of type will be used, and where all the content will be placed in the design. Again, no color is used so as not to distract from the overall wireframe purpose, which is interface structure and hierarchy. Only grayscale boxes are used to indicate images. Again, this is a designer preference, but images sometimes distract.

High Fidelity Wireframe

From there, designers can either start to make their preliminary designs, or they can continue to make more detailed wireframes, breaking down which typefaces to use and starting to incorporate imagery. Likely, the content will remain in grayscale.

Designers can utilize wireframes to get their design ideas down and to see how these ideas look laid out. It is a good stage in the design process to help decide what path the design will take if the designer is juggling a couple different ideas. Ultimately, it will help to determine which solution is best for the current project.