Alignment is the third part of the series on “Effective design principles for web designers.” The first two segments covered contrast and repetition, and this piece will review alignment – all the web design characteristics that deal with placement, position, and orientation, and grouping of elements in a web document. The fourth and final part of this series will cover the effective web design principle, proximity.
Alignment
You may or may not be aware but alignment is such an integral part of most website design that you probably do not even realize it is there; it sits in the background, hidden as an initial design element. It could start out as a PSD file, and perhaps it is the integral part of your template or theme, the backbone of your web design. Your website probably has a set layout or grid as the master scaffolding that supports the look and feel, navigation, sidebars, sections, asides, headers and footers.
Alignment as an effective web design principle allows us to make conscious decisions about how and where elements are placed on the page. Taking advantage of strategic placement helps us to craft stronger and more compelling compositions and utilizing a grid system provides a standard guide for element placement. Without an alignment strategy we would end up with arbitrarily placed elements, with little or no connection to additional or similar features. Without alignment, the look and feel of your website would be a haphazard assortment of open-ended disorder.
Alignment strategies go well beyond the align attribute, the float property, or the arrangement of text and images to include other factors such as user interaction, information architecture, grids, and the organization of web design elements.
How do you make web design alignment decisions?
The primary consideration for making design alignment decisions should include analysis of typical user interaction patterns, including eye tracking testing. Several studies have been conducted to determine how users view a web page — where and how the eyes naturally scan a page, the path the eyes take from start to finish, and how the user makes decisions on where to jump or click to the next content. The discussion by Charles O’Connell on Usability.gov shown in Figure B reviews the implications of eye tracking studies. One of the major upshots from these studies shows that most users follow an “F” shaped “heat map” pattern while scanning web page content, starting from the top as headlines draw in the eyes before any images, scanning just a few words, and then the eyes will scan down the left side of the page looking for more noticeable content, making click decisions within seconds.
Figure B
Attention should also be given to the Information Architecture (IA) — the web site context, including the overall conceptual model and design plan, structure, and organization. The AI process outlines the website hierarchy, core navigation, standards and specifications, and labeling and usability, culminating with detailed design patterns in the form of page wireframes, site design diagrams, and prototypes. The IA conceptual model of a sample website displayed in Figure C provides a starting point for developing the flow, and ultimately aligning the major elements for a typical dynamic website model.
Figure C
How does alignment establish compelling websites?
Alignment develops order and order conveys harmony; thus, bringing together web page elements into a properly balanced blueprint. The arrangement of elements in an ordered fashion conveys sound development and composition.
The sample layout displayed in Figure D starts with a logo at the top left, header and navigation area aligned horizontally along the right side, and the banner image section just below the nav section. The left sidebar is aligned below the logo and extends to the top of the footer section. The main content area is aligned left with the banner and header. A right side bar fills in the remaining area and is aligned vertically with the right edge of header/nav and banner image sections. The footer extends the full width of the defined page.
Figure D
Notice that the text is left aligned for the logo, left sidebar, main content, right sidebar and footer sections, and for the header navigation and banner image area the alignment is centered.
This is just one example of how web page elements can be consciously aligned on a grid or guideline system.
Grid systems
Several grid systems and templates are available which provide guides or a matrix on which to place your web design elements. I have reviewed the two below, which allow you to modify various settings such as columns and typography, let you export or save the settings as CSS and HTML templates, and provide rapid prototyping or integration into existing development environments.
Grid Designer by Rasmus Schultz is an online tool that starts out with default columns set to 4 at 174px width each, with a total 800px width, with 20px gutters, and 22px margins. In this example, the default typography is set to Veranda with paragraph size set to 10px with line height set to 1, and headings set to the default font with a size of 16px, and height set to 2 lines. The default example of the grid designer is shown in Figure E:
960 Grid by Nathan Smith is licensed under GPL and MIT and is available for download. It provides a system to streamline web development using commonly used dimensions, based on the 960 pixel width. The variants include a 12 column and a 16 column selection, either of which can be used individually or together. The 12 column grid is evenly proportioned to 60px wide each, and the 16 column grid is set to 40 pixel increments, each column has a 10px margin on the left and right, and creates 20px gutters between columns.
Figure F
Responsive alignment
For responsive web design the W3C has embarked on the CSS Flexible Box Layout Module or “Flexbox” for short. The Editors Draft, recently updated on August 13, 2012, is the specification that describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical or vertical inside horizontal) can be used to build layouts in two dimensions. An illustration from the specification shows the various directions and sizing terms as applied to a ‘row’ flex container as displayed in Figure G below.
Figure G
Feedback
Do you have any grid systems that you use in your web development that ensures proper alignment for your web pages?
