You can’t just flip a switch and create beautiful designs on a whim. Like learning to walk before you run, there are certain fundamentals you’ve got to learn first.
The problem is that if you don’t have the time or inclination to take a design course, resources are pretty scarce. Sure you can rely on Canva templates, but even then you need to know how to use them properly.
Which is why we've put together this post. It’s for you if you’ve ever wondered what goes in to good design. You'll find it handy whether you're a complete amateur or a budding designer—so let's get stuck in.
Design principles are guidelines to follow if you want to create effective visuals, from oil paintings and blog graphics to eye-catching social media posts.
Think of design as carpentry and these principles as your toolbox. You can use them to help you during the design process, and unlike hammers, nails and screwdrivers, they can exist entirely inside your head.
These tools give you a better understanding—and appreciation—of what goes into the designs we see everyday. As you become acquainted with them, you’ll start to see what does and doesn’t work (and why), as well as how you can apply these principles to your own creative work.
We’re told that piece of art is subjective. For the most part, that’s true. But if you’ve ever seen an unintelligible parking sign or a website from the early days of the web, you’ll know there’s definitely such a thing as bad design.
As Jared Spool, expert on design and usability, says, “good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.” This is why good design is tricky to define.
Luckily for us, in the late 1970s an influential designer named Dieter Rams saw this problem. In response, he asked himself what constituted good design and came up with his own list of ten principles.
Little did he know, they would go on to inspire generations of designers, including Johnny Ive, the mastermind behind Apple’s most famous products.
Rams’s principles are:
You might notice that these principles are aimed at product design. Rams worked at Braun, so products were in his wheelhouse, but these principles are easily adapted to UX, UI, or any other design context.
These are the building blocks graphic designers and artists use to put creative works together; the core principles of art that make up every design, from the fine art of the Louvre to the boxes of Corn Flakes at the local grocery store.
Where objects in real life carry physical weight, elements in design carry visual weight. Large elements are heavier and small elements lighter, with each element having their own "weight" based on how much attention they draw.
Visual balance is about ensuring your design is equally weighted on both sides of the central point. It’s like a seesaw—too much weight on either side and the whole thing becomes unbalanced.
By striking this balance you create visual harmony and stop your design from feeling too chaotic to the viewer. It’s one of the most important parts of visual composition, and comes in three basic forms:
Symmetrical design uses an imaginary vertical (or sometimes horizontal) line to divide a design in two halves around a central point. Elements of equal visual weight are balanced on each side of the axis to create symmetry.
The website above is a good example. Imagine a line running down the woman’s face dividing the screen half. Each side is balanced with half of her face, alongside smaller profiles that stand out against the dark background.
There are two variants of symmetrical balance: Reflectional symmetry, where the two halves are exact mirror images, and translational symmetry, where the same shape or elements are repeated on both sides of the design.
An asymmetric composition is when a design uses unequal weighted elements. One side might have a visually heavy element, balanced with multiple lighter elements on the opposite side.
To run with the seesaw example, it would be like having a 100kg weight on one side and 100 kg of feathers stacked on the other. It still achieves balance, but provides a whole different experience.
Asymmetry is often more visually interesting. Where symmetrical designs can be quite static and predictable, asymmetrical balance can give designs a more dynamic feel. Check out the website below as an example:
Radial balance is when elements “radiate” from a point in the centre of a design. Think of rays shining from the sun, pedals blossoming from a rose, or a squirt of tomato sauce in the middle of a juicy meat pie.
This form of symmetry is a way to add depth and movement to a design, and works to draw attention to an object in the centre of a composition.
Emphasis is used to focus the viewer’s attention on a certain part of a composition. The effect is achieved by manipulating elements (like colour, shape and size) to make specific parts of a design stand out.
For example, say you wanted to bring attention to a call to action on a landing page. You could increase the text size and use colours that stand out from the background, emphasising the CTA and making sure visitors can’t miss it.
See this example from Wishpond. Emphasis is put on the “Book a Demo’ button by giving it a yellow background that contrasts with the dark shadows behind it. It's this combination of variation and high contrast that are the keys to emphasis.
As you may have already guessed, repetition refers to when an element is repeated throughout a design. It could be anything, from using a certain font colour to adding a repetitive pattern to a social media post to a social media post to a social media post (see what we did there?)
Repetition makes designs visually exciting and cohesive. It also creates a sense of consistency by using a repeating motif that the viewer comes to expect. This makes it particularly useful when it comes to creating your distinct brand identity.
Brand identity is the visible element of your brand. The colours; design; logo. It acts to distinguish your company from the millions of others out there, so when folks see your designs they immediately know it’s your business.
Animalz, a high-quality content marketing agency, nail this. They use repetition in their brand colours, elements and company logo to give a holistic experience across their website, graphics and social posts.
Every successful business uses repetition. Why do we equate the swoosh and “just do it” with Nike? The blue can with Pepsi? Because these visuals were repeated so often that eventually they became synonymous with the brands they represent.
So while repetition can just help you make a sweet iPhone wallpaper, it’s a crucial tool for any company looking to build a visual identity and brand recognition.
When we think of movement we think of, well, things moving. A pendulum swinging. A Ferrari roaring down the freeway. But in design, it refers to the path a viewer’s eye takes when they look over a composition.
It’s not just what you look at; it’s the way you look at it. Designers can guide this by using lines, edges, shapes and colours to create focal points and encourage certain ways of seeing.
Movement can be harnessed to distract, direct and pull the viewer’s gaze around a design. By using subtle cues (particularly with lighting and perspective) a savvy artist can control this entire process.
You can use lines to create directional cues and make images feel more alive. Check out the illustration of a ballerina in action below.
The image itself is static, but our eyes naturally follow the various threads. The lines that swirl over her hand; dance around her calves; snake up into her dress. Not only do they join together to make up her body—they create the illusion of movement.
Proportion is the relationship between two or more elements in a design, particularly the size and scale of them. When things are "proportionate”, it means there’s a coordination between them that makes the design look aesthetically pleasing.
For example, when you’re reading a blog post you expect headings to be larger than the body text. Or if you were looking at a realistic drawing of a tortoise and a hare, you expect the hare to be larger than the tortoise.
Proportion is about finding harmony between two elements. You want to make sure things look “right”— that the elements look as if they belong together.
Notice in the proportionate example how the logo and text share the same scale. It gives the design continuity and makes it aesthetically pleasing, whereas the second is quite jarring and uneven.
This is something that comes up when creating digital assets and websites online. It’s the bane of many an amateur designer’s existence. Here are a few tips for keeping the elements in your design in proportion:
You can also play with proportions in a variety of ways to emphasise elements, or get a certain message across. It’s a strategy you’ll notice advertisements do often and is usually best used for more creative projects.
The region between different design elements is referred to as "negative” or “white” space. This is part of the design that doesn’t contain anything. No images, drawings, shiny colours or text. Nothing.
The name is kind of misleading — it’s not a "negative" thing and it doesn’t have to be "white". It can be any colour: white space is refers to what you don’t add; the empty parts around and within your design.
It’s one of the fundamental building blocks of design and is just as important as any elements you do include. Think of it like a diet: what you eat matters, but what you don’t eat matters just as much.
The masters of negative space are Apple. Just look at the minimalist design of their website:
Notice how the white space acts to give the site an air of elegance and quality? It balances the page, helps organise the content and focus our attention on the iMac and iPhone. It also creates breathing space for users—there's no sense of being inundated with information.
“White Space in design composition is the same as the use of silence in a musical composition. Without proportionate use of silence, music is unstructured. Similarly, without white space, design is unstructured and difficult to consume." — Mark den Hartog
There are two types of white space: micro and macro. Micro white space is the space between small elements (like text), while macro white space refers to the area between large elements or surrounding a design (like on Apple's website.)
So why should you use white space in your design work?
Contrast is produced when two or more visual elements in a composition are different. It can be used to creates specific effects, emphasise the significance of certain elements, and add visual appeal to your designs.
Designs that look the same are boring—by experimenting with contrasting colour hues, shapes, sizes, textures and typography, you can liven things up. Humans tend to like contrast. It’s a great way to grab attention, control the visual flow and keep folks engaged.
You can use a variety of the principles to achieve it. Check out how the below example uses visual weight, white space and emphasis to create contrast.
Notice the colours. The font size. The white space. The emphasis on the sale announcement. It doesn’t just give the design much-needed flavour — it creates contrast, which draws the eye and highlights the most important parts of the page.
Keep in mind that adding too many variations can be confusing for viewers (the opposite effect you want to have.) As with most of the different elements of art, it’s about striking a balance.
Visual hierarchy is about organising the value of the elements within your design. By ranking information from most important to least important you make it easier for the viewer to digest your content.
This plays a critical role in UI and UX design. Ever noticed how most landing pages have the same layout? There’s a logo at the top, a menu at the top and then elements in descending order of importance below.
It’s not because they copied each other's homework — there’s a certain hierarchy that designers stick to in order to draw attention to the right things in the right order (and make it pretty to look at.)
The viewer’s eye should be drawn to the most important element first. These sit atop the throne at the top of the hierarchy, with the elements laid out below ranked in order of importance.
There are a number of visual tricks to influence this flow, including:
People read a page in the same way: from top to bottom. But we don’t just stare blankly at s page and wait for information to register, we scan it.
The human eye tends to follow the same path during this process. For that reason, designers stick to two common patterns to make it faster to absorb information: the F-pattern and the Z-pattern.
The F-pattern applies to pages made up mostly of text, like an online or printed article. Readers scan in the shape of an “F”—first, with the headline across the top, then down the left side of the page and to the right as they identify things they find interesting.
Designers use a Z-pattern for layouts with less text and more visuals. With this pattern viewers scan across the top of the page then diagonally down towards the opposite corner. They then scan the bottom in the same way as the top.
Most websites are designed in this way (including Paperform). Notice how the most important parts like the logo and navigation menu are at the top, while the secondary information like clients and chatbot are at the bottom.
Don’t worry, you can leave your dancing shoes at home. In design, rhythm hasn’t got anything to do with the way you move your hips. It’s about giving your composition a feeling of action and movement.
Designers create rhythm by repeating lines, shapes, colours and other elements. This makes a path for our eyes to follow, builds patterns and imbues the design with a sense of flow. There are a few different types of rhythm:
Rather than letting the viewer’s eye settle on a focal point, rhythm encourages viewers to move their eyes across the entire piece, following the lines and forms to their natural endpoints. It’s something you see reflected across nature and works of art.
Take, for example, The Tree of Life by Gustav Klimt, 1905-09.
This is the prototypical example of flowing rhythm. Klimt uses a spiralling line to create the flowing shape of the tree, leading the viewer’s eyes from the centre point out to the human figures that bookend the piece.
See how the branches flow? They’re an organic feeling to them, as if they’re alive and reaching to the sky. Your eyes wander over the piece and follow the lines and curves. This is what we mean by rhythm.
Now, we’re not going to pretend this blog post will turn you into Gustav Klimt. But you can see how rhythm works to set a tone; create a feeling and make interacting with a design an active experience.
People tend to get confused between repetition in patterns, which is understandable, as they both deal with repeated elements. But the similarities end there.
While repetition occurs when the same elements are repeated throughout a design, a pattern is composed of different components repeated in the same way. Think of the way gift wrapping is usually made up of a few different repeated elements—that's a pattern.
You'll also notice patterns commonly used as backgrounds on websites and in mobile applications. Just check out the landing page of personal organisation app, Socialist.
In the red background you can spot a few minimalist icons including planes, coat hangers, fruit, musical instruments and shopping bags. This serves the dual purpose of providing a distinct backdrop, while also suggesting Socialist will help organise the lives and interests of their users.
As a general rule, it's best to use colours, textures and shapes to create patterns. Try to avoid doing so with words — it tends to just give folks headaches. Despite the occasional bright colours and wacky designs, the key to creating effective patterns is simplicity.
Scale is the term designers use to describe the relative size of a design element in comparison to another. An element only has a “scale” when it’s being compared to something else.
So say you’re around six-foot-two-inches tall. Compared with average folks you’re pretty tall, but running around with LeBron James you would look closer to the size of a Tic-Tac. That’s scale.
In design, scale is important as it impacts the meaning, tone and entire composition of your work. It’s the number one factor in deciding visual hierarchy and tells viewers what to focus on (and in what order.)
More than any other principle scale helps you tell a story. Look at this poster for the TV series Mad Men for example.
The artist uses scale to take us on a visual journey. Don Draper, the main character, is shown in an exaggerated scale above New York City, showing his elevated status. The red silhouette is a looming presence, representing his inescapable past.
The poster drips with tension and status provided mainly through scale. It shows how you can subvert meaning, establish visual hierarchy and tell users a story with smart design.
Variety isn’t just the spice of life—it’s the spice of design too. It’s integral not to revert to the same old elements within a design to make sure things are visually interesting for your viewers.
Variety keeps things engaging. It stops designs from being stagnant, predictable and downright boring — all things you want to avoid. By making sure elements are varied you stop designs from feeling monotonous and uninspired.
The easiest way to do this is through juxtaposition and contrast. Place bright colours next to lighter hues, text next to images, round shapes next to square ones. By doing so you can keep viewers engaged and your design interesting.
Check out this example of variety at play on designer Kennard Lilly’s website:
On the left side of the screen we see imaginative colours and shapes; on the right we see a laptop. By blending the concrete and the imagined, she creates visual variety and uses the juxtaposition of patterns to draw the eye and keeps viewers engaged.
We've put unity last on this list for a reason—it only occurs when all the various elements within a design coexist to form a holistic experience that’s pleasing to the eye.
Unity adds order and makes a piece feel like a coherent whole, instead of a messy combination of individual parts that just so happen to exist on the same page. It's developed both visually and conceptually.
To achieve unity you need to look out for three things: whether the elements you’ve used have a good reason to be there, whether they work together, and whether the message or concept you’re trying to display is communicated clearly.
By making sure your designs united you reduce cognitive load and ensure viewers actually understand whatever it is your design is trying to achieve.
Hopefully, these 13 design principles can help inspire you to take your creative work to the next level.
No matter what you’re designing—from product pages to actual products—if you take the time to learn and apply these concepts you’ll be firmly set on the path to success.
Remember, design is always evolving. Look at what other people are doing and think about how you can apply their techniques to your own work: it’s a great way to hone your design skills.
Now, all that’s left is to put your creative cap on and create your own work of art. Happy creating!
Looking for an alternative to Gumroad to sell products online? Let's take a look at the 10 best alternatives in 2022.
Video marketing can do wonders for your ecommerce site. Check out this guide for an overview and examples you can use for inspiration!
Looking for the best form builder for your business? In this guide we look at how SurveyMonkey, Surveygizmo and Paperform stack up.
Online learning is one of the fastest growing industries in the world. Want to get in on the action? Check out this guide to setting up an online scho...