Web Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Web Design

on

  • 1,242 views

 

Statistics

Views

Total Views
1,242
Views on SlideShare
1,237
Embed Views
5

Actions

Likes
0
Downloads
46
Comments
0

2 Embeds 5

http://www.linkedin.com 4
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web Design Presentation Transcript

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