6 UX Design Principles Every Designer Should Know
What makes a design a good design?
What makes a design a good design? 🤔
Is it the designer’s name attached to a project? Is it the countless hours of work poured into designing a website? Can “good design” be quantified?
Good design reveals a command of the basics and is informed by established design standards — design principles. Good design is good UX design.
Design principles define how to use design elements on a page to communicate messages or evoke feelings. Randomly placed elements or a haphazard layout on a page does not equal good design. In fact, we’d assert that just because a composition “looks good” doesn’t make it a good design. Good UX design starts with UX research and a strong objective and is executed against your design knowledge.
Read our guide to UX design principles complete with UX design principle examples.
Table of Contents
Is Tech Right For you? Take Our 3-Minute Quiz!
You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals
Design Elements vs. Principles
A quick word on design elements and principles.
Design elements and principles are complementary terms.
Design elements are individual pieces that make up a design, like shapes, lines, texture, and white space. For example, a red rectangle Purchase button is a visual element using a shape and color.
On the other hand, a design principle is a guideline for using an element to build a layout, optimize a page’s composition, and maximize the overall user experience.
Design elements = What
Design principles = Why
You need both to create a good design. On to the main event.
6 UX Design Principles for Designers
The design field is a behemoth, and there are many design principles! Think about it: there’s visual design, UI/UX design, graphic design, video game design, fashion design… the list keeps going and so do the design principles. The must-read designer’s encyclopedia, Universal Principles of Design, counts at least 125 design principles. 😲
Does that mean you should learn the 100+ principles? Maybe. Maybe not. According to Universal Principles of Design, designers should use design principles to improve usability by minimizing users’ cognitive load and decision-making time. If you need all 125 principles to get the job done, we salute you. The more you learn, and the more you practice — the better UX designer.
While you ponder this great undertaking, take note of our design principle cheat sheet filled with the six basic principles you’ll use most often.
(Back to top.)
Hierarchy
Hierarchy shows up a lot in UX design, as it creates an order of visual importance.
“Increasing the visibility of the hierarchical relationships within a system is one of the most effective ways to increase knowledge about the system.” ~ Universal Principles of Design
Designers can build a hierarchy with photos, graphic elements, and text. As a general rule, important elements or elements that you want to call the most attention to are placed prominently at or near the top of the design.
Stay tuned for a few UX design principle examples at the end of the article that use font and graphics to create a hierarchy.
Emphasis
Emphasis, as a design principle, works hand-in-hand with hierarchy to highlight information in a design. The goal of emphasis is to call the viewer’s attention to a particular design element. This could apply to a button, link, image, or other piece of content, among other things. Great designers emphasize elements on a page to influence a user’s journey and support the overall user experience.
Balance
The principle of balance dictates that visual elements are distributed evenly, either top to bottom or left to right, throughout a design. Distinct elements carry visual weight, so balance creates a sense of structure. On the other hand, you’ll notice that imbalanced plans feel thrown together.
Proximity
Proximity is a design principle also referred to as the Gestalt principle of perception. The basis of proximity is that elements grouped can be perceived as related and vice versa. “The grouping resulting from proximity reduces the complexity of designs and reinforces the relatedness of the elements. Conversely, a lack of proximity results in the perception of multiple, disparate chunks, and reinforces differences among elements,” according to Universal Principles of Design.
Contrast & Similarity
Contrast and similarity are two sides of a coin. Contrast is a distinct difference between two or more elements. Contrast also improves the readability and legibility of text. Comparatively, similarity provides consistency, creating visual patterns viewers can use to predict content.
Proportion
The principle of proportion refers to the size of one element compared to another. The size of items in comparison to other elements helps designers create focal points and direct the user’s attention to elements of interest. If elements on a page share the same proportion, however, that would signify equal levels of importance.
Hierarchy, emphasis, balance, proximity, similarity and contrast, and proportion work together to create a well-rounded UX design. Proportion and emphasis help to establish hierarchy, while proximity groups like topics together for organization. Similarity and contrast further communicate how elements are related to one another.
Is Tech Right For you? Take Our 3-Minute Quiz!
You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals
UX Design Principle Examples
Put your design thinking cap on and let’s take a look at web designs from a designer’s perspective to better understand how specific elements and principles impact UX.
Apple
Apple sets the standard for UX design.
Most people will recognize Apple. You may even be reading this article on an Apple device! But let’s look at Apple’s homepage from a designer’s perspective.
The header text “iPhone 14 Pro” is featured prominently at the top of the page. The font is much larger than “Pro. Beyond.” as well as two buttons, creating a clear hierarchy of importance. The webpage’s designer probably wanted the viewer to know first, and foremost, the iPhone was important or worthy of their attention (especially considering that it is the only product displayed prominently in the frame).
Apple also scaled the size of the iPhone 14 Pro and placed it in the foreground to emphasize the new product. The stark contrast between the black background and the purple device also concentrates attention on the text and image.
Slack
Slack uses bold colors and graphics to achieve visual aesthetics and usability.
We’re not going to slack on this explanation. 😂
Starting at the top of Slack’s homepage, designers used a significantly larger font to create a hierarchy and emphasize the message — “Great teamwork starts with a digital HQ.” It’s bold, punchy, and signals to the viewer to ‘start here’. Furthermore, “digital HQ” is highlighted in a different color font. Upon further exploration, the viewer may surmise that designers drew parallels between “digital HQ” and “Slack,” inferring Slack is an online meeting platform.
The accompanying images are right-justified. The bold text leads the viewers from left to right to an illustration of the aforementioned digital HQ.
Medium
Simple yet effective, Medium balances striking design and usability.
Medium masterfully uses contrast to direct the user’s attention.
The top half of the page is a stark yellow background, and displayed prominently at the left-hand side (English readers read left to right!) is the site’s simple tagline “Stay curious.” Underneath is a call to action button — “Start reading.” The hierarchy, layout, and action prompt explain exactly what a user can expect on the site.
And, while technically not “white” space, designers used the negative space on the top half of the page to direct attention to the prompt. The assorted Ms on the right-hand side balance the page.
The Spruce
Spruce up your design with this UX design principle example.
The Spruce is a popular lifestyle media outlet. How do we know that? *Cleans browser history* The hierarchy of the site gives us a few hints.
The featured blog post “12 Living Room Trends to Watch for in 2023” is proportionally the largest element on the page. The font of the title and the image dominate over other elements on the page. Next, the site lists its statistics: “385 Million Annual Readers,” “1,700+ Products Tested,” “19,000+ Original Photos,” and “2,000 How-To Projects.” These statistics build industry authority and audience trust.
Goodreads
Goodreads isn’t just a resource for book recommendations. The website is a treasure trove of design ideas.
Goodreads’ website is a treasure trove of information for both readers and designers, but for now, we’re going to focus on how the platform supports the user experience. Goodreads’ designers strategically used white space, contrast, and proportion to direct the reader’s attention to its reading challenge.
Comparatively, the following content uses a smaller font and is not embellished by graphics.
What makes a good design? Great designers with empathy, a strong understanding of the UX design process, and basic design principles. If you’re ready to become a great designer and break into tech, sign up for Camp Skillcrush, a free coding camp. Join our free basics course today and start your learning journey with Skillcrush, the online coding and design school with a ❤️.
Is Tech Right For you? Take Our 3-Minute Quiz!
You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals
Desiree Cunningham
Category: Blog, UI/UX Designer, User Experience Design, Web Designer
