† Hide or show labels
† This is the message that underpins the Money Advice Service brand

Pages & layout

How all the elements of typography, icons, navigation and photography come together on a page is the web product. Following the guide so far will result in a decent page. Here are principles to create great pages.

Photographs have power – use it

A single image

With a powerful hero image in place, you can use crops, and cut into it to reclaim the space for type. If the image is strong, it remains powerful with chunks cut out of it.

campaign-page-wideimage

Images in an article

inline-article-image

This image is cropped to 294 pixels high, making a golden ratio 1 to 1.618


Structure pages – impart meaning

Structured typography can help add hierarchy and meaning to a single page of content.

Structured layout should be used to do a similar job on intermediate pages – subject pages should not be the same as a search results page, nor contain a jumbled collection of images. Single images work best, as shown above.

Useful or important tools should be pulled out, with icons, to the right.

If the subject area has sub-sections, list these clearly. Pick out the most popular, or best, or most important articles. Other articles will be links through from guides, related articles and of course search.

structure-diagram

Current mocked up pages

Use CSS + HTML from these pages as a starting point, not definitive specs. Pages have only been tested in webkit browsers - Chrome/Safari

Hide or show annotations

The main single large image is often called a 'hero' image.
Why? It should be dramatic!

This is part of the Campaign Landing Page layout

For 2,400 years many artists and architects have proportioned their works to approximate the golden ratio, in the form of the golden rectangle where the ratio of the longer side to the shorter is the golden ratio.

A golden rectangle can be cut into a square and a smaller rectangle with the same aspect ratio. Mathematicians since Euclid have studied the golden ratio because of its unique and interesting properties.

structure-thumb