Design Basics

1
(No Transcript)
2
(No Transcript)
3
(No Transcript)
4
(No Transcript)
5
(No Transcript)
6
Design Basics

• Color
• Fonts
• Composition

7
COLOR
8
(No Transcript)
9
(No Transcript)
10
(No Transcript)
11
(No Transcript)
12
(No Transcript)
13
(No Transcript)
14
(No Transcript)
15
http//www.colorschemer.com/
16
More on color

• Use neutral or cool background colors
• Use saturated or warm foreground colors
• Choose 3-4 colors to use in your pallet
• Avoid vibration (two colors of high saturation
  with similar lightness)

17
Oww, my eyes!
18
Can you feel the pain?
19
Ahh, this is much better.
20
(No Transcript)
21
Choosing a font

• The type face you choose will influence the
  feeling of your page.
• Fonts can be conservative, playful, quiet, loud,
  elegant, clean, heavy, light, etc.

22
(No Transcript)
23
Font families

• Fonts are generally available in three different
  formats.
• Serif
• San-serif
• Speciality

24

• More conservative / formal
• Most legible in printed documents
• Least legible in screen based media

25

• Less conservative / formal
• Most legible in screen based media
• Least legible in printed documents

26

• Artsy or playful font
• Sometimes useful for headings
• Not meant to be used as content text
• Use sparingly

27
Font weights

• The weight of the font can influence its
  importance or overall mood.
• The spacing between the letters (kerning) and the
  spacing between the lines (leading) also has an
  impact a fonts weight.

28
(No Transcript)
29
(No Transcript)
30
(No Transcript)
31
(No Transcript)
32
(No Transcript)
33
(No Transcript)
34
(No Transcript)
35
(No Transcript)
36
(No Transcript)
37
(No Transcript)
38
(No Transcript)
39
(No Transcript)
40
(No Transcript)
41
(No Transcript)
42
(No Transcript)
43
(No Transcript)
44
(No Transcript)
45
(No Transcript)
46
Web 2.0 Design Patterns

• Simple layout
• Simple navigation
• Large text
• Larger headings
• Gradients
• Colorful icons
• Reflections / Drop shadow
• White space
• Subtle Animations

47
(No Transcript)
48
Tools

• Adobe Fireworks / Photoshop
• Prototype
• Scriptaculous
• TinyMCE
• SWFUpload
• Google Minify
• Firebug
• Color Schemer Studio