ARTDM 171 Week 9: Designing Page Comps


Published on

Published in: Education, Technology, 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 9: Designing Page Comps

    1. 1. ARTDM 171, Week 9: Designing Page Comps <ul><li>Gilbert Guerrero, </li></ul><ul><li>[email_address] </li></ul><ul><li> </li></ul>
    2. 2. Homework <ul><li>Put your files as PDFs in my dropbox </li></ul><ul><li>Put them in a folder with your lastname and first initial </li></ul><ul><li>Example: </li></ul><ul><li>smith-h </li></ul><ul><li>sitemap.pdf </li></ul><ul><li>wireframes.pdf </li></ul>
    3. 3. Save as PDF <ul><li>Before turning in your documents, save them as PDFs.  Keep your source files. </li></ul><ul><ul><li>Use Save as... and choose PDF to create the PDFs. </li></ul></ul>
    4. 4. Sitemaps with Post-it notes <ul><li>A technique to refine the information architecture of your site is to use post-it notes and a volunteer </li></ul>
    5. 5. Page Comps
    6. 6. Page Comps <ul><li>Short for Page Composition or Page Comprehensive </li></ul><ul><li>Page Comps provide a visual representation of the site </li></ul><ul><li>You don't need a comp for every page on the site </li></ul>
    7. 7. Page Comps <ul><li>The goal is to provide the &quot;look and feel&quot; </li></ul><ul><ul><li>Fonts </li></ul></ul><ul><ul><li>Color palette </li></ul></ul><ul><ul><li>Layout and graphic elements (e.g. boxes around text) </li></ul></ul><ul><ul><li>Logo placement  </li></ul></ul><ul><ul><li>Photography </li></ul></ul><ul><ul><li>Functional elements (e.g. form fields, buttons) </li></ul></ul>
    8. 8. Comps can be created in Photoshop <ul><li>Open Photoshop now… </li></ul>
    9. 9. Browser Canvas Size <ul><li>When working in Photoshop accurate dimensions should be used </li></ul><ul><ul><li>1024x768 is the most used monitor resolution Use this for the size of the document </li></ul></ul><ul><ul><ul><li>Resource: </li></ul></ul></ul><ul><ul><li>920x570 is the optimal size for the canvas, or the viewable area  </li></ul></ul><ul><ul><ul><li>Subtract chrome and other operating system elements from the monitor resolution  </li></ul></ul></ul><ul><ul><ul><li>570 is where the fold lies </li></ul></ul></ul>
    10. 10. Firefox MeasureIt <ul><ul><li> </li></ul></ul>
    11. 11. Mental Models <ul><li>A mental model is an idea of how something works, whether true or not, that is useful in interacting with it </li></ul>
    12. 12. Mental Models and Mental Maps <ul><li>External conventions and consistency help users construct mental models </li></ul><ul><li>Context and navigation help users construct mental maps of your site </li></ul><ul><li>The Art & Science of Web Design , by Jeffrey Veen </li></ul>
    13. 13. External Conventions and Consistency <ul><li>External Conventions (assumed) </li></ul><ul><ul><li>Underlined text is a link </li></ul></ul><ul><ul><li>Links are different than text </li></ul></ul><ul><ul><li>When a page opens in a new window, it’s because it’s on another site </li></ul></ul><ul><li>Consistency (learned) </li></ul><ul><ul><li>Clicking the logo always takes me home </li></ul></ul>
    14. 14. Context and Navigation <ul><li>Context </li></ul><ul><ul><li>Help users understand where they are </li></ul></ul><ul><ul><li>Show users what’s here </li></ul></ul><ul><ul><li>Speed this all up by placing content, navigation, branding in places where users expect to see them </li></ul></ul><ul><li>Navigation </li></ul><ul><ul><li>Show users what else they can get to from here </li></ul></ul><ul><ul><li>Help uses construct a mental map by showing what else is on this site </li></ul></ul>
    15. 15. Users want content <ul><li>What percentage of a page has what users came there for, the content? What percentage is everything else? How do they compare? </li></ul><ul><ul><li>Take a screenshot of a web page </li></ul></ul><ul><ul><li>In Photoshop, color code navigation (yellow), advertising (red), and content (green) </li></ul></ul><ul><ul><li>How much &quot;content&quot; is there for users?  How much is &quot;the rest&quot;? </li></ul></ul><ul><li>Designing Web Usability , by Jakob Nielsen </li></ul>
    16. 16. Create a Mood Board <ul><li>Collecting things you like (and dislike) from around the Web </li></ul><ul><li>Understand what the conventions are, which may differ based on your domain </li></ul><ul><li>Find the patterns </li></ul>
    17. 17. Getting ideas <ul><li>Favourite Website Awards </li></ul>
    18. 18. Design Your Web Page in Photoshop
    19. 19. Taking Screenshots <ul><li>Mac – cmd + shift + 3 </li></ul><ul><li>PC – Use the “Print Screen” button </li></ul>
    20. 20. Getting started <ul><li>Start with header, content, and footer areas </li></ul><ul><li>Use your wireframes as a visual checklist </li></ul><ul><li>Design the homepage and one sublevel page </li></ul>
    21. 21. Tactical elements <ul><li>Cut and paste widgets like search bars, buttons, form fields, and other standard HTML elements from screenshots </li></ul><ul><li>Different operating systems have different UI elements </li></ul><ul><li>Change anti-aliasing to none where system fonts will be used </li></ul>
    22. 22. Timeline December 1 8 15 24 17 10 3 27 20 13 6 29 November October Last day of class Present revisions Present final projects (two days) Page production (add content and images) Site development (html coding) Design Strategy Usability Testing
    23. 23. Layer Comps <ul><li>Photoshop CS3 has the ability to allow you to create different pages using the same elements in one document </li></ul>
    24. 24. Saving Comps <ul><li>Save JPEGs in Photoshop using Save as… </li></ul><ul><li>Combine all JPEGs into one PDF document using Acrobat </li></ul>
    25. 25. Homework due Oct 20 <ul><li>Create a Moodboard for your site </li></ul><ul><li>Work on first draft of your Page Comps </li></ul><ul><ul><li>Home page </li></ul></ul><ul><ul><li>One sublevel page </li></ul></ul>