Google UX Design

Explore

Designs and prototypes

Applying visual design principles to mockups

Week 2: Applying visual design principles to mockups. In this part of the course, you’ll use visual design principles to refine your mockups. First, you'll use emphasis to guide users to the most important parts of a page. Next, you'll apply hierarchy, scale, and proportion to organize the elements on each page of your app. Then, you'll consider unity and variety to help elements of your app function together or stand out. Finally, you'll revisit Gestalt Principles, like similarity, proximity, and common region, to help users interpret your designs easily.

Emphasis in UX Design

⁠

Emphasis means that an object or element is attracting attention. When part of a design has emphasis, the user’s eye is drawn there when they look at an app screen or webpage. There are several ways to add emphasis to your designs.

Size

Implementing changes to the size of elements in your designs is an easy way to provide emphasis for users by drawing their attention to larger objects while simultaneously conveying that one object is more important than another.

⁠

Contrast

Contrast is the creation of opposing visual elements to convey emphasis or comparison. Contrast is a great way to draw emphasis to elements in a design that are different or important. In the image below, the checkout cart and "order" buttons are colored bright red and purple which contrasts with the otherwise white and gray app.

⁠

You can also provide contrast by changing the look of text. There are a few ways to add contrast to text, like bolding, adding color, underlining, italicizing, and highlighting important information that the user should take note of.

Texture

Texture is the elements within an object that add depth or a pattern to an object. Texture can make an object stand out from other objects within a design and should be used sparingly to draw the user’s gaze.

⁠

The design of the page helps the user identify two important things simultaneously:

Understand the importance of Google’s mission statement with black, easy-to-read font on a white background that doesn’t distract the reader from their interaction with the page.

Color contrast highlights Google’s brand pillars, the most important areas within the mission statement.

These design choices add emphasis and help guide the user’s attention to a specific area on the page.

As you design, consider why a user would come to your website or use your app. By adding emphasis to a certain place on the page or screen, the user doesn’t have to work as hard to find what they need. And that helps users have a better experience interacting with your design.

⁠

Hierarchy in UX Design

⁠

Hierarchy helps the user know where to focus first and what action to take.

Hierarchy is different from emphasis because it’s about guiding the user’s attention through groups of elements, instead of focusing on the importance of one particular element.

Using hierarchy is important for arranging information within logical groupings, which helps users find the information they need and emphasizes elements in order of importance. Hierarchy also helps the user avoid becoming confused and overwhelmed by information.

⁠

https://www.interaction-design.org/literature/topics/visual-hierarchy⁠

⁠

https://uxdesign.cc/the-a-to-z-of-ux-a-is-for-accessibility-12-top-tips-for-designing-an-inclusive-user-experience-667eedaf5bca⁠

⁠

Use scale and proportion in UX Design

⁠

Scale and proportion are design concepts you can strategically incorporate in your mockups to help make a design visually pleasing and capture a user’s attention.

Scale is a concept that’s used to explain the size relationship between a given element and the other elements in the design. Proportion is about the balance or harmony between elements that are scaled.

UX designers often use scale to make the most important elements in a design bigger than less important elements, which helps create emphasis and contrast. Proportion helps UX designers make sure the size relationship between elements makes sense and that the elements on the screen are balanced against each other.

Use unity and variety in UX Design

⁠

Unity measures how well design elements work together to create a consolidated design idea.

Variety refers to diversifying the elements in your design to break up monotony and create visual interest.

Using variety allows designers to use different, but similar, elements to keep the attention of their users. Repetition is a great tool for UX designers to use, but too much of it can exhaust the user and lead to them disengaging from the product.

Unity

Your design is much more than elements on a frame. Unity is how all of those elements come together to help users as they meet the goal you’ve established for your product design. You can think of it as all of the elements unifying together to paint the design that you’ve been imaging as you build this mockup.

As you start thinking about unity for use throughout your products, there are a few things that you can look for:

How elements align with each other

The shape of elements

Continuity within text elements

⁠

