Start a Project
Call Us  0161 505 1048

Design & UX

Design Principles for Beginners

17 May 2017
A person with paint all over their hands | Design for Beginners | Neon

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 is ultimately 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 a 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.


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.

Poster from 1967 | Website Design for Beginners | Neon
Poster from 1963 | Website Design for Beginners | Neon


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 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.

Fast Web Media Logo | Design Principles for Beginners | Neon
Fast Web Media Logo - Non brand Colours | Design Principles for Beginners | Neon

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.

Adobe Colour Wheel | Design Principles for Beginners | Neon


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.

Screenshot of Monocle website | Web Design For Beginners | Neon

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.

Related Items

Brand Logo Quiz

Five Reasons Why Your Facebook Ads Are Getting Disapproved

Top 5 UX errors and how they impact your online success

We are here to help

Want to be at the top of the search ranks? How about a website that’ll give your audience a great experience? Or maybe you’re looking for a campaign that’ll drive more leads? Get in touch to find out how we can help.

Start a project
The design and dev team making notes | Start a project with Neon | Neon
Employee on telephone
Group work
Designer laughing
Computer typed on
Sausage dog
Writing on white board
Designer planning sitemap
Employee posting notes on board
Developer working
Group photo of CEO and Brand Ambassador
Employee in meeting
Employee in Meeting

Stay up to date

Privacy Policy

© Neon Digital Agency Ltd 2021. Part of

Inc & Co Logo