3 Why’s of Wireframes

What are Wireframes?

A well developed wireframe is capable of explaining how users will interact with the website. Wireframes are the blueprint of the website. By creating wireframes, a designer takes the first step towards the design planning. It is a 2-D illustration of a page’s interface. Focusing on functionalities, behavior, space allocation and content prioritization of the website.

 

Why do we use Wireframes?

• Wireframes are created to check the progress, to make sure that we are on the the right track.
• These can be created for discussion: Get the team, users, clients… talking/communicating about the design UI.
• To understand the business goals and to know how the website is supposed to work.

How are Wireframes made ?

Here are some examples of different tools used for creating wireframes:

 Axure : Is the widely used tool by the professional. It is one of the first professional-class wireframing/prototyping tools

 Pidoco: This tool is very much like Axure just that it includes library for drag and drop interface and also can add multiple layers and pages.

Omnigraffle: Easy to use, easy to get into details

Photoshop: Less easy to use, more easy to get into the details

Balsamiq:  Great job on by making a stencil library with UI elements. An idea behind it is to come up with something which is too neat and have straight looks which are more rigid and less approachable from a client perspective–and look more like paper/pen sketches.

 Invision: Invision doesn’t force you to use any particular library. This tool is good to use if you are comfortable using illustrator for wireframes.If you dig on Omnigraffle, Vizio, Photoshop or Paint–awesome, Invision won’t hold you back.

When can we use Wireframes?

Whenever an idea needs to have form: “SEE IT, TEST IT, ITERATE”

Who are they for?

Almost everyone from the designers, creatives, marketing, developers, usability, QA, users or may be groups, user testing, business, stakeholders, CEO’s

Avoid while starting with wireframes :

• Do not use color
• Do not use image
• Do not use multiple fonts
• Do not use interactive features

Types of Wireframes :

Low fidelity wireframes

These wireframes are quick and easy to develop. The use of simple images to block the off space and mock content implementation make it as abstract wireframes. Content and Labels might make use of Latin text as filler.

Features:

• Can be started by using a pen/pencil and paper
• Allow frequent rapid iterations
• Ideal for ruling out weak layout

High-fidelity wireframes :

These wireframes have increased level of details so these are always better for creating documentations. Such wireframes usually include all minute information on each corner of the page, whether it’s dimensions/behavior or any interactive element.

Features:

• Appears structurally to be nearly finished product
• Might use real images or some meaningful text
• Sometimes are pixel perfect
• It might be in full colors

Elements of the wire-frames :

• Logo
• Search field
• Breadcrumb
• Headers, including page title as the H1 and subheads H2-Hx
• Navigation systems, including global navigation and local navigation
• Body content
• Share buttons
• Contact information
• Footer