Home » Methods » Develop » Wireframes

Wireframes

Definition:
Visual representation of a user interface, stripped of any visual design or branding elements. It defines the hierarchy of items on a screen. Based on user needs, a wireframe communicates what items should be in it and where.
 
Three basic types:
1. Lo-fidelity (pen and paper).
2. Mid-fidelity (black and white mock ups made using software, e.g. Balsamiq).
3. High-fidelity (colourful pixel perfect mock ups, e.g. Adobe Photoshop or Illustrator)
 
When to use:
Lo-fidelity for quickly ruling out weak layouts, and doing rapid iterations without investing much time.
Mid-fidelity for refining initial ideas/concepts, and to get feedback from stakeholders/users/colleagues.
High-fidelity requires less Client imagination, it is more effective at persuading Stakeholders to sign off ideas/concepts.