5 Basic Layout Rules and Tricks

5 Basic Layout Rules and Tricks

We’ve all been in the situation when you need to create a layout for a brochure, web-site, stationary, pretty much anything, and you just get stuck, or even worse, you don’t know where to start, or you’ve done about 10 bazillion revisions for the client and it’s still not working. The thing with layout and design in general, there’s no “right way” to do it, there are some general rules, but once again, a lot of successful designers can break these rules and the final outcome will still rock their clients socks, as well as look good. If you ever find yourself in this situation, here are few rules and tricks to help you find the solution to your project:

1.Pattern.

Patterns been about since the universe began, if that sounds crazy to you, think of an atom structure – it follows a pattern, or a DNA, there’s millions of examples. It’s all in front of you, all around you, all you need to do is open your eyes a little bit wider and start seeing what our extremely awesome nature got to show you. Pattern is pretty much anything with observed regularities. Look around you and try to find patterns that are far from obvious – you will be hugely surprised. Now all you need to do is apply the rule of pattern to your designs.

So here are few examples of how you could use pattern in your layouts. The scheme below shows an example of pattern use in a very simplistic form – to get your imaginations started.


Schematic of pattern use in layout and design.


Pattern use in the background and also in the pricing table.


Old school “pixel” pattern use on Thinkstock.


A very subtle use of pattern in the background on Graphic River.

2.Consistency

Remaining consistent throughout your design is very important. If there’s no consistency, there’s no visual and sub-conscious link, there’s no connection for human brain to easily store the information you’re presenting. By being consistent, you’re making sure that the eye flows easily through your design and that brain of anyone who sees your design has that “constant” to catch on to, which makes it easier to remember. Best example – good branding, think big brands: their constant for you is their logo, you see it and your brain instantly makes the connection with the image, service the company offers and all the experiences connected to it. It works like labels in different sections of a library – makes it easier to find things.
Examples of consistency in design:

Schematic of consistency use in layout design.


Schematic of consistency in shapes and color.

Example of great use of consistency in brochure design.


Another great example of consistency in brochure design.

3.Color Accents

If you’re stuck with too many colors in your design and it just looks too cluttered, try narrowing down the palette and choosing an accent color. You’ve probably seen many websites, brochures, business card designs that use this technique, but we don’t always pay attention to tiny detail when browsing about, so here’s a few examples of accent color use:

Schematic of color accent use in layout.


Great color accent use on buttons by BuySellAds.com


(Click for full view) Great use of color accent in poster layout.

Accent color makes particular parts of your layout stand out more than other parts, which has great use in marketing. If your client is trying to highlight particular messages in your layout in order to market their product or service better, that’s a perfect place to use accent color. Accent color can also be used as a guiding line for the eye to flow through your design. Here’s a few simple examples of basic images that use accent, all you need to do is implement same ideas throughout your designs.

4.Visual Connections

Every design needs visual framework, no matter if it’s obvious or not. Visual framework, in a nutshell, it’s a glue that holds pieces of information and imagery together. It can be in a form of grid layout, blended subtle background, little icons in the same style and size, repeating colors or shapes, as long as it glues pieces of your layout “puzzle” together, it creates visual connection. When I was at school, we use to have a classroom game, the rules were simple, you draw a train coach and pass piece of paper to the person next to you and they draw a coach in their own style, and so on. You end up with perfect example of visual connection. Even thou every coach is different, they are connected into one train, and they all represent one object when “glued” together. Here’s a few examples of how visual connections can be established in a layout:


Schematic examples of creating visual connetion.


Beautiful use of color, shapes and inforgraphics to create visual connetion.


Facebook uses tiny icons to create visual connection.


Tabs establish great visual connections between content and navigation. A true web 2.0 wonder.

5.Usual vs. Unusual

Sometimes it’s not very obvious that the project requires a little more than usual layout approach. A lot of designers dread the idea of going into a new direction, away from their “safe place”. But the only way you can keep evolving as a Graphic or Web designer, is if you take risks and experiment. Sometimes the most accidental and craziest idea can become great success. The best advice when considering Usual vs. Unusual is to consider client’s opinion on the approach first and if you get a solid “yes”- experiment, experiment, experiment. On the other hand, going for “usual” look can save you time, nerves and amount of critique you will get once the project is completed. Here’s a few examples of unusual approach to layout:

Schematic represenation of creating unusual out of usual using same shape.


Example of great unusual approach to corporate brochure design.


Example of great, old school approach to brochure design.

Do you have any tips or tricks or your own rules that help you get through layout tasks? Let us know in the comment section! We would love to hear your opinion.
Please consider tweeting the life out of this post to help other people find this article! :)

Did you enjoy this post?

If so, would you please consider sharing it with the world

User Responses

6 Responses and Counting...

  1. Julia

    March 29, 2010

    Hi Elena, thanks for the tut. I have gathered sime ideas from you. Keep up the good work!

  2. Design Earth

    March 29, 2010

    Nice Article. Much Appreciated 5th point ‘Usual vs. Unusual’. Good to see your unusual thoughts.

  3. Amrit Virk

    March 29, 2010

    Very Useful Tips…. Thank you :)

  4. Tom

    March 29, 2010

    Awesome tut elena love the way you presented it its really cool

  5. paddex

    March 29, 2010

    ei mam.. your great!.. can you share some tutorials of your style?.. heres my email: rapsanguan@yahoo.com… tnx alot

  6. Reinette

    March 29, 2010

    Thanks for the tut Elena! Much appreciated.

Leave a Reply

Default User

Your Name

March 29, 2010

* Name, Email, and Comment are Required