Follow the Leader: Understanding Content, Layout, and Style

Often, people confuse these three terms of design and the order in which they should be used. The easiest way to remember the order is to think of building a house. The content goes first because it is the plan. It covers why the ‘house’ is being made (key messaging) and what it will be used for (information and services).

The layout comes next, because it’s the structure of the ‘house’. It determines where things will be placed and how someone will navigate through the space.

Lastly, style is used to determine how the ‘house’ will look and what type of feel it will give. For example, a crystal chandelier has style and so does a Danish modern lamp, but each sends an entirely different message about a home and those who own it. These considerations are also true when determining the style of a website.

Below are the definitions of each term in the context of graphic and web design:

• Content:

Content is the combination of text (headlines and body copy) and multimedia elements (images, video, etc.). Content is the building block of the design and is what the design derives its messaging and meaning from.

• Layout

Layout is how all the pieces of content are organized in the design. The main goal of a layout is to effectively organize the content so it’s clear to the viewer what the key message(s) of the content is, the order of the content pieces in the design, and what the viewer is supposed to do next after viewing the content (online, it may be what page they should go to next; in print, it may be who they contact or what website they should visit).

• Style

Style refers to the treatments used in a design that alter its feeling. For example, adding a paper texture to the background of a design makes it feel more tangible and gritty to the viewer, while adding tasteful amounts of gradient to a design can make it feel metallic and in some cases more classy or expensive.