Google UX Design

Explore

Designs and prototypes

Starting to create mockups.

Week 1: Starting to create mockups. Turn your focus to visual design, which is how a product or technology appears to users. You'll start to create mockups using visual design elements, like typography, color, and iconography. Elements are often arranged into layouts using methods like grids, containment, and negative space. You'll consider all of these visual design elements to design the mobile app you've been working on throughout the certificate program.

Visual design: how a product or technology appears to users.

Mockup: a high fidelity design that represents your final product. To create mockups, we'll use visual design elements and layouts. Elements like typography, color, and iconography are the building blocks for visual design. Elements are often arranged into layouts using methods like grids, containment, and space.

Typography in UX Design

Typography refers to the use of text and font.

There are three steps to find the perfect typography for your design:

Selecting a type classification, picking a typeface, and choosing a font.

Type classification is a general system to describe styles of type. Two of the most popular type classifications are Serif and Sans Serif.

Serif styles of type can be recognized by the tiny lines called serifs that trail

from the letters as strokes and stems as edges.

The small lines hanging off of both ends of the horizontal line at the top

of the T help identify the text type classification as serif. On the other hand, sans serif styles of type don't have these tiny lines.

A typeface is the overall style of a letter. Typefaces are distinguished by their stroke weight, shape, type of serif, and line lengths. Each typeface is known by a family name.

Font is the size, thickness, and emphasis of letters.The font can be more light or bold, italicized or regular, and even more variations. The font is a collection of all of the characters of a typeface in one size and one style.

To help readers better navigate the page, we need to create a hierarchy.

A typographic hierarchy is a method of ordering typefaces and fonts in a layout consistently to help users better navigate a page.

A second reason why typography is so important for UX designers is legibility, or making text easy to read.

The product needs to be readable for all users, including people with low vision. Think about the nutrition facts label on food items that are sold at a grocery store.

Color in UX Design

The 60-30-10 Rule

The 60-30-10 Rule is a simple theory for creating color palettes that are well-balanced and visually interesting. The idea is that one color—generally something fairly neutral (either literally or psychologically)—makes up 60% of the palette. Another complementary color makes up 30% of the palette. And then a third color is used as an accent for the remaining 10% of the design.

⁠

Loading…⁠

⁠

Loading…⁠

⁠

Accessibility considerations for color

Color is one of the ways that you, as a designer, can connect with the emotions of users and draw attention to certain parts of a design. But when you design a product, it’s important to think about how color is interpreted by all users of the product. Some users will have difficulty perceiving certain colors or color combinations, so the information that the colors of your design convey could be lost. It’s critical that your designs are inclusive and reflect the diverse needs of the product's users. Plus, designing with accessibility in mind makes it easier for all users to interact with your designs.

There are many resources to help designers use color in ways that are accessible to a wide range of people. For example, W3C recognized the need for improving accessibility for people with disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. So, they developed the

Web Content Accessibility Guidelines⁠

(WCAG), which are a series of guidelines for improving web accessibility.

How can you use the WCAG in your own designs? Let's explore.

Color blindness

Color blindness results in difficulty distinguishing between certain colors. There are three common categories of color blindness: red-green, blue-yellow, and total color blindness. To understand how color blindness can affect how users see color, visit the Colblindor

Color Blindness Simulator⁠

, where you can upload images and check them through various colorblind filters.

There are a few ways to keep color accessibility in mind as you design:

1. Use icons in designs, in addition to color. For example, check out the image below: if you’re designing a form and want to indicate that a field is missing text or formatted incorrectly, do not solely rely on turning incorrect text to the color red. You should also use a red exclamation point icon. The exclamation point icon will draw users' attention to the form field with the color and the icon, so your designs will be clearer to more users.

2. Use patterns and texture to create contrast. Contrast is the difference between two or more elements in a design. Contrast is often created through black and white imagery, or the large size of header text versus the smaller size of body text. Imagine you're creating a bar graph about user research using a client’s brand colors. To create contrast without relying on color alone, you can add subtle stripes to one column and dots to another, as shown in the image below. With contrasting patterns, in addition to color, the bars in the graph will be clearly differentiated for all users.

⁠

3. Avoid color combinations that could be hard to distinguish from one another. Here are some color combinations that are often difficult for users who are color blind to differentiate between:

Green & red

Green & brown

Blue & purple

Green & blue

Light green & yellow

Blue & gray

Green & gray

Green & black

Low contrast sensitivity

People who have low contrast sensitivity experience objects as dim or unclear, which makes those objects more difficult for a person to identify. Many people experience low contrast sensitivity on a daily basis. For example, people who have a high visual acuity experience low contrast sensitivity when it’s dark and a digital screen is too bright, or when it’s bright and a digital screen is too dark. In addition, as people’s eyes get older, their contrast sensitivity naturally weakens.

