Basic Web Design

1
Basic Web Design

• Follow these points for success

2
First, do a little research

• Look at lots of sites
• Know what you like
• Identify what is irritating
• Try some stuff, see if it works
• Look at cool sites in FrontPage SMC Guitar Club

3
Make sure your pages are readable

• Focus http//www.patagonia.com/
• Heading/Title
• Bigger, different font
• Title must have meaning
• Audience expectation
• Limit fonts to one or two per page
• Adopt a Husky

4
Do you have the right tone?

• Burton Snowboards
• Overall tone
• Will guide content, design and graphics
• Must fit the product or message
• Go with audience expectations
• Which one would you give money to?
• Ethiopian Famine Relief 1
• Ethiopian Famine Relief 2

5
Do your colors and your background choice make
sense?

• Must fit tone
• White is best
• No pictures or busyness
• Use color in nav, headings or images
• Colors evoke feelings
• Another cat site
• Take a look at Bruce Lee

6
Navigation
Top
Right
Left
Bottom
7
Tell them where they can go Help them get
there Let them know they are there Help them get
back
Dont make me think!
8
Is your Navigation logical?

• Tell them where they can go
• Help them get there
• Let them know they are there
• Help them get back

9
Some more tips on Navigation (too important for
only one slide)

• Good navigation is critical
• Top, left, right, bottom Consistency
• No back button
• Text preferred to buttons
• Just because you can link, should you?

• Link to home page Bad chocolate site Seroogys
• Mystery Meat

10
Text is King

• Users are skimmers!
• Words pointed, concise, meaningful and
  well-written
• Bullets
• ½ words, white space
• Audience is focused-reach your conclusion first
• Monitor size

11
Images

• Jpeg, gifs
• Fit the tone
• Minimize use
• Load time lt15 sec
• Resample
• Thumbnails
• Alt on every picture
• Ben and Jerrys

12
First Impression

• Home Page Lake Champlain Chocolates
• Readers must know its the home page
• Use creativity here
• No scrolling
• Why reader should stay
• Very concise
• Load quickly

13
Dont be annoying

• No ads, visible web counters, under
  construction
• Grammar and spelling Hottub
• Contact email or phone number
• No goofy moving gifs
• These cats work

14
Other sites to Endure

• Is Flash a bad bad thing?
• Why??? Use us for your web
• Good sites http//turkeyawards.com/
• http//www.webbyawards.com/main/
• www.coolhomepages.com
• The "baddest" of the bad   Scottish
  http//www.geocities.com/mike035/
• http//www.webpagesthatsuck.com
• And we end with the all time favorite

15
(No Transcript)
16
Professional Pages

• http//www.spacap.com/products.htm
• Grammar and spelling
• On every page
• Organizations name
• Purpose on every page
• Contact email or phone number
• No ads, visible web counters, under
  construction

17
Readability - Consistency

• http//www.smcvt.edu/Admin2.asp?SiteAreaID91Leve
  l1
• Colors, backgrounds, tone, font, navigation,
  heading styles
• Viewer knows where s/he is
• Home page can be different