Column-based structure

The column-based layout structure marks the whole page into a number of virtual (to read more about the actual visible column-based design, proceed here) columns that are considered to be separate building blocks for the design. Mostly 12 columns with equal spaces between them are used. Such a structure allows developing a simple and comprehensible design, provided the columns are grouped in a sensible and practical way.

12-columns layout is easy to manage, as it can be grouped into three, four and six blocks. 12 columns is an optimal number of parts - if they are more, each column becomes too narrow to be practical, if they are less, the number of possible design solutions reduces drastically.

The spaces between columns are used to separate different design elements/ Later on, when the real design is being programmed, these can be distributed between neighbouring columns if needed.

Column combinations

As it has already being mentioned, the 12 columns are virtual - they exist only in the imagination of a designer and as markings on the workspace. In reality the designer operates column groups. Of course, each virtual column can be implemented as a real one, but such a solutions is rather rare - each real column will be too narrow and the general design will confuse users with the amount of information.

Besides being combined with each other, columns can also be interrupted, producing horizontal lines spanning a number of columns. These lines are design elements in their own right. Most of the design solutions demand that the lines are of equal height, but there are also situations, when the columns are separated into lines of different heights, which can also be combined.

If a certain design demands several lines, than each can combine columns following a different pattern. Thus, for example, there can be two lines, where the upper one contains three columns, and the lower one - four columns. The combination allows making the design more interesting, as well as denoting the hierarchy of the content. Upper line columns are wider than the lower line columns, meaning the upper information will be bigger and will draw more attention, signifying their increased importance.

Column interruption

Column interruption is a design method that allows making a design more interesting and/or emphasize a certain part of information. Column interruption assumes that a group of columns and/or line are interrupted with an object that does not follow the general layout rules of the page. For example, there are three lines - the upper three columns, the lower three, and in between them a bright colourful line that interrupts the normal flow of the layout. The content inside the bright line will be thus emphasized.

Using column-based layout

Column-based designs are useful, if the main aim a website is to be simple, balanced, comprehensible and orderly structured. There are cases, however, when a design must be unbalanced and chaotic - in this case column-based layouts can do more harm than help, as they make developing such a design more difficult and are generally meant for balanced and orderly structures.