Layout design is a foundational part of designing and developing websites. It is typically a result of the wireframing process, in which designers conceptualize behaviors and user flows, but often goes into varying levels of refinement throughout visual design phases, e.g. being applied to an updated grid system and receiving stylistic treatment to aid with emphasis. It may seem like just one of the many mundane steps in creating a website or app, but do layout designs hold any merit in their own right, and if so, how can its effects be quantified or evaluated?
Web design consists almost solely of a collection of archetypes based on the principle that functionality and layout are mutually dependent. This project presents a set of case studies as well as initial explorations into other groupings of sites to prove that any given website can be categorized by layout alone and its functionality and purpose will naturally suit those of others in its grouping.
The most confirming piece of evidence supporting this is the reverse application of the sorting technique. If you group websites together by function alone (i.e. social media, news media, forum, etc), you’ll notice the groupings form in the same way as if you categorized based on layout alone. My reason for not simply sorting by function, however, is that implementation and user flows are much more flexible than layout design, and tend to fluctuate significantly between even these similar websites. Staying within the base-level of layout patterns, I’ve been able to provide a consistent and accurate taxonomy of web design.
Most websites can be grouped into the following categories:
Layout Pattern |
Use Cases |
Examples |
|---|---|---|
 Bulletin |
Non-chronological mulitmedia content | News (legacy): AOL, Yahoo |
 Feed |
Chronological multimedia content | Social Media: Facebook, Twitter, Tumblr |
 Frame |
Interactive applications and complex interfaces | Email: Gmail, Outlook Apps: Wordpress (back-end), Expression Engine (back-end) |
 Stadium |
Independent content | Streaming Video: Youtube, Vimeo, Twitch Photography: Flickr |
 Thread |
Highly collaborative and simultaneously active chronological content | Forums: Reddit |
 Grid |
Content composed of a multitude of categories | News (modern): MSN |
These archetypes of web design can be extended by the components of each. Above, these components are shown in categories described by their color: Primary Navigation, Secondary Navigation / Toolbars, Primary Content and Secondary Content. As such:
- Bulletin
- Combination navigation-header
- Single column content
- Usually no sidebars (functionally limited)
- Feed
- Navigation bar
- Navigation sidebar (usually on the left)
- Endless feed
- External sidebar
- Frame
- Highly hierarchical, embedded panes of content
- Minimal site-level features
- Toolbars
- Stadium
- Navigation bar
- Large, central content
- Compact sidebar navigation
- External sidebar
- Simple footer
- Thread
- Header bar
- Navigation bar
- Highly paginated content
- Grid
- Navigation bar
- Header bar
- Content sidebars
- Gridded content
- Multi-column footer
This taxonomy provides a method of categorization for future layout patterns and a simple assessment of their most likely function, which is a positive indicator of their best suited purpose. For example, if we collect a group of sites with similar components and apply one of the groupings defined above, we can see that blogs are best suited to the Feed layout pattern and more typical news sites follow the Bulletin pattern. Most relevant to my case studies, news media seem to be best fit by the Grid pattern.
The uniformity of layout patterns, in essence, is also an indication of homogeneity across web design. However, it is just as easily said that this trait is simply a necessity in the unique and highly competitive environment of the web. The focus of this project was neither to prove nor disprove such a moot point though, so this overview and the case studies largely ignore this avenue of thought.
On Continuation and Usage
I believe my definitions of layout patterns can be further abstracted into a more flexible and less content-based system of components. This project, seen through the lens of the web, should be a stepping stone to a more genuine, unbiased view of all digital design. Hopefully layout patterns can be utilized in design practice to provide more promising methods of experimentation and to help beginners understand just how multifaceted digital design can be.