1. 1

2. 2
HOW DO I
START?

3.  Know the purpose of your site
 Business?
 Organizational?
 Hobbyist?
 Personal?
3

4.  Set up the website anatomy
 Containing Block
 Logo
 Navigation
 Content
 White Space
 Footer
4

5. 5

6.  Layout using Rule of Thirds
 Application of the “divine proportion”
▪ Generally makes the site aesthetically appealing
6

7. 7

8. 8

9. 9

10. 10

11. 11

12.  Common layout examples
 Left-column navigation
▪ http://www.thinkgeek.com/index.shtml
 Right-column navigation
▪ http://www.audi.com
 Three-column navigation
▪ http://store.apple.com/
12

13. 13
Done with the basic stuff.
WHAT’S NEXT?

14.  Colors
 One of the designer's
best tools
 Look and Feel
 Branding
 Highlight or group content
14

15.  Colors
15

16.  Colors
 Red to yellow, including orange,
pink, brown, and burgundy
 Associated with the sun and fire
 Represents both heat and motion
 When placed near a cool color, a
warm color will tend to pop out,
dominate
16

17. 
 Green to blue, can include violet
▪ Cooler violet is closer to blue
 Cool colors can calm people down and reduce
tension
 In a design, cool colors tend to recede
▪ Great for backgrounds and larger elements on a page,
▪ Wont overpower your content
17

18.  Monochromatic Scheme
 One color, different hues
18

19. 19
Monochromatic Color Scheme - http://haveamint.com/

20.  Analogous Colors
 Adjacent colors in the color wheel
20

21. 21
Analogous Color Scheme - http://regines.net.au/

22.  Complementary Colors
 Colors located opposite to each other in the color
wheel
22

23. 23
Complementary Color Scheme http://www.ufl.edu/

24.  Complementary Colors
 Watch out for simultaneous contrast
24

25.  Colors in
Nature
25

26.  Colors in
Nature
26

27.  Color Scheme 2
 http://wellstyled.com/tools/colorscheme2/index-en.html

28.  Color Blender
http://www.colorblender.com/

29.  Contrast makes things stand out
 Things with higher contrast will be more
noticeable.

32.  Creating a document for the web or print,
information should be organized and
readable
 If you are using background graphics on a
web page, keep text and other information
readable

33.  Don't use too many font sizesDon't use too many font sizes
 2-3 Fonts in all
▪ Headers / headlines
▪ Body Text
▪ Highlights

34.  Serif
 This is Times New Roman, one of the most
common serif typefaces
 In print, serif type is easier to read
 Sans serif
 This is Arial, a sans serif typeface
 On a computer screen, sans serif type is easier to
read

37.  Keep lines short
 Paragraphs: 4-8 lines
 Use wider margins to increase white space

38.  Too many colors
 TooToo Many Fonts
and StylesStyles
 ALL CAPITAL LETTERS ARE DIFFICULT TO
READ
 Upper and lower case letters are easier

39.  Do you prefer to read Verdana online?
 Do you prefer to read Arial online?
 Do you prefer to read Georgia online?
 Do you prefer to read Times online?

42.  Use text when possible
 Searched and indexed by web crawlers
 Can be selected and copy-pasted
 Decreases page load time
Effective text 351 B (Text)351 B (Text)
1290 B (GIF)1290 B (GIF)

43.  Users often read Web pages in an F-shaped
pattern: two horizontal stripes followed by a
vertical stripe.
 F for fast.

45.  Users won't read your text thoroughly in a word-by-
word manner.
 Scanning
 Exhaustive reading is rare
 The first two paragraphs must state the most important
information.
 Start subheads, paragraphs, and bullet points with
information
 Carrying words that users will notice when scanning

46. 46
WRAP UP THE
STUFF.
THANK YOU !!!