Web Design RulesWeb Design Rules

#1 Easy to Read#1 Easy to Read

Includes:Includes: NavigationNavigation ColorColor TextText GraphicsGraphics BackgroundsBackgrounds BordersBorders HyperlinksHyperlinks

Make sure graphics are consistent in Make sure graphics are consistent in look and feellook and feel

Know Your Target AudienceKnow Your Target Audience

Target audience: any potential Target audience: any potential interested visitor of the web site. interested visitor of the web site.

Question to ask yourself:Question to ask yourself: ““If a visitor of my website carries away If a visitor of my website carries away

one main idea, what do I want it to be?”one main idea, what do I want it to be?” Factors:Factors:

AgeAge GenderGender Location Location

Navigation User FriendlyNavigation User Friendly

User should not have to “guess” or User should not have to “guess” or “hunt” for hyperlinks or information“hunt” for hyperlinks or information

Make sure to “spoon feed” your Make sure to “spoon feed” your audienceaudience

Anticipate the users know nothing Anticipate the users know nothing about the site’s subjectabout the site’s subject

Key rule: web site users should find Key rule: web site users should find what they are looking for within three what they are looking for within three mouse clicksmouse clicks

Use of White SpaceUse of White Space

White space: the area of the White space: the area of the Web page that does not include Web page that does not include text or graphicstext or graphics

Make sure your Web page is not Make sure your Web page is not cluttered with text and graphicscluttered with text and graphics

Allow users to “breathe” Allow users to “breathe” between elementsbetween elements

Use Fonts that Display Use Fonts that Display CorrectlyCorrectly Visitors of the web site must have Visitors of the web site must have

that typeface installed on their that typeface installed on their computers- if not it will look differentcomputers- if not it will look different

Pre installed fonts:Pre installed fonts: ArialArial CourierCourier GeorgiaGeorgia HelveticaHelvetica Times or Times New RomanTimes or Times New Roman Verdana Verdana

ProofreadProofread

Proofread as you are nearing Proofread as you are nearing the end of your projectthe end of your project

Check for spelling, grammar, Check for spelling, grammar, and designand design

Have one or two people review Have one or two people review your Web siteyour Web site

Revise, Revise, ReviseRevise, Revise, Revise

Make sure to preview your web Make sure to preview your web page frequentlypage frequently

Continually look for Continually look for inconsistencies inconsistencies

Make any necessary additions Make any necessary additions and deletionsand deletions

Use Consistent GraphicsUse Consistent Graphics

Graphic images help illustrate a Graphic images help illustrate a messagemessage

Use the same style throughoutUse the same style throughout Ex: if you are using cartoon-like images, Ex: if you are using cartoon-like images,

they need to be used throughoutthey need to be used throughout Common graphic formats:Common graphic formats:

JPEG: lots of color change and detailJPEG: lots of color change and detail GIF: mainly flat colorsGIF: mainly flat colors

Tip: use ALT tag on images to Tip: use ALT tag on images to display alt textdisplay alt text

Apply the “KIS” RuleApply the “KIS” Rule

KIS- Keep It SimpleKIS- Keep It Simple Ex: changing the defauly text Ex: changing the defauly text

color from black to pinkcolor from black to pink

Web Site ColorsWeb Site Colors

Maximum of two or three colorsMaximum of two or three colors One should be dominate and One should be dominate and

other needs to be accentother needs to be accent Create a color scheme that Create a color scheme that

coordinates your overall coordinates your overall messagemessage Ex: website selling cotton candy?Ex: website selling cotton candy?