1. LAYOUT Form is a cage in which to trap meaning.

2. tt

3. tt What meaning is being trapped in this cage? Just the content... ?

4. Start with a grid. Nathan Smith: 960.gs960.gs Big ol' download button 12/16/24-column grid templates for PDF, PhotoShop, Fireworks, Flash, Illustrator, etc. 12-column grid 

5. Start with a grid. Nathan Smith: 960.gs960.gs Big ol' download button 12/16/24-column grid templates for PDF, PhotoShop, Fireworks, Flash, Illustrator, etc. 12-column grid  Place the biggest item first... Content

6. Start with a grid. Nathan Smith: 960.gs960.gs Big ol' download button 12/16/24-column grid templates for PDF, PhotoShop, Fireworks, Flash, Illustrator, etc. 12-column grid  Place the biggest item first... and then play! Content Logo

7. Start with a grid. Nathan Smith: 960.gs960.gs Big ol' download button 12/16/24-column grid templates for PDF, PhotoShop, Fireworks, Flash, Illustrator, etc. 12-column grid  Place the biggest item first... and then play! Content Logo Primary Navigation

8. Start with a grid. Nathan Smith: 960.gs960.gs Big ol' download button 12/16/24-column grid templates for PDF, PhotoShop, Fireworks, Flash, Illustrator, etc. 12-column grid  Place the biggest item first... and then play! Content Logo Primary Navigation Secondary Navigation

9. Start with a grid. Nathan Smith: 960.gs960.gs Big ol' download button 12/16/24-column grid templates for PDF, PhotoShop, Fireworks, Flash, Illustrator, etc. 12-column grid  Place the biggest item first... and then play! Content Logo Primary Navigation Secondary Navigation Etcetera

10. 1-Column Layouts

13. 1-Column Website with Extended Horizontal

15. 1(+)-Column 1-Page Website Visionary Vanguard Simon Kern The Dangers of Drug Driving The Space In-Between

16. 2-Column Layouts

17. If you take a look at most two-column website layouts, you’ll notice that the wider column is often lighter in color—a tactic that creates a good contrast for the text and main content. The diminutive navigational column is often darker, has some sort of border, or is made to stand out in another way, in order to create balance within the layout.

20. 3-Column Layouts

24. 4-Column Layouts

27. 5-Column Layout (?)

28. Refined Wireframe Update your wireframe sketch into a refined wireframe to figure out content layout and hierarchical structure given your chosen approach.

30. ORIGINAL AND INNOVATIVE LAYOUTS WEBBY AWARD-WINNING LAYOUTS Groovey stuff to look at:

31. ICE: 5-MINUTE LAYOUT REDESIGN 1.Redesign the layout of the home page of: http://www.siphawaii.com http://www.siphawaii.com Include ALL the functionality on the page: Logo, navigation, content, shopping bar, etc. Use one of these layout types: N-column (where N = 1-4) Extended horizontal One-page site Or something else entirely 2.Draw a wireframe sketch of your redesign; label areas. 3.Present your results to the class.

32. THE STANDARD WEBSITE LAYOUTTHE STANDARD WEBSITE LAYOUT (6) Movie time!