Skip to main content
Loading Explore guides…
Visual Design Principles · Acedra
Home
Explore
Art
Visual Design Principles
Sign in to save
Chat
If YouTube asks you to sign in, open the video on YouTube.
Watch on YouTube
Reload player
Transcript
58 segments
Copy
Hide video
0:03
SPEAKER: There are a few fundamental design concepts you'll need to understand as we start refining our mockups. In this video, we'll cover the importance emphasis and explain how you should decide what to emphasize in your designs. Let's get started. At a basic level, emphasis means something that attracts attention. Emphasis is all around us, and we depend on it to translate information for us in everyday life. For example, imagine a public speaker giving a speech
0:30
without placing any emphasis on any of the words, or a pianist playing a song without emphasizing any notes over others. The lack of emphasis would lose the audience's attention and make it challenging for them to follow along. The same idea applies to visual design. We use emphasis to intentionally guide a user to what we want them to pay attention to. In our mockups, we want to use emphasis to provide cues that indicate to the user what is more important or less important on each page
0:56
or screen. So, how do we give something emphasis in visual design? To emphasize one part of your design over another, give it more visual weight. Visual weight is a measure of the force that an element exerts to attract the eye. Using variables like size, color, or contrast can give an element greater visual weight. No matter the item, everything has a visual weight. To understand what I mean, check out this mockup created by Josh, a UX designer at Google.
1:26
It's for an app called Zest that helps users track spices, herbs, and seasoning. The mockup design is fairly simple, but it uses design elements and principles to create emphasis exceptionally well. By using whitespace and a simple typeface, users are naturally attracted to the app's main content, its images of spices, like turmeric and harissa. The images are large and colorful. They have a very heavy visual weight compared to the surrounding text and backgrounds.
1:54
So you might be wondering how you should decide what to emphasize or add visual weight to in your own designs. The key considerations to think through when you're deciding what to emphasize are, where do I want to draw the user's attention? And, what are the user's goals? Using emphasis strategically can make it easier for your users to complete tasks, and that creates a great user experience. So let's examine the role emphasis plays to get users to take action.
2:21
It should be easy for users to find any action or important information they need to complete a task. As you examine your user journey, you might ask yourself, how am I making it easy for users to complete the tasks they need to do? This might involve adjusting your design's navigation based on the results of any usability studies you conduct at this point. Basically, if someone isn't finding a critical feature easily during the study, you want to find a better way to emphasize it.
2:48
Check out this mock of the book appointment screen from our dog walker app. What's drawing the most attention and why? We use the color orange to highlight the Book Sarah button. Booking a dog walker is one of the most important steps in the user's journey, so we emphasized it more than the About section and the customer reviews. It's not that these other sections aren't important. We just really wanted to highlight the primary action that we want users to take on the screen.
3:16
The color orange is bold and draws attention to this key feature. And the size of the button is larger than the surrounding content. These visual design decisions are all part of emphasizing this button and guiding the user to take action. As we move forward, you'll get hands-on practice with deciding exactly what to emphasize in your designs. Awesome. Now we've covered how to use emphasis in your designs. Next up, we'll explore another visual design principle, hierarchy.
3:47
By now, you might be starting to notice that good visual design comes from understanding visual design principles. Those principles are like tools that a designer uses to create visually appealing mockups and prototypes. To get started, let's define hierarchy. Hierarchy is a visual design principle that orders elements on a page and highlights them by their importance. The goal of hierarchy is to guide the user. Adjusting size and color is a common way to distinguish hierarchy in visual design.
4:16
Hierarchy in UX design can help a user understand the relative importance between different elements. You might be wondering how hierarchy is different from emphasis. Although they're definitely related concepts, hierarchy refers to a group of elements that are organized in order of importance. On the other hand, emphasis is about making one element stand out from the other elements surrounding it. Think about when you browse the homepage of a media outlet to catch up on the news.
4:42
You usually check out the headlines first, right? Most people do this to get a quick idea of what each story is about. The headlines are the elements that stand out on the page because they have the most importance. Below the headline is a summary of the story, which usually has a font that is smaller and less bold. In this case, the typography created a hierarchy on the home page. So why do we need hierarchy anyway? Well, in UX design, we always want
5:08
to make it clear to the user where to focus first and what action to take. Hierarchy helps point users to the first step they should take in their user journey. With hierarchy, the more important the information is, the more we should make it visually prominent. We apply a hierarchy when we create mockups to help users navigate an app effortlessly. Hierarchy helps them find the most relevant information and main action buttons first. Hierarchy also guides the user to the most important places
5:37
on the page. Let's revisit the dog walker app to understand how this applies. This page is part of the second step of booking an appointment. Under the three icons indicating the steps for booking an appointment, there's the text, Select the dog walker. Ordering this text at the top of the page indicates that most of the content underneath it will contain information about this process. Sizing the text larger makes that point even clearer. As we move down the page, there's
6:07
a next line of text, Availability based on your date and time. This text is smaller than Select the dog walker, but larger than the details about each dog walker. It's important for the user to recognize that all of the dog walkers listed are available at the date and time they selected. Also, notice that the names of each dog walker are in a darker gray color than the rest of the text associated with that dog walker. Remember, hierarchy highlights elements on their page
6:33
by their importance, so this subtle design choice indicates to the user that they should focus on the name of the dog walker first and then look at the other details. This is similar to the technique used in the headline example we discussed earlier. Hierarchy also affects accessibility for users. Earlier, you learned about assistive technologies that can help users focus on the most important information on the page, like screen readers. By using accessibility annotations in your wireframes,
7:02
or in this case, mockups, users will be able to read elements in a hierarchical order. Accessibility annotations create a visual hierarchy by indicating the order that elements on a screen should be read. In addition, these annotations can help users understand the order in which they should interact with each element. Great. You now know about hierarchy and how to apply it in your mockups. You've already explored two visual design principles, so it's on to the next, scale and proportion.
7:35
By now you're starting to get a feel for the different visual design principles that can help improve your mockups. Earlier, we explored the concepts of emphasis and hierarchy. In this video, I'll start out by explaining the basics of scale and proportion, which are two different but related ideas. Then, we'll go over how to apply scale and proportion to your mocks. Finally, we'll discuss how accessibility should be kept in mind for scale and proportion. Let's get started.
8:03
First, let's define scale. Scale is a concept that's used to explain the size relationship between a given element and the other elements in the design. The most important elements in a design are bigger than the less important elements. So, why is scale important for UX design? Well, there are a few reasons. First, manipulating the size or scale of a single element like a button is a great technique for creating emphasis. To emphasize an element, you can use scale
8:32
to make that element larger than the other elements around it. Think of how using a magnifying glass can instantly enlarge your view of an object. In the same way, creating variation in size of certain elements in your design can help you highlight specific areas. In addition, scale can show similarity and contrast between elements. If two elements are the same size, they are perceived as being equal or similar. However, if two elements have a large contrast in size,
9:01
they are perceived as being different from one another. Lastly, scale can be used to communicate visual hierarchy. Earlier, you learned how hierarchy is used to communicate the order of importance for the information on a page. Scale helps to create visual hierarchy. For example, typography can be easily changed using scale to emphasize the content on a page in different ways. This image shows how different type scales can be used to create headlines.
9:29
The most important headline, headline 1 or h1, has the largest type scale and appears at the top of the scale table. h1 headings are usually used to convey the most important content. There are even websites where you can enter your base size of font and the website will provide you with a type scale, suggesting sizes of font for more and less important information. OK. Now that you've been introduced to scale, let's discuss the concept of proportion. For UX designers, scale and proportion
9:58
are very closely related ideas, but they're not exactly the same. Proportion is about the balance or harmony between elements that are scaled. In other words, proportion helps UX designers make sure the size relationship between elements makes sense. This means that the elements appear to be in balance with one another. If one element in your design increases in size, then the other elements should also increase in size at the same rate in order to remain proportionate.
10:26
Check out this row of icons from our dog walker app. These three icons have the same proportions, but imagine we increase the scale of the first icon. Notice how out of proportion they are now? So, how do we make sure the proportions in our designs are balanced? One way is to review the page after changing the scale of a particular element to make sure the overall balance of the design still seems correct. Another way to maintain consistent scale proportions
10:54
is by including certain size specifications for a design in a design system. We'll discuss design systems in much more detail later on. Great. You're learning the basics of scale and proportion, but how do we apply these principles to our mockups? Let's revisit the dog walker app as an example. On this page of the app, the user has already selected the day and time their dog needs to be walked. Now, they need to select the dog walker. Notice how the images of the four dog walkers
11:25
are the same scale? As we learned earlier, when elements, like these photos, are the same size, they are perceived as being equal or similar. In addition, there is balance or harmony between these elements, which means they are proportional. However, if we change the scale of the images of the dog walkers, they quickly fall out of proportion. If you're like me, looking at these different sizes of images might make you cringe. In addition, the different sizes place
11:54
an emphasis on Michael's and Melissa's profiles because their images are larger than the others. Remember, if one element in your design increases in size, then the other elements should also increase in size at the same rate in order to remain proportionate. Awesome. You've learned about two more visual design principles, scale and proportion. Coming up, we'll go through the principles of unity and variety.
12:23
In this video, we'll discuss a couple more visual design principles, unity and variety. Let's jump right in. Unity measures how well elements of your design work together to communicate an idea. Design with unity is pleasing to look at, clear to the user, and easy to understand. Unity can be created by using a consistent color scheme, complementary fonts, and consistent spacing. On the other end of the spectrum is variety, which is about varying the elements in your design to break up monotony.
12:57
Using diverse elements can add energy and pizzazz to a design. There are countless ways to incorporate variety in your designs, like using different shapes, colors, textures, and patterns. Do you have any walls in your house that are painted in accent color? Or have you ever paired brightly-colored shoes with a plain outfit? If so, you probably understand how variety can help break up predictable patterns. During the beginning stages of your low-fidelity wireframes,
13:27
creating unity or variety is not the focus. When you create your lo-fi wireframes, your buttons and graphics are usually just black and white placeholders. During this stage, you're more concerned about how features function together and less about their appearance. When you eventually get to designing mockups, you can focus on the whole picture. Ask yourself questions like, did I use colors in a consistent and purposeful way? Did the typefaces I use work well together?
13:58
And, is there enough variety to keep my design interesting? Keep in mind that neither unity or variety are good or bad. They're parts of your design that require one or the other or even both. Variety can be used strategically to add visual weight and create emphasis. Think about an app for a news outlet. The most effective media outlet apps have unified designs. Most stories will use dark text on a white background. Now imagine if there was a breaking news report about the weather.
14:30
The breaking news story background might turn a bright color like red or yellow. Adding this variety to the notification helps break the consistency and lends more urgency to the story. These elements a variety help the breaking story stand out, but they only work because the styles of the other stories are unified. But variety doesn't have to take away from unity. In fact, variety and unity can work together in harmony. Like we discussed in an earlier video,
14:58
too much uniformity can make it difficult for users to know where to focus. With too much similar typography or iconography, users can find it hard to identify text and important information from a sea of identical design elements. A balanced combination of unity and variety can provide visual cues for users while maintaining their attention. You want to make sure it's visually gratifying to use a product, too. Variety and texture, color, typography, and shape can make all the difference.
15:30
This variety can add emphasis to guide users to press a button or divert their attention to a section of a page. But be careful. Too much variety can reduce harmony and make it harder to read important info. The key is balance. Let's quickly think about how unity and variety come into play in our dog walker app. Check out the mockup of our homepage. There is a consistent orange color scheme and even spacing between elements. This unity makes the home page pleasing to look at
16:00
and easy to understand. Variety also plays an important role here. Most of the design is white or light gray, but the Choose a time button is orange. This variety in color adds emphasis that guides the user to press this button. All right. You've learned about so many visual design principles, like emphasis, hierarchy, scale, proportion, unity, and variety. There are many more visual design principles you can learn on your own as you continue on your journey to becoming a UX designer.
16:32
I encourage you to stay curious and keep learning.
16:38
So far in this part of the course, we've been discussing visual design principles. Now, we're ready to explore some more complex concepts. In this video, we'll discuss a psychological principle called Gestalt. You might remember learning about gestalt in an earlier course, but now it's time to learn more in-depth. To refresh your memory, Gestalt principles describe how humans group similar elements, recognize patterns, and simplify complex images when we perceive objects.
17:07
In other words, the human brain will attempt to simplify and organize complex images by subconsciously arranging the parts into a cohesive whole. Basically, your brain is wired to see structure, logic, and patterns. Gestalt principles help us better understand how all the individual design choices we've been making come together and how they might be interpreted by users. Gestalt principles also offer designers a way to step back and review their work from a different perspective.
17:36
It's easy for designers to get so caught up in the details that we lose sight of the overall project. Applying Gestalt principles to our designs allows us to really notice how our design elements work together. Similar to how we can use multiple visual design principles to create emphasis, several Gestalt principles can be applied to one mockup design at the same time to make visual connections. In this video, we'll cover three of the Gestalt principles--
18:02
similarity, proximity, and common region. It's important to note that there are a lot of Gestalt principles, including closure, continuation, and symmetry. We'll only cover similarity, proximity, and common region in this video, though, because they give the broadest overview for how Gestalt theory is used in UX design. OK. Let's define these principles and explore how they apply to design. We'll start with similarity. The principle of similarity states
18:32
that elements that look similar are perceived to have the same function. In other words, similarity focuses on things that look or behave the same way and how the user will relate those items. Let's examine how our dog walker app uses the principle of similarity. Here, you'll notice that we use orange to symbolize actions. The dog walker tab across the top of the screen, the selected dog walker checkmark, and the Next button are all actions the user can select and they all use the same color.
19:02
Even if we go to a new page of the app, the color orange still continues to point users to the action they need to take. This is an example of how color is used to group what we see. Your brain automatically groups these orange elements. Because they are the same color, they are perceived to have the same function. Another example of the similarity principle in action is how every circle on this page represents a user profile. All of the circles have the same visual weight on the page.
19:33
Whether the user has a profile picture like Sarah M. or uses a first initial Alice or Sal, your brain automatically makes the connection that these similar shapes represent the same idea, a user profile. You'll instantly make this connection when you see other circles of this size in the app. Next, let's explore the principle of proximity, which states that elements that are close together appear to be more related than elements that are spaced farther apart.
20:02
In other words, humans perceive objects close to each other as connected. The way sighted people and screen readers read is an example of the proximity principle in action. The lack of space between letters or characters tells you that those letters or characters form a word. And the space between and after those groups of letters or characters let you know that a new word has started. The principle of proximity is also used in our dog walker app.
20:29
When a user is scheduling an appointment with a dog walker, the app provides a horizontal list of the names of the user's pets, Charlie, Broccoli, and Rover. The user selects which dogs need a walk. The closeness of these buttons lets you know that they're related. And the closeness of the list of dogs to the question, Who is going for a walk? lets you know that the question is related to this list of dogs. On the other hand, this question and list of dogs
20:56
is far away from the Recurring booking box. The space between these elements indicates that they are not related. OK, one more principle to cover. Finally, there is the principle of common region, which states that elements located within the same area are perceived to be grouped together. Although it's connected to the principle of proximity, the principle of common region differs because it has less to do with spacing elements apart and more to do with using visual elements to form sections.
21:25
Here, we have a mockup of an app created by a UX designer at Google named Kaiwei. The app is called Rostery, and it was created to help college professors remember their students' faces and names in a fun and simple way. On this screen, the app is broken into three sections, the navigation bar at the top, the memorization progress graph, and the names of the students the professor wants to remember. Each of these sections contains multiple elements like graphics, photos, and text.
21:54
Using the principle of common region, your eye automatically groups the content that's in the same area together. In this example, Kaiwei added a border around each group of elements, which is an easy way to create a common region. Let's also check out the principle of common region in the dog walker app. I used a blue background behind our selected content to create a common region. The user is able to quickly identify the items on a blue background as they're selected dog
22:23
walker and the content on the white background as unselected items. The key takeaway from Gestalt principles is that we should make sure that our designs work with the way our minds naturally organize elements. When used thoughtfully, Gestalt principles can help create visual balance. Visual balance is the sense that a design is equally weighted on both sides of its emphasized center. Visual balance gives the design a feeling of completeness.
22:51
You can learn more about visual balance in the reading. And that's it for now. You're starting to think a real UX designer and can apply these gestalt principles to your own mockups.
23:05
At this point your mockups have come a long way since the start of the course. You've added elements to your mocks, applied visual design principles, and made sure your design communicates a clear and cohesive idea. Now it's time to take a pause. Even the most experienced designers pause and review their progress at various points. It's often easier to figure out how far you've come and how much you have left to do when you have a checklist, but what should you include on that checklist?
23:32
I'm going to provide you with some things to keep in mind. There should be four main categories on your checklist-- detailed view, page-level view, function-level view, and app-level view. It's helpful to start with small details and work your way up to the big picture. So the first category on our checklist is the detail view. Focusing on the small things first allows you to catch places where you might have made mistakes with elements. It's helpful to review individual elements
24:01
like typography, color, and iconography to check if they're consistent throughout your mocks or if they're out of order. For example, in the dog walker app, when checking my work, I found one icon where it accidentally used orange F18530 even though I used orange FA7B17 throughout the rest of the design. Second, use a page-level view to check if all of the elements on each page are balanced and unified. Check out the page from a bird's eye view to see if anything is out of place.
24:36
This is also a good time to consider the scale and proportion of the elements within a page. For example, when I first created the Book appointment page of my dog walker app, I invented the bios of each dog walker to try to make their names stand out. However, after doing a page-level view, I felt like the bios were out of balance with the rest of the page and decided to align everything on the left instead. In addition, in the first version, the checkmark icon stood alone.
25:06
To help improve the balance of the page, I added a gray circle around the checkmark icon. Next, review your designs using a function-level view. In other words, you need to make sure your designs are operational. In particular, check to make sure you have included all of the navigation elements in your designs so that it's ready for prototyping. Ask yourself questions like does each page have a way to move forward and backwards? Is there a button to perform the main action for the page?
25:39
And do I need a button to allow users to undo an action? For example, when I review pages of the dog walker app at the function level, I'm checking for elements like the back arrow in the upper-left corner and the X in the upper-right corner. I'm also checking to make sure I included a button that allows users to perform the main action for the page, which, in this case, is to book Sarah, the dog walker. Lastly, take a step back and review your design as a whole.
26:07
This is called an app-level view because you review the entire app. Thinking about your designs from the big picture helps ensure that your product overall looks and functions the way you want. To do this, I recommend zooming out in Figma so that you can review multiple pages of your design at the same time. For example, here is an app-level view for the dog walker app I've been working on. You've seen many of these pages as examples in different videos, but here is the app design altogether.
26:35
I've been iterating on these mockups while you've been working on yours, but I still have a long way to go. As part of the app-level view, I'll check for things like consistency in how the product looks overall. For example, the three icons across the top of my app page should stay in the same position no matter what page I'm on. There you have it. You've made it through the four-step checklist for reviewing your design. This is yet another moment to iterate on and improve your designs.
27:02
Your mockups should be getting better and better with each tweak you make. Keep up the great work. DAVE: Congratulations on finishing this course from the Google UX Design Certificate. You can access the full experience, including job search help, and start to earn your certificate by clicking on the icon or the link in the description below. Watch the next video in the course by clicking here, and subscribe to our channel for more from upcoming
Here to help you learn
Sign in to keep a private conversation with your course tutor.
Ask me anything about the material…
Sign in to chat