Grids and pixels: An introduction to digital layout

AUTHOR:  
Published:  October 20, 2014
Desktop

To smooth the introduction from page to screen, we’ve strung together some practical pieces to help those looking to convert their manual design skills into digital practice. Today, we’re starting off with grids and layouts.

The basic terminology behind layout involves the principles of alignment, proximity, grids, scale, and white space, with contemporary terms that have been introduced specifically for designing digitally.

Grid

Grids are essential to layout design, as they replace any guesswork with formula — forming an alignment that guides the eye along specific paths on the page, and toward white space.

In print, most newspapers can easily be broken into clear, vertical columns, but as the content changes, it’s important to recognise that the grid may vary from section to section. A paper’s local news section, meant to be methodical and informative, might use narrower columns with packed bodies of text in comparison to the arts section, which may have fewer, wider columns with larger images. Ultimately, in print and onscreen, each section should be based on the same grid even if its layout isn’t exactly the same.

Grids and alignment in practice

Designing a grid to support a particular layout can become a project in itself. The effort is complicated by designing for a variety of screen sizes, but there are several CSS-based grid systems, such as Blueprint and 960.gs, that provide designers and developers with a starting point.

Layouts for small screens may rely on margins rather than a grid to help define structure, as they have limited positioning options. For larger screens with more elements, a grid should be derived from the content to be included. An ideal alignment places elements along the fewest number of horizontal and vertical lines, regardless of whether those lines are part of a formal grid.

photo (2)

Knowing your screen size

Knowing the screen sizes and functionalities you are designing for is the first step when it comes to  layout. The screen provides a frame in which to present content and interface elements, yet relationships between elements and the frame should be treated as individual screens. Instead of considering a layout as something completely static, consider it as a thoughtful, changeable placement of modules that meets user expectations (by incorporating motions, gestures and sequences, that have become familiar or standard).

The principles of layout in print still need to be considered when designing for digital. It’s important to merge these visual principles with an understanding of screen element relationships, so that layouts can respond intelligently and seem entirely intuitive.

responsive-joomla-template-600x289

Position, and how it effects UX

Layout involves positioning elements to form detectable, useful relationships. This comes from analysing the content elements at hand, and thinking about how they assist and complement each other. Balancing the relationships between elements on a screen can be a puzzle, when one element is moved to solve a problem, it can create another.

To create something user-friendly, the positioning needs to be tested and evaluated from a user perspective. Do the relationships support the flow of each element and feature? Often, there’s more than one possible arrangement but it’s about to choosing what ‘feels right’.

ux-sketches-1

White space

White space refers to empty areas, spaces between columns, elements, or bordering the screen itself. White space need not be white; it merely needs to be blank, as a means of separation. Comprehending ‘visual resting space’ may sound abstract, but it’s vital to designing an interface that feels comfortable and pleasant to use. A characteristic of white space is that it helps a website to look easily comprehendible, rather than a mess of confusing and poorly connected information.

Although, the paradox of white space is that blank areas emphasise the busier elements onscreen. White space between elements provides a place for the eye to rest, and draws the eye to elements that then become isolated.

Screen Shot 2014-10-20 at 10.35.56 am

Margins

Like in print, margins are a form of white space that exist between the edges of a module and the elements within that module. Margins also describe the space around the edge of a screen; anytime an element contains smaller elements, there needs to be margins separating the child elements from their parent, as well as from each other.

Determining how much space should be used for margins is essential in layout design, usually done as a secondary refining step after the general placement of elements has been settled.

Proximity

Picture a dedicated website for an online shop, with multiple product images presented in a grid on a screen. Each product has a photo, title, brief description, and a small button to buy or view more information. It’s crucial that the button to purchase is positioned as part of the group of related elements. It’s easy to underestimate the amount of space needed between element groups, when a group isn’t clearly defined, it can be frustrating to uncover which product and action are aligned.

golden-design-step3

Scale

Again as in print, scale refers to the relative size of elements, directly related to visual weight and the interpretation of ‘importance’ or visual hierarchy. When elements are similar sizes, they appear to be related. When using scale to define flow and order, size differences need to be clear, but not so different that certain images will distract or go unnoticed.

Alignment

In the practice of typography, type is typically aligned by its baseline, while non-type elements can be aligned from their centre, top, or bottom. The key to using appropriate alignment is to pick an arrangement that enhances grouping and reduces visual activity, while also being consistent.

Continue to explore digital grids and layouts, at sites like 960.gs, Blueprint, The Golden Grid and framelessgrid, or in books such as Ordering Disorder: Grid Principles for Web Design and Layout Essentials: 100 Design Principles for Using Grids

Leave a Reply

Your email address will not be published. Required fields are marked *