Understanding Visual Design Principles | Google UX Design Certificate

Summary

This video script delves into the principles of visual design for UX, emphasizing the importance of guiding user attention through design elements. It covers concepts like emphasis, hierarchy, scale, proportion, unity, variety, and Gestalt principles, illustrating how they enhance user experience and task completion. The script also introduces a four-step checklist for reviewing designs at various levels, ensuring consistency and functionality across an app.

Takeaways

• 🎯 Emphasis in design is crucial for guiding the user's attention to important elements and can be achieved through visual weight, such as size, color, or contrast.
• 🎼 The concept of emphasis is similar to emphasis in speech or music, where certain elements are highlighted to maintain audience engagement.
• 📐 Visual weight is the force exerted by a design element to attract the eye, and it can be manipulated to guide user attention.
• 🌟 The mockup of the 'Zest' app by Josh demonstrates effective use of emphasis through the use of large, colorful images and whitespace.
• 🔍 Strategic use of emphasis helps users complete tasks more easily, contributing to a positive user experience.
• 📘 Hierarchy in visual design orders elements by importance, guiding the user through the content in a logical sequence.
• 🔑 Understanding the difference between emphasis and hierarchy is key; emphasis singles out one element, while hierarchy organizes a group of elements.
• 📈 Scale in design refers to the size relationship between elements and is used to create emphasis and show the importance of elements.
• 📊 Proportion ensures a balanced relationship between elements of different scales, maintaining harmony and coherence in the design.
• 🔄 Unity creates a consistent and coherent design, while variety introduces elements that break monotony and add interest.
• 🌐 Gestalt principles help designers understand how users perceive and organize visual elements, promoting a more intuitive user experience.

Q & A

What is the fundamental concept of emphasis in design?

Emphasis in design is about attracting attention to certain elements intentionally to guide the user's focus. It's achieved by giving more visual weight to specific elements through variables like size, color, or contrast.

How does the lack of emphasis affect the audience in a public speech or a musical performance?

Without emphasis, the audience may lose interest and find it difficult to follow along, as there is no clear guidance on what is important or significant.

What is visual weight in the context of visual design?

Visual weight is a measure of the force that an element exerts to attract the eye. It can be influenced by factors such as size, color, and contrast.

Can you provide an example of how emphasis is used in a UX design mockup?

In the mockup for the Zest app, emphasis is used by making the images of spices large and colorful, which gives them a heavy visual weight compared to the surrounding text and backgrounds, naturally attracting users' attention.

What are the key considerations when deciding what to emphasize in your designs?

The key considerations are determining where you want to draw the user's attention and understanding the user's goals. Emphasizing strategically can facilitate task completion and enhance user experience.

How does the color orange function in the dog walker app's user interface?

In the dog walker app, the color orange is used to highlight the 'Book Sarah' button, drawing attention to this key feature and guiding the user to take the primary action.

What is the purpose of hierarchy in visual design?

Hierarchy in visual design orders elements on a page by their importance, guiding the user by making the most important information visually prominent.

How does hierarchy differ from emphasis in design?

While both concepts are related, hierarchy refers to organizing a group of elements in order of importance, whereas emphasis is about making one element stand out from the others.

Why is scale important in UX design?

Scale is important in UX design because it helps create emphasis, show similarity and contrast between elements, and communicate visual hierarchy.

What is the relationship between scale and proportion in design?

Scale and proportion are related but distinct. Scale refers to the size relationship between elements, while proportion is about the balance or harmony between elements that are scaled.

How can unity and variety work together in a design?

Unity and variety can work together by providing a consistent and harmonious design while also incorporating elements of diversity to break up monotony and add visual interest.

What are the three Gestalt principles covered in the script, and how do they apply to UX design?

The three Gestalt principles covered are similarity, proximity, and common region. They apply to UX design by helping designers understand how users group similar elements, recognize patterns, and simplify complex images, thus creating a more intuitive and cohesive user experience.

What is the significance of reviewing designs at different levels, such as detail, page, function, and app levels?

Reviewing designs at different levels ensures that the design is consistent, balanced, operational, and cohesive. It allows designers to catch mistakes, improve balance, ensure functionality, and maintain a unified look and feel across the entire app.

Outlines

