Transcript My 2004 Power Point Presentation

Web Design:
Common Design Flaws &
Basic Page Structures:
How to succeed where many fail.
Matthew Carroll
The Basics of Web Design
The Internet is all about Information, and the World Wide
Web is a means of expressing that information.
• Content is Key.
• People need to be able to find information; Its easy for
the surfer to look elsewhere.
• Appearance establishes/ destroys credibility.
• Real estate is limited; if you use it, make it count!
• Design for the lowest common denominator.
More Good Design Tips
• Pay attention to the design basics:
Color, Font, & White Space
• Simplicity should be the goal of Web design.
• Design should facilitate the page’s content, not confuse
the viewer.
• Writing on the Web should be short and concise.
So How Should You Design?
• Start with the content!
• Who’s looking? Why? Design for your audience.
• Think for the Web - Hyper Text, Links & “Mystery
Meat” Navigation.
• K.I.S.S.
Sites in Action
(For Better or Worse)
Dangerous!
Personal Homepages Gone Wrong Sassy Kisses “The Poet” • Jim “The Designer” • AzN “Don’t do Drugs…” Webteks…
Faulted…
Professional Sites that lack critical elements Microsoft (Cohesion) • Yahoo (Link Overkill) • TKO Gear (Link weakness)
Clay Planet Designs (Sound & Space) • Sapient (Navigation) • Alexis (pop-up)
Better…
Professional Sites that work on some levels but fail on others Apple (Nav & Color Use) • Google (KISS) • Adobe (Nav & Consistency)
Cabedge (Good use of Flash) • Derrsign (Space) • SparkPlug (Kiss)
Wow!
Professional Sites that work C2SG (100% Screen utilization, simple, consistent nav, good layout & color)
Accelrys (100% Screen utilization, simple, consistent nav, good layout & color)
Jessett (Talks about Web design, and her site looks good & works well too!)
Last Semester:
J50 Sites to See
• http://www.unc.edu/~jhickman/
• http://www.unc.edu/~linm/
• http://www.unc.edu/~clord/
Getting Started
Sites to Look At:
• Adam Fuller’s Web Design 101 for J50
http://www.ibiblio.org/team/howto/web.design/
• UNC-CH Webstyle Guidelines
http://help.unc.edu/?id=642
• Becky Morphis’s Tips and Tricks for J50
http://www.unc.edu/courses/jomc050/design/design.htm
• My website on design and usability…
http://www.ibiblio.org/mcarroll/gschool/jomc50/
Some Web Resources
Sites to Look At:
• Cool Homepages
• Webpages that Suck
• Boy & His Computer - bad Websites
• BunnyFoot
• Bud Ugly Designs (spoof)
Some Web Resources
Books to Look Into:
• Homepage Usability: 50 Websites Deconstructed
http://www.useit.com/homepageusability/
• Designing Web Usability: The Practice of Simplicity
http://www.useit.com/jakob/webusability/
• Coordinating User Interfaces for Consistency
http://www.useit.com/jakob/constbook.html