Web Design


Published on

Published in: 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
  • Web Design

    1. 1. Visually communicate with your design Serena Carpenter http://serenacarpenter.com
    2. 5. <ul><li>C ontrast </li></ul><ul><ul><li>Impatient scanner </li></ul></ul><ul><ul><li>Variations in size guide eyes </li></ul></ul><ul><ul><ul><li>Western cultures read from left to right, top to bottom – place important information top-left </li></ul></ul></ul><ul><li>A lignment </li></ul><ul><ul><li>Invisible border </li></ul></ul><ul><ul><li>Uniform </li></ul></ul><ul><li>R epetition </li></ul><ul><ul><li>All pages are a coherent whole and single page (font, size, color) </li></ul></ul><ul><ul><li>Identity </li></ul></ul><ul><ul><li>Professional </li></ul></ul><ul><li>P roximity </li></ul><ul><ul><li>Pictures, bold, color, hierarchy </li></ul></ul><ul><ul><li>Headlines should close to their paragraphs </li></ul></ul><ul><ul><li>Text – natural attraction </li></ul></ul>
    3. 6. Contrast
    4. 7. Alignment – Invisible grid
    5. 8. Repetition <ul><li>http://www.cnn.com/ </li></ul>
    6. 9. Proximity
    7. 12. Paging vs. Scrolling <ul><li>Primary content above the fold </li></ul><ul><li>Paging is better for reading time, comprehension, and search time </li></ul>
    8. 13. <ul><li>Perception of site efficiency </li></ul><ul><li>Promotes comprehension </li></ul><ul><li>Satisfaction with the site </li></ul><ul><li>Looks professional </li></ul>
    9. 16. Monitor Resolution <ul><li>Pixels of resolution </li></ul><ul><ul><li>1024 X 768 - 36% (Jan. 2009) </li></ul></ul><ul><ul><ul><li>Make your pages 950 px wide </li></ul></ul></ul><ul><ul><li>800 X 600 (15 inch monitor) – 4% </li></ul></ul><ul><ul><li>Higher than 1024 – 57% </li></ul></ul>
    10. 18. Navigation
    11. 19. Stick with Muted Colors And Think about Your Intended Audience <ul><li>Dark color for text, light background </li></ul><ul><li>Gender neutral </li></ul><ul><li>Bright reds, oranges, yellows, or lime green backgrounds are visually tiring and reduce time spent </li></ul><ul><ul><li>Restrict bright colors to a few high-impact words and accents </li></ul></ul><ul><li>black/white/gray color = sophistication, cleanness, and reliability </li></ul><ul><li>Black (Evil, power, reliable) </li></ul><ul><li>White (purity, peace) </li></ul><ul><li>Purple ( creativity, passion, spiritual) </li></ul><ul><li>Brown (stable, strong, tranquil) </li></ul><ul><li>Pink (love, friendship, compassion) </li></ul><ul><li>Red (strength, passion, energy, heat, aggression) </li></ul><ul><li>Yellow (warmth, happy) </li></ul><ul><li>Blue (trust, calm, sadness) </li></ul><ul><li>Green (nature, abundance, sadness) </li></ul><ul><li>Orange (energy, distrust, warmth) </li></ul>
    12. 21. Images <ul><li>Looking room </li></ul><ul><li>Rule of thirds </li></ul><ul><ul><li>add “visual interest” by placing the center of interest on or near one of the four sweet spots “where the vertical and horizontal lines intersect” </li></ul></ul><ul><li>Photographs that display emotion capture the human condition and bring the viewer into the photo </li></ul><ul><ul><li>Do not use meaningless photos and graphics </li></ul></ul>
    13. 22. <ul><li>What is typography? </li></ul>
    14. 23. Typography is not picking a cool font. <ul><li>“ to honor the content it sets—to enhance legibility and embody the character of the words within.” </li></ul><ul><li>Jeff Croft, Web designer </li></ul><ul><li>“ the mechanical notation and arrangement of language.” </li></ul><ul><li>Type & Typography by Phil Baines </li></ul>
    15. 24. White space unclutters <ul><li>Space between the elements on a page </li></ul><ul><ul><li>Affects reading speed and comprehension </li></ul></ul>
    16. 25. Stick with narrow columns <ul><ul><li>Optimal readability, running text columns such as your main body copy should be somewhere between 45 - 75 characters including spaces ( 10 -12 words per line). </li></ul></ul><ul><li>. </li></ul>
    17. 26. Basic Rules <ul><li>Draw attention to itself before it will be read </li></ul><ul><li>Legibility </li></ul><ul><ul><li>Always use dark text on a light background </li></ul></ul><ul><ul><ul><li>Computer screens have much greater black/white contrast than the printed page. </li></ul></ul></ul><ul><ul><ul><ul><li>off-black to pure black on white backgrounds </li></ul></ul></ul></ul><ul><ul><ul><ul><li>very light gray instead of pure white on black backgrounds. </li></ul></ul></ul></ul><ul><li>Use web safe fonts </li></ul>Robert Bringhurst The Elements of Typographic Style
    18. 27. Font <ul><li>Serif fonts guide the reader </li></ul><ul><ul><li>Main body – requires sustained reading </li></ul></ul><ul><ul><li>Times New Roman design for The Times in 1932 </li></ul></ul><ul><ul><ul><li>Great for text, not for artwork </li></ul></ul></ul><ul><li>Sans serif (1960) </li></ul><ul><ul><li>Helvetica and Arial </li></ul></ul><ul><ul><li>Take up less space </li></ul></ul><ul><ul><li>Grab attention </li></ul></ul><ul><ul><ul><li>Headlines, information signs – distance, </li></ul></ul></ul><ul><ul><li>Add to legibility </li></ul></ul><ul><ul><li>Perceived to be Stable, Practical, Mature, and Formal </li></ul></ul><ul><li>Sans Serifs better for the Web because they are easier to read on low-resolution, pixel-based computer screens </li></ul><ul><ul><li>Disagree </li></ul></ul>
    19. 28. <ul><li>Perceived professionalism, believability, trustworthiness, and future use intentions </li></ul><ul><li>Feminine </li></ul>
    20. 31. Font <ul><li>Verdana (1996) </li></ul><ul><ul><li>Designed for the computer screen </li></ul></ul><ul><li>Georgia (1993) most popular Serif – contrasts well with Verdana </li></ul><ul><ul><li>Developed computer serif fonts </li></ul></ul><ul><ul><li>Georgia vs Times New Roman </li></ul></ul><ul><ul><ul><li>Wider and flatter ends </li></ul></ul></ul><ul><li>Pair contrasting fonts </li></ul><ul><ul><li>Most often, the serif </li></ul></ul><ul><ul><li>is used for body text and the </li></ul></ul><ul><ul><li>sans serif for headers, </li></ul></ul><ul><ul><li>but this can be reversed </li></ul></ul><ul><ul><li>http://www.typetester.org/ </li></ul></ul><ul><ul><ul><li>comparing core web fonts and creating a successful stack </li></ul></ul></ul>
    21. 32. Font tips <ul><li>No more than three typefaces on a single Web page </li></ul><ul><li>Choose different font for design </li></ul><ul><li>Keep body text above 10 pixels </li></ul><ul><li>No centered text </li></ul><ul><li>Choose a font that represents your content ( Typomania ) </li></ul><ul><ul><li>Plump letters – restaurant </li></ul></ul><ul><ul><li>Solid, thick letters – reliable </li></ul></ul><ul><ul><li>Jagged letters – sci-fi, dark </li></ul></ul><ul><li>Change font size to direct reader </li></ul>
    22. 33. Increase Line Spacing
    23. 34. Links <ul><li>Links coordinate with page colors </li></ul><ul><li>Underlined links </li></ul><ul><li>Double-check links </li></ul>
    24. 36. <ul><li>Do not create site for you, it is for your readers </li></ul><ul><li>Communicate </li></ul><ul><li>Less is more </li></ul><ul><li>Treat text as user interface </li></ul>
    25. 38. Design your banner <ul><li>http://designm.ag/inspiration/top-sources-logo-design-inspiration/ </li></ul><ul><li>Google “color” picker </li></ul>
    26. 39. Design your personal page <ul><li>Home </li></ul><ul><li>Contact </li></ul><ul><li>About </li></ul><ul><li>Navigation </li></ul><ul><li>Colors </li></ul><ul><li>Logo name </li></ul><ul><li>Video </li></ul><ul><li>Updated resume </li></ul><ul><li>Collect articles and scan them </li></ul><ul><li>Professional email </li></ul><ul><li>Write your bio </li></ul>
    27. 40. Page-level design
    28. 41. Tree Diagram Site-level Design
    29. 42. Future Agenda <ul><li>Thurs - Photoshop and Practice banner </li></ul><ul><li>Tues - Banner in class </li></ul><ul><li>Thurs – Site credibility and Designing group projects </li></ul><ul><li>Tues (April 2) – HTML and Banner is due </li></ul><ul><li>Thurs – using Dreamweaver </li></ul>