wireframe glossary · nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex...
TRANSCRIPT
![Page 1: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/1.jpg)
Wireframe GlossaryPro SEO Seminar, London 2010
Leonie Wharton
![Page 2: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/2.jpg)
Graphic Designer
Leonie Wharton
I have collated a range of common website templates together with my tips on how to use them
![Page 3: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/3.jpg)
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
![Page 4: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/4.jpg)
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
![Page 5: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/5.jpg)
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
![Page 6: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/6.jpg)
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
![Page 7: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/7.jpg)
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
![Page 8: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/8.jpg)
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)
![Page 9: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/9.jpg)
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
![Page 10: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/10.jpg)
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)
![Page 11: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/11.jpg)
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
![Page 12: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/12.jpg)
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)
![Page 13: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/13.jpg)
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
![Page 14: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/14.jpg)
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)
![Page 15: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/15.jpg)
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
![Page 16: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/16.jpg)
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)
![Page 17: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/17.jpg)
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
![Page 18: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/18.jpg)
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
![Page 19: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/19.jpg)
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
![Page 20: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/20.jpg)
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
![Page 21: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/21.jpg)
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
![Page 22: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/22.jpg)
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
![Page 23: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/23.jpg)
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
![Page 24: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/24.jpg)
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)
![Page 25: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/25.jpg)
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
![Page 26: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/26.jpg)
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)
![Page 27: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/27.jpg)
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
![Page 28: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/28.jpg)
Image Rotators (example)
![Page 29: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/29.jpg)
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
![Page 30: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/30.jpg)
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 >
![Page 31: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/31.jpg)
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
![Page 32: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/32.jpg)
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
![Page 33: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/33.jpg)
Bright Colour Usage
Don't overuse bright colours. Use them to highlight features or for Call-to-Actions.
![Page 34: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/34.jpg)
The Fold
People don’t mind scrolling, so don’t try to crunch everything into the top of your website.
![Page 35: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/35.jpg)
Text / Imagery
Make sure there is enough imagery alongside your text to make it more appealing
![Page 36: 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](https://reader033.vdocuments.us/reader033/viewer/2022041421/5e1f4e41933b9a2780777e68/html5/thumbnails/36.jpg)
Breathing Space
Give the different elements on your website room, as users will not stay on a cluttered site