1 / 32

Layout

Form is a cage in which to trap meaning. Layout. t. What meaning is being trapped in this cage ? Just the content ... ? . t. Start with a grid. Nathan Smith: 960.gs Big ol' download button 12/16/24-column grid templates for PDF, PhotoShop, Fireworks, Flash, Illustrator, etc.

jenaya
Download Presentation

Layout

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. t

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

  4. Start with a grid. Nathan Smith: 960.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.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.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! Logo Content

  7. Start with a grid. Nathan Smith: 960.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! Logo Primary Navigation Content

  8. Start with a grid. Nathan Smith: 960.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! Logo Primary Navigation Secondary Navigation Content

  9. Start with a grid. Nathan Smith: 960.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! Logo Primary Navigation Secondary Navigation Content Etcetera

  10. 1-Column Layouts

  11. 1-Column Website with Extended Horizontal

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

  13. 2-Column Layouts

  14. 2-Column Layouts 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.

  15. 3-Column Layouts

  16. 4-Column Layouts

  17. 5-Column Layout (?)

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

  19. Groovey stuff to look at: ORIGINAL AND INNOVATIVE LAYOUTSwebby award-winning Layouts

  20. Redesign the layout of the home page of: 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 Draw a wireframe sketch of your redesign; label areas. Present your results to the class. ICE: 5-Minute layout redesign

  21. Movie time! The Standard Website Layout (6)

More Related