When all of your measurements follow the same rules, you get a more consistent UI.
# Content first
Before considering designing a layout, we first need to understand the page goal. The design should be focused on achieving those goals.
"What's the customer expecting to do on this page?"
"How might we help them with their task?"
# Visual hierarchy
People are more likely to quickly scan a web page than to read everything.
Designing a page for any online application involves communicating your offer to visitors in a clear and direct way.
Part of that communication process is making sure that you influence people to notice what you want them to - using white space to declutter the page and adding a contrasting CTA button are just a few ways to accomplish this.
Ultimately, design is not just about how elements look, but what message they convey to our customers.
# Page scanning
The are many page scanning patterns which users employ on the web, two of the most popular are the Z and F shaped patterns. For text-heavy pages, the F pattern is more widely used, whereas the Z pattern is common for pages which aren’t text-oriented.
The F-pattern dictates that visitors first read the page in a horizontal direction, mostly along the upper part of the content area, then move down the page and read across a second horizontal line. Finally, visitors scan the left side of the content in a vertical movement.
This is what the movement typically looks like:
Fig 1. Showing a low fidelity mock up of a common F-pattern
The user’s eye movement starts in the top left and moves across the page before scanning down the page to search for an element they find engaging.
For elements you want visitors to notice on a text-heavy page (like an image), placing them in the F pattern increases the chance of the elements being seen.
The Z-pattern layout is typically used on pages that are not content heavy. Its design mimics the route the human eye travels when it reads — left to right, zigzagging top to bottom:
Visitors first scan from the top-left to the top-right, forming an imaginary horizontal line.
Next, they scan down and to the left, creating an imaginary diagonal line.
Lastly, they look back across to the right again, which forms a second horizontal line.
Fig 2. Showing a low fidelity mock up of a common Z-pattern
Just like F-patterns, the Z-pattern layout does not have to be an exact Z-pattern. The horizontal lines do not have to be exactly horizontal — they can be angled as well. There can be multiple Z’s throughout the page. Just make sure that:
- The top horizontal line includes the main components you want visitors to focus on first.
- The diagonal line should feature any piece of information that lead to your CTA button.
- The bottom horizontal line should highlight the CTA at any point along this line.
Placing the most important page elements along visitors’ natural eye paths, whether in an F or Z pattern, ensures you create an engaging experience.
# Designing a layout with NBUX
# Column Grid
The ‘column grid’ is a layout container made up of a number of columns, separated by gutters and margins. The ‘column grid’ layout lets us arrange our components on the page so they all line up which gives the page proportion and balance.
Fig 3. Column grid layout separated by gutters, with margins at the sides.
The number of columns a layout has is based on the screen size of the device being used. At specific screen sizes we'll adjust the number of columns to better suit the layout.
NBUX provides breakpoints based on the most popular devices accessing our websites today. At each breakpoint the layout sets the amount of columns, margin and gutter spacing. The breakpoints we've defined are automatically set to suit smaller or larger screen widths. See screen sizes for more info on breakpoints
As a designer using Sketch and a developer picking up a design to build, we have an extensive library of flexible components.
# White Space
The gutters used in NBUX are a fixed width. This width may vary at different breakpoints or between devices (e.g. iPhone 8 vs a standard Android phone).
Gutters separate columns.
Fig 4. Gutters between columns.
Margin provides space to the left & right edges of the ‘column grid’ (highlighted in green). Although the idea of the margins is to keep some space between the content and the edge of the screen, there are scenarios where you may wish the content to reach (or bleed-off) the edge, e.g. a header, footer, or product and promotional images.
Fig 5. Margins to the left & right of the column grid. Header stretches edge to edge.
White space should be used to organise the layout for the user and group similar elements or actions together.
Law of proximity states that - “Objects that are near, or proximate to each other tend to be grouped together. Allows users to group different clusters of content at a glance.”
By using white space to group the UI, it should make it easy to see what components belong to each other and therefore aid the user when making decisions.
Fig 6. Example of how white space groups elements.