How elements align with each other

The way elements take up space within an app is just as important as the designs themselves. If you look at the example highlighted on the left, you’ll see that YouTube Music app shows app videos and favorite artists. Videos are rectangles that take up the entire width of the screen, and the Favorites are circles that have a different width. These two red shapes overlaid on the app are the same size. These red boxes show that these elements align with one another not because of the shape, but because of the unity within how much space they occupy on the screen.

The shape of elements

You’ve already learned about how element shape can use proportion to improve the way that users interact with your designs. Now you get to see how the shape of elements can improve the unity of the designs on the YouTube music app. On the second screen, you can see how the playlists boxes have the same scale, proportion, and size. These red squares are all the same size. There are many different principles happening on this screen of the app, but there’s no doubt that the design of the boxes makes this design feel clean, organized, and easy to navigate.

Continuity within text elements

Previously in this course, we talked about the importance of choosing a font, font color, and font size. You can see how text within the YouTube Music fits together and improves the unity of the designs. On the third and final graphic above, you’ll see that there are two text element types highlighted: section headings and descriptions. The section headings have the same color, the same font, and the same alignment. The descriptions also share the same color, the same font, and the same alignment, even when the descriptions are longer than the allowed space for the descriptions. All these choices contribute to keeping the app flow unified. Each element, text included, has a place, and it never breaks out of the space.

Applying unity to your mocks

As you think about unity in your product design, think about the goal statement you’ve created. Now think about all of the elements you are considering adding to your design. How is every single element that you’re creating working to meet that goal? If you can’t answer that question, it might be time to reconsider the purpose of the element in your design.

Variety

Your users' interest in your designs often relies on how well you present the elements to them. As a UX designer, you will likely work on some truly exciting projects, but you’ll also work on run-of-the-mill (some might even say boring!) products. In situations like that, it’s important that you understand how variety can improve the way users interact with your product.

The Google Photos app features one solution for implementing variety into its design.

⁠

Part of becoming a successful UX designer is finding ways to keep users excited about your product. Even if that product isn’t very exciting! Applying some variety to your elements can go a long way towards keeping your users interested in the design you’ve created. Are there any areas of your mocks that you feel are too repetitive? Think about what you’ve learned about variety and try something a little bit different.

Apply Gestalt principles to Mockups

⁠

Similarity focuses on things that look or behave the same way and how the user will relate those items.

⁠

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.

Gestalt Principles describe how humans group similar elements, recognize patterns, and simplify complex images when perceiving objects. In other words, the human brain attempts to organize information by subconsciously arranging the parts into a cohesive whole. Applying Gestalt Principles in your mockups will help create user-friendly designs that are rooted in psychology and human behavior.

So far in this certificate program, you’ve learned about three Gestalt Principles:

Similarity: Elements that look similar are perceived to have the same function.

Proximity: Elements that are close together appear to be more related than elements that are spaced farther apart.

Common region: Elements located within the same area are perceived to be grouped together.

⁠

The Gestalt Principle of closure describes that when a human looks at an incomplete object, they subconsciously complete the image to see a whole, completed object. Check out the graphic above, for example. Technically, the graphic shows a bunch of different colored lines — but your brain perceives those lines as a red square, a blue circle, and a yellow triangle because of the desire for closure. Using the Gestalt Principle of closure can keep users engaged with your designs by improving their attention to objects.

⁠

The Gestalt Principle of continuity states that elements that are arranged in a line or on a curve appear to be more related than elements not on the line or curve. In other words, continuity guides a user’s eye from object to object, following a line, and focuses attention to specific parts of the screen.

⁠

Another way that users can perceive elements in a design is based on the way that they look in relation to each other, or if elements in a design are symmetrical or asymmetrical.

The Gestalt Principle of symmetry describes that elements are more visually pleasing when the parts of an object are balanced or are mirror images of each other. In addition to looking nice, objects that are symmetrical are also perceived as related to each other. In the graphic above, the dark green shape on the left is duplicated in a light green shape on the right. The only difference in these two symmetrical shapes is the shade of green used.

