A wireframe is an architectural blueprint of a webpage. It shows the size and
positioning of visual elements, leaving out the content. It is a planning tool
that helps us decide what we have room to include on a page and how the specific
interface controls might work.
For example, as you create a wireframe of the homepage, you'll try to
support as many major tasks there as possible so that users don't even
have to navigate. You'll want to make sure users can identify what your
site is and what it offers. Your allocation of homepage real estate must reflect
both your site owners' goals and your users' goals.
Here are the sample wireframes for our Acme Seeds site
Steps in designing a wireframe:
- Make a list of all the items you need to display on each screen. Include
logos and other branding materials, location clues like headers, page titles,
nav bars, and other supporting content areas.
- Identify elements that will need to be repeated from screen to screen
- Group similar items
- Prioritize items. Based on your overall goals, what should users notice
first?
- Create a visual hierarchy
- Create visual relationships that reflect the logical relationships of your
content using Gestalt visual grouping principles
Create a visual hierarchy
Not everything can be the most important thing on the page. Help users know
where to look first, and then lead their eyes through your page content in a
reasonably logical progression.
Use placement, size, color, and lines to guide their progress. If necessary,
use motion, but use it sparingly! Our visual systems are so sensitive to motion
that it can easily become distracting and even annoying.
Users' eyes typically scan from the top left, to the middle center, and
back to the bottom left. In some cases, their eyes will follow a sloping z pattern,
and go back to the bottom right:
Use Gestalt principles to create visual grouping
When we perceive things visually, we notice patterns of similarity, proximity,
or continuity. These patterns help us make sense of what we see. We look at
visual relationships to understand how information or content is structured--they
show us what is related to what, and how it is related.
You'll use these principles again when you begin your visual design,
but you need them in order to plan your wireframes.
Note that grouping is as much about contrast and separation as it is about
similarity and grouping. Once you say "these three things form a group"
you are also separating those three things from everything else on the page.
Similarity
Items that are visually similar, especially in color, are perceived as belonging
together. By the same token, we can draw attention to differences by using contrast.
Use this principle to communicate relationships and hierarchy in navigational
structure as well as in other areas of the site.
Proximity
Objects that are close together (in close proximity) are also seen as a group.
Even a small amount of extra space around a section of text will communicate
that it is meant to be seen as a separate unit.
Similarly, objects that line up to the same edge are typically associated.
Use a
grid to design the layout for your wireframes. Use the
grid to guide the placement of major page elements. A shared underlying grid
provides continuity among diverse pages. (As you design a grid for your wireframes,
remember that screens are wider than they are long, and that users will see
your layout on a variety of screen and window sizes. Design for a 1024x678 screen,
but make sure your layout is flexible.)
See how the underlying grid of the Acme site (above) and this portfolio
site is repeated from page to page.
Use blank space to guide the user's eye and separate elements from each
other. Increasing the amount of blank space can help a website seem clearer
and less overwhelming.
Continuity
Even when an object is partially occluded, we can see that it is all one thing
because our brains continue lines across visual barriers. This principle of
continuity can be used deliberately to increase the impact of a design.
