SMAD 307

1
SMAD 307
Multimedia for the Web
Design Principles
2
Course Assumptions

• - Just because its subjective doesnt mean
  there arent some common sense principles that
  make some designs better than others.

- We cannot not communicate. Every choice of
layout, color, font, size, contrast and content
says something or is interpreted by others in a
certain way
- Design and content are related and one affects
the other. Bad design causes negative judgment
of content. Bad content is just stupid.
- Your design and content create an impression.
Your job is impression management.
3
Impression Management

• - Erving Goffmans (1959) work in social
  psychology The Presentation of Self in Everyday
  Life.

- Impression management takes place in order to
facilitate goal achievement.
- "People communicate strategically and must take
into account the varying perspectives and agendas
of audiences."
- We communicate through content AND design.
4
Impression Management

• - If design didnt matter, why were banks built
  to look like this?

• What impression
• would you have of
• this bank?

5
Web Site Impression Management

• - Bright, strong colors and goofy fonts leave
  an appropriate impression for this business.

• What impression does this site create for a
  bank?

6
Web Design Principles

• Backgrounds

• Contrast Black text on a white background is
  most readable - more legible than white on black.
• Example Negative Example

• There is a bias against black backgrounds.
  White backgrounds look more professional.
• Sometimes, black can produce drama/excitement.
• Example

- Avoid patterned, textured or overly colorful
backgrounds. Solid backgrounds work best.
- Contrast Look for a strong contrast between
the background color and the text color.
7
Web Design Principles

• Principles of Color

• Color communicates
• Yellow, red orange are high arousal colors
  and together stimulate appetite.

• Proxemics (Edward T. Hall)
• Anthropologist who worked for US Foreign Service
  Institute (FSI) after WWII to develop courses to
  train overseas workers to deal with the
  challenges of working with other cultures.

- Proxemics Color http//www.pantone.com/products
/products.asp?idArticle112idArea16 http//www.i
nfoplease.com/spot/colors1.html
8
Web Design Principles

• Principles of Color

• Red People will gamble more and make riskier
  bets when seated under a red light as opposed to
  a blue light. (Las Vegas city of red neon)

• Red has been shown to stimulate the senses and
  raise the blood pressure

9
Web Design Principles

• Principles of Color

• Blue has the opposite effect from red and calms
  the mind.

• Peaceful, tranquil blue causes the body to
  produce calming chemicals.

• Fashion consultants recommend wearing blue to
  job interviews because it symbolizes loyalty.

• People are more productive in blue rooms.
  Studies show weightlifters are able to handle
  heavier weights in blue gyms.

10
Web Design Principles

• Principles of Color

• Yellow People paint rooms yellow thinking it
  has a positive effect on mood.

• Yellow is an attention getter and can be
  overpowering if overused.

• While it is considered an optimistic color,
  people lose their tempers more often in yellow
  rooms, and babies will cry more.

11
Web Design Principles

• Color on Web Pages

- For sites that need to attract attention and
convey low prices and bargains, choose brighter
colors such as yellow. More highly saturated
colors are proper as well.
- Beige, blue, burgundy and dark green are good
for businesses that want to give an impression of
high quality, solidity and tradition. Keep main
text content areas on a white or very light
background. Color are generally not highly
saturated
12
Web Design Principles

• Color on Web Pages

- Contrast Black text on a white background is
most readable - more legible than white on black
- There is a bias against black. White
backgrounds look more professional.
- Avoid patterned, textured or overly colorful
backgrounds
- Avoid highly saturated colored text on web
pages. White or other very pale colors work best.
13
Web Design Principles

• Typography - Leading

- The distance from the base of one line of text
to the next.
- General Rule Leading should be 2 points above
the size of the type.
Type Size 30 pts. Leading 32 pts.
Type Size 24 pts. Leading 36 pts.
14
Web Design Principles

• Typography - Leading

