It's Not Just All Pretty Pictures

When Andy Arikawa told me about his new online design magazine, Design In-Flight, I couldn’t resist writing for the inaugral issue. It gave me a chance to bring together my web design and content management expertise and address a subject I felt was too often ignored.

Published by Design In-Flight, July 04. Also available as a PDF.

It’s not just all pretty pictures, or How I learnt to stop worrying and love my content

Content informs all aspects of web design, from site navigation to the layout of individual pages. It’s easy to get caught up in the way a site looks and forget that the main purpose of a web site is to inform, to provide the user with the content they are seeking as quickly and efficiently as possible.

The problem is that content is so integral to both web sites and the design process that it’s easy to miss the connections. Here we take a look at some of the ways that content and design can influence each other.

It all starts with navigation
At a very basic level content defines architecture: How much content is there in how many categories and subcategories? How does each page relate to each other? By answering these questions about architecture we define navigation, which forms the very foundation of every web site.

The key purpose of navigation, in case you had forgotten, is to enable the user to find the information they want in as few clicks and with as little confusion as possible. Some web designers seem to ignore this and attempt instead to mould the user’s experience by forcing them to take a path through the site that’s either convenient for the designer or fulfils a specific need for the company, such as attempting to force a sale.

Only when designers fully understand the relationship between each section, subsection and page of content can they understand how users may wish to move around the site, and only then can they create user-friendly navigation. In order to acquire this level of understanding it is essential to know what the content is going to be – even if it has not yet been produced.

How much and what sort?
The amount of content the site will contain, and what sort of content it is, is also important in determining the navigation tools that can be used. Is the content going to be static or dynamic? Updated rarely or frequently? Are there just a few pages or hundreds, even thousands?

Microsites which contain a limited number of static pages, such as those of small businesses, can use a static single-level menu. Conversely, a large site such as Amazon, which has an almost uncountable number of pages, needs to consider multiple navigation tools. They utilise elements such as hierarchical tabs and pull down menus in conjunction with powerful search tools so that the user can drill down into the site until they find the page they require.

Navigation, therefore, informs the user interface at the nuts and bolts level. If you don’t fully understand your content you won’t understand either how the users are going to access that content or how to make that process as simple and intuitive as possible.

At the altar of the brand god
Next to consider is the interplay between brand, content and design. Both content and design should accurately reflect core brand values, and both content and design need to sit comfortably with each other.

In a corporate environment where a strong brand is essential, the design should communicate the same messages as the content. A conservative multinational corporation, for example, may prefer a formal written style and this content would sit more comfortably in a toned-down understated design than one based on, say, hot pink.

Of course, some companies deliberately set out to create a jarring juxtaposition between content and design in order to make a point, but most are looking for sympathy and consistency between the two.

Often designers rely on brand values and colour swatches to give them direction, but the value in scanning the content for clues cannot be underestimated. In the same way that designers are concerned with look and feel, so writers are interested in tone and voice, i.e. not just what is said but the way that it is said. Become more aware of the nuances of language and use it to your advantage. Ask yourself, how does the content talk to the user? What is the tone? What is it really saying? What is the subtext?

Look beyond the brand and beyond the written word to read between the lines. Once you understand the core message embedded in the content, you will understand what you need to communicate with your design.

Using content elements in design
Drilling down now to page level, let’s consider how best to display content for the user. Many layout elements used by print media – such as pull quotes, sub-headings, sidebars and box-outs – are often ignored by web designers due to the difficulties of managing text flow and element positioning in HTML (HyperText Markup Language). However, with CSS (Cascading Style Sheets) and the increasing complexity of content management systems (CMS), it is now easier for designs using these elements to be implemented effectively on the World Wide Web.

Two of the simplest and most effective text layout devices are the pull quote and the sub-heading. A pull quote is where you take a pertinent quote from the main text and blow it up to make it more visible to the reader. Pull quotes and sub-headings function not only break up the visual desert formed by large passages of text, but also act as a hook, enticing the reader to continue reading.

The habit of web designers to break all longer passages of text into separate pages, even if based on sub-headings, is a tactic that is often overused. Breaking up the text in this manner interrupts the reader and adds unnecessary clicks to the navigational process, but is seen as ‘preferable’ to one long page because it obviates the need for pull quotes and sub-headings.

This is assumed to be a good thing, but it denies the designer the opportunity to use pull quotes as hooks to capture the interest of the reader, and robs the reader of the opportunity to get the gist of the content by scanning the pull quotes and sub-headings.

Positive feedback loops
Designers can influence not just the look and feel of a site, but also the content. If a designer builds the use of pull quotes and sub-headings into the site, they can then feed that back to the writers who can select, or write, text appropriate for that express use.

The same can be said for box-outs and sidebars, which are used to highlight important information or to provide supplementary data. As with pull quotes and sub-headings, they allow readers to skim a site and extract the information they require quickly and easily.

Designing with these elements in mind opens up new avenues to the content producers, which can enhance not just the look and feel of the site, but also its usability and effectiveness.

Questioning the brief is something that every good designer should do. To be a better designer, you should also question the content. What is it saying? How is it saying it? How does it shape your design? And how can your design shape the content?

In an ideal world, there should be open dialogue between the designer and those writing content, allowing an exchange of ideas and suggestions that will result in a stronger, more usable and more readable site.