Web Design: The Good, The Bad, and The Truly Horrible - How to succeed where many fail. Matthew...

Web Design:Web Design:The Good, The Bad,The Good, The Bad,

and The Truly Horrible -and The Truly Horrible -

How to succeed where many How to succeed where many fail.fail.

Matthew Carroll

The Basics of Web DesignThe 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 TipsMore Good Design Tips

• 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.

• Pay attention to the design basics: Color, Font, & White Space

So How Should You Design?So How Should You Design?

• Start with the content!

• Think for the Web.

• K.I.S.S.

• Who’s looking? Why? Design for them.

Sites in ActionSites in Action(For Better or Worse)(For Better or Worse)

Poor

Professional Sites that lack critical elements -

MicrosoftYahoo

VisiveExplosionTKO Gear

Clay Planet Designs

Better

Professional Sites that work -

AppleGoogle

AdobeSapientNet Effects FitchPergoDerrsign

Dangerous

Personal Homepages: Gone Wrong -

http://www.geocities.com/sassy_angel_kisses/index.html

http://www.jimjacobson.com/

http://www.homestead.com/20SuRgE02/1one.html

http://www.geocities.com/cutie_azn_timothy/Da_AzN_RaVeR.html

Last Semester:Last Semester: J50 Sites to See J50 Sites to See

• http://www.unc.edu/~jhickman/

• http://www.unc.edu/~linm/

• http://www.unc.edu/~clord/

Getting StartedGetting Started

Sites to Look At:Sites to Look At:

• Adam Fuller’s Web Design 101 for J50http://www.ibiblio.org/team/howto/web.design/

• UNC-CH Webstyle Guidelineshttp://help.unc.edu/?id=642

• Becky Morphis’s Tips and Tricks for J50http://www.unc.edu/courses/jomc050/design/design.htm

• Coming Soon! My website on design and usability…http://www.ibiblio.org/mcarroll/gschool/jomc50/

Some Web ResourcesSome Web Resources

Sites to Look At:Sites to Look At:

• Cool Homepageshttp://www.coolhomepages.com/

• Webpages That Suckhttp://www.webpagesthatsuck.com/

• Really Bad Websiteshttp://www.reallybadwebsites.com/archive.htm

• BunnyFoot Design http://www.bunnyfoot.com/freestuff/articles/general/branding.html

Some Web ResourcesSome Web Resources

Books to Look Into:Books to Look Into:

• Homepage Usability: 50 Websites Deconstructedhttp://www.useit.com/homepageusability/

• Designing Web Usability: The Practice of Simplicityhttp://www.useit.com/jakob/webusability/

• Coordinating User Interfaces for Consistencyhttp://www.useit.com/jakob/constbook.html