Wireframing Basics - Part 3

In Wireframing Basics - Part 1 we have seen, wireframes, types of wireframes, 5 Planes of UX etc.

In Wireframing Basics - Part 2 we have seen, some important points like F shape pattern, 'Call to Action', Affordance etc. in detail.

In this last article of 'Wireframing Basics series' we will look at more information about wireframes. 

Importance of Wireframing

1. Demonstrate concepts & ideas effectively
2. Easy in creation, quick in time
3. Supports Early Usability Testing
4. Easy Iterations and changes

Wireframes focus on

1. Identification & Arrangement of Content , UI elements
2. Identification of  Information and Actions to be performed in the application
3. Placement and prioritization of information in a way that facilitates understanding
4. Screen / Page Navigation : How will the user navigate using the application screens
5. Information Architecture : What will be the flow of information OR information Hierarchy  of the data present? Which data presented on the screen should get prime importance?
6. Depicting all Use cases and Scenarios

Wireframes DO NOT address

1. Do not use colors. If you would typically use color to distinguish items, instead rely on various gray  tones to communicate the differences.
2. Do not use images. Images distract from the task at hand.  To indicate where you intend to place  an image and its size, you can instead use a rectangular box sized to dimension with an “x” through it.
3. Use only one generic font. Typography should not be a part of the wireframing discussion.  Within the wireframes, however, you may still resize the font to indicate various headers and changes in the hierarchy of the text information on the page.

<< Previous article 'Wireframing Part 2'

About Author

Abhishek Jain