Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Design


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Web Design

  1. 1. Visually communicate with your design Serena Carpenter
  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> </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> </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> </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>