- HTML cannot incorporate leading adjustments
- CSS (Cascading Style Sheets) CAN incorporate
leading adjustments.
P line-height 32pt ltP STYLE"line-height
32pt"gt
15
Web Design Principles

• Typography - Paragraphs

Two Approaches to Creating New Paragraphs
Method 1 Indentation Can be done without CSS
(Two Ways)
nbspnbspnbspnbsp ?
?
ltimg src"spacer.gif" width"1" height"1"
hspace"8"gt ?
(Sometimes called the Single Pixel GIF Trick)
16
Web Design Principles

• Typography - Paragraphs

Two Approaches to Creating New Paragraphs
Method 1 Indentation With CSS
ltP STYLE"text-indent 15pt"gt ?
17
Web Design Principles

• Typography - Paragraphs

Two Approaches to Creating New Paragraphs
Method 2 Blank Lines (Two Ways)
1. You can simply use the ltPgt tag
2. ltimg srcspacer.gif" height"1" width "1"
vspace"2"gt
18
Web Design Principles

• Typography Font Faces

- Serif fonts (i.e. Times, Bookman, or Palatino)
are easier to read on paper.
- Sans-serif fonts (i.e. Verdana, Arial,
Helvetica or Geneva) are easier to read on
screen.
19
Web Design Principles

• Typography Font Faces

Print Wisdom For print, use sans serif faces
such as Verdana or Arial in headlines. Use serif
typefaces such as Times New Roman or Georgia for
body text.
Web Wisdom For web, use serif typefaces such as
Times New Roman or Georgia for headlines. Use
sans serif faces such as Verdana or Arial for
body text. (Or, use sans serif faces for BOTH
headlines and body text).
20
Web Design Principles

• Typography Font Size

Two Schools of Thought
1). Print font sizes are fixed. The Web is
supposed to be a universal medium and allow
better access. Users can adapt font sizes to meet
their own needs. (i.e. low-vision users can set
their own type sizes in the browser).
21
Web Design Principles

• Typography Font Size

Two Schools of Thought
2). Allowing font size adjustments can skew page
layout and design.
Font Normal
Font Largest
22
Web Design Principles

• Typography Font Size

- HTML font tags can be adjusted in the browser.
ltfont size"2"gtThis text uses an HTML font tag to
create size 2 type.lt/fontgt
- CSS (Cascading Style Sheets) Font Attributes
can fix type size so that it is not adjustable by
the user.
ltP STYLE"font-size 8ptgtThis text uses CSS to
create 8 point type size.lt/Pgt
23
Web Design Principles

• Typography Emphasis

• Italics Often used when listing book titles,
  periodical titles or foreign words. Use with
  care. Italics are less readable on screens than
  in print.

• Bold Good for giving emphasis. Use for section
  subheads. Avoid using large blocks of bold text
  the emphasis gets lost.

• Underlined A carry over from typewriter days
  where bold and italic were not possible. Also,
  by convention, underlined text denotes a
  hypertext link on the web.

• CAPITAL LETTERS PERHAPS THE LEAST EFFECTIVE WAY
  TO PROVIDE EMPHASIS ON THE WEB. HARD TO READ AS
  EVERY LETTER IS A RECTANGLE WITH NO DISTINCTIVE
  SHAPE.

24
Web Design Principles

• Typography How Much Text?

• On home page, give just first sentence or so
  with a link to read more or full story.
• Example

• On long stories, give readers chunks of
  information over more than one page.
• More on Chunking Information

25
Web Design Principles

• Typography Jaggies/Stairstepping

• Watch out for the jaggies. Text on images
  should be anti-aliased.

http//www.ajha.org

• (Also, avoid large, indiscriminate drop-shadows
  on text).

26
Web Design Principles

• Common Beginner Problems

• Avoid the Beveled-Buttons Syndrome.

• Avoid Flashing Text and Images
• Example

27
Web Design Principles

• Common Beginner Problems

• Avoid highly saturated colors for text.
• Example

• Dont use too many different colors together

Bringing it all Together

• Here are many of the problems illustrated!
• http//www.jmu.edu/media-arts/anderson/smad339/bad
  design

28
Web Design Principles

• Photos People/Faces

• Look for ways to get photos of people on your
  site, especially your home page. It humanizes
  your site. People are always attracted to faces.
  It puts a face on the organization.

29
Web Design Principles

• Photos People/Faces

• Technique Cut out the edges and place them over
  a background of the same color. Works well with
  white.

• It gets integrated on the page better. It
  doesnt look like a rectangular photograph. Text
  can wrap around it.

30
Web Design Principles

• Layout Above the Fold

- Think of a newspaper.
- Most important content is above the fold.
31
Web Design Principles

• Layout Above the Fold

Above the Fold
- Is the important content on this site above
the fold?
- Example You have to scroll vertically to get
to almost all of the content. ?
Theres even more we cannot yet see ---------?
32
Web Design Principles

• Layout Above the Fold

Good examples of sites Above the Fold
33
Web Design Principles

• Layout Above the Fold

Good examples of sites Above the Fold
34
Web Design Principles

• Layout Screen Width

- Dont make people scroll horizontally. Dont
go beyond 770 pixels width (for 800 X 600).
Heres one possible exception to this rule.

• Avoid too much vertical scrolling
• ?

35
Web Design Principles

• Layout Content Location

- Where possible, put some content on the home
page. Dont just make it a place with links.
Updated content is best.
36
Web Design Principles

• Four Major Design Constructs

• Proximity
• Alignment
• Repetition
• Contrast

37
Web Design Principles

• Proximity

• Proximity refers to the distance between
  elements on a Web page and how the elements
  relate to one another. These elements include
  text, navigation, headings, and so on.

• Group related items together. Items that are not
  related should not be near the other elements.

BAD Promixity
BETTER Promixity
38
Web Design Principles

• Alignment

• Nothing should be placed randomly on a page.
  When items are aligned it appears more cohesive
  and there is an invisible line which connects
  them both in the viewers mind and eye.

• Make everything the same alignmentall centered,
  or all left-justified or all right justified (as
  much as possible).

BAD Alignment
BETTER Alignment
39
Web Design Principles

• Alignment

Center alignment makes finding the beginning of a
new line of text much more difficult. Each line
tends to be a different length. As a result it is
much more tiring to read text with center
alignment. The eye is constantly guessing and
searching for the start point. In addition,
center alignment causes odd line lengths. These
odd lengths cause a sort of "choppiness" in how
the text reads. It lacks the smooth flow that
tends to occur with left alignment.
Right alignment seldom serves a useful purpose if
readability is a concern. While it may be used in
an artistic manner, the use of right alignment
for significant amounts of text should be
avoided. Sometimes right alignment is used to
set small portions of text off from the main
body. This can be a satisfactory application of
right alignment.
40
Web Design Principles

• Repetition

• Repeat some aspect of the design in the piece.
  This is also known as consistency.

• Even though consistent, make internal pages
  different in some way from the home page. Users
  should know when they are on the home page.

• Consistency means that even if someone didnt
  see the name of your company on the site, they
  could tell from any page that they are on your
  site.

41
Web Design Principles

• Contrast

• Contrast may be the best way we can appreciate
  something. If you want to appreciate artwork,
  hold up a bad reproduction next to it.

• Contrast can occur with contrasting font sizes,
  font colors, font styles, contrasting levels of
  color saturation etc.

• Contrast provides drama and places emphasis
  where you want it.

42
Bad Design

• Why Are These Bad?

43
Bad Design

• Why Are These Bad?

44
Bad Design

• Why Are These Bad?

45
Good Design

• Why Are These Better?

46
Good Design

• Why Are These Better?

47
Good Design

• Why Is This Site Better?