ARTDM 171, Week 10: Mood Boards + Page Comps


Published on

Published in: Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

  • Examples:,

  • ARTDM 171, Week 10: Mood Boards + Page Comps

    1. 1. ARTDM 171, Week 10: Designing Page Comps Gilbert Guerrero,
    2. 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. 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
    4. 4. Page Comps
    5. 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. 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. 7. Comps can be created in Photoshop Open Photoshop now…
    8. 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: 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
    9. 9. Firefox MeasureIt firefox/addon/539
    10. 10. Mental Models
    11. 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. 12. Mental Maps • Context and navigation help users construct mental maps of your site The Art & Science of Web Design, by Jeffrey Veen
    13. 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. 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. 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. 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
    17. 17. Mood Boards
    18. 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
    19. 19. Getting ideas Favourite Website Awards
    20. 20. Design Your Web Page in Photoshop
    21. 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. 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. 23. Layer Comps • Photoshop has the ability to allow you to create different pages using the same elements in one document
    24. 24. Saving Comps • Save JPEGs in Photoshop using Save as… • Combine all JPEGs into one PDF document using Acrobat
    25. 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
    26. 26. Thank You