Web Work: Topics in Site Design

1
Web Work Topics in Site Design

• Continued

2
Process for Building a Website
Strategy Formulation
User Experience Definition
Architecture Design Process
Implementation
Test and Fix
Launch
3
Implementation

• Balancing form and function page layout
• Basic Platform Features
• Go small
• Use relative sizing (e.g., for screen and font
  sizes)
• Keep important stuff above the fold
• Keep it neat (use tables to align content)
• Leveraging Links
• Follow conventions (blue, underline)
• Guide expectations of destination (wait time,
  registration required, etc.)

4
Site Design and Implementation can be a Barrier
to Entry

• Dont put up unnecessary road blocks
• Jelly Belly and Wharton do this

5
Do not put up road blocks
6
(No Transcript)
7
(No Transcript)
8
Site Design and Implementation can be a Barrier
to Entry

• Keep it simple
• Guide attention (Fore, middle, and backgrounds)
• Be consistent
• More is not always better especially on the
  home page
• Reduce clutter

9
Reduce Clutter where possible
10
Site Design and Implementation can be a Barrier
to Entry

• Keep it simple
• Guide attention (Fore, middle, and backgrounds)
• Be consistent
• More is not always better especially on the
  home page
• Reduce clutter
• southwest.com makes liberal use of white space

11
(No Transcript)
12
(No Transcript)
13
Design as a Barrier to Entry

• Put the user in context
• Convey to your user I know who you are and I
  know what you want to do here.
• Create gateways for each market segment.
• Dell and Patagonia

14
(No Transcript)
15
(No Transcript)
16
Graphic Design and Typography

• Five decisions
• Size
• Absolute, in points, and relative
• Dont waste space with big font sizes
• Font
• Most popular Arial and Times New Roman
• Across platform Verdana and Georgia
• Style
• Case
• Color

17
Whats a serif?

• The serifs make it easier to read these words.

• These words are supposed to be harder to read.
• Serif vs. Sans Serif

18
Type Groups

• Serif

• Sans Serif

19
Graphic Design and Typography

• Five decisions
• Size
• Absolute, in points, and relative
• Dont waste space with big font sizes
• Font
• Most popular Arial and Times New Roman
• Across platform Verdana and Georgia
• Style
• Italics (grainy), underline (misleading),
  boldface (hard to read)
• Case
• Dont use ALL CAPITALS
• Color (Use of Affective Responses)
• pick carefully!

20
Quick Review of Affective Responses

• -Emotions are HIGHLY influenced by colors.
• -Emotions are used in Advertising to create an
  environment!!!
• Three types of affective responses

• Emotions

21
Affective Responses

• Kansai engineering A philosophy that translates
  customers emotions into design elements.
• Mazda Miata designers discovered that making the
  stick shift (shown on the right) exactly 9.5 cm
  long conveys the optimal feeling of sportiness,
  excitement, and control.

22
Emotional Appeals

• The Partnership for a Drug-Free America provokes
  the negative emotion of anxiety by pointing out
  the consequences of drug addiction for those who
  are tempted to start.

23
Affective Responses

• Types or levels of affective responses

• Emotions

• Specific feelings

24
Feelings

• Sexually suggestive scenes can generate feelings
  that affect brand attitudes.
• How does this scene affect your feelings toward
  the brand?

25
Feelings

• Ad employing a sexual feelings appeal.

26
Affective Responses

• Types or levels of affective responses

• Emotions

• Specific feelings

• Moods

27
Humor as a Mood Elevator

• This ad relies on humor to communicate the
  message that skiers and snowboarders should wear
  helmets.

28
Mood Elevator

• This ad for a magazine uses a mood enhancing
  headline to grab attention and create interest.

29
Colors evoke Feelings

• Use of Colors
• Darker
• Brighter

30
Color Influences Affect

• As this Dutch detergent ad demonstrates (Flowery
  orange fades without Dreft), vivid colors grab
  attention and are often an attractive product
  feature.

31
Color Influences Affect