On the other hand, asymmetry, which is a lack of balance and equality, can emphasize an element's importance and create visual interest. Using asymmetry in your designs can help call attention to a specific item or grouping of items. In the graphic above, the green shape on the left uses straight lines, and the yellow shape on the right uses curved lines, which makes them asymmetrical.

Consider additional visual design elements and principles

⁠

While Hue refers to color families (like red, green, or blue), Value is a color’s lightness or darkness. The lightest value of any color is white and the darkest is black (as in the graphic above). Many programs have value settings, like a sliding scale that lets you add white or black to a selected color. Value is key to creating contrast in your designs. For example, a color with a lighter value stands out against a dark background, which can make a design easier to see.

⁠

Saturation refers to the intensity and richness of color. Think of the highest saturation as the purest form of a color. For example, red, at its most saturated, is bold and bright. You can soften pure red by lowering the saturation and making it appear more muted. Lowering the saturation all the way would leave you with shades of grey, like a black and white film.

The saturation you choose depends on how bold you want the colors in your design to be. Highly saturated colors are great for grabbing a user's attention. Think of neon signs, highlighters, and sirens—all of which use intense saturation to emphasize their importance.

⁠

Orientation refers to the layout of your design. Orientation often corresponds with the platform or device you are designing for. For example, desktop computers tend to have horizontal (or landscape) orientations, whereas mobile phones and tablets let users alternate between vertical (or portrait) and horizontal orientations.

Some devices aren’t oriented horizontally or vertically. Smartwatches, for example, are usually square, so smartwatch app designers need to take that into account. You can think of orientation as a grid that helps you plan your designs to fit within different shapes.

⁠

Intrinsic interest refers to how eye-catching a visual element is to users. Certain design elements, like logos or animations, are meant to grab a user’s attention. For example, in the image above, the chapter title is big and bold, drawing the reader’s focus. The text of the chapter, on the other hand, is smaller and more readable.

The graphic on the left side of the image uses variations in color, scale, and composition, which makes it stand out even more than the chapter title. The image of the funnel also helps draw the user’s attention because images are generally more eye-catching than text.

You can use intrinsic interest in your designs by making sure the most important elements stand out—and that the least important blend in. For example, many magazines use serif fonts for article titles and sans serif fonts for body text. Serifs add flair to the titles that distinguish them from the rest of the content.

⁠

Perceived physical weight is the illusion of weight and volume that each visual element conveys. When creating elements that simulate objects with physical weight, you’ll want each element’s dimensions to proportionately relate to the others.

In the graphic above, each container appears to hold a different volume of liquid, from a measuring cup to a milk jug. The relative sizes of the containers range from small and light to big and heavy. It’s the difference between a single serving and enough for a crowd!

⁠

https://www.interaction-design.org/literature/topics/design-principles⁠

⁠

https://www.springboard.com/blog/design/ux-design-principles/⁠

⁠

https://xd.adobe.com/ideas/process/ui-design/4-golden-rules-ui-design/⁠

⁠

https://www.usability.gov/what-and-why/user-interface-design.html⁠

⁠

Types of navigation

Navigation bar

⁠

Navigation bars display the navigation links to the most important pages of the product in a single bar along one area of the screen. Depending on the design, this bar can be horizontal or vertical. Navigation bars are easy to find and give users a clear look at all of the areas of the website that they can interact with. This helps your users get exactly where they want to go. For basic websites, like a portfolio, it’s more beneficial to have a simple navigation bar for potential employers to browse. In the example, from Googler Lisa's Lucere app design, the navigation bar runs along the top of the screen for easy navigation and makes it clear which pages the user can choose from the navigation bar. To see the design process Lisa uses,

visit her portfolio website⁠

This article from The Creative Momentum breaks down all of the important information you need to know to build the most effective navigation bar:

Designing the Ideal Navigation Bar⁠

⁠

Tab bar

⁠

