The 10 Principles of Visual Design (With Examples)

The 10 principles of visual design are color, contrast, hierarchy, repetition, typography, space, white space, balance, emphasis, and movement. Together, they decide whether a design communicates in the first few seconds — or gets scrolled past.

• Color — sets mood and communicates meaning
• Contrast — makes elements distinct and legible
• Hierarchy — ranks information by importance
• Repetition — builds unity and recognition
• Typography — gives words a visual voice
• Space — balances elements with the emptiness around them
• White space — lets a layout breathe
• Balance — distributes visual weight
• Emphasis — creates a single focal point
• Movement — guides the eye through the composition

These principles echo what the Nielsen Norman Group and the Interaction Design Foundation teach: visual design is strategic, not decorative. Every choice should improve both usability and aesthetic appeal.

If you are just starting out as a visual designer, these principles will carry your first few projects — paste this on the wall if you want to 💡. If you have a few years in the industry, treat it as a reminder for your designer’s-block moments. Throughout, ADPList mentor Emmanuel Olotu adds his perspective on each principle.

1. Color

Color sets the mood of a design, communicates meaning, and draws attention before a single word is read. Blue reflects calm, red portrays boldness, yellow stirs cheerful emotion.

Most colors in advertising carry near-universal associations, which helps audiences in different countries reach a similar understanding of the design. But some colors are interpreted very differently by certain audiences — so research your audience before committing to a palette. Our guide on selecting colors and fonts for your website is a practical place to start.

2. Contrast

Contrast is the juxtaposition of visually different elements — in size, color, shape, or weight — so viewers can instantly tell them apart. It is the principle that makes your design ‘pop’ 💥.

Contrast highlights what matters and guides the viewer’s eyes through your design effortlessly. Too little of it makes text hard to read and patterns hard to parse. Emmanuel explains that colors and shades must be contrasted properly to enhance visibility and legibility — run your palette through WebAIM’s contrast checker; WCAG recommends at least a 4.5:1 ratio for normal text.

3. Hierarchy

Visual hierarchy is the arrangement of elements in order of importance, so viewers know what to look at first, second, and third. Designers create it with font size, weight, color, spacing, repetition, and alignment.

A clear hierarchy directs your audience to the most important element before the supporting details — and prevents the ‘which element should I view first?’ symptom that makes people give up on a design.

"You can see it as the correct ranking of information in a design. This can also be achieved in a number of ways, but we will consider how to achieve it with the size and the weight of the elements." - Emmanuel

4. Repetition

Repetition is the reuse of the same colors, shapes, fonts, or patterns throughout a design to create unity and recognition. It is the principle behind every brand you can identify at a glance.

Humans remember what repeats: the awful song stuck in your head from the DJ’s playlist, the awkward fashion you bought because it was on every billboard, the newsletter shopping reminders 💸. Repetition triggers action and gives your design an identity. Emmanuel notes it might be the placement of:

• your brand icon,
• the usage of fonts, or
• the overall design tone.

5. Typography

Typography is the style and arrangement of type — typeface, size, weight, and spacing — that gives words a visual voice. It sets the tone of a design before anyone reads a word.

You know how a typo in a text message creates awkwardness, laughter, or sometimes anger 😆? That is how powerful letterforms are. Notice the eerie type on a horror movie poster versus the bubbly type on a comedy poster — the shapes and colors of the alphabet alone produce that impact. If type is the part of design you want to sharpen, a graphic design mentor can critique your font choices one-on-one.

6. Space

Space is the area between and around elements: positive space is the letters and patterns themselves, negative space is the emptiness around them. Getting the ratio right is what gives a composition balance.

As much as we need space in our lives, so do our designs. Would you understand a speech without full stops? Chances are you would leave the hall frustrated. Space gives the audience time to digest information — and gestalt psychology shows why: elements placed close together are perceived as related (the law of proximity), so the gaps carry meaning too.

7. White space

White space is the deliberately empty area between elements that makes your organization and hierarchy visible. It separates elements clearly so the audience can distinguish and connect them at a glance.

"This is useful in helping your design breathe–appear non congested. It can also prove to be very useful when developing brand identities as it help you carve out special meanings to your identity icon." - Emmanuel

8. Balance

Balance is the distribution of visual weight across a composition so no area overpowers the rest. Emmanuel explains it can be symmetrical (same weight on both sides) or asymmetrical (one heavy element offset by several lighter ones).

A balanced visual does not mean every element is the same size — that would be a bit odd, wouldn’t it? Balance through the colors, sizes, and patterns of your elements guides the audience’s eyes; a poorly balanced design misleads viewers away from the main element.

9. Emphasis

Emphasis makes the single most important element in a design unmistakable, using a striking color, a bold scale, or a central position to create the focal point. As Emmanuel puts it, emphasis helps the audience know what your main point is.

Before you start designing, brainstorm how to emphasize your main element. What best portrays it? What best conveys the message through it? Where should it sit? The element you emphasize first will carry the main message of the piece.

10. Movement

Movement is the path the viewer’s eye travels through a design. Choreograph it well and the composition reads as one story instead of scattered puzzle pieces.

"Movement must be done in a subtle way, it is just a way of making the audience accept the design as a single piece of information, instead of considering the many elements as scattered pieces of a puzzle." - Emmanuel

Keep adjusting your elements until the eye flows smoothly, and share the design with a few people before finalizing it. Different sets of eyes 👀👀👀 will spot the elements interfering with the movement — the same reason principles like Fitts’s law and Hick’s law on Laws of UX are worth keeping bookmarked.

Keep practicing the principles

Principles stick when you apply them: try them on a small piece next, like our walkthrough on how to make a great shadow in UI design, or explore where the craft can take you with the visual design career path.

And you don’t have to learn alone — book a free session with one of ADPList’s 40,000+ mentors, including UI design mentors who review portfolios and give feedback on work like this every day, across 140+ countries. Deciding where to get that feedback? Our comparison of the best mentorship platforms breaks down the free and paid options.

Contributor:
Emmanuel Olotu (ADPList Mentor)
Co-Founder at Watermacks
ADPList profile: adplist.org/mentors/emmanuel-olotu
LinkedIn: linkedin.com/in/emmanuel-olotu

Editor and writer:
Farah Radzi
Content Marketer and Writer at ADPList
LinkedIn: linkedin.com/in/famr