00:00

🎨 The Art of Emphasis in Design

This paragraph introduces the concept of emphasis in visual design, explaining its importance in capturing attention and guiding the user's focus. Emphasis is compared to elements in everyday life, such as public speaking and music, to illustrate its role in communication. The speaker uses a mockup of the 'Zest' app by Josh, a UX designer at Google, to demonstrate how visual weight is applied through size, color, and contrast to emphasize certain elements over others. The paragraph concludes with advice on using emphasis strategically to enhance user experience by aligning design with user goals and tasks.

05:01

📚 Understanding Hierarchy in UX Design

The second paragraph delves into the principle of hierarchy in visual design, which organizes elements based on their importance to guide the user effectively. The speaker explains that hierarchy helps in indicating the first steps in a user's journey and in making important information visually prominent. Using the dog walker app as an example, the paragraph shows how text sizing and color variations establish a clear hierarchy, making it easier for users to navigate. The importance of hierarchy for accessibility is also highlighted, with annotations helping users with assistive technologies to understand the order of interaction with elements on the page.

10:01

📏 Exploring Scale and Proportion in Design

This paragraph discusses the related concepts of scale and proportion in design. Scale refers to the size relationship between elements, with more important elements typically being larger. The speaker explains how scale can create emphasis, show similarity or contrast, and communicate visual hierarchy. Proportion, on the other hand, ensures a balanced size relationship between elements, maintaining harmony in the design. The dog walker app is used again as an example to illustrate how consistent sizing of dog walker images creates a sense of equality and balance. The paragraph advises on reviewing the overall balance after altering the scale of any element and mentions design systems for maintaining consistent proportions.

15:03

🌐 Unity and Variety: Balancing Design Elements

The fourth paragraph explores the principles of unity and variety in design. Unity is achieved through consistent use of color, fonts, and spacing, making the design coherent and clear. Variety, in contrast, introduces diverse elements to add interest and energy, breaking up monotony. The speaker emphasizes that neither unity nor variety is inherently good or bad; they are aspects of design that may require a balance of both. The paragraph provides examples of how variety can be used to create emphasis and how unity and variety can work together harmoniously in a design, such as in the dog walker app's homepage, where a consistent color scheme and strategic use of color for buttons create a balanced and engaging user interface.

20:05

🧠 Applying Gestalt Principles to UX Design

In this paragraph, the speaker introduces the psychological principle of Gestalt, which describes how humans perceive and organize visual elements into a cohesive whole. The Gestalt principles help designers understand how individual design choices come together and how they might be interpreted by users. The paragraph focuses on three Gestalt principles: similarity, which groups elements that look alike; proximity, which relates elements that are close together; and common region, which groups elements within the same visual area. The speaker uses examples from the dog walker app and another app called Rostery to illustrate how these principles can create visual balance and guide the user's understanding of the design.

25:06

🔍 The Four-Step Checklist for Design Review

The final paragraph outlines a four-step checklist for reviewing and refining design work. Starting with a detail view, designers should check for consistency in elements like typography and color. Moving to a page-level view, the balance and unity of elements on each page are assessed. The function-level view ensures that all navigation elements are included and operational. Finally, an app-level view considers the overall consistency and functionality of the design. The speaker uses the dog walker app as an ongoing examples throughout the paragraph, demonstrating how each step of the checklist can be applied to improve the design iteratively.

Keywords

💡Emphasis

Emphasis in the context of visual design refers to the intentional act of drawing attention to a particular element within a composition. It is crucial for guiding the viewer's attention to what is considered important or relevant. In the video, emphasis is used to highlight key features or actions within a design, such as making the 'Book Sarah' button more prominent with the color orange and a larger size to indicate its importance in the user journey of the dog walker app.

💡Visual Weight

Visual weight is a concept that measures the force an element exerts to attract the eye within a design. It is determined by variables like size, color, and contrast. In the video, visual weight is used to give emphasis to certain elements, such as the large and colorful images in the 'Zest' app mockup, which naturally draw the user's attention due to their heavy visual weight compared to the surrounding text and backgrounds.

💡Hierarchy

