{"id":12513,"date":"2025-09-26T07:54:29","date_gmt":"2025-09-26T06:54:29","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=12513"},"modified":"2025-10-24T12:03:20","modified_gmt":"2025-10-24T11:03:20","slug":"the-13-visual-principles-of-design","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/the-13-visual-principles-of-design\/","title":{"rendered":"The 13 visual principles of design (with examples)"},"content":{"rendered":"\n

There\u2019s a lot to remember if you\u2019re going to create a successful design as a UI designer. Which is why we\u2019ve compiled this list of visual principles of design. Sometimes having these foundational elements separated out so you can understand them individually can make all the difference.\u00a0<\/span><\/p>\n

Here, we introduce you to thirteen visual principles of design, including what they mean, why they matter, and how to use them. Let\u2019s get started!\u00a0<\/span><\/p>\n

What are visual principles of design and why do they matter?<\/strong><\/h2>\n

Visual principles of design are the fundamental building blocks of all you do as a UI designer. They matter because they ensure your user interfaces are usable and enjoyable. Whether it\u2019s making sure to achieve hierarchy or contrast or choosing the best colours for your project, all of these things should be considered while you\u2019re designing.\u00a0<\/span><\/p>\n

While you probably won\u2019t examine them each individually like we do in this article, instead dealing with the design as a whole, they all play an important role. And you should know about each of them so you know how to place elements on a website or app. In particular, they help shape user experience, making your project more usable and more understandable through their use of these visual principles.<\/span><\/p>\n

The 13 visual principles of design (with examples)<\/strong><\/h2>\n

1. Colour\u00a0<\/strong><\/h3>\n

Colour in UI design is used to convey emotions, add variety, and include visual interest. It\u2019s also used to differentiate one website from another. Colour is extremely psychologically important and colour theory heavily influences our understanding of the use of various colors.\u00a0<\/span><\/p>\n

For example, if you haven\u2019t seen a stop light before you may be surprised to learn that green means go and red means stop. This is learned behaviour, but it becomes so ingrained that we can use red and green in other contexts to convey stop and go too. For example, see the use of the color red in the example under #3 Contrast below. That example wouldn\u2019t work if red didn\u2019t mean stop to those of us familiar with red lights.<\/span><\/p>\n

2. Typography\u00a0<\/strong><\/h3>\n

Typography isn\u2019t the content of your text but how that text looks. It\u2019s the way the text is arranged on the page including fonts used, spacing and size, and the way different text, like header and body copy, relate to one another. Different typefaces convey different things and while you can usually stick to the classics, some things that are especially zany or original might call for different typefaces.\u00a0<\/span><\/p>\n

For example, on the page dedicated to <\/span>Lilo & Stitch<\/span><\/i> on the app Disney+ there\u2019s a lot going on, but because only the Disney logo and the <\/span>Lilo & Stitch<\/span><\/i> title are in odd fonts, it works. The <\/span>Lilo & Stitch<\/span><\/i> font in particular, is a bit strange but, because it\u2019s bigger than everything else and works perfectly for the movie it\u2019s attached to, it doesn\u2019t raise eyebrows.\u00a0<\/span><\/p>\n

 <\/p>\n

\"Disney+<\/p>\n

 <\/p>\n

3. Contrast<\/strong><\/h3>\n

Contrast is all about making elements of your design stand out, whether it\u2019s through color, size, or additional aspects. Contrast is a great way to emphasise different elements of your design.\u00a0<\/span><\/p>\n

For example, using red for a button for an action that can\u2019t be undone is a great way to make sure that button stands out and evokes caution, such as in the world clocks app below. The app has a red-button next to each city when you\u2019re in edit mode. Hit it and that city is gone.<\/span><\/p>\n

 <\/p>\n

\"World<\/p>\n

 <\/p>\n

Contrast is an important aspect of accessibility, as a lack of contrast can make the details of your design difficult to see. In particular, text may not be able to be read for people with visual impairments, so make sure your contrast is sufficient.\u00a0<\/span><\/p>\n

<\/h3>\n

 <\/p>\n

4. Balance\u00a0<\/strong><\/h3>\n

The design elements you lay out on a page create balance because each element has a weight to it, whether soft and fleeting or heavy and eye-catching.\u00a0<\/span><\/p>\n

This balance can be symmetrical or asymmetrical. When you use design elements that each carry equal weight, such as equal squares across a page, you\u2019ve created a symmetrical design. This kind of design makes people feel tranquil and serene. When you use design elements that carry different weights, such as squares of different sizes, you\u2019ve created an asymmetrical design. This kind of design makes people feel tense or edgy.\u00a0<\/span><\/p>\n

For example, TranscriptionPuppy opts for a symmetrical layout describing their transcription process and why you should choose them.<\/span><\/p>\n

 <\/p>\n

\"Screenshot<\/p>\n

 <\/p>\n

On the other hand, the razor company Harry\u2019s opts for an asymmetrical layout on their home page with an image of their razors.\u00a0<\/span><\/p>\n

 <\/p>\n

\"Harry\u2019s<\/p>\n

<\/h3>\n

 <\/p>\n

5. Emphasis<\/strong><\/h3>\n

Emphasis stresses whether an element stands out on the page. Parts of a design can either be important and, therefore, emphasised, or unimportant and, therefore, deemphasised. Different levels of emphasis will either increase or decrease the impact of certain pieces of information through color, contrast, scale, positioning, and more.\u00a0<\/span><\/p>\n

For example, on <\/span>Fly.io<\/span><\/a> homepage below they emphasise the headline in big, bold type followed by a more in depth description. But you\u2019ll probably look at the purple \u201cDeploy in 5 minutes\u201d button before the in depth description because of its bright purple color.<\/span><\/p>\n

 <\/p>\n

\"Fly.io<\/p>\n

 <\/p>\n

6. Visual Hierarchy<\/strong><\/h3>\n

Another principle that goes with emphasis is visual hierarchy. Visual hierarchy dictates that content that is more important should appear more important. So different levels of emphasis should go together to create the order in which people take in the information on a website or app. This can be seen in headings, subheadings, and body text on pages.\u00a0<\/span><\/p>\n

For example, notice the hierarchy amongst the various pieces of text in the below website, with \u201cBook your escape today\u201d bigger and bolder than the welcome message, and the welcome message bigger than the body copy below it.<\/span><\/p>\n

 <\/p>\n

\"Wynn<\/p>\n

 <\/p>\n

7. Repetition<\/strong><\/h3>\n

Repetition means repeating something in a design, such as the same colors, shapes, design element, typeface, or other element. It can bring unity to a design and can reinforce ideas when needed. In UI design this can be especially important as designers place the logo of the business and the menu items in the same place on every page.\u00a0<\/span><\/p>\n

For example, on this page you\u2019ll see the logo for the UX Design Institute in the top left of the page followed by a series of menu items. If you go to another page on the site, these will remain in the same place even if the content in the body of the page is completely different. Articles on the UX Design Institute blog are also good examples as the headings create a repeated pattern that can be identified by readers as meaningful.<\/span><\/p>\n

8. Rhythm<\/strong><\/h3>\n

Related to repetition is the visual principle of rhythm. The spacing between repetitive elements create a sense of rhythm, just like musicians create rhythm in the gaps between notes. There are five types of basic visual rhythm: random, regular, alternating, flowing, and progressive.\u00a0<\/span><\/p>\n

A random rhythm has no regular interval, such as pebbles on a sidewalk. A regular rhythm has consistent regular space between each element that can be created with a grid. An alternating rhythm follows a set pattern of variations between elements, such as the checkerboard pattern on a chess board. A flowing rhythm has repeated elements that follow bends or curves, such as the way waves of the ocean flow. A progressive rhythm changes as it goes along. For instance, if we have a page full of squares but each subsequent row is slightly larger, this is an example of progressive rhythm.<\/span><\/p>\n

In the screen below from Spotify each row has a regular rhythm to it that gives equal weight to each element in the pattern.<\/span><\/p>\n

 <\/p>\n

\"Spotify<\/p>\n

 <\/p>\n

9. White Space<\/strong><\/h3>\n

White space, also called negative space, is the space around your design elements. In effect, it\u2019s blank. But blank doesn\u2019t mean bad. In fact, both the positive space of your design and the negative space of the white space around it, called figure\/ground, work together to create the complete design. The white space helps the design have the space to breathe and makes design elements easier to see and understand.\u00a0<\/span><\/p>\n

The clothing brand Museum of Peace & Quiet exemplifies the use of white space. A big hero image of someone wearing one of their sweatshirts is on the right but on the left, the place where most users will expect content, is blank until the final three lines on the page. As a result, the Museum of Peace & Quiet\u2019s home page lives up to its name.\u00a0<\/span><\/p>\n

 <\/p>\n

\"Museum<\/p>\n

 <\/p>\n

10. Unity<\/strong><\/h3>\n

Unity is all about creating a visual and conceptual sense of a harmony. Design elements should have a relationship to one another and unity helps ensure that they work together effectively. Good unity guarantees messages are being relayed in a clear, coherent manner and that they are of high authority.\u00a0<\/span>For example, Ethan Allen\u2019s home page showcases everything in neutral colors with the exception of the green 25% off box that\u2019s right in the middle, but even that isn\u2019t a showy color. The whole has a calming visual and conceptual unity.\u00a0<\/span><\/p>\n

 <\/p>\n

\"Ethan<\/p>\n

 <\/p>\n

11. Scale<\/strong><\/h3>\n

Scale is about using the size of an element to signal its importance in relation to other elements in a design. The reason for this is simple: the bigger the element, the more likely it is to be noticed and, therefore, deemed important. Having a range of sizes also creates variety within your design.\u00a0<\/span><\/p>\n

For example, on the Target home page below you can tell what\u2019s most important and what\u2019s less important by the size of the boxes each element of the website occupies.<\/span><\/p>\n

 <\/p>\n

\"Target<\/p>\n

 <\/p>\n

12. Pattern<\/strong><\/h3>\n

Patterns are the same elements being repeated in a design. This can be seen in wallpaper and floor tiles for instance. In UI design, however, it can also refer to the pattern for how various elements are designed. For example, top navigation or sending a text to a friend are both design patterns that most users have experienced.<\/span><\/p>\n

13. Alignment\u00a0<\/strong><\/h3>\n

Alignment is the way different elements are arranged on a page. UI designers typically use a grid to organize everything, making sure that elements are grouped and arranged in a balanced, structured pattern. Even if the page has chaotic design elements, you must do so purposefully, using a grid to create order from the chaos.\u00a0<\/span><\/p>\n

For example, in any newspaper or magazine online, things will be neatly aligned in columns and rows. Take the New York Times movie reviews below. Every entry has a heading and body copy that is left aligned, followed by an image from the film.\u00a0<\/span><\/p>\n

 <\/p>\n

\"Screenshot<\/p>\n

 <\/p>\n

\n\t
\n\t\t
\n\t\t\t
\n \n

[GET CERTIFIED IN UI DESIGN]<\/p>\n Take our Professional Certificate in UI Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

<\/h2>\n

Further reading<\/strong><\/h2>\n

If you\u2019d like to learn more about UI design, including the visual principles of design, take UX Design Institute\u2019s <\/span>Professional Certificate in UI Design<\/span><\/a>. It will teach you everything you need to know to launch a career as a UI designer.<\/span><\/p>\n

And if you want to read more from the blog, check out these posts:<\/span><\/p>\n

How to design intuitive <\/span><\/a>user interfaces<\/span><\/a>, <\/span><\/p>\n

What are the Gestalt principles and how do designers use them?<\/span><\/a>, and<\/span><\/p>\n

7 fundamental UX principles all designers should know<\/span><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Design that feels intuitive doesn\u2019t happen by accident. Behind every polished interface are key visual principles that guide how elements are placed, sized, and styled. In this article, we break down 13 essential principles of design with real-world examples, showing you how to use them to create interfaces that are not only beautiful but also functional.<\/p>\n","protected":false},"author":35,"featured_media":12525,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[273,271],"tags":[],"class_list":["post-12513","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to-guides","category-resources"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/12513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=12513"}],"version-history":[{"count":7,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/12513\/revisions"}],"predecessor-version":[{"id":12532,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/12513\/revisions\/12532"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/12525"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=12513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=12513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=12513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}