2. Homework
• Put your files as PDFs in my dropbox
• Put them in a folder with your
lastname and first initial
• Example:
smith-h
sitemap.pdf
wireframes.pdf
3. Sitemaps with Post-it notes
• A technique to refine the information
architecture of your site is to use post-
it notes and a volunteer
5. Page Comps
• Short for Page Composition or Page
Comprehensive
• Page Comps provide a visual
representation of the site
• You don't need a comp for every
page on the site
6. Page Comps
• The goal is to provide the "look and feel"
‣ Fonts
‣ Color palette
‣ Layout and graphic elements (e.g. boxes
around text)
‣ Logo placement
‣ Photography
‣ Functional elements (e.g. form fields,
buttons)
7. Comps can be created
in Photoshop
Open Photoshop now…
8. Browser Canvas Size
• When working in Photoshop accurate
dimensions should be used
o 1024x768 is the most used monitor resolution
Use this for the size of the document
Resource: http://www.thecounter.com/stats/
o 920x570 is the optimal size for the canvas, or
the viewable area
Subtract chrome and other operating
system elements from the monitor resolution
570 is where the fold lies
11. Mental Models
• An idea of how something works,
whether true or not, that is useful in
interacting with it is called a mental
model
• External conventions and consistency
help users construct mental models
The Art & Science of Web Design, by Jeffrey Veen
12. Mental Maps
• Context and navigation help users
construct mental maps of your site
The Art & Science of Web Design, by Jeffrey Veen
13. External Conventions and
Consistency
• External Conventions (assumed)
‣ Underlined text is a link
‣ Links are different than text
‣ When a page opens in a new window,
itʼs because itʼs on another site
• Consistency (learned)
‣ Clicking the logo always takes me
home
14. Context and Navigation
• Context
‣ Help users understand where they are
‣ Show users whatʼs here
‣ Speed this all up by placing content, navigation,
branding in places where users expect to see
them
• Navigation
‣ Show users what else they can get to from here
‣ Help uses construct a mental map by showing
what else is on this site
15. Users want content
• What percentage of a page has what users
came there for, the content? What percentage
is everything else? How do they compare?
‣ Take a screenshot of a web page
‣ In Photoshop, color code navigation
(yellow), advertising (red), and content
(green)
‣ How much "content" is there for users?
How much is "the rest"?
Designing Web Usability, by Jakob Nielsen
16. Timeline
March April May Last day of class
9 16 23 30 6 13 20 27 4 11 18 25
Strategy
Present final projects
Research and discovery (two days)
creative user
brief personas
Design Validation
Interaction design
sitemap
wireframes
Visual design Present
mood
revisions
boards
page
comps
Site development
Production
18. Create a Mood Board
• Collect things you like (and dislike)
from around the Web
• Understand what the conventions
are, which may differ based on your
domain
• Find the patterns
21. Getting started
• Start with header, content, and footer
areas
• Use your wireframes as a visual
checklist
• Design the homepage and one
sublevel page
22. Tactical elements
• Cut and paste widgets like search
bars, buttons, form fields, and other
standard HTML elements from
screenshots
• Different operating systems have
different UI elements
• Change anti-aliasing to none where
system fonts will be used
23. Layer Comps
• Photoshop has the ability
to allow you to create
different pages using the
same elements in one
document
24. Saving Comps
• Save JPEGs in Photoshop using
Save as…
• Combine all JPEGs into one PDF
document using Acrobat
25. Homework due April 13
• Create a Mood Board for your site
• Work on your Page Comps
‣ Home page
‣ One sublevel page
• Read Chapter 4: Interface Design in
Web Style Guide online
• Finish user research and create a User
Persona