Tab bars are very similar to navigation bars, but they display page links as tabs that can be clicked on and off. Tab bars can be icons, they can be text, or they can be both. As you think about your own designs, know that tab bars are a great way to sort out your content and keep the user engaged with the content on your site. In the example, from Googler Kartik's Google Clock app design, the tab bar runs along the top of the screen. Each option changes within that area of the app, but doesn’t change the main screen of the app. The user can know which tab they’re on based on the highlighting and underline below the name and icon. To see how Kartik built this design,

visit his portfolio website⁠

A navigation menu is a menu that appears when the user clicks the three lines icon on the edge of the screen. These are sometimes called “hidden” menus (because they can be hidden away again) or “hamburger” menus (because of their shape). These menus are usually located at the top left or right of the screen and are easy for users to quickly locate. They also make the screen appear more visually appealing by “hiding” the details of the menu until the user taps to open it. A navigation menu is a great way to showcase all of the links that you want to include without having to make them fit within your design parameters. For example, on Googler Andrew's portfolio website design, Halo, the navigation menu provides links to all of the important areas of his website without having to worry about fitting those nine links within the design itself. To see how Andrew built this design,

visit his portfolio website⁠

Here’s a resource from Enginess that explains the benefits and drawbacks of navigation menus and how and when to include them in your product:

Hidden menus in Mobile and Web Design. ⁠

⁠

Navigation hub

⁠

Finally, a navigation hub displays a collection of links on the homepage of the website. With a navigation hub, the user often has to go back to the homepage to change pages. This format helps reduce the amount of content on the screen at one time. There is often a visible back button on each page that takes you back to the homepage where all of the navigation links are located. A navigation hub might be ideal for you if your designs don’t have a lot of pages but, if your users need to multitask and move from one page to another, a navigation hub might not be the best option. On Googler

Tongfang’s portfolio website⁠

, each page only has a few options to view before users have to go back to the homepage to change pages.

Navigational design elements

Navigation organizes information so users can interact with other parts of a product. Navigation design is made up of elements, like buttons and icons, that create a clear, easy path for users so they can reach their goal. How can you use buttons and icons in your navigation?

Buttons: These can be fully designed buttons or clickable elements, like text or icons. Buttons might be animated to look clickable or have a line underneath them to show their interactivity.

Icons: Icons are like visual shortcuts for the brain. Common icons include an envelope icon that represents an email inbox, a house icon that takes the user to the homepage, or a social media website's logo that takes users to a social media page.

These navigation elements are considered affordances. An affordance is a visual cue of an object’s purpose within an interface. They “afford” you the opportunity to perform an action by providing you with hints about their context. Affordances are an important part of creating effective navigation. For example, if your button is just text on the page, a user needs an affordance of some kind to know that that text is interactive.

For more information about affordances, read

How to use affordances in user interfaces⁠

, by UX Planet.

So, now you know a little bit about navigation and have some guidelines to follow as you begin designing your user interfaces. Here are some additional resources about navigation that will provide more information to help you decide which navigation option works best for your product:

For a comprehensive, in-depth guide to the world of navigation, here’s an article from JustinMind:

Navigation design: Almost everything you need to know⁠

It can be difficult to decipher which navigation design will fit your product. Here’s an article from UX Booth that lays out some great guidelines:

The rules for modern navigation⁠

⁠

https://docs.google.com/document/d/1tQkMbnuzEfl1_dCkd-dN42bRxTtwtqjkZVxM-yC6I4g/template/preview?resourcekey=0-8LDd9QXZLkQNJ5DydQJU7A⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.

Applying visual design principles to mockups

Emphasis in UX Design

Size

Contrast

Texture

Hierarchy in UX Design

Use scale and proportion in UX Design

Use unity and variety in UX Design

Unity

How elements align with each other

The shape of elements

Continuity within text elements

Applying unity to your mocks

Variety

Apply Gestalt principles to Mockups

Consider additional visual design elements and principles

Types of navigation

Navigation bar

Tab bar

Navigation menu

Navigation hub

Navigational design elements