Design Principles for Beginners

Whilst you may not notice it, we encounter aspects of thought-out and complex designs daily, as visuals are at the heart of everyday life.

Whether it is guiding us logically around a website, informing us of when the next event is on at the theatre or even instructing us on how to cook dinner, design is vital in helping us to understand and process information we are presented with. However, the opposite can be said for bad design which has the effect of confusing and alienating the user and ultimately be bad for business, as we covered in our article on deceptive UX.

Think about the last website you viewed; was it clear where you had to go to find out more? Could you easily navigate to buy a product? Was it intuitive? There is a reason why good design works and you can guarantee it’s because it uses one or more of the following design principles. Whilst this list isn’t exhaustive, incorporating one or more will help your work stand out from the crowd.

Alignment

Have you ever looked at the arrangement of text and images in a glossy magazine and felt that somehow everything just seemed to work together on the page? This is no coincidence. A good designer will use precision alignment to create invisible lines for the eye to follow which is important in helping the brain digest information, particularly text-heavy pages.

Where items have a subtle visual connection to their neighbours, it aids the digestion of that information. When items are placed randomly on a page, the sense of alignment vanishes and it becomes more difficult to interpret, and can often mean the reader has to put extra thought into understanding the flow of the page.

Early graphic designers were advocates of ‘the grid’, creating instantly recognisable designs that have been adopted as classic techniques today. If you look at the ‘Swiss style’ poster examples below, you can see how sharp the lines of alignment work, creating clear flows of information. Designers always use a grid system to align the components of a page, which in turn, creates a sense of pleasure to the eye.

Repetition

This is important in helping you reinforce your brand and the information you’re trying to communicate. Repetition creates consistency and without this, your message can become confused and lost in translation. If you’ve chosen a typeface for all your marketing collateral, then stick to it. People like to feel a familiarity with what they’re viewing. Think of some of your favourite brands in history; they may have updated their image over the years but most have kept the original essence of their brand through their use of colour or form.

Whether it’s keeping a similar colour scheme throughout your website or something much more subtle such as the styling and treatment of your photography, repetition will aid a user's recognition of your brand.

The latest McDonald’s ad features no clear indication of the brand, such as the logo, but was instantly recognisable due to the distinctive colours used:

Contrast

Contrast creates impact. If you look at the recent rebrand of Fast Web Media, you will note the use of our new colour palette. A primary colour like yellow against a black background works well because it’s easily distinguishable to the eye. If we took the same logo and mixed up the colours below, it is immediately more difficult to read as it makes the eye work harder and could be a turnoff for potential clients.

Colour theory is a whole science in itself and one that should be explored further if your company is looking to rebrand. If you want to create striking designs, or want your users to feel a certain way when they interact with you, then colour is a fantastic asset to provoking emotional interest.

Hierarchy

Similar to alignment is the principle of hierarchy, however where the former creates connections between objects, the latter creates the order in which the user should be able to view the information. This doesn’t necessarily mean that components must all be placed where they can be read left-to-right, but their arrangement does need to follow a particular system. Ensuring all your elements relating to a particular section are the same size creates hierarchy; as in the example below. Monocle is a lifestyle company that comprises a radio station, magazine and shop. So where do you find these on their website? All in their own section directly underneath the website title and clearly accessible for their users.

Think about what you are trying to achieve with your own online presence and make things easier for your viewer. You may have a beautiful design but if you’re not effectively guiding your consumers to where they can buy your products, access your services or find out more through using a clear hierarchy, then you’re not achieving what is most likely to be your main aim.

This is a whistle stop tour of some initial design theories, however if you would like to contact us to discuss any design needs you may have why not get in touch using our details here.

We hope you enjoyed reading

Related Articles