wireframe glossary · nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex...
TRANSCRIPT
Wireframe GlossaryPro SEO Seminar, London 2010
Leonie Wharton
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
pine bookcases oak bookcases mahogany bookcases teak bookcases
Garden > Garden Buildings > Sheds, Garden Storage & Workshops > Wooden Sheds
LOGO
Image scrolling navigation
home products about services contact
Dining Furniture Office & Boardroom Bookcases Chests Cabinets
pine bookcases oak bookcases mahogany bookcases teak bookcases
pine bookcases oak bookcases mahogany bookcases teak bookcases
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• 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
home products about services contact
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
Dining Furniture Office & Boardroom Bookcases Chests Cabinets
pine bookcases oak bookcases mahogany bookcases teak bookcases
pine bookcases oak bookcases mahogany bookcases teak bookcases
LOGOhome products about services contact
Dining Furniture Office & Boardroom Bookcases Chests Cabinets
pine bookcases oak bookcases mahogany bookcases teak bookcases
pine bookcases oak bookcases mahogany bookcases teak bookcases
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
Navigation Wireframes
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
home products about services contact
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
Dining Furniture Office & Boardroom Bookcases Chests Cabinets
pine bookcases oak bookcases mahogany bookcases teak bookcases
pine bookcases oak bookcases mahogany bookcases teak bookcases
LOGOhome products about services contact
Dining Furniture Office & Boardroom Bookcases Chests Cabinets
pine bookcases oak bookcases mahogany bookcases teak bookcases
pine bookcases oak bookcases mahogany bookcases teak bookcases
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• 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
home products about services contact
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
Dining Furniture Office & Boardroom Bookcases Chests Cabinets
pine bookcases oak bookcases mahogany bookcases teak bookcases
pine bookcases oak bookcases mahogany bookcases teak bookcases
LOGOhome products about services contact
Dining Furniture Office & Boardroom Bookcases Chests Cabinets
pine bookcases oak bookcases mahogany bookcases teak bookcases
pine bookcases oak bookcases mahogany bookcases teak bookcases
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgan pine bookcase• 1930’s pine bookcase• victorian pine bookcase
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)
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 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)
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 copyright info faq’s
horizontal
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
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
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
finance delivery terms and conditions copyrightinfo faq’s
verticalOne Level Navigation - vertical (example)
LOGOhome about portfolio services contact
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
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
LOGOhome about portfolio services contact
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
hover state text drop down
staffhistorytimeline
Two Level Navigation - hoverstate (example)
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? 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
Image scrolling navigation
home products about services contact
Office & Boardroom Bookcases Chests
TV & Hi-Fi Cabinets Cabinets
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
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
Image scrolling navigation
home products about services contact
Office & Boardroom Bookcases Chests
TV & Hi-Fi Cabinets Cabinets
Dining Furniture
Two Level Navigation - image drop down (example)
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? 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
Image scrolling navigation
home products about services contact
Office & Boardroom Bookcases Chests
TV & Hi-Fi Cabinets Cabinets
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
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
Image scrolling navigation
home products about services contact
Office & Boardroom Bookcases Chests
TV & Hi-Fi Cabinets Cabinets
Dining Furniture
Two Level Navigation - image drop down & scrolling (example)
LOGO
Image scrolling navigation
home products about services contact
Dining Furniture Office & Boardroom Bookcases Chests Cabinets
pine bookcases oak bookcases mahogany bookcases teak bookcases
pine bookcases oak bookcases mahogany bookcases teak bookcases
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
Image scrolling navigation
home products about services contact
Dining Furniture Office & Boardroom Bookcases Chests Cabinets
pine bookcases oak bookcases mahogany bookcases teak bookcases
pine bookcases oak bookcases mahogany bookcases teak bookcases
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
LOGOhome about portfolio services contact
illustration photography wedding sport nature product
live action animation 3D design
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
arrow swivels and reveals further sub navigation
arrow swivels and reveals further sub-navigation
Three Level Navigation - vertical (example)
LOGOhome about portfolio services contact
illustration photography wedding sport nature product
live action animation 3D design
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
LOGO
Image scrolling navigation
home products about services contact
Dining Furniture Office & Boardroom Bookcases Chests Cabinets
pine bookcases oak bookcases mahogany bookcases teak bookcases
pine bookcases oak bookcases mahogany bookcases teak bookcases
• georgian pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgian pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgian pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgian pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgian pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgian pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgian pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• 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
Image scrolling navigation
home products about services contact
Dining Furniture Office & Boardroom Bookcases Chests Cabinets
pine bookcases oak bookcases mahogany bookcases teak bookcases
pine bookcases oak bookcases mahogany bookcases teak bookcases
• georgian pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgian pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgian pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgian pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgian pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgian pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgian pine bookcase• 1930’s pine bookcase• victorian pine bookcase
• georgian pine bookcase• 1930’s pine bookcase• victorian pine bookcase
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
LOGOhome about portfolio services contact
illustration photography wedding sport nature birds fish rabbits swans product
live action animation 3D design
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)
LOGOhome about portfolio services contact
illustration photography wedding sport nature birds fish rabbits swans product
live action animation 3D design
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
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
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 (example)
push your main message here
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 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
><
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 voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
>TITLENeque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
Top Banners (example)
maximise your home page space
home about portfolio services contact
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?
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)
LOGOhome about portfolio services contact
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
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)
LOGOhome about portfolio services contact
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
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>
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>
finance delivery terms and conditions copyrightinfo faq’s
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
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>
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>
finance delivery terms and conditions copyrightinfo faq’s
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