Wireframe Glossary · nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate

Wireframe GlossaryPro SEO Seminar, London 2010

Leonie Wharton

[email protected]

Graphic Designer

Leonie Wharton

I have collated a range of common website templates together with my tips on how to use them

This glossary of wireframes is to help your designer with information architecture and will help you when briefing your designer

Wireframe Glossary

LOGO

Image scrolling navigation

home products about services contact

Dining Furniture Office & Boardroom Bookcases Chests Cabinets

pine bookcases oak bookcases mahogany bookcases teak bookcases


Garden > Garden Buildings > Sheds, Garden Storage & Workshops > Wooden Sheds

LOGO






• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase








one level two levels

three levels four levels

LOGOLOGO

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni

Office & Boardroom Bookcases Chests

TV & Hi-Fi Cabinets Cabinets

Dining Furniture


LOGOhome about portfolio services contact

history press video partners tools sign up

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem

finance delivery terms and conditions copyrightinfo faq’s

LOGOhome products about services contact
















Navigation Wireframes



LOGOLOGO




Dining Furniture
























LOGOLOGO




Dining Furniture






















However large or small a website, finding the right content should be simple, if the information architecture is logical and the design clear

One Level Navigation - horizontal (wireframe)




finance delivery terms and conditions copyright info faq’s

main navigation

heirachy:less obvious than top navigation

footer navigation

horizontal

If your navigation is long there are 2 ways to section it up:

Divide the pages into sub-navigation categories, or split your page into 2 or 3 areas of navigation. This prevents any navigation being hidden

main navigation

use hierarchy to separate

smaller footer navigation

One Level Navigation - horizontal (example)




finance delivery terms and conditions copyright info faq’s

horizontal



Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis

vertical

main navigation

heirachy:less obvious than top navigation

One Level Navigation - vertical (wireframe)

Vertical navigation works better on smaller websitesmain

navigation

use hierarchy to separate





verticalOne Level Navigation - vertical (example)



hover state drop down

second level of navigation hoverstate

staffhistorytimeline

Two Level Navigation - hoverstate (wireframe)

Second levels of navigation can appear on hover or click state. Hover is better as it is more easily discoverable by the userreveal second

level



hover state text drop down

staffhistorytimeline

Two Level Navigation - hoverstate (example)

LOGO






Dining Furniture

on hover state imagery appears

Two Level Navigation - image drop down (wireframe)

Imagery creates a more user friendly site, helping users to make their decisions faster and can prevent them becoming impatient

reveal images

LOGO






Dining Furniture

Two Level Navigation - image drop down (example)

LOGO






Dining Furniture

highlight chosen navigation option

scrolling increases navigation size

Two Level Navigation - image drop down & scrolling (wireframe)

Making it obvious which sub navigation option is in the middle of the items shown makes it more obvious to the user that scrolling is possible

This image drop down can again be made visible on hoverstate

highlight chosen navigation option

scrolling increases navigation size

LOGO






Dining Furniture

Two Level Navigation - image drop down & scrolling (example)

LOGO






Three Level Navigation - buckets (wireframe)

The user will have had to click on the second level of navigation here to reveal the third layer

Having imagery at this stage as opposed to text is helpful

LOGO






Three Level Navigation - buckets (example)

Three Level Navigation - vertical (wireframe)

Personally, I dislike navigation that grows vertically especially on a very large website. The more levels that are opened the more the user has to scroll up and down


illustration photography wedding sport nature product

live action animation 3D design


arrow swivels and reveals further sub navigation

arrow swivels and reveals further sub-navigation

Three Level Navigation - vertical (example)


illustration photography wedding sport nature product



LOGO






• georgian pine bookcase• 1930’s pine bookcase• victorian pine bookcase








Four Level Navigation - buckets (wireframe)

Having 4 or more layers of navigation visible on a page results in it becoming very text heavy

At this level it is better for the user to click onto a few pages to refine their options

Four Level Navigation - buckets (example)

Garden > Garden Buildings > Sheds, Garden Storage & Workshops > Wooden Sheds

LOGO














Four Level Navigation - vertical (wireframe)

At any more than 4 levels, navigation begins to get too complex for the user

A selection of check boxes is sometimes a better way to filter product results


illustration photography wedding sport nature birds fish rabbits swans product


Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis navigation

is too long

Four Level Navigation - vertical (example)


illustration photography wedding sport nature birds fish rabbits swans product



sliding motion - using

fantastic for showing products and browsing quickly using large images to create impact

home about portfolio services contact

LOGO

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat

><

Brochure (wireframe)

This design pattern works perfectly as both a full website or a brochure section of a website

Use this to promote several top products quickly

quickly browsing products

sliding motion - using


LOGO

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat

><

Brochure (example)

push your main message here


LOGO

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

>keep these large and roomy to make an impact.

TITLENeque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

Top Banners (wireframe)

Include the following in your top banner:

TitleDescriptionImageCall-to-Action

keep these large and roomy to create impact

push your main message here

LOGO

><


LOGO


>TITLENeque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

Top Banners (example)

maximise your home page space


LOGOLOGO


TITLEuser can either click through imagery using 4 buttons at bottom or just watch as the images rotate

Image Rotators (wireframe)

These images can change in several ways:

Fading in and outSlidingDirect image changeBlinking through light

user can either click through imagery or watch it scroll

Image Rotators (example)

Breadcrumbs (wireframe)




breadcrumbs

cup cake baking > chocolate cup cakes > sprinkles >

Your breadcrumbs should appear clickable so the user can easily use them to navigate back a few pages

Breadcrumbs should be smaller than the main navigation and the page title

use arrows to show progression

Breadcrumbs (example)




breadcrumbs

cup cake baking > chocolate cup cakes > sprinkles >

LOGOhome portfolio services contact blog

TITLENeque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat tatem. Ut more>



CATEGORIESelitsed quianon numquam

ARCHIVEjanuary february march

BLOG ROLLnjkdhg

Blog Layout (wireframe)

Keep the positioning of imagery consistent

Make clicking to 'view more' buttons obvious

The title and image should also be click throughs

add social media icons

Blog Layout (example)

LOGOhome portfolio services contact blog




CATEGORIESelitsed quianon numquam

ARCHIVEjanuary february march

BLOG ROLLnjkdhg

Bright Colour Usage

Don't overuse bright colours. Use them to highlight features or for Call-to-Actions.

The Fold

People don’t mind scrolling, so don’t try to crunch everything into the top of your website.

Text / Imagery

Make sure there is enough imagery alongside your text to make it more appealing

Breathing Space

Give the different elements on your website room, as users will not stay on a cluttered site

Documents

Wireframe Glossary · nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate