Web Design

1
Web Design

• With a focus on screen design and CRAP
• J. Reedcis2.cuyamaca.net/jreed

2
The Big Picture

• 3 components of Web Design
• information design
• What content will the site provide? (list of
  topics)
• How will the content be structured or organized? 
  (outline or flow chart)
• navigation design
• How will the users interact with the
  information?  (flow chart)
• What buttons and hyperlinks will be used, and
  where will they be?
• screen design
• How will each page look?

3
Elements of screen design

• Typography
• Color
• Design of graphic elements
• Layout

4
Screen Design CRAP
5
CARP (CRAP?) Principles

• Contrast  making elements different enough to be
  interesting
• Alignment creating strong lines within a page to
  make it more organized and visually appealing
• Repetition making elements and page layout
  similar enough to unify the site
• Proximity  grouping elements that belong together

6
Alignment

• Key idea Nothing should be placed on the page
  arbitrarily. Every item should have a visual
  connection with something else on the page.
• Strong alignment helps guide the user's eye,
  making the page easier to browse and drawing the
  eye to the most important parts of the page. 
• According to Williams
• center alignment tends to look formal and can
  sometimes look dull or "mushy"
• strong left or strong right alignment looks more
  professional and clean

7
Alignment example
8
Alignment example
9
Mushy Alignment
10
Contrast
11
Contrast

• Contrast makes a page
• more interesting and readable
• Key idea
• If two items are not exactly the same, make them
  different, really different.
• Shape, font face, size, weight, texture, line,
  spacing, color, etc.

12
Contrast example
13
Contrast Text

• Text and background color must have high contrast
  for text to be readable
• Use an interesting font face for title image
• Use simple sans-serif font face for body text
• Use a very simple sans-serif font face for
  buttons (usually small, so simple readable)
• Use contrast to help headings stand out (font
  face, color, border, images)
• This online tool determines whether your colors
  have enough contrast and shows how your colors
  will look to color blind http//gmazzocato.alter
  vista.org/colorwheel/wheel.php
• The Firefox Colorzilla add on lets you pick any
  color on a web page and get its hexidecimal color
  code (you can plug that in to the above tool)

14
Contrast Example
15
Contrast example
Less effective
More effective
16
Contrast example
? LESS effective
MORE effective ?
17
Proximity

• Key idea Group related items together.
• Proximity helps the user identify which items go
  together
• close proximity implies a relationship
• Use placement, size, and color to group items
  that go together
• dont be afraid of empty space!

18
Proximity example
19
How could proximity help this design?
20
How could proximity help this design?
21
Proximity which works better?
22
Proximity which works better?
23
Repetition

• Key idea REPEAT some aspect of the design
  throughout the entire piece.
• Repetition of visual elements throughout the
  design unifies and strengthens it by tying
  together otherwise separate parts.
• If a web site looks professional and is easy to
  navigate, it probably demonstrates repetition of
• colors
• fonts
• graphic elements
• navigation
• page layout

24
Repetition example
25
CARP Makeover
26
CARP Makeover add Proximity
27
CARP Makeoveradd Alignment
28
CARP Makeoveradd Repetition Contrast
29
Video examples

• C.R.A.P.- Basic Layout and Design Principles for
  Webpages (4 minute video demonstration)

30
Layout Rule of Thirds

• Four layouts in grids that follow the rule of
  thirds

Try dividing the page into thirds for a more
interesting layout.
31
Layout page dimensions

• Dont make user scroll to the right
• Images divs should be less than 960 pixels wide
• Dont make the user scroll down except for
  details
• Logo, title, navigation should be seen without
  scrolling
• Keep text lines a readable width
• Too wide slower reading

32
Color

• Key idea Coordinate colors and keep it simple
• Choose 2-3 harmonious colors and a few highlight
  colors
• Use bright colors sparingly and purposefully to
  draw attention

33
Choosing colors

• Choose harmonious color scheme from color wheel.
• colorschemedesigner.com/ shows harmonies and also
  shows how your colors appear to color blind users
• Find an existing color scheme you like.
• Browse www.colorcombos.com/
• Start with an image(usually a photograph) and
  pick colors from within to generate a color
  scheme.

34
References

• The Non-Designers Design Book by Robin Williams
• Principles of Beautiful Web Design, a Sitepoint
  article by Jason Beaird
• www.principlesofbeautifulwebdesign.com/
• Designing with CRAP by Christian Montoya
• Color Schemes - Mezzoblue blog
• Five More Principles Of Effective Web Design -
  from Smashing Magazine
• 4 Principles of Good Design for Websites by
  Andrew Houle
• The CRAP Principles of Design by John Monte