You may have come across these designs in your travels on the web, and noticed some common elements amongst website, but did you know these layouts have a name?  Well these layout labels were news to me as my teacher presented 10 categories that website designs could fall into.
Through my exploration of these 10 layouts I found I was viewing websites in a different light, categorizing the designs I was coming across and also noticing the combination designs present.  Personally there are some layouts which I gravitate towards and others I click quickly away from, but overall this exercise brought a new lens through which I browse and design within.  If you are creating your layout without referencing this framework, it is interesting to see how the final piece does resemble one of these styles or a combination of them.
1. Three Boxes
ingdirect
2. 3D screenshots
cirque
3. Advanced Grid
style
4. Featured Graphics
featured graphic
5. Five Boxes
five box
6. Fixed sidebar
fixed
7. Headline and Gallery
headline_gallery
Others:
8. Featured Photo
featured photo
9. Power Grid
star
10. Full Screen Photo
fullscreen
Combinations:
Featured graphic + three box www.shutterstock.com
Three box + fixed side bar www.healthysprouts.ca
Gallery + fixed side bar: www.fineprints.ca
Advertisements