Web Layout Practices
Users don’t visit website for design, they want content. Design is just an intuitive and a useful manner for presenting the content. Let us explore how to present the web layout in the most powerful format. We will discuss following 12 web layout patterns:
- Split Screen
- Single-page web apps
- Z pattern
- F pattern
- Horizontal symmetry
- Approximate Horizontal Symmetry
- Vertical Symmetry
Site with lot of content wants to display all the primary items with equal hierarchy.
A grid structure makes browsing easier. Cards are mostly always laid out in a grid format as they offer more options for browsing than the simple list views, which makes this style space-effective. Grids can vary depending on the number of columns, spacing and size. For example, few websites may stagger their options to avoid the “straight laced” feel while other websites like YouTube follows strict organization with straight rows and grouped into categories.
- Pay attention to white space as it influences how users browse.
- When designing for different devices, consistency is important. Make sure the layout stays recognizable at different breakpoints.
- Start with a basic 12-column grid.
Displaying the details for each item would clutter the screen but at the same time we should remember that browsing is a large part of site interaction.
Cards permits us to present a heap of content in an organized manner. Cards have been successful and the success is directly related to its usefulness. Cards act as containers for clickable information and the style of card varies from website to website but more often than not, it contains an image and description. It can also have some other functionality like the Like button in Facebook, retweet in twitter etc.
Each card is self-sufficient as they can be re-arranged to fit any screen size. Hence they work well with responsive design.
For sites that are content-heavy, cards offer a lot:
Intuitive: Self descriptive as it doesn’t require instructions.
Shareable: Easy to share a specific content on social media.
Versatile: As it can be used with wide range of site styles.
- Make user interaction more likely by making the entire card clickable and not just certain portions.
- Focus each card around a single central concept.
- While selecting an image, keep smaller screens in mind as you need to crop differently for different devices.
- Cards work best when they are simple so don’t make it too complex. Basic typography and minimal description helps browsing.
3. Magazine Style Layout
A site has a lot of regularly updated content in various categories.
The alternating sizes of columns, cards and headlines breaks up the monotony of the grids, while still showing a variety of content. This layout changes up how content is displayed. The left side of the screen may have a list of texts, and the right side may be dominated by a grid of cards.
- This format emphasizes images. As with BuzzFeed, TIME, and WIRED, there is one dominant feature image that draws attention before users scan the smaller, secondary images.
- With this style, it has a vertical menu or horizontal menu on either side.
4. Split Screen
A site has two main pieces of content that are equally important.
It is a logical way to give two contrasting elements equal consideration. Split screens are perfect when the site offers two drastically different variations. It also gives the opportunity to feature two call-to-action. Most common is having a text on one side and the header image on the other which indicates both sides are two aspects of the same concept.
- Ideal for contrast
- Use a single, unified navigation menu at the top which makes it clear that it applies to both sides.
- Do not apply to content heavy layouts.
5. Container-Free Format
A site wants a minimalist approach when presenting data.
This format takes the minimalism to the next level by stripping away un-necessary visuals. Rather than clear cut divisions, this pattern format relies on visual, grouping to show relationships. Designing without container puts more power to the content itself.
- Color, size, font all communicate meaning instead of dividers so typography is key to designing without containers.
- Make most elements clickable to prevent confusion.
6. Single Page Layouts
Duck Duck Go
Multi-page navigation system is unnecessary.
Modern Web development has paved the way for single-page sites and web apps. Using AJAX, single page site and apps load asynchronously and are able to combine multiple actions into a single page.
- Use sticky navigation in order to reduce disorientation.