Saturday, January 17, 2009

Layout

1. Good use of white space


Good link for more information on "white space"

2. Poor use of white space

Great before-and-after web page design link

3. Portrait orientation


4. Landscape orientation



5. Single column grid


6. Double or triple column grid

I wondered if this image (below) could be considered both
a single-column and a triple column grid. The reason is
that the pictures are in three columns, but the overall effect
is oneness (not to mention the text is all in one column).


More info about grids

7. Mixed column grid



8. Heading flush with the text


9. Marginal heading
The heading (title) of this site is over the margin
(though not technically part of the margin itself).


10. Numbers or letters used for a list


11. Bullet, arrow, or other highlighting cue


12. Drop cap (initial character takes up more than one line)


13. Good ordering of information (showing relationship)



14. Poor ordering of information (no relationship or emphasis)


15. Citation style (i.e., MLA) or other visual convention

Footnotes with citation information:

16. Title and section head

17. Tabs or dividers


18. Headers or footers


19. Background/watermark
Background

Background

20. Frame using solid or dotted lines

Attractive web design layouts:

Chocolate website design

Typography

1. Effective choice of typography



2. Ineffective choice of typography



3. Serif typeface


4. Sans serif typeface

5. Script typeface

6. Novelty/iconic typeface


7. 12-14 pt. size typeface used for the body of a text


8. 14+ pt. size typeface used for headings or display


9. Italic type

10. Boldface type



11. All caps (All characters are equal in size)


12. Small caps (Initial character is larger than the others)


13. Outline or shadow typeface


14. Reverse type (white or colored text on black)

15. Colored type


16. Kerning of capital letter

17. Appropriate line spacing (leading)


18. Inappropriate line spacing (leading)
19. Left justifications with right justified margin (full justification)


20. Left justification with ragged right margin

21. Center justification


22. Right justification


23. Bad spacing between words ("rivers" or spaces between words)


24. Subscript, superscript, trademark or other symbol

25. Pull quote