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,284