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
2. 3D screenshots
3. Advanced Grid
4. Featured Graphics
5. Five Boxes
6. Fixed sidebar
7. Headline and Gallery
8. Featured Photo
9. Power Grid
10. Full Screen Photo
Power grid + fixed sidebar www.flyporter.com/flight/tickets?culture=en-CA
Featured graphic + three box www.shutterstock.com
Three box + fixed side bar www.healthysprouts.ca
Gallery + fixed side bar: www.fineprints.ca