One way that you can design with low contrast sensitivity in mind is to use the luminosity contrast ratio, which is a measurement of the contrast between the background and the text color used on top of that background. As a standard, the WCAG recommends that the luminosity contrast ratio of images and text meets a contrast ratio of at least 4.5 : 1.

⁠

https://webaim.org/resources/contrastchecker/⁠

⁠

Light sensitivity

Some users are just as sensitive to bright light and bright colors as they are to low contrast. Light sensitivity is the inability to tolerate light. Users who have light sensitivity might experience your designs with a dim screen. Or they might use the operating system of their device to choose between light mode, dark mode, and high contrast mode, as shown in the image below. It's best to allow users to make these setting choices, so try designing your own light and dark modes of your own projects.

⁠

Iconography in UX Design

⁠

Iconography is a system of graphic images or symbols that are associated with a subject or an idea.

We call these images and symbols icons. On the surface, icons might seem like playful creations, but

when made effectively, icons limit wasted tech space, catch the user's attention and are an easy way to transition to another page or location.

We rely on icons all the time to give us information in both digital and physical environments.

If you add an icon of a house, you should also add a text label that says Home beneath that icon.

The text label also makes the app more accessible, because icons can't be read by a screen reader.

Finally, iconography is crucial to a company's brand.

Icons are images or symbols that stand for specific actions or tools in an app or website. Using icons in your designs can quickly communicate concepts, instead of explaining a concept's meaning with words.

Make icons universal. Consider whether an icon is culturally or geographically specific before adding it to your designs.

Consider including a text label. Usually, text labels are included in small font directly below an icon. Including a text label ensures that users who use a screen reader or a new adopter of technology are able to identify the icon.

Keep branding clear. Everything, including your icons, should reflect the imagery you’ve created for your brand. That means that everything across your app needs to have the same color scheme, the same font, and and the same style.

Learn about more visual design elements

⁠

Lines: A line is a straight figure connecting two points in space. In the world of UX design, lines can be used to differentiate sections of an app, connect two related ideas, or add emphasis to certain parts of the design. For example, you may choose to place a line below header text to draw additional emphasis to titles.

Size: The size of an element is in relation to other elements and factors that affect the design. Size is an especially important consideration when designing an app for a mobile phone screen size, which is pretty small. The size of elements can determine how users experience your design, for better or for worse. For example, a button that's too small can frustrate users or cause them to tap the wrong part of your design.

Shape: Shape is defined as lines around a self-contained space that includes length and width. Shapes have a place in almost every app design, whether you use rectangles, squares, circles, or another shape. For example, to view more information within an app, there is often a circle with a plus sign (+) inside, which indicates that users can click the shape to expand a menu and learn more. Alternatively, to close out of a window in an app, app designs often use a circle with an X inside.

Image: In UX design, images are used to tell stories, make an impact without words, and add visual emphasis. Images can be static, like pictures and illustrations, or moving, like animations and GIFs. Either way, you should include images that are relevant to the story you want to tell with your design and that are relevant to the users you're designing for. For example, if your app for home repair services is addressing a specific problem that many users face, like a clogged gutter, it might be effective to include an image of a clogged gutter in your designs to drive emotional impact.

As you continue to design your own mockups using visual design elements, keep in mind these two things:

Visual appeal: Consider how the content of your designs will be experienced by users in the real world. Are your lines connecting or dividing the right design elements? Are any shapes accidentally overlapping? Did your image upload correctly to Figma? You'll want to review your work with a heightened attention to detail, specifically looking for elements of your designs that might not be the most visually appealing.

Accessibility: As you design mockups, think about how users with various accessibility needs might react to the elements you include. For example, do headers stand out from the information placed below, by using lines or another visual design element? And, do all of your images have alternative text? Ensuring that your designs are accessible for everyone is critical to making your work a success!

⁠

Additional design considerations

A hyperlink is a link from one page or file to another, usually activated by clicking on a blue, underlined word or image. Hyperlinks allow people to easily navigate digital products, and a standard stylization makes links instantly recognizable when the text is blue and underlined.

Here are a few things to keep in mind when adding hyperlinks to your mockups:

1. An uncluttered page is easier to read. Hyperlinks can keep your designs organized, making it easy for users to navigate your product. However, adding lots of hyperlinks can reduce readability and impact usability. Choose hyperlinks thoughtfully so you don’t overwhelm and distract your users with too much blue text.

2. Meet user expectations. If text is underlined and blue, it should always be a link! Don't confuse your users by ignoring common conventions.

3. Not all links look the same. As UX design has evolved, so has the way that links are represented in digital products. Sometimes, a company’s brand standards mean their links won’t be blue. Images can also be hyperlinks. For example, many users now expect the logo on a company’s website to link to the homepage. Even without underlined text, users expect the logo to work like a link.

4. Use descriptive links. Hyperlinked text should give users an accurate idea of where it will take them. Avoid hyperlinking the word "here," and use a descriptive phrase instead, like "French Quarter Reservation Confirmation." Descriptive language allows users to make informed choices.

Buttons

