wireframing
MTM1532
Tiffany Tse
tset@algonquincollege.com
wireframing
It shows the priority and the organization of things on the screen and how users will get to other parts of the site
Skeleton of the site
What are They Good For?
Usability
Planning and Organization of Information
And Content
header
usually includes...
logo
navigation
(Primary, Secondary or even Tertiary)
login / logout
Search form
content
(main article)
usually includes...
main content
such as...
multimedia
Images, Slide-shows, Video
body copy
Textual Content
Sidebar or side panel
usually includes...
banner ads
or additional information
Search panel
or
Tag Cloud
(blog)
footer
usually includes...
Copyright information
secondary
or
Tertiary navigation
best practices
sections
outlined and labeled
images
outlined with an X through the center
content / copy
legible heading and clean horizontal lines indicating text
video
outline with X and play button and progress bar
Wireframing don'ts
Wireframes are not designs
wireframing don'ts
Important to remember that wireframes do not represent the final placement of elements
wireframing don'ts
Wireframes are about working through functional issues, and placements
wireframing don'ts
Wireframes are not final layouts
Wireframing
By tset
Wireframing
- 1,350