Elements of Good Web Design

1
Elements of Good Web Design
2
Design Principals

• Making a clear web page depends on making the
  most important elements appear important, less
  important stuff less important, related stuff
  look related, and different stuff look
  different.
• http//www.webdesignfromscratch.com/graphic-desig
  n.cfm
  

3
Interface Design

• Interface Design - How the sites logical
  structure appears visually on a page
  
• Navigation
• Create an Identity - clear and appropriate

4
Interface Design

• Navigation
• Homepage link from all pages
• Site-wide navigation
• Secondary navigation or section navigation
• Links back to main sections from all pages
• 3-click rule
• http//www4.uwm.edu/

5
Interface Design

• Navigation
• Guides the user, shapes the user experience,
  influences how they move around the site
  
• Clarity, Consistency, Efficiency
• Navigation must be easily learned
• It should look like navigation
• Predictable Dependable (consistent in
  appearance location)
  
• Efficient keep links manageable
• http//www.nacd.org/
• www.apple.com

6
Design Elements

• Images
• Should support your message and/or add to the
  content of the site
  
• Provide visual documentation
• Can alter the feel and message of a page
• Use metaphors with caution
• Can make the page more readable
• www.vagabonding.com

7
Design Principals

• Visual hierarchy create a visual hierarchy with
  elements on the page
  
• Emphasis important elements (dont make
  everything look equally important)
  
• Organize content logically and predictably
• Use the layout to lead the readers eyes through
  the page
  
• http//computercorps.org/

8
Design Principals

• Balance page should have a sense of balance
• Appropriate proportion of text to graphics
• Complementary colors
• http//www.bmwusa.com/
• http//www.mirrordeluxe.com/index.jsp?tnes_locale
  en_us
  

9
Design Principals

• Color
• Color can carry meaning, express personality,
  differentiate, and highlight content
  
• Color is a good way of identifying, grouping or
  differentiating elements
  
• Intense color attracts the eye too many intense
  areas of color attract the eye in too many
  directions this may be ineffective
  
• www.nike.com
• http//www.iomega.com/global/index.jsp
• Too much color? http//www.casinocity.com/us/nv/re
  no/harrahre/
  
• Resource http//www.coolhomepages.com/cda/color/
  

10
Design Principals

• Contrast
• Contrast makes things stand out from their
  surroundings
  
• Provide variety within a page by utilizing
  contrast in size, shape, and color
  
• If everything on a page is high contrast
  everything will be fighting for attention
  
• http//www.zookoda.com/index.cfm?apghome

11
Interface Design - Tips

• Make the Sites Purpose Clear
• Use visual design to support and enhance your
  message (Dont Decorate, communicate!)
  
• Design for your target audience (in content and
  appearance)
  
• Keep file sizes small
• Design above the fold

12
Interface Design - Tips

• Be aware of the limitations make appropriate
  design decisions
  
• Organize information for the most effective
  communication
  
• Guide your audience through the page
• Create an exciting visual experience
• Make pages appealing, compelling, or
  entertaining
  
• Create sophisticated, professional (and
  optimized) graphics and intuitive navigation
  
• Be familiar with what advanced or enhanced
  technologies could be recommended and
  implemented
  

13
Content, Content, Content

• Your content and the organization of that content
  is what will keep people coming back to your
  site
  
• It may LOOK great but if you have no content,
  you have no audience!
  

14
Design Principals

• Create a visual hierarchy
• Contrast, variety, emphasis

15
Design Principals
16
Design Principals
17
Design Principals

• Many photos
• benefit from
• judicious or
• Creative cropping

18
Design Principals

• Create a focal point
• Emphasize a concept

19
Design Principals
20
Design Principals
21
Design Principals

• Be aware of composition
• Create focus attention

• Kodak Photo Tips
• http//www.kodak.com/eknec/PageQuerier.jhtml?pq-pa
  th39pq-localeen_US
  

22
More Examples

• General Resources
• Design Meltdownhttp//www.designmeltdown.com/defa
  ult.aspx
  
• The Webby Awardshttp//www.webbyawards.com/webbys
  /current.php?season10
  
• Sites I like
• http//www.jimesch.org/ (navigation, hierarchy,
  colors, balance)
  
• http//www.lonelyplanet.com
• NEWS SITES Yuck!
• http//www.jsonline.com
• http//news.bbc.co.uk/