Hierarchy in visual design is a principle that organizes elements on a page according to their importance. It helps guide the user by making the most important information visually prominent. The video explains that hierarchy can be established through size and color adjustments, and it is essential for helping users understand the relative importance of different elements within a design, such as distinguishing between a headline and a story summary on a news homepage.

💡Scale

Scale in design is the concept of size relationship between elements within a composition. It helps to establish which elements are more important by making them larger or smaller relative to others. The video script illustrates the use of scale by showing how the size of images of spices in the 'Zest' app creates emphasis and guides the user's attention to the main content.

💡Proportion

Proportion refers to the balance or harmony between elements that are scaled. It ensures that the size relationship between elements makes sense and appears balanced. In the video, the script discusses how maintaining proportion is important for creating a cohesive and aesthetically pleasing design, such as keeping icons of the same size to appear equal or similar.

💡Unity

Unity in design is the concept of creating a cohesive and harmonious look by using consistent elements such as color schemes, fonts, and spacing. It contributes to a design that is clear and easy to understand. The video script uses the example of the dog walker app's homepage, which has a consistent orange color scheme and even spacing, contributing to a unified look that is pleasing and straightforward for the user.

💡Variety

Variety in design is about introducing diverse elements to break up monotony and add interest or energy to a design. It can be achieved through different shapes, colors, textures, and patterns. The video script explains that variety can be used strategically, such as the 'Choose a time' button in the dog walker app, which uses an orange color to stand out against the predominantly white and light gray design, guiding the user to take action.

💡Gestalt Principles

Gestalt principles describe how humans group similar elements, recognize patterns, and simplify complex images when perceiving objects. These principles help designers understand how individual design choices come together and are interpreted by users. The video script covers three Gestalt principles—similarity, proximity, and common region—and demonstrates how they are applied in the context of the dog walker app and other examples to create visual connections and balance.

💡Similarity

The principle of similarity in Gestalt psychology states that elements that look similar are perceived to have the same function. This principle is used in design to group elements that are visually alike, indicating they are related or serve a similar purpose. In the video script, the use of the color orange in the dog walker app to symbolize actions is an example of applying the similarity principle, guiding users to understand that all orange elements are actionable.

💡Proximity

The principle of proximity in Gestalt theory posits that elements that are close together are perceived as more related than those that are spaced farther apart. This principle is used in design to indicate relationships between elements. The video script illustrates this with the dog walker app's scheduling feature, where the closeness of buttons for selecting dogs implies their relatedness to the question 'Who is going for a walk?'

💡Common Region

The principle of common region in Gestalt theory states that elements located within the same area are perceived to be grouped together. This principle is used in design to create sections or groups of related content. The video script provides an example from the 'Rostery' app, where a border around each group of elements creates a common region, helping the user's eye to automatically group the content in the same area.

Highlights

Emphasis in design is crucial for attracting attention and guiding users.

Visual weight can be manipulated through size, color, or contrast to emphasize elements.

The mockup of the Zest app exemplifies effective use of emphasis through design elements.

Strategic emphasis helps users complete tasks more efficiently, enhancing user experience.

Hierarchy in UX design organizes elements by importance to guide the user.

Adjusting size and color are common techniques to establish hierarchy in visual design.

Hierarchy differs from emphasis by organizing groups of elements in order of importance.

Scale in design defines the size relationship between elements to create emphasis or show similarity.

Proportion ensures a balanced relationship between elements of different scales.

Unity in design creates a coherent and harmonious look through consistent elements.

Variety introduces diversity to a design to break monotony and add visual interest.

Gestalt principles help designers understand how users perceive and organize visual elements.

The principle of similarity in Gestalt theory groups similar elements as having the same function.

Proximity in Gestalt theory connects elements that are close together as related.

Common region in Gestalt theory groups elements within the same visual area.

Visual balance in design gives a sense of completeness and equal weight.

A four-step checklist for reviewing designs includes detail, page, function, and app-level views.

Iteration and improvement are key components of the design process.

Transcripts

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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

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

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,

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.

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.

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

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,

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.

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

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.

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

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

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

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.

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.

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,

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?

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.

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,

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.

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

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.

I encourage you to stay curious and keep learning.

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.

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.

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--

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

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.

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.

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.

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.

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

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.

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.

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

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.

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.

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?

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

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.

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.

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?

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.

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.

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.

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