Buttons let users take specific actions, like “Cancel” or “Save.” Here are a few best practices to follow when using buttons in your mockups.

1. Make buttons look like buttons. Buttons should be easily recognizable as buttons through their shape, size, and color. Most buttons are rectangles or circles, so a star- or heart-shaped button could confuse users. Here are four of the most common button styles:

⁠

Filled button with square corners

Filled button with rounded corners

Filled button (square or rounded) with shadow

Unfilled button with a solid outline (also known as a ghost button)

2. Be consistent. Use the same type of button consistently throughout your product. For example, if you use a ghost button on your app’s homepage, you should use that same style on every screen. Consistency helps users recognize which elements are buttons.

3. Include negative space. Leave negative (or white) space around buttons so that users can easily tap or click them. UX designers often add padding to buttons, which is extra negative space that keeps the screen from becoming too cluttered. Padding also makes it less likely that users will accidentally tap a neighboring button.

Inputs

Inputs are text fields where users enter information. It should be clear what information belongs in an input. It should also be big enough to fit the information to be added.. Consider the following best practices when adding inputs to your mockups:

1. Use visual cues. Most inputs are open-ended, which means users can type anything into the field. But they also require specific information from users, like a phone number or an email address. To help your users enter the right information (and avoid error messages), give them visual cues.

For example, you can use ghost text (also called hint text), which models the information an input requires. Ghost text is often lighter than the rest of the words on a screen, and it disappears once users enter their information. The designs below include a few different examples of ghost text, like indicating the correct format for the date (“mm/dd/yy”).

⁠

Group inputs using subcategories. When adding more than six inputs to a page, it’s best to group them into categories. For example, you could make a "Personal Information" category that includes inputs for the user’s first name, last name, date of birth, gender, and so on. Similarly, a "Contact Information'' category could include inputs for an email address, phone number, street address, city, and so on. Grouping inputs makes it easier for users to know what information is needed and visualize their progress.

Introduction to layouts

Layouts are ways to arrange elements on a page. Usually refer to the specific placement of text, style,

icons, and images.

The goal of layouts is to present information in a logical way, making the important elements stand out.

Without a thoughtful layout, your designs will be difficult for users to interact with.

⁠

Understand page layouts - negative space

⁠

Having too little white space increases the chance of error. For example, some users might end up accidentally pressing the wrong button if there isn't enough space between the buttons.

Gestalt principles: Proximity

⁠

The importance of negative space

Why is it so important to consider negative space when you create mockups? Check out these four reasons.

Use negative space to indicate if elements are related. If two objects are positioned closely together on a page without negative space between them, they will be perceived as being related. This concept is based on the Gestalt Principle of proximity, which you explored earlier in this program. Remember that proximity means that elements that are close together appear to be more related than elements that are spaced far apart. In your mockups, use negative space thoughtfully in order to indicate which elements of your designs are related or not.

Negative space draws attention to important elements. Users generally have short attention spans! If the information on a page or screen isn’t easily scannable, you'll lose user attention quickly. Using negative space is one way to help users focus on the reason that they opened the page or app. For example, using negative space around a button in your mobile app design will help users focus on the most important action, clicking the button.

Negative space gives users a visual break. Negative space helps prevent users from becoming overwhelmed or distracted. The negative or white space in your designs can provide users with a visual break as they scan the content.

Negative spacing increases readability. You’ve probably encountered online sales that advertise an entire page full of items. The page is usually really colorful, with a lot of information to sift through, including prices and descriptions. Ads like these tend not to include much negative space, which can make the information appear overwhelming and difficult to read. Instead, you can use negative space in your mockups to make text easy to read at a glance.

⁠

You can create negative space in your mockups in many ways. Line spacing, padding, and margins are common methods of using white space effectively, so let's check out each one.

Line spacing is the vertical space between two pieces of text. Think of reading a book: the negative space between sentences in a paragraph keeps letters from overlapping and makes content easy to read. The same goes for your designs!

Padding is the negative space surrounding content, or between the border and the design elements. Padding gives objects space to exist before the user moves to look at another element of the design. In the image above, padding in the dog walker app provides symmetry to the design and keeps elements from being crowded together.

Margins are the space outside the border of the design. You can think of margins as a way to keep you coloring between the lines of your design. In the image above, you’ll notice the edges of the design surrounded by the margin.

⁠

https://uxdesign.cc/mobile-ui-13-basic-patterns-of-app-ui-design-to-know-about-d3f7c6176f13⁠

⁠

For more information on mobile layouts with different content, check out a few case studies:

⁠

Loading m2.material.io⁠

⁠

Loading m2.material.io⁠

⁠

Loading m2.material.io⁠

⁠

Loading m2.material.io⁠

⁠

Loading m2.material.io⁠

⁠

https://docs.google.com/document/d/1-UdZc6QiLBZ0sULm40fd44WQSScOImTOndFotqOzOv8/template/preview⁠

⁠

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.