• Use of Browns and Ambers

32
Color Influences Affect

• Use of Blues and Reds

33
Emotion in the Aftermath of 9/11

• Following 9/11, ads addressed peoples fears in
  various ways.
• This ad was created as part of the Advertising
  Community Together initiative.

34
Color Influences Affect

• Use of Blacks and Grays

35
Emotional Appeals

• Life insurance companies often use a fear appeal
  to motivate consumers to buy policies.

36
Purple Ketchup?

• First Heinz gave us Blastin Green ketchup in a
  squeeze bottle. Now they have introduced Funky
  Purple ketchup.
• What is Heinz trying to portray?

37
Affective Responses

• Ok, so how do we use affective responses to build
  our web site?
• They create the environment of a web
  site!
• Emotion through Colors
• Feelings in the Tone
• Moods created

38
Graphic Images

• Issue of image optimization
• Trading off appearance and speed
• Dimensions (in pixels)
• Size (in KB)
• Useful heuristics
• Total image and text size between 30-65 KB
• No single thing 70 KB

39
Putting the Graphic in Graphic Design

• Whats a pixel?
• A spot of light in a grid
• 50-100 pixels per inch (ppi)
• Each can be a different color
• How does a pixel get colored?
• Three beams of light (RGB)
• Each with 256 levels, for 16,000,000 colors
• Only 216 are platform independent (Web-safe
  colors)

40
Types of Images

• Bitmap
• E.g., GIF, JPEG, BMP
• Grids of pixels with associated colors
• Dont scale well get raggedy
• Used for photos and complex graphics
• Vector
• Based on math instructions
• Used only for line drawings and shapes
• (e.g., Flash animations)

41
Size and Resolution
Bitmap 973 KB
GIF 30.4 KB
JPEG 51.3 KB
42
Developing a Creative Brief
Once a site is developed, then ideas are
presented

• Description (of company and products)
• URL
• Key stakeholders (who are they?)
• Site objectives
• Site positioning (vis-à-vis competition)
• Site content (outline of text, graphics, audio,
  etc.)
• Site functionality (capabilities)
• Site organization (e.g., site map, menu bars)
• Design requirements (logos, graphics, etc.)
• Design features (e.g., layout, font, graphics)

43
Process for Building a Website
Strategy Formulation
User Experience Definition
Architecture Design Process
Implementation
Test and Fix
Launch
44
Process for Building a Website
Strategy Formulation
User Experience Definition
Architecture Design Process
Implementation
Test and Fix
Launch
45
Web Site Mistakes

• What makes a site suck?
• Web sites that suck
• Amateur Web Sites Top 10 signs
• Amateur Web Sites

46
In Summary Some Common Design Mistakes

• Overuse of Frame Technology
• Too much Moving Text, Display, and Animation
• Detailed Backgrounds
• Lack of contrast in colors too many different
  text colors
• Lost Pages (a.k.a. Linkrot) poor navigation
  (treat every page like a home page)
• Long Scrolling Pages
• Funky fonts
• Pages that dont adapt to alternative browsers
  and resolution/pixels per page without too much
  clutter.

• Use of the Latest Bells and Whistles
• Long Downloads 8 second rule!!! Dont assume
  that everyone has broadband.

47
Generate Interest

• Web Site Promotion
• How to Make Good-Looking Web Sites That Attract
  Visitors

48
Generate Interest

• Web Promotion
• E-mail Invite friends and other people to your
  site through email
• Free Products Pass on free stuff like
  screensavers and wallpaper things people pass on
  to their friends
• Online community Add forums, chat and blogs to
  add value
• Postcards Offer low cost services. (Blue
  Mountain Art)
• Newsletters Current events about products and
  services
• News and Articles Always have new and
  interesting content
• Link Away Make it easy for others to link to
  you. Offer exchanges, use affiliate sites, offer
  awards for posting your site.
• Recommendations Viral marketing by adding a
  recommend-this-site button on your site.
• Several companies are beginning to do this
  (www.recommend-it.com)