Web%20Design:

1
Web Design

• Common Design Flaws Basic Page Structures
• How to succeed where many fail.

Matthew Carroll
2
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.

3
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 pages content, not confuse the viewer.
Writing on the Web should be short and concise.
4
So How Should You Design?
Start with the content! Whos looking? Why?
Design for your audience. Think for the Web -
Hyper Text, Links Mystery Meat Navigation.
K.I.S.S.
5
Sites in Action(For Better or Worse)
Dangerous! Personal Homepages Gone Wrong - Sassy
Kisses The Poet Jim The Designer AzN
Dont 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!)
6
Last Semester J50 Sites to See
http//www.unc.edu/jhickman/
http//www.unc.edu/linm/ http//www.unc.edu/c
lord/
7
Getting Started
Sites to Look At Adam Fullers Web Design 101
for J50 http//www.ibiblio.org/team/howto/web.desi
gn/ UNC-CH Webstyle Guidelines http//help.unc.
edu/?id642 Becky Morphiss 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/
8
Some Web Resources
Sites to Look At Cool Homepages Webpages
that Suck Boy His Computer - bad Websites
BunnyFoot Bud Ugly Designs (spoof)
9
Some Web Resources
Books to Look Into Homepage Usability 50
Websites Deconstructed http//www.useit.com/homepa
geusability/ Designing Web Usability The
Practice of Simplicity http//www.useit.com/jakob/
webusability/ Coordinating User Interfaces for
Consistency http//www.useit.com/jakob/constbook.h
tml