Free toolsLearn
Design principles
See the same business card, menu and shop sign with and without each principle.
Hierarchy
Not every piece of information matters equally. The eye goes to the largest, darkest element first; the design decides what gets read first.
What is wrong: Every line has the same size and weight. The eye does not know where to start; the company name competes with the email address.
Example: Business card
Alignment
When elements line up along an invisible edge, a design looks tidy. If every line starts somewhere else, the eye has to search each time.
What is wrong: Each line starts in a different place: one centred, one on the right, one indented. The page looks scattered.
Example: Flyer
Proximity
Things that belong together sit together. The space between elements tells you what relates to what.
What is wrong: Every line is the same distance apart. It is unclear which price belongs to which item, or where one section ends.
Example: Menu
Contrast
If the difference between text and background is too small, the message cannot be read. On a phone, in sunlight and while scrolling fast, it matters even more.
What is wrong: Light text on a light background. It can be read up close, but it disappears while scrolling through a feed.
Example: Social media post
Negative space
Empty space is not wasted space. The room left around the content brings out what matters and lets the design breathe.
What is wrong: Every corner of the label is full and the text touches the edges. Everything shouts at once, so the product name gets lost.
Example: Product label
Emphasis
If everything is emphasised, nothing is. Pick the one thing that should stand out and let the rest make room for it.
What is wrong: All four lines are large, bold and coloured. The eye does not know which one to look at.
Example: Shop window poster
Balance
Visual weight is spread across the page. If one corner is full while another is empty, the design looks as if it might tip over.
What is wrong: The title, the details and the shape are piled into the top left corner; half the page is empty. The poster seems to lean to one side.
Example: Poster
Proportion
The size of elements relative to each other says which one matters. The wrong proportions make the right information invisible.
What is wrong: The emblem takes up half the sign, while the shop's name is too small to read from across the street.
Example: Shop sign
Repetition
A brand becomes recognisable when the same colour, type and layout repeat. If every post looks different, nobody can tell whose account it is.
What is wrong: The three posts differ in colour, type and layout. They look like they belong to three different businesses.
Example: Social media series
Unity
Every piece of a brand should look like part of the same family. If the business card, envelope and letterhead seem made at different times, trust suffers.
What is wrong: The business card, the envelope and the letterhead each use different colours and typefaces.
Example: Business stationery
Variety
Repetition brings consistency, but if everything is identical the page turns monotonous. Differences in size and shape lead the eye around.
What is wrong: Three boxes of the same size and shape. The page is tidy, but it is unclear which one to read first.
Example: Brochure page
Harmony
Colours need to get along. A few colours that suit each other look stronger than many bright ones.
What is wrong: Five bright colours side by side. Each one wants attention, so the box looks messy on the shelf.
Example: Packaging
The examples were drawn for this page; the products, prices and offers are illustrative.