Web Development optimize

Effective design principles for web designers: Alignment

Ryan Boudreaux reviews the design principle of alignment with some samples and tools.

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?

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

5 comments
J_Edwards
J_Edwards

Alignment is a very important factor in web designing. Without a proper alignment to put different elements in a web page too difficult. Hence to start a design for a website make align properly all the elements   make a web site good.

http://www.afixi.com

maneetpuri76
maneetpuri76

'Alignment'...very much detailed and informative I must say! Above all, I must confess Ryan this is one of the coolest so far compared to the previous three you have written. Contrast, Repetition, Alignment, web design principle and proximity altogether constitute a perfectly designed website. Now, sticking to alignment, which I believe is the soul of this brilliant post; I would say that better the alignment, better will be the order and placement within the website for sure. Better alignment will definitely lead to a much better informational architecture on a respective website, which inturn will lead to a much better User Experience.

Deadly Ernest
Deadly Ernest

just about every ad source I know of. About 95% of the time the pages I look at on TR have a totally empty grey space for the right sidebar, so I think your suggesting TR's use of the right sidebar just proves my point. Mind you, there is the occasional TR ad about TR that does show in that right sidebar on some pages, but they're rare. The other annoying thing is many of the ads in the right sidebar are flash or animated things designed to draw your attention away from the main display, which is what you're after. Tell me, exactly HOW do YOU use the right sidebar to enhance what you're providing in the main display area without distracting people from what's in the main display area? I especially want to known what you feel you can put there that can't be put below the the main information.

Deadly Ernest
Deadly Ernest

simple and easy code and quick display of the page. A top banner, a left sidebar for a menu, and a main text area. I usually use percentages to make sure the things display well regardless of the screen size, but a few times I've had to set a states size for the sidebar due to what the client wanted in their and how it had to be that size to display. I don't like right sidebars as they're usually used for pushing trashy ads at people, rarely do you see one used for anything else.

sandymcm
sandymcm

"I don't like right sidebars as they're usually used for pushing trashy ads at people.." You mean like on Tech Republic or bbc.co.uk/news/ for example? There are many sites using right sidebars quite effectively. Yes, they often have a few well sign posted ads, but it's surely a price worth paying for good content. Personally, I probably prefer right sidebar to left sidebar.