Wireframe

a. What is a wireframe?

A wireframe is a layout of a web page or application that demonstrates what interface elements will exist on key pages/screens. It is a critical part of the interaction design process.

The aim of a wireframe is to provide a visual understanding of a page early in a project to get stakeholder and project team approval before the creative phase gets under way. Wireframes can also be used to create the global and secondary navigation to ensure the terminology and structure used for the site meets user expectations.

b. Why we need to design wireframe

  • Giving UI designers a basis to begin creating screens
  • Using as a reference point for functional specifications
  • Communicating the functionality we are going to build with stakeholders without muddying the waters with visual design elements or branding
  • Exploring ideas without the difficulty of change in design
  • Using as a basis for prototyping and for user testing ideas early on

c. How to create a wireframe

Before starting to create a wireframe, make sure we have a strong grasp on your user’s goals, motivations and tasks they will want to achieve; understand the structure of the website through sitemap to define what the purpose of each page should be in terms of getting the user to their goal.

Tools:

  • Paper
  • Balsamiq
  • Axure
  • Whimsical
  • Sketch

Content:
Lorem Ipsum works ok for print design but we need to be thinking about what sort of information the user needs to see on this page, what type of language should be used for calls to action and where supporting content should be. Whilst the content certainly doesn’t need to be the final article it should be a close approximation.

Layout:
Have at least a basic appreciation for web page layouts as we need to keep in mind that this page may eventually have to be built. The developer guys may use a particular grid based system and it is worth checking with them as to what layout options are available, particularly in heavily templated systems.
In most cases we should be able to create a wireframe fairly quickly by simply dragging and dropping various UI elements onto the screen using a dedicated wireframe tool, use this flexibility and speed to come up with multiple routes and assess the pros and cons of each.

d. What should a wireframe contain?

  • A reference number which links the page back to the site map
  • A page title, again linking back to the site map
  • Depending on the intended user, create notes in order to describe interactions or different states on the UI
  • Any other supplementary information such as using a particular template or notes on the rationale for certain decisions

Work with us

Drop us a message if you need any helps from the Dwarves

Let's build