Have you ever considered why all books and magazines have the same layout? Even when the design is different or striking, the layout remains congruous. Successful design, whether it’s in publishing or on the web, will tie together all its defining elements in a way which creates an engaging user experience.

1. The Trick to Designing the Perfect Layout
Have you ever considered why all books and magazines have the same layout?
Even when the design is different or striking, the layout remains congruous.
Successful design, whether it’s in publishing or on the web, will tie together all its
defining elements in a way which creates an engaging user experience.
You’ll find web designers who think that layout and the design of a page is simple,
it’s not a big deal and it comes naturally but understanding why it is important
too. Why do we design things in a certain way and why are these rules so rarely
wavered from? The challenge in design is getting your user to look at the different
page elements in the right order and although it may seem simple once you think
about it there are several rules to consider.

2. Layout Design Rules
There are basic rules behind the layout and design of a page. Web designers need a basic
understanding of layout, typography, colour, illustration and photography and the eye reacts
to each element. Without an implicit of understanding of the basics you can’t graduate onto
more intricate and innovative designs.
The most effective designs will follow the Z pattern, which is the natural Western reading
pattern, from top left to top right to bottom left to bottom right. It’s simple and it works. We
have collated eight essential layout tips below:
• Use borders to draw attention to information by framing in. Useful for calendars, special notes
and contents tables.
• Where borders aren’t appropriate allow the edges of text columns and artwork create the
illusion of borders.
• Use drop shadows on the borders of boxes or images to draw attention to them.
• Use contrast in the scale, colour and page position of important elements of your design. All
elements should be functional and support the content.
• Use a grid to support organisation. Flexible grids allow you to organize elements on your page
and four or five columns is optimal for flexible design.
• Multiple columns should be used for organizing text and visual elements of your design to
make it easier to read.
• For the best results on a standard page use 2 to 3 columns for your body text.
• Single wider columns should be used for pull-out quotes and content drawn from the body.

3. Where is the real focus?
There’s a quick yet valuable trick every designer should know to help
locate the focus of their page. All web designs begin with hand drawn
sketches to work out exactly where the eye naturally focuses. You need to
begin by drawing a diagonal line across your page from top left to bottom
right. Then you need to draw a second diagonal line at a right angle to the
first. Where these two lines meet is known as the area of maximum
attention. Take a look at a page from a magazine or a website and virtually
sketch these lines, you’ll see your eye naturally falls to this focus point and
more often than not a key feature will appear at this point too. This
diagram illustrates the point perfectly.

4. This diagram is a perfect tool to use in client meetings. If they have concerns
about your design you can utilize this tool to back up your design choices and it
should help the client have a wider and clearer understanding of exactly how you
came to your decisions. If you can provide them with a tried and tested design
rule they are less likely to question your designs and value your expertise further.
By all means take their concerns into account but you know and history shows
that this standard layout works and sticking to the single set of rules gives you
the freedom to get creative in other aspects of your web design.