Course 5 Module 1

Section 1: Introduction to Course 5

1:1. Video

Introduction to Course 5: Create High-Fidelity Designs and

Prototypes in Figma

0:00
Narrator:
Hello, welcome back. You've accomplished a lot so far. Let's quickly review where we are in the
UX design process.

First, you learned how to empathize with users, define their needs and problems statements, and
develop ideas for design solutions. You then created a wireframe and started the prototype phase.
After that, you've learned how to conduct research to test your low-fidelity prototype and modify
that prototype based on research insights.

Even though we've gone through one round of testing, it's important to remember that the design
process is iterative. In this course, we'll repeat the prototype and test phases, now focusing on
high-fidelity designs. Get ready to take your designs to the next level.

Play video starting at 0:47 and follow transcript

0:47

By the end of this course, you will be able to:

 Create a static, high-fidelity design that is used as a representation of a final product

called a mockup.
 Refine the design of your mockups by adding emphasis, hierarchy, and scale and
proportion.
 Understand how to use a design system.
 Participate in a critique session where UX designers ask for feedback on their work from
teammates and iterate on designs based on that feedback.
 Create a high-fidelity prototype.
 Iterate on your high-fidelity prototype based on feedback from a usability study.
 With your final designs in hand, you'll build case studies to showcase your projects in
your portfolio.
Before we get started, I want to introduce myself.

My name is Kunal, and I'll be your instructor for this course. As a staff interaction designer on
the Material Design team at Google, I focus on system design and accessible design practices.

When I first joined Google, my role concentrated on designing the framework for Google
Search and the discover feature of the Google app on Android. Although my current work
revolves around UX design, I actually began my career in architecture. Making the switch from
architecture to UX design was a big decision for me.

Whether you're in the middle of your own career change or just want to learn something new, I'm
excited to help you achieve your goals.

If you're ready, let's get started.

Would you like this formatted as a PDF or included in a larger documentation template?

///////////////////////////////

Course 5 Module 1
Section 1: Introduction to Course 5

2:2. Reading

Welcome to Course 5

Create High-Fidelity Designs and Prototypes in Figma

Course Introduction

Welcome to Create High-Fidelity Designs and Prototypes in Figma, the fifth of seven courses
in the Google UX Design Certificate.

In this course, you will:

 Finish designing the mobile app that you've been working on for the last few courses.
 Start by learning how to create mockups in Figma, a popular design tool.
  Apply visual design elements and principles as you design mockups for your mobile
app.
 Turn those designs into a high-fidelity prototype that works like a finished product.
 Conduct research to collect feedback about your designs and make improvements.
 Learn how to share your designs with development teams.

By the end of this course, your mobile app designs will be complete, and you’ll add this project
to your professional UX portfolio!

Prerequisites

Content and projects in each course of this certificate program build on information practiced in
earlier courses.
To be successful in this course, you should complete the previous four courses of this certificate
program, if you haven't already done so:

 Course 1: Foundations of User Experience (UX) Design

 Course 2: Start the UX Design Process: Empathize, Define, and Ideate
 Course 3: Build Wireframes and Low-Fidelity Prototypes
 Course 4: Conduct UX Research and Test Early Concepts

Course Structure

Each course of the Google UX Design Certificate is broken into weeks.

You can complete courses at your own pace, but the weekly breakdowns are designed to help
you finish the program in about six months total.

Course Menu Overview

Course menu showing courses one to seven:

 Course 1: Foundations of User Experience (UX) Design (Complete)

 Course 2: Start the UX Design Process: Empathize, Define, and Ideate (Complete)
 Course 3: Build Wireframes and Low-Fidelity Prototypes (Complete)
 Course 4: Conduct UX Research and Test Early Concepts (Complete)
 Course 5: Create High-Fidelity Designs and Prototypes in Figma (Active)
 Course 6: Build Dynamic User Interfaces (UI) for Websites (Not Yet Complete)
 Course 7: Design a User Experience for Social Good and Prepare for Jobs (Not Yet
Complete)
Course Overview: Skills You’ll Develop

Here’s a preview of the hands-on activities you'll complete during this course:

Week 1: Starting to Create Mockups

 Turn your focus to visual design, which is how a product or technology appears to users.
 Start to create mockups using visual design elements, like:
o Typography
o Color
o Iconography
 Arrange elements into layouts using methods like:
o Grids
o Containment
o Negative space
 Apply all of these to the mobile app you've been working on throughout the certificate
program.

Week 2: Applying Visual Design Principles to Mockups

 Use visual design principles to refine your mockups.

o Use emphasis to guide users to the most important parts of a page.
o Apply hierarchy, scale, and proportion to organize page elements.
o Consider unity and variety to help elements function together or stand out.
o Revisit Gestalt Principles like:
 Similarity
 Proximity
 Common region
o These help users interpret your designs easily.

Week 3: Exploring Design Systems

 Introduction to the world of design systems.

 A design system is a set of standards and practices that helps teams manage projects
and design consistently at scale.
 Explore:
o Parts of a design system
o Benefits of using a design system
o Various companies' design systems
o How to use them in your own mockups
o How to use and create sticker sheets in Figma
Week 4: Creating High-Fidelity Prototypes

 Build high-fidelity prototypes in Figma.

 Follow six steps to turn your mockups into a prototype ready for testing.
 Explore:
o Gestures
o Motion
o These enrich the user experience and improve usability.

Week 5: Testing and Iterating on Designs

 Test your mobile app designs by conducting a usability study.

 Analyze feedback to create actionable insights and iterate on your designs.
 Once final, hand them off to engineers for production.
 Showcase all the artifacts you’ve created in a case study for your professional UX
portfolio.

Portfolio Project

Three mockups of screens for an app for a burger restaurant.

As you make your way through this certificate program, you will create projects to include in
your professional portfolio to show potential employers.

In this course, you’ll finish designing the mobile app you've been working on since the start of
the program.
For example, if you selected a prompt to design an app for your local burger restaurant in the
second course, you will continue through the design process with this same project.

 In Course 2, you learned how to empathize with potential users and define users’
needs.
 During Course 3, you came up with ideas for solutions, created wireframes, and a low-
fidelity prototype.
 Throughout Course 4, you planned and conducted research, tested your designs, and
iterated based on insights.

Now, in Course 5, you will:

 Create mockups and a high-fidelity prototype.

 Your designs will start to look and feel like a real product.
 Test your designs by conducting a second usability study.
  Iterate until the designs are final.

Everything you’ve created will be included in your professional UX portfolio.

Final Encouragement

You’re almost done with your first project.

Keep up the great work as you finish designing a mobile app in this course!

Would you like this in a downloadable format (e.g., PDF or Word)?

///////////////////////////////

Course 5 Module 1
Section 1: Introduction to Course 5

3:3. Reading

Helpful Resources and Tips

Google UX Design Certificate Program – Coursera

Course Completion to Obtain a Certificate

To receive your official Google UX Design Certificate, you must:

 Pass all graded assignments in all 7 courses of the certificate program.

o Each graded assignment is part of a cumulative graded score for the course.
o The passing grade for each course is 80%.

AND one of the following:

 Pay the
course certificate fee
 Be approved for
Coursera Financial Aid
  Complete the certificate through an educational institution, employer, or agency that's
sponsoring your participation.

Healthy Habits for Course Completion

Below are best practices to help you successfully complete the courses in the program:

Tips

As a learner, you’re bringing your own experiences and best learning practices to this certificate
program. The curriculum designers recommend the following helpful habits to support your
success:

Plan Your Time

 Set regular study times and stick with them each week.
 Use a calendar or alarm to create a schedule.
 Break work into achievable daily goals.
 Create a quiet place to watch videos, review readings, and complete activities to help you
focus.

Learn in Order

 Take the seven courses — and the items in each lesson — in the order they appear.
 New information and concepts build on what you've previously learned.

Be Curious

 If something excites you, explore it further!

 Search online, follow external links, and take notes.
 Supporting your learning in small ways helps deepen your knowledge and stand out to
employers.

Review Exemplars

 Exemplars are completed assignments that fully meet the activity’s criteria.
  Use exemplars as guidance and inspiration.
 Remember: there are often many valid ways to complete an assignment.

Take Notes

 Notes help you remember important information, especially as you prepare to enter a new
job field.
 They support deeper understanding and connections between topics.
 Search online for effective note-taking methods if needed.

Build Your Career Identity

 Your career identity is the unique value you bring to the workforce.
 Watch this video to learn about its key components.
 Write your own career identity statement to align with your strengths, values, and
goals.

Connect with Other Learners

 You're not alone — reach out in the discussion forum for support.
 Visit Coursera’s private Google UX Design Community to:
o Expand your network
o Discuss career journeys
o Share experiences
 You can also check out the quick start guide.

Update Your Profile

 Consider updating your Coursera profile.

 This link is available when you click your name in the top-right corner.
 Your classmates can view your profile in forums to get to know you better.

Documents and Files for Course Activities

To complete some activities, you'll need to use digital documents, spreadsheets, presentations,
and/or labs — tools used by UX professionals to collaborate in teams.

If you need help using any type of document, refer to these resources:
  Microsoft Word: Help and learning — [Microsoft Support page for Word]
 Google Docs — Help Center page for Google Docs
 Microsoft Excel: Help and learning — Microsoft Support page for Excel
 Google Sheets — Help Center page for Google Sheets
 Microsoft PowerPoint: Help and learning — Microsoft Support page for PowerPoint
 How to use Google Slides — Help Center page for Google Slides

Weekly, Course, and Certificate Glossaries

This program introduces many new terms and concepts. To support your learning:

 Weekly Glossaries
o Available at the end of each week’s content
o Not downloadable
o All weekly terms are included in the downloadable course and certificate
glossaries
 Course Glossaries
o Available at the end of each course
o Covers all terms in that course
o Downloadable
 Certificate Glossary
o Includes all terms from the entire certificate program
o Helpful to reference throughout and even after the program

You can access all glossaries in the course’s Resources tab.

Link to the glossary:

[UXD certificate glossary]

OR

If you don’t have a Google Account, download the glossary directly from the following
attachment.

Course Feedback

You can provide feedback on videos, readings, and other materials easily:

 Open the resource in your browser.

 Click thumbs-up for helpful content.
 Click thumbs-down for unhelpful content.
 To flag an issue:
o Click the flag icon
 o Select a category
o Enter an explanation in the text box

Feedback goes to the course development team and is not visible to other learners. It helps
improve future certificate programs.

Need Help?

For technical issues with the Coursera platform, visit the

[Learner Help Center].

Would you like this formatted into a downloadable PDF or Word document?

////////////////////////////////

Course 5 Module 1
Section 1: Introduction to Course 5

4:4. Video

Kunal – My Journey to UX

Introduction

0:04
Hi, I'm Kunal. I'm a staff interaction designer at Google. Design is a passion area of mine. I
didn't come in with a background in this, and so I empathize with a lot of developers and other
people around the world who want to create really nice looking, high-quality apps, but don't
know where to get started.

I didn't really know what I wanted to do when I grew up. My parents really wanted me to go
down the doctor or engineer or lawyer path, but I was always into art. I never had time growing
up to really focus on those classes amongst my other studies.
Discovering Design

0:38
But I developed this passion for mechanical drawing of all things, my high school had a class in
it. And so that was kind of really my interest to design and really problem solving through
design. And that's something that really stuck with me.

So I decided to study architecture and in going through that program I kind of picked up doing
web design on the side, and found out that was really something I was more interested in than the
architecture work I was doing during the day.

Design has kind of helped me find my path in life. Going to architecture school is a big
commitment. Deciding to leave that field behind after the amount of time I'd spent studying in it
and the time I had spent working in it was, well, it should have been a tough decision.

But, I think what I realized through the work I was doing on the side, doing web design work and
digital design work, without really having kind of an understanding but more of a passion for it,
is that that's really where my interest lay.

Transition to UX

I kind of never intended to make a career change, but I just had all these individual opportunities
start to stack on one another.

When I was applying for UX jobs, one of my professors mentioned that I should bring up my
web design work, even applying for architecture jobs. And I didn't think about doing that. I was
like, why would an architecture firm care that I have these web design skills as well?

But it was really great advice because the firm that I got hired for, they were really interested in
redoing their website. And so they were like, great, you can do architecture work, and you can
also do web design work for us. So you can flex both of your skills and build both of your
passions.

Giving Back

2:19
Participating in this program is really important to me because I am someone who didn't have a
very clear path into UX. And I'm someone who's benefited a lot from many other people who
helped guide me into that path, from professors, and peers, and other folks who have given me
chances where someone with a nontraditional background like mine may not have had those
chances in the past.
So I'm very fortunate for the opportunities that I've received and the work that I kind of had to do
on my own to be able to get myself to this point.

I want to be able to pay the goodwill that was shown to me forward to the community and help
make sure that future generations of people who are interested in UX don't have to go through
the same kind of winding path. They have some more structure and some more places they can
turn for a clearer entry into the field and all the great things that come with it.

Would you like this formatted into a downloadable PDF or styled document for print or
presentation use?

//////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////

Course 5 Module 1
Section 2: Begin to create a mockup

5:1. Video

Welcome to Module 1

0:00

Hello. In this part of the course, we'll focus on visual design, which is how a product or
technology appears to users.

We'll start to create a mockup, which is 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.

Visual design is a massive world, and at times might seem overwhelming. For now, we'll only
be covering certain elements. We will explore layouts later in the course.

Learning about visual design doesn't happen overnight. Professionals across many disciplines
spend years learning how to apply what they've learned to their projects.

I accumulated my knowledge of visual design from many places, like my work in architecture,
graphic design classes I took for fun, and even from being on the job as a UX designer.
This certificate program is just the start of your journey with visual design. After watching the
next few videos, you'll have a solid understanding of some essential elements.

One thing to keep in mind as you move through this part of the course: as we start to discuss
visual design elements like typography and color, we're getting into the field of user interface
(UI) design. The fields of UX and UI design are closely intertwined and commonly mistaken
for one another.

I hope you're excited to get started. Let's go.

Would you like me to prepare this in a downloadable format (PDF, Word, etc.)?

////////////////////////////////////////////////

Course 5 Module 1
Section 2: Begin to create a mockup

6:2. Video

Introduction to Mockups

0:01

Hi there. Let's take a moment to remember where we left off.

0:05

The last time we worked on our dog walker app, we updated the low-fidelity prototype based on
feedback from participants in a usability study. Up until this point, we have been focused on the
app's function and the basic user flow. Now, we can begin to focus on the look and feel of the
design.

As a reminder, design can have different levels of fidelity.

0:28

In UX, fidelity means how closely a design matches the look and feel of the final product.
  If a design is low fidelity, that means it has a lower amount of complexity and is less
refined or polished.
 We call low-fidelity designs lo-fi for short.
 UX designers use low-fidelity designs when we want to get ideas out quickly and leave
room for exploration.

0:52

If a design is high fidelity, that means it closely matches the look and feel of the final product
and is more refined or polished overall.

1:01

We call high-fidelity designs hi-fi for short.

 UX designers use high-fidelity designs when we want to test a design that looks like a
real product and get more specific feedback from users.

1:13

In this course, we'll focus on high-fidelity designs.

So let's jump into one kind of high-fidelity design: mockups.

 A mockup is a static, high-fidelity design that is used as a representation of a final

product.
 Mockups give UX designers an indication of what the product will look like visually.

Let’s check out examples of mockups that were created by real entry-level UX designers.

1:54

First, we have Pocket, an imaginary interactive social media and search engine created by Dane,
who is now a designer at Google.

 Notice how different this mockup looks compared to the wireframes and low-fidelity
prototypes you've made so far.
 In a mockup, there are actual photos, use of color, use of shadows, different fonts, and
stylized buttons.
  It looks a lot more like a real app you might use.

Let’s check out another set of mockups.

These are for an app called Lucere, a make-believe takeaway salad and sandwich shop.

 Lisa, a designer at Google, created these when she was just getting started in the field.
 Notice how the mockups use color gradients, different text sizes, icons, and even a map.
 The mockups help you really get a feel for what this product would be like if it came to
life.

Hopefully you’re excited to create your own mockups.

2:32

When designing your mockups, there are a couple of things to keep in mind:

 Think about the visual elements you want to use on each screen of your design, such as:
o Typography
o Color
o Iconography

Until now, our designs have only featured empty spaces, or placeholders, for content.

2:50

Mockups have actual words, images, and icons that will appear in your design.

2:56

Now is a perfect time to materialize the content that will go here.

Keep in mind, going from a wireframe to a mockup should not feel like a paint-by-number
exercise.

 For example, it's okay to place an image in a different part of your mockup design than
you planned for in your wireframe.
3:12

In addition, make sure that you consider ways to lay out elements on the screen, like:

 Grids
 Containment
 Space

The way you arrange elements on a screen can:

 Make your design aesthetically pleasing

 Help users interact with your product
 Make your designs more accessible

3:29

To get started, we're going to discuss a few foundational elements of visual design in detail.

Ready? Let's go.

Would you like me to export this as a Word or PDF document?

/////////////////////////////////////////////////

Course 5 Module 1
Section 2: Begin to create a mockup

7:3. Video

Chikezie – Transition from Low-Fidelity to High-Fidelity Designs

0:04

Hi, I'm Chikezie. I'm a UX lead for AR Experiences at Google.

 We design AR Experiences for Google Search, for Shopping, and other third-party
brands.
If you're getting into a design tool for the first time, like Figma, Sketch, or Adobe XD, you
might be wondering:

 How do I use this tool?

 How do I create this flow?
 What does the UI need to look like?
 Is this even an appealing design?

My recommendation when you are getting ready to design something is to start with sketches.

 Now that you have your sketches, it's good to bring those sketches into your design tool.
 Now you're ready to go into high-fidelity mockups.
 When you were sketching with pen and paper, that was low fidelity.
 Now that you're going into high fidelity, this is where you get to bring those sketches to
life.

0:54

When you're designing something, you want to think about the journey:

 What are the major moments in the journey that will help a person get from A to B?

When you're designing in a tool like Figma or Sketch:

 You're going to have a lot of things available to you that didn't exist with pen and paper:
o Text colors
o A big color palette
o Text size
o Images
o A whole different suite of things available to you to work with

When you're thinking about bringing something to those tools, you're now entering a phase
called high fidelity.

When you're making these, this is not only the design that the engineering team is going to look
at and say:

 "Oh, this is what I'm being asked to build."

The product team is also looking at this and thinking:

 "Oh, this is the thing that's going to be what the app looks like."
 "This is going to be what the experience looks like, and I'm going to now assess this as:
o 'Is this the thing that I'm looking for?'
 o 'Is this the solution to the problem that we're going after?'"

So the high-fidelity design is:

 Not only a very beautiful and visual design for the solution
 But it's also a communication to the rest of the team:
o What they are going to build
o How they drive that thing forward

Would you like this formatted as a downloadable document (PDF or Word)?

/////////////////////////////////////////////////////////////

Course 5 Module 1
Section 2: Begin to create a mockup

8:4. Reading

Foundational Skills to Build Mockups in Figma

You’re almost ready to create your very first mockup in Figma. Before you get started, let’s
explore some of the skills that will give you the basic foundation to confidently create mockups
in Figma.

Basic Skills Overview

 Create a new page.
 Create frames on the canvas.
 Tab between projects in Figma.

Names to Know
Before you can begin creating a mockup, it’s important to understand the names that are used in
Figma:

 Each document is called a file.

  A file contains the canvas, where you’ll create layers and objects for your designs.
 A file also contains pages, where you’ll design your screens.
 Each page has its own canvas.
o This canvas is gray (#E5E5E5) by default and is where you can add, remove, and
update your designs.

Create a New Page

It’s easy to create a new page in Figma by following these simple steps:

1. Log in to Figma.
2. Create a new Design file by clicking the + icon in the upper-right corner.
3. On the left, click Page 1. This lists all of the pages currently in your file.
4. Click the + icon to add a new page to your file, as shown in the image below.

 When you create a new page, you’ll immediately be able to rename it.
 Or, you can rename a page at any time by double-clicking the title of the page.
 When you begin to name a page:
o The name text will be highlighted in blue.
o The row will be outlined in blue, as shown in the image below.

graphical user interface, application

To keep exploring, check out this

[tutorial from Figma] that goes through detailed steps to:

 Create a page
 Duplicate a page
 View all of your pages
 And more

Create Frames
The canvas in Figma is where you’ll create frames.

Think of the canvas like a blank wall that a picture frame hangs on, and the frames are like
picture frames where you’ll design.

To create a new frame:

 Select the frame tool.

 o The icon has four lines crossing in a grid pattern.
o It’s listed as the third icon from the left in the toolbar.
o The image below shows the frame icon in the Figma toolbar.

graphical user interface, text, application, chat or text message

Ways to choose the size of the frame:

 Click inside the canvas to create a default frame.

o Dimensions: 100x100 pixels
 Click and drag in the canvas to create a frame with the dimensions you prefer.
o Width and height will automatically update based on how much you drag.
o You can also choose a specific width and height in the frame section in the
design panel on the right side of the screen.
 Select a predetermined size for a frame, like a specific phone model or tablet:
o This is done in the Design panel on the right side of the screen.
o There is a list of different containers or frames for various devices or formats.
o Simply select a size to add the frame to your canvas.

Check out this

[Figma tutorial] to learn more about creating and using frames.

You Have the Tools!

You’ll use Figma or a similar design tool in your job as a UX designer.
The more familiar you become with Figma and its features, the faster you’ll be able to create
your own digital mockups in any tool.

Remember:
The knowledge you’re gaining isn’t limited to Figma.
The skills you’re acquiring by working in Figma will transfer to your work in other digital tools.

Pro Tip
Before you get to work, here’s a pro tip:

 It helps to open multiple windows to view your files.

 With multiple windows open, you can view a different file from the one you’re working
in without closing your current file.

To create a new window:

  Right-click files in your "Drafts” and “Recents" folders.
 Select “Open in new tab.”

Additional Resources
 Using keyboard shortcuts will speed up your design process and help you start
designing like a pro.
The website [Shortcuts.design] has compiled a list of useful
Figma shortcuts.
 Figma comes with some device sizes preloaded into the platform.
In addition, there are libraries of device sizes that you can copy and use from the Figma
Community.

Would you like this version exported as a PDF or DOCX file for formal documentation use?

/////////////////////////////////

Course 5 Module 1
Section 2: Begin to create a mockup

9:5. Reading

Review: Use Low-Fidelity Designs to Start Project Mockups

You’ve learned how to
create new pages and frames inside a file in Figma.

Creating new pages and frames is an important first step for converting low-fidelity designs into
mockups and high-fidelity prototypes.
Remember that mockups are static designs that show what a final product will look like.

They are also the building blocks for high-fidelity prototypes.

High-fidelity prototypes enable designers, stakeholders, users, and others to simulate the full
experience of a final product, including its visual and interactive elements.
They are crucial for getting feedback and approval on your designs.
Design Best Practices
This review briefly explores some benefits and best practices for using pages and frames in your
design process.

Use these best practices as you convert the low-fidelity designs for your portfolio projects into
mockups for high-fidelity prototypes.
Remember that you’re aiming for a portfolio of 3–5 completed projects.

Pages and frames in Figma will give you neat and tidy containers in which to create, store,
organize, and display your work.

Note
Figma is launching their new interface UI3 this year.
Updates will be released on a rolling basis—some users may already have the new UI!

In order to help users transition, Figma has created a resource for

Navigating UI3: Figma’s New UI.

This article catalogs:

 What changes have been made

 Where features have been moved
 A quick guide for users who want to revert back to UI2 for the time being

Pages
Pages are a great way to organize designs in Figma.
Each page has its own canvas, where you can create and store different design assets or different
versions of the same asset.

(Design assets include wireframes, mockups, and the individual elements that make up
wireframes and mockups.)

With different design assets organized into their own pages:

 You’ll have an easier time finding important items quickly

 You can focus on one part of a design at a time
Example

Here is a Figma File for the design of Zia’s Pizza ordering app.
On the left side of the File, notice how the designer has created two Pages:

 One titled Wireframes

 One titled Mockups

With each page in place, the designer can quickly navigate between their lo-fi wireframes and
the hi-fi mockups.
The checkmark reminds them which page they’re working in.

Figma File for Zia’s Pizza app. Left sidebar shows two pages, Wireframes and Mockups. Figma
canvas shows empty frames for mockups of app screens.

Frames
Within the mockups page, the designer has populated the gray canvas with frames.

Frames are containers for design assets.

In this case, each frame will contain a mockup for one of the app screens for Zia’s Pizza:

 A “Home” screen
 A “Build Your Own” screen for ordering
 A “Confirmation” screen for completed orders
 And so on

Notable Details

 Notice how the frames are numbered.

o These numbers indicate the sequence in which users will navigate through the
screens when the screens are finally mocked up and organized into a working
prototype.
 Each frame is listed in the Figma file’s left-hand navigation menu, which makes it easy
to navigate to different frames without having to scroll around the Canvas.

Keep this feature in mind, because Figma canvases can get extra large—just like pizzas!

Organizing Your Work

When you get ready to convert your wireframes into hi-fi mockups, consider organizing your
own Figma file in the way you see in the example:

 One page for your wireframes

 One page for your mockups
 Individual frames for each asset you’re going to mock up

If you have any issues, refer to this reading on

foundational skills for building mockups in Figma,
and check out this tutorial from Figma to learn more about creating and using frames.

Key Takeaways
 In a Figma file, each page contains a canvas where you can design and store design
assets.
 Within a page’s canvas, frames are containers for individual design assets.
 As you work through the design process, consider:
o Creating different pages for related groups of design assets
(e.g., low-fi wireframes and high-fi mockups)
o Titling and numbering frames to indicate their position within the flow of a
prototype or final product

Would you like this formatted version exported as a Word or PDF file?

//////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////

Course 5 Module 1
Section 3: Use typography in mockups

10:1. Video

Introduction to Foundational Elements of Visual Design

0:01

Hi there. It's a super-exciting time because you're about to design your very first mockup.
0:07

I'll begin by introducing you to some of the foundational elements of any mockup.

0:12

Elements are the building blocks of the mockups you'll create during the certificate program and
in the real world.

On a basic level, the term visual design in UX refers to how a product or technology appears
to the user.

0:25

In the next few videos, we're going to dive into three foundational elements of visual design:

 Typography
 Color
 Iconography

Typography

The first foundational element, typography, refers to the use of text and fonts.

Typography can:

 Help add hierarchy to your designs

 Make text easy to read
 Add visual style

Think about the letters spelled out on the Wizard of Oz movie cover.

0:50

The larger font size of the title indicates that information is the most important.
And the font itself alludes to how playful the movie is.
Color

The second foundational element is color.

Think about:

 The messages that certain colors communicate

 How people understand color
 How colors mix, match, or contrast with one another

1:11

Did you ever learn about the color wheel in art class?

Well, it comes in pretty handy for UX designers too, because it helps us find colors that are:

 Harmonious
 Complementary

Iconography

The third foundational element, iconography, refers to the images or symbols associated with
a subject or idea.

1:29

Think about the power icon on your computer.

1:32

It's really just a circle with a line, but most people know that this icon means power on a tech
device.

There are lots of other foundational elements like:

 Size
 Shape
  Direction

We won't cover those in detail at this point, but you can learn more about them in the readings
and through your own exploration.

I'm sure you're excited to get started.

And you might think that visual design is the most important aspect of the product.

But appearance isn't everything.

It's a UX designer's job to ensure that any decisions about a product's visual design still consider
usability the top priority.

2:06

In the next video, we will dive into the first of these elements, typography.

See you soon.

Would you like this formatted into a PDF or another document type for download or
presentation?

////////////////////////////////

Course 5 Module 1
Section 3: Use typography in mockups

11:2. Video

Typography in UX Design

0:01

Welcome back.
0:02

Time to kick things off with the first foundational element of visual design: typography.

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
 Choosing a font

0:15

Let's define each of these and explore them in more detail.

0:26

First up is the type classification.

0:29

Type classification is a general system to describe styles of type.

0:34

Two of the most popular type classifications are:

 Serif
 Sans Serif

0:39

Serif styles of type can be recognized by the tiny lines called serifs that trail from the letters as
strokes and stems as edges.
Look closely at the letter T on the left side of the screen.
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.

1:07

On the other hand, sans serif styles of type don't have these tiny lines.

1:13

Notice that on the right side of the screen, there are no small lines hanging off of the T.
This T is just a simple horizontal and vertical line.
That's a clear indicator that this T falls into the sans serif type classification.

Choosing a Typeface

Okay. Once you select a type classification, it's time to choose a typeface.

A typeface is the overall style of a letter.

1:32

Typefaces are distinguished by their:

 Stroke weight
 Shape
 Type of serif
 Line lengths

1:38

Each typeface is known by a family name.

Examples of serif typefaces:

 Times New Roman

 Georgia
 Cambria
1:48

Examples of sans serif typefaces:

 Arial
 Helvetica
 Verdana

Historically, UX designers preferred sans serif typefaces for apps and websites, because it was
more legible on the screen.
But, as technology has gotten better, so has screen resolution, which means it's no longer
difficult to read serif typefaces digitally.

In the past few years, serif typefaces have made a comeback with UX designers, and they have
even been digitized for modern screen use.

2:21 – Choosing a Font

All right. After you've chosen a type classification and typeface, it's time to select a font.

Font is the size, thickness, and emphasis of letters.

2:41

The difference between typeface and font can be a little confusing.

So let's take a look at this example:

In this case, the typeface is Roboto.

The font can be more light or bold, italicized or regular, and even more variations.

2:56

The font on the right side of the screen is a collection of all of the characters of a typeface in:

 One size
 One style
Examples:

 Roboto Bold in 12-point size is a font

 Roboto Light in 18-point size is also a font

3:04

And that's it, you've started to explore the vast world of typography.

3:13

Fasten your seatbelts because we're just getting started.

Next up, we'll describe the importance of typography.

See you there.

Would you like this content exported to a formatted PDF or editable document?

///////////////////////////////////////

Course 5 Module 1
Section 3: Use typography in mockups

12:3. Video

The Importance of Typography

0:01

Hello again.

In the last video, we examined the three steps to find the perfect typography for your design:

 Selecting a type classification

 Picking a typeface
 Choosing a font
But why is typography so important in UX design?

0:17

Well, if all the text on a page is the same size and visual style, it's hard for users to quickly
understand the page's parts and find the specific information they're looking for.

0:29

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

0:34

A typographic hierarchy is a method of ordering typefaces and fonts in a layout to create

divisions that show users where to focus and how to find information.

0:45

Remember, product interfaces are often made up of a lot of words on the screen.
Creating visual cues can help distinguish some words and phrases as more important than others.

0:56

Two common ways to create typographic hierarchy are by changing the typeface's size and
weight.

1:03

Think about when you open a newspaper.

The text you notice first is big and bold.
This is the newspaper's headline.
1:10

The headline gives context for what's to come in the article.

1:14

Similarly, when you open your favorite book, the chapter's title stands out because of the font.
The font of the title is usually larger in size and bolder in weight than the other words on the
page.

Both the headline and the title in these examples are considered header styles.
They both have larger and thicker letters than the words to follow.

1:36

The same thing goes for designing a digital product.

Most product interfaces have at least two sizes for text:

 A smaller size that's used for longer text passages

 A larger size that's used for titles and headings

1:50

Digital products might also use weight, which is the thickness of the letters in the typeface to
create typographic hierarchy.

1:59

For example, a bold typeface gives more emphasis or importance to the text.

Alright, so you now know a bit more about how typefaces and fonts are used to add hierarchy.
A second reason why typography is so important for UX designers is legibility, or making text
easy to read.

2:17

As a UX designer, one of your jobs is to make the product easier to read and navigate.
2:23

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.

2:34

These food labels are usually printed in bold black text on a white background.
Designers ensure that the label is easy to read, regardless of the surrounding design on the food
package.

This helps all grocery shoppers, including those with low vision, easily identify and read
nutritional information about the food, like the calories, vitamins, and ingredients.

2:58

Similarly, UX designers use easy-to-read typography for digital platforms.

For example, during the checkout section of an ecommerce website, designers choose
typography that is bold and easy to read so that the user is sure that they're paying correctly.

Lastly, be sure that the typography used in your design matches brand guidelines.

3:21

Brand guidelines are visual style choices used to communicate a brand's:

 Identity
 Values
 Mission

3:28

Brand guidelines have rules on typography and other visual design elements that have already
been researched, tested, and approved by the company's design team.
3:38

Typography adds to this visual style and displays a company's identity.

For example, Google uses a sans serif typeface called Google Sans.
The typeface was created by our design team and is seen in all of our marketing material.

3:53

It is even used in the Google logo.

3:56

This typeface reinforces the Google brand.

If you're designing for a specific company, make sure you ask for their brand guidelines
before getting started.

4:05 – Applying Typography in Figma

Now it's time to take all that you've learned about typography and apply it to your project.

Let's open Figma.

I'm going to start my mockup of the homepage of the dog walker app.
One important thing to note is that I'm going to create these mockups below the wireframes that
I created earlier in Figma.

I'll start by adding a phone screen, like you learned how to do earlier with my colleague, Karen.

4:39

Next, I'll draw a text box within the phone screen.

When you draw a text box, the design panel on the right side of the screen changes, which
allows you to set the:

 Typeface
 Size
 Weight
 And more
4:52

In the text box, I'm going to type:

"Busy afternoon?"
Then I'll press enter to start a new line and type:
"We can take them for a walk."

5:05

Now, I can play with the typeface, size, and weight of this text.

For the homepage of our dog walker app, I'm going to select the font called SF Pro Display.
Then I'm going to select a size of 24 point.

5:22

This is just the beginning.

For detailed instructions about how to work with type in Figma, check out the reading.

Have fun, and good luck adding typography to your own designs.

Would you like this structured content exported as a PDF or formatted Word document?

///////////////////////////////////////////

Course 5 Module 1
Section 3: Use typography in mockups

13:4. Assignment
///////////////////////////////////////

Course 5 Module 1
Section 3: Use typography in mockups

14:5. Reading

Work with Type in Mockups

You've started to learn about what's involved in adding typography to your designs, like picking
a typeface and choosing a font. By now, you know that type is an important design choice. When
typography complements a design’s personality and style, it helps convey a brand's identity,
values, and mission. It can also add emphasis to parts of your design, which helps users find and
interpret the information they need.

In this reading, you will learn the basics of working with typography in Figma. You’ll create and
select text fields, adjust fonts and font sizes, reorganize text, and set and save configured fonts.
There are lots of cool features to explore when it comes to adding type to your designs in Figma,
so let’s go!

Create Text Fields

Before making choices about typography, you’ll need to create a text field in Figma:

1. Open your file in Figma.

2. Select the Text icon in the toolbar, which looks like a letter T (highlighted in blue in the
image below).
3. Click anywhere on the Canvas and start typing to enter text.

🖼️Graphical user interface, text, application, chat or text message

🔗 To learn more about using the text tool in your designs, check out this Text Tool and Fonts
tutorial video from Figma.

Select and Edit Text Fields

To edit or adjust your text, you must first select the text box.

 When there is only one text box in your Canvas, you can select it with a single click.
 When there are multiple boxes, select the correct layer.

Steps:
 1. Click the text you want to edit in the Layers panel (on the left side of the screen). The
selected text layer will be highlighted in blue.
2. Double-click the text in the selected box on the Canvas.
3. To select all the text in a box, press Enter (or Return).
4. Make changes to the text as needed.

🖼️Graphical user interface, application, Word

To select more than one text box:

 Choose the Move tool (highlighted in the upper toolbar).

 Find an empty space on your canvas and click and drag a selection box over the text
boxes. All the selected text will be highlighted in blue.

🖼️Two layers of text highlighted on Figma

🔗 For more information, check out this article: Create and Edit Text.

Adjust Fonts and Font Sizes

Once you’ve selected a text box, you're ready to make design choices! You can adjust properties
like font size and weight.

Steps:

1. Select a text box.

2. Locate the Text section of the Design panel (right side of the screen).
3. Use the Font dropdown to find a typeface or font family (web, local, shared fonts).
4. Choose a weight from the Weight dropdown.
5. Use the Size dropdown or manually enter a value to change the text size.

You can also adjust:

 Paragraph spacing
 Line height
 Text alignment

🔗 Learn more from this article: Explore Text Properties.

Reorganize Text
You can adjust alignment, size, location, or constraints of your text in the Design panel.

Alignment

Located at the top of the Design panel.

Options:

 Align left
 Align horizontal center
 Align right
 Align top
 Align vertical center
 Align bottom

When selecting multiple text boxes, use the dropdown menu to access:

 Tidy up: Distribute elements evenly in all directions

 Distribute vertical spacing
 Distribute horizontal spacing

🖼️Graphical user interface, text, application

🔗 Learn more: Smart Selection

Location and Size

 X and Y values move the element along the frame’s axes.

 W and H values adjust the text box's size (not the font size).

🖼️Graphical user interface, text, application

Constraints

Constraints help maintain spacing and layout consistency across devices.

Each element has:

 Horizontal constraints: control distance from left/right edge

 Vertical constraints: control distance from top/bottom edge
 You can also center the element on X or Y axis or scale with frame resizing

🖼️Graphical user interface, application

🔗 Learn more: Constraints

Set and Save Preconfigured Fonts

You can save time by creating and reusing text styles.

Steps:

1. In the Layers panel, select the text with properties to reuse.

2. Go to the Text header in the Design panel.
3. Click the Style icon (four-dot square).
4. In the Text Styles menu, click the Plus (+) icon to name your style.
5. Click Create Style.

To use a saved style:

 Select text in the Layers panel.

 Open the Text Styles menu and select your saved style.

🔗 Learn more: Create and Apply Text Styles

Keep Learning About Type

 Not sure how to choose a font? Read 7 Things to Remember When Selecting Fonts for
Your Design from UX Planet.
 Understand how typography impacts Legibility, Readability, and Comprehension with
insights from the Nielsen Norman Group.

Would you like a downloadable PDF version of this formatted documentation?

///////////////////////////////////////////

Course 5 Module 1
Section 3: Use typography in mockups

15:6. Reading
Add Product Copy to Mockups

Introduction

An image of Lorem ipsum text with each line bigger than the last.

Just like in any industry, there are some things in the UX design community that aren’t always
agreed upon. One of those debates revolves around the copy, or written text, that's used in
designs.

You’ve already learned that placeholder text, such as lorem ipsum, can be used as a filler in
designs. However, some designers prefer to use real copy as they design, even in wireframes.
Let's explore how you can use both placeholder text and real copy in your own mockups.

Placeholder Text
One of the most popular types of placeholder text is lorem ipsum. As you might remember,
lorem ipsum has been used as placeholder text for over 500 years! As UX designers, we still use
lorem ipsum today for a few very good reasons:

 Using placeholder text allows you to share designs with stakeholders early, in the
beginning stages of development, before your designs are finished. This is especially
important when you need to get feedback or gather alignment on the direction of a
product or design, before you spend too much time developing the details.
 Placeholder text, like lorem ipsum, is great to use during the ideation phase and when
creating your first wireframes, when you want to focus on the layout of designs, not the
copy.
 Using placeholder text provides you with more time to develop copy. If you're working
with dedicated UX writers, or if you need to develop your own copy, coming up with the
words to include in designs takes time. Using lorem ipsum allows you to continue to
design while questions about the copy are being sorted.

Disadvantages of Placeholder Text

These are compelling reasons to use placeholder text in your designs. But there are some ways
that using placeholder text can be disadvantageous for designers, too:

 Placeholder text might confuse stakeholders or even distract them from the design.
 If your design is sized and adjusted to fit placeholder text, changing that text in later
versions of the design can affect the overall layout.

As a good rule of thumb: Placeholder text is often used in low-fidelity designs, like wireframes.
If you need to generate placeholder text for your own designs, you can use online generators, like
this:

 Lorem Ipsum generator by Lipsum

 Loremipsum.io

Placeholder text can be a great place to start your designs, but what can real copy add to the
design process?

Real Copy
As you design, you’ll start to envision what the app will look like and what it will communicate
to users. Some designers feel passionately that real copy should be used from the beginning of
the design process to aid in this communication.

Advantages of Using Real Copy

Here are a few reasons why using real copy, instead of placeholder text, can be advantageous
while you design:

 Using real copy from the start of the design process can lead to fewer adjustments to your
designs later. For example, you won't have to resize design elements to fit the real copy.
 Thinking about real copy early in the design process provides more time to get feedback
on copy-related design choices. Your design and copy work together to form one user
experience. Creating design elements and copy together, from the beginning, can make
them more cohesive.

Disadvantages of Using Real Copy

Using real copy in your designs seems like a great idea! But there are also some disadvantages
that need to be accounted for, such as:

 Using real copy early in the design process doesn’t save you from copy edits later. As
you've undoubtedly realized, UX design is a highly iterative process. You may change
the copy in your designs just as many times as you change the designs themselves.
 Humans are drawn to words. Real copy in a prototype can distract stakeholders from
commenting on design choices. If you email a low-fidelity prototype to your team with
real copy included, you will likely get notes about the words you chose, instead of the
visual design and functionality of the prototype, which is more important in that stage of
developing the product.

As general guidance: Real copy is often used in high-fidelity designs, like mockups. So at this
point in the design process, you'll probably want to start adding real copy to your own app
designs.
Placeholder Text and Real Copy in Action
Let’s check out a mockup of an app that shows the difference between placeholder text and real
copy. These mockups are for a recipe page on a cooking app. The design on the left uses
placeholder text, and the design on the right uses real copy. What do you notice?

Two mockups. One on the left with real text for recipes on the app and to the right the same app
with lorem ipsum text

Observations

 In the design with placeholder text, on the left, you might notice yourself focusing more
on the appearance of icons, the spacing between elements, or the colors that are used.
This mockup provides users with a general idea of how content will appear within the
design.
 In the design with real copy, on the right, did you read the titles of the recipes that are
listed? The advantage of using real text is that you have a better understanding of the
information the design will include and how that information will be organized. But, you
might be less focused on the design elements that are used.

Choose Between Placeholder Text and Real Copy

You may have convinced yourself by now that both of these options are the right way to go. And
that’s okay! This, like many areas of UX design, is something you get to decide on your own.

Combination Approach

Another option? You might want to use a combination of placeholder text and real copy.

In the recipe app example above, you might choose to label the icons in the navigation bar with
real text, like:

 Favorites
 Explore
 Profile
 Search

But you might also choose to describe recipes using lorem ipsum. This type of combination is
pretty normal, so feel free to explore with your own designs.
Final Thoughts
Keep in mind that using placeholder text or real copy in your designs might depend on:

 The product you're designing

 The preferences of your stakeholders or clients
 Feedback from your teammates

In some cases, it might be better to design using copy that has already been created, and in
others, you may not worry about copy at all.

The most important part of adding copy to your mockups is to be flexible and use what's
best for the product you're designing.

Would you like this exported as a PDF or Word document for easier sharing?

//////////////////////////////

Course 5 Module 1
Section 3: Use typography in mockups

16:7. Reading

Review: Add Typography to Project Mockups

Introduction
You’ve explored how to add typography to your design mockups in Figma. This is exciting
because, as you’ve also learned, typography is a powerful design element that:

 Creates hierarchy among information

 Makes text accessible and easy to read
 Conveys the brand associated with a product

Hierarchy, accessibility, and branding make your products more usable and meaningful for users.
This review explores an example of how to maximize typography in a design. Use this review
for guidance as you create and assess your project portfolio designs. The example comes from
the Zia’s Pizza app:
Three Figma frames: 1. Low-fidelity wireframe of a screen in Zia’s Pizza app, including
“Today’s Top Pizza” section, “Add to Order” button, “Pizzas You Might Like” section, and
“Build Your Own” button. 2. High-fidelity mockup of the wireframe. 3. Outline of typographic
choices for the high-fidelity mockup.

Sample Copy
In this example, the designer added sample copy to both the low-fi mockup on the far left and
the high-fi mockup in the middle. When filling designs with sample copy, you can use:

 Placeholder text, like lorem ipsum

 Real copy, which is the text users will see in the final product (or a version of that text)

Designers often use a mixture of both placeholder text and real copy, depending on factors like
how much time they have and what their stakeholders expect. Also, artificial intelligence (AI)
applications are now being used to quickly generate placeholder text that simulates real copy.

Defined Typography Choices

Next, the designer defined their typography choices in the area to the right. You’ll notice a
variety of typefaces and fonts that:

 Create hierarchy for the information in the app

 Express the app’s brand

With these typeface and font choices defined, the designer can quickly refer to them and
replicate them consistently throughout their mockups.

Application of Typography:
Typeface

Typeface is the overall style of a letter: its stroke weight, shape, type of serif, and line lengths.
Typefaces fall into styles or classifications, such as serif and sans serif, and they can make text
more or less appealing, attention-grabbing, and readable.
Example Usage:

 The designer chose the Permanent Marker typeface for the app’s logo.
o It’s a handwriting style of typeface—dynamic and attention-grabbing.
o Ideal for highlighting “Zia’s Pizza” but used sparingly due to readability issues.
 For all other text (headers, subheaders, body text, buttons), the designer used Oswald and
Roboto:
o These are less dynamic, more readable typefaces.
o Suitable for frequent use in the app.

Fonts

Font is a letter’s size, thickness, and emphasis.

 Larger and heavier fonts grab attention

 Smaller and lighter fonts are more readable in longer passages

You should choose at least two font sizes:

 A larger size for titles/headings

 A smaller size for subheadings/body text

Example Usage:

 Logo and header text: 24px

 Subheadings and body text: 12px
o Subheadings: Bold
o Body text: Regular

Typographic Hierarchy

Typefaces and fonts together create the app’s typographic hierarchy:

Visual divisions and distinctions that:

 Draw users’ attention

 Help them locate different kinds of information

Example Usage:

 Headers in Oswald Semibold 24px clearly separate two sections:

o “Today’s Top Pizza”
o “Pizzas You Might Like”
Legibility, Readability, and Brand Guidelines

Typography supports more than hierarchy—it promotes legibility, readability, and brand
alignment.

 Legibility: Ease of distinguishing individual letters

 Readability: Ease of reading entire words and passages
 Brand guidelines: Ensure alignment with client expectations and brand identity

Example: “Today’s Top Pizza” Section

 Typefaces: Oswald and Roboto (both sans serif)

 Fonts:
o Header: Semibold 24px
o Subheader: Bold 12px
o Body text: Regular 12px

These choices make the text:

 Legible
 Readable
 Visually consistent
 Aligned with brand identity

Screenshot: “Today’s Top Pizza” section from high-fidelity mockup of screen in Zia’s Pizza app.

Key Takeaways
Now you’re ready to start adding and formatting text in your own project mockups! This is an
exciting step in bringing your product to life and moving closer to a high-fi prototype that
simulates the product’s final look, feel, and brand.

If you run into any challenges while you work with text in your mockups, refer to this tutorial on
how to:

[Add product copy to mockups]

And remember: You’re aiming to create a portfolio of 3–5 complete design projects.

Would you like this formatted as a downloadable PDF or presentation slide deck as well?
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////

Course 5 Module 1
Section 3: Use color in mockups

17:1. Video

Color in UX Design

Introduction
0:00

Hi there. We've already discussed how thoughtfully chosen typography makes for a better
product. Now let's discuss another element of visual design: color. Did you know color can affect
your behavior, mood, and thoughts? Colors can:

 Convey emotions
 Signal actions
 Add variety

Examples:

 Red: Attracts a lot of attention. Used in exit signs, emergency buttons, and stop signs.
 Blue: Communicates serenity and calmness. Widely appealing.

Keep in mind: Certain colors might mean one thing in one region of the world and something
totally different elsewhere.

You’ll learn over time:

 Colors most commonly associated with different emotions

 How those choices affect your design decisions

For now, we’ll explore:

 How color choices and combinations are used in UX design to add emphasis,
communicate branding, and impact accessibility.
Using Color to Add Emphasis
1:14

 A change in color can draw user attention to a focal point (e.g., sign-up link, purchase
button).
 Example: Dog walker app – emphasis on the schedule button (bright color).

60-30-10 Rule

 60% Neutral color

 30% Complementary color
 10% Accent color

Application Example:

 White (60%)
 Gray (30%)
 Orange (10%)

Accent colors emphasize or highlight information.

Neutral colors support in backgrounds, lines, and text.

Design Application in Figma

2:50

 Add emphasis to text using a gray rectangle:

o Steps:
 Select Rectangle tool
 Draw rectangle around text: "Busy afternoon? We can take them for a
walk."
 Change color to light gray (hex: #d4d4d4)
 Right-click → Send to back

3:41

 Create a button:
o Draw another rectangle
o Use Align Horizontal Centers to center it
o Change color to bright orange (hex: #fa7b17)
 Add button text:
o Select Text (T) tool
 o Type: Choose a time
o Set text color to white (hex: #ffffff)

4:33

 Adjust font size: Set to 18 to fit in button

Result: Button is now emphasized for the most important user action on the screen.

Color and Branding

 Colors help define visual identity, making a product stand out among competitors.
 Think about recognizable brands and their colors:
o McDonald’s (Yellow) → Cheerful
o Coca-Cola (Red) → Energetic
o Google: Uses blue, red, yellow, green across all branding.

These consistent color schemes make brand products instantly recognizable.

6:01

 As a new designer, be aware of how you use the company’s brand colors.
 Maintain consistency across:
o Apps
o Websites
o Logos

Color and Accessibility

 Check color contrast between chosen colors.

Example:

 Left image: Black text on white background → High contrast

 Right image: Shades of green, blue, yellow on camo green → Low contrast, hard to
read

Follow Web Content Accessibility Guidelines (WCAG) for contrast standards.

 Test colors on:

o Various devices
 o Different environments

Colors may vary based on:

 Device type (desktop vs. phone)

 Lighting conditions (daylight vs. dark)

Example: The Viral Dress Photo

7:23

 Viral photo (2015): A dress seen as either:

o White and gold
o Black and blue

Reason: Color interpretation changed with lighting conditions.

 Yellow light → Dress appeared black and blue

 Blue light → Dress appeared white and gold

Lesson: Test your color choices in various environments.

Key Takeaway
Using color effectively in your designs helps users better navigate the product.

Next Topic
Next up, we'll discuss a third element of visual design: iconography. Let's keep going.

Let me know if you'd like this as a downloadable PDF or formatted document.

////////////////////////////////////

Course 5 Module 1
Section 3: Use color in mockups

18:2. Assignment
/////////////////////////////////////

Course 5 Module 1
Section 3: Use color in mockups

19:3. Reading

Work with Color in Mockups

Introduction
Have you ever looked at a color and felt an emotional connection? Color is one of the ways that
humans relate to objects. From the changing seasons to a truly amazing sunset, color evokes
feelings. As a UX designer, it’s important to learn how to harness that emotional connection as
you add color to designs.

Figma has a dynamic system that allows designers to enhance mockups with color. Let’s
examine the basics.

Create and Apply Colors Using Fill

1. Open a file in Figma.
2. Select the rectangle tool. It’s listed as the fourth icon from the left in the toolbar, to the
right of the Frame tool.
3. Draw a rectangular shape on the frame.
4. Select the shape.
5. In the design panel on the right side of the Figma screen, locate the section titled Fill.
6. In this section, find the color swatch showing the default color, white, to the left of the
hex code #FFFFFF. Click the color swatch to make the color picker appear.
7. Choose any color on the spectrum:
o Drag the circle (color selector) to the top-left corner for crisp white.
o Drag to the bottom-right corner for deep black.
8. Use the eyedropper tool (below the color box) to take a "drop" of color from one
element and apply it to another.
Adjust Color Values
Choose a Type of Paint

With the color picker open, note the four icons in the top-left corner representing different types
of fills:

 Solid: Solid color paint fill (black square icon).

 Gradient:
o Click to open a dropdown menu of gradient options.
o Gradient types:
 Linear: Color fades from one side of the shape.
 Radial: Color fades outward in a circle from the center.
 Angular: Color fades clockwise around the shape.
 Diamond: Color fades from a plus-shaped center out toward the edges.
 Image: Place an image inside an element.
 Video: Place a video inside an element.

Hue

 Below the color box, use the rainbow slider bar to adjust hue and find the perfect shade.
 Example: To get olive green, slide hue to green, then adjust the color selector.

Opacity

 Below the hue slider is the opacity slider.

 Adjust opacity to control how transparent a color is:
o 100% = fully opaque (rich color)
o 50% = semi-transparent
o 0% = fully transparent

Analogy: Think of opacity like paint:

 Multiple coats = 100% opacity

 One coat = semi-transparent
 No paint = 0% opacity

Create and Apply Colors Using Stroke

The stroke is the boundary or outline of a shape.
Steps to Apply Stroke:

1. Select a shape.
2. In the Design panel, navigate to the Stroke section.
3. Click the word Stroke, or press the plus (+) button.
4. Default values:
o Color: black (#000000)
o Line thickness: 1 (can range from 1 to 1000)
5. Adjust line thickness and observe the changes.
6. Use the dropdown menu labeled Inside to choose stroke placement:
o Inside (default)
o Centered
o Outside
7. Click the three dots to open the Advanced Stroke menu:
o Change outline shape and angles.

Tip: Strokes help highlight colors and create dynamic shapes in prototypes.

Resource: Design Code: “Figma Handbook: Fill, Stroke, and Advanced Stroke.”

Set and Save Color Styles

Save a Color:

1. In the layers panel (left side), select a shape with the color to save.
2. In the Design panel (right side), go to the Fill header.
3. Click the style icon (four dots shaped like a square).
4. In the Libraries menu, click the plus (+) icon.
5. Type a name for the Style.
6. Click Create Style.

Reuse a Saved Color:

1. In the layers panel, select a shape.

2. In the Design panel, go to Fill and click the style icon.
3. In the Libraries menu, choose a saved color style from the list.

More Help: Visit Figma’s Help Center to explore creating styles for:

 Colors
 Text
 Effects
 Layout grids
Learn How to Choose Colors
Now you know how to add color to your designs in Figma! But how do you choose the right
color?

Resources to Learn Color Theory and Application:

 Toptal article: The role of color in UX.

 CareerFoundry: The Color Guide: An Introduction to Color Theory and Color Palettes.
 Google’s Material Design: Article on using color to create modern-looking designs.
 Coolors: Coolors website – Generates complementary palettes with a tap of the space
bar.

Let me know if you'd like this exported into a downloadable PDF or Word document.

////////////////////////////

Course 5 Module 1
Section 3: Use color in mockups

20:4. Reading

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.

Web Content Accessibility Guidelines (WCAG)

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.

Applying WCAG in Your Designs

Color Blindness

Color blindness results in difficulty distinguishing between certain colors. There are three
common categories of color blindness:

 Red-green
 Blue-yellow
 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.

Design Tips for Color Accessibility:

1. Use icons in designs, in addition to color.

For example, 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.

Graphic comparison: Two phone screens—left screen with mistyped address; right
screen with a red exclamation mark alert and warning message “Invalid address
format.”

2. Use patterns and texture to create contrast.

Contrast is the difference between two or more elements in a design. Imagine you're
creating a bar graph using a client’s brand colors. Add subtle stripes to one column and
dots to another. With contrasting patterns, the bars will be clearly differentiated for all
users.

Graphic comparison: Left—bar graph using only color; Right—bars distinguished by

color and texture (dots vs. lines).

3. Avoid color combinations that could be hard to distinguish from one another.
Common difficult combinations for users with color blindness:
o Green & red
 o Green & brown
o Blue & purple
o Green & blue
o Light green & yellow
o Blue & gray
o Green & gray
o Green & black

Note: If you use green in your designs, that doesn’t mean you need to avoid red, brown,
blue, and gray altogether. But don’t place those colors directly next to each other,
especially for critical information. Also, use written labels to differentiate important facts.

Graphic comparison: Left—poor contrast with green, blue, and a grey background;
Right—higher contrast version with blue and red graphics and a light background.

Key Takeaway:
Your designs should convey information in multiple ways beyond just a single color,
such as using:

o Icons
o Patterns
o Textures
o Easily distinguishable color combinations

Low Contrast Sensitivity

People with low contrast sensitivity experience objects as dim or unclear, making them harder to
identify. Many people experience low contrast sensitivity daily, such as:

 In the dark with a bright screen

 In bright light with a dark screen
 As a natural decline with aging

Design Tip: Use Luminosity Contrast Ratio

Luminosity contrast ratio measures the contrast between background and text color. WCAG
recommends a minimum contrast ratio of 4.5:1.

Examples of Contrast Ratios:

 Low contrast: 2:1

Text and background are difficult to read.
  Minimum contrast requirement: 4.5:1
Easier to read combinations even with light colors.
 High contrast: 16:1
Bold text that stands out.
 Maximum contrast: 21:1
Black and white only—for highest readability.

Video Resource:
Colors with Good Contrast from W3 demonstrates how contrast ratios affect users, from reading
signs to speaking with loved ones.

Tool: WebAIM Contrast Checker

Use this tool by entering the hex codes of your text and background colors. Adjust using the hue
slider if your contrast ratio doesn’t meet WCAG standards.

Light Sensitivity
Some users are sensitive to:

 Bright light
 Bright colors

They may view your designs with:

 Dimmed screens
 OS settings like light mode, dark mode, or high contrast mode

Design Tip:
Allow users to choose their preferred display mode. Design both light and dark modes of your
projects.

Graphic: Display settings showing Light Mode, Dark Mode, and High Contrast Mode.

Consider Color Thoughtfully

The goal of designing a great user experience is to make people’s lives simpler and better. By
following a few guidelines and designing with accessibility in mind, you’ll create products that
are useful and fully accessible.
Additional Resources
 W3C Video: Easy Checks: A First Review of Website Accessibility
 Color Palette Generator: Color Safe – Shows WCAG in action.
 Figma Plugin: Stark - Figma – Run contrast checks directly in your designs to save time
and improve your workflow.

Would you like this formatted into a downloadable PDF or editable document?

///////////////////////////////////////

Course 5 Module 1
Section 3: Use color in mockups

21:5. Reading

Review: Add Color to Project Mockups

You’ve learned how designers use color to add emphasis, create variety, promote accessibility,
and communicate branding in their designs. Like typography, color is another powerful design
element you can use to make your designs more usable and meaningful. As you move forward
with designing your portfolio project mockups, let’s revisit the Zia’s Pizza example and explore
how the designer applied color to enhance users’ experience with the app.

Zia’s Pizza App: Before and After

Two Figma Frames:

1. Order screen for Zia’s Pizza in black and white.

2. Order screen for Zia’s Pizza in color, including white, pastel red, and pastel green for
backgrounds; bright red for buttons and text emphasis; and dark gray for headers and
body text.

A Defined Color Palette

Figma frame containing color palette and hex codes for Zia’s Pizza app.

Before considering the app screen mockups, notice the color palette of bright red, dark green,
pastel red, and pastel green. The designer used Figma’s color picker tool to define that palette
and arrange each color in a frame. (See this reading for a refresher on how to
work with color in mockups.)

A predefined color palette helps with both design efficiency and visual consistency:

 The designer can refer to their palette to quickly identify the hex codes they need for
adding color to new design elements.
 They can ensure they’re consistently using the same colors across parallel elements, like
buttons and headers.

Importantly, this color palette sets the designer up to satisfy the 60-30-10 rule, a best practice
for selecting colors:

 One neutral color makes up 60% of the color palette.

 One complementary color makes up 30% of the palette.
 One accent color makes up 10% of the palette.

From the palette they’ve defined:

 The designer for Zia’s Pizza can use white or some other neutral, like light gray, as the
neutral color for 60% of their design.
 The pastel red and pastel green can serve as the complementary colors for 30% of the
design.
 The bright red and dark green can serve as accents for the other 10% of the design.

The Color Palette in Action

1. Creating Emphasis

 The designer used the bright red accent (E81A3F) to create emphasis.
 It draws attention to the buttons so users can easily see where they need to take action.
 That same eye-catching red also emphasizes important information, like the pickup wait
time and the description of “The Glorious” pizza of the day.

2. Creating Visual Variety and Contrast

 The designer uses color to create both visual variety and high visual contrast, which is
key to accessibility.
 Red and green are complementary colors that make one another appear more vibrant.
  In their pastel forms, they appear alongside the app’s neutral white to create mild visual
contrast and offer good backgrounds where more important colors can stand out.
 Crucially, both the white and the pastels provide contrast for the dark gray of the headers
and body text.
 This contrast makes the app easier to read and will help it pass WCAG accessibility
standards. (For a refresher on color and accessibility, see this reading about
accessibility considerations for color.)

3. Communicating the Product’s Brand

 The designer used their color palette in a consistent way to communicate the product’s
brand.
 Recall the color of the Zia’s Pizza logo in the mockups from the reading about
adding typography to mockups.
 That logo appears in the same bright red color that the designer uses to emphasize the
app’s buttons.
 This kind of consistency links the client’s brand name, “Zia’s Pizza,” with the key actions
that users want to take as they engage with the brand, mainly building and placing pizza
orders.

Color and Cultural Significance

 As you build your design skills and learn more about color, consider the kinds of
messages it sends to users.
 In some cultures, for example, red is powerfully associated with food, appetite, and
eating, which is why it often appears in the visual elements of major food brands like
McDonald’s and Coca-Cola.
 In the example, then, it may be no coincidence that the designer chooses to feature a
bright red for the logo and key buttons.

Consistency and Iteration

 As you add color to your own mockups, remember to pay attention to your prior color
decisions and ensure consistency across the design.
 As with all parts of the design process, your color choices aren’t locked in: You should
iterate and update as needed.
 But if you do update your color choices, be sure to update your main palette so that the
key reference is always current.
Key Takeaways
 Are you ready to start filling your mockups with color?
 This is an exciting point in your design process because, like typography, color is a key
element for bringing your designs to life and creating experiences that users will find
easy and enjoyable.
 Remember to use color thoughtfully throughout your project portfolio, where you’re
aiming for 3–5 completed design projects.
 If you encounter challenges as you add color to your mockups, review this reading on
how to work with color in mockups.

Would you like this formatted as a downloadable PDF or DOC file as well?

//////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////

Course 5 Module 1
Section 4: Use iconography in mockups

22:1. Video

Iconography in UX Design

Introduction
Time: 0:01

Hello. Now that we've explored two elements of visual design, typography and color, let's
discuss a third: iconography.

What is Iconography?
Time: 0:11

 Iconography is a system of graphic images or symbols that are associated with a subject
or an idea.
  These images and symbols are called icons.
 Though icons may seem playful, when made effectively:
o They limit wasted tech space.
o Catch the user’s attention.
o Offer easy transitions to other pages or locations.
 Icons are used frequently in both digital and physical environments.

Examples of Icon Usage

Time: 0:43

 Elevator button with an arrow indicates direction (up or down).

 Sun icon on a computer screen allows brightness adjustment.

Time: 0:57

 Some icons indicate specific actions like the arrow or sun.

Time: 1:04

 Other icons provide supplementary information, such as:

o Battery icon signaling it's time to recharge.

Universally Recognized Icons

Time: 1:14

 Icons like a house on a navigation menu indicate a path back to the home screen.

Time: 1:30

 Since such icons are universally understood, they can be reused in your own app
designs.

Cultural Considerations in Iconography

Time: 1:38
  Some icons have specific cultural associations.

Time: 1:43

 Example:
o An American football icon may not be appropriate to represent sports in a global
app.

Time: 1:51

 A more universal icon like a soccer ball is often a better choice.

 Always include a text label to describe the icon’s meaning.
o Example: Add "Home" beneath a house icon.

Accessibility and Branding

Time: 2:10

 Text labels make the app more accessible (icons are not screen reader friendly).
 Iconography is crucial to a company's brand.
o Example: Google Workspace icons are unmistakable due to their unique color
and style.
 Most companies have their own in-house iconography guidelines to help designers
make consistent decisions.

Practical Application: Dog Walker App Icon

Time: 2:49

 Continuing with the homepage design of the dog walker app, now it's time to add an
icon.

Time: 2:54

 Here’s the last design state from the previous video.

Time: 2:58–3:20

 Steps to add the icon:

1. Visit Google’s Material Design page for free icons.
2. Click Resources.
 3. Scroll to H and select the Home icon.
4. Click the blue download button (bottom left).

Time: 3:20–3:48

 Navigate back to Figma:

1. Click the rectangle in the top-left corner.
2. Select Place Image.
3. Choose the downloaded Home icon and click Open.

Time: 3:54

 Draw the icon in the desired spot on the app layout.

 Change the icon color to orange using hex code #fa7b17.

Time: 4:13

 Add a text box under the icon:

1. Write “Home”.
2. Center the text below the icon.
3. Change the text color to orange (#fa7b17).
4. Set the text size to 12 pt.

Conclusion
Time: 4:44

 The Home icon has been successfully added to the dog walker app.
 We've now covered three foundational visual design elements:
1. Typography
2. Color
3. Iconography

Coming up next, we will explore how to arrange these elements within your design.

Would you like me to prepare this content in PDF or Word format for printing or presentation?

/////////////////////////////////

Course 5 Module 1
Section 4: Use iconography in mockups

23:2. Reading

Work with Icons in Mockups

Introduction to Icons
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.

Icons range in style and meaning, as shown in the images above of a profile icon, a location icon,
a favorites icon, and a zoom icon. There are two universal icons that are used across mobile apps
and website designs: home and search. The home icon is represented by the shape of a house,
and the search is represented by a magnifying glass. Chances are, you will probably include
these two icons in the designs you're creating in this course!

You can import, create, adjust, and save icons right in a design tool like Figma. Check it out.

Import and Create Icons

There are lots of resources to help you import and create icons for your own design project. By
default, Figma supports Font Awesome, a giant set of customizable icons with an easy-to-read
font. With Font Awesome, you can:

 Keep icons as-is (regular) or make them solid, so they’re easier to see.
 View and copy items from the Font Awesome cheat sheet.
 Right-click an icon to copy it to your clipboard and paste it onto your Canvas in Figma.

Learn more about icons and Font Awesome from Figma’s Help Center.

Another option is to import icons from an existing design system, like Google's Material
Design or Apple's Human Interface Guidelines. For example, you can add Google Material
Design icons directly to your workspace in Figma.

Adjust Icons
To resize an icon in Figma:

1. Select the icon that you want to adjust by clicking on it.

2. Adjust the size and proportions by holding the Shift button as you drag the corner of the
icon.

Consider Users
Each time you create or add an icon to your designs, think about the users you're designing for.
You want the icons you choose to be inclusive, accessible, and easily understandable for all of
the users that your product will reach.

Keep in mind these three best practices when it comes to using icons in designs:

1. Make Icons Universal

 Consider whether an icon is culturally or geographically specific before adding it to your

designs.
 Will the icon make sense to a global audience, or only for users in the region where you
live?
 Where will the users of the product you're designing be located?

Your goal should be to include icons that everyone recognizes and understands, regardless of
their background. For example, most users are familiar with the idea that the house icon means
"home", which can help everyone navigate your app.

2. Consider Including a Text Label

 Usually, text labels are included in small font directly below an icon.
 Including a text label ensures that:
o Users who use a screen reader
o New adopters of technology
are able to identify the icon.
 A text label can clearly describe (in one word!) what the icon means, like writing the
label "Search" under a magnifying glass icon.

3. 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:
o The same color scheme
o The same font
 o The same style

For example, check out the icon set for the Material Design website, and you’ll notice that the
color and design flow well between each icon set, and none of the icons look out of place.

Learn More About Icons

To learn more about adding icons to your designs, check out this blog post on Icon Finder about
[how to use icons in Figma].

Or, if you want to take your design work one step further, check out this video from Robert
Bradford about [creating icons in Figma].

In addition, this article from Intechnic provides tips and tricks about [icon usability].

Would you like this documentation exported as a PDF or Word file for sharing or printing?

/////////////////////////////////////////

Course 5 Module 1
Section 4: Use iconography in mockups

24:3. Reading

Review: Add Icons to Project Mockups

Introduction
You’ve learned that icons are images or symbols that stand for specific actions or tools in an app
or website. When used effectively, icons:

 Save space
 Catch the user's attention
 Transition users to new information or new locations in the product
 Showcase the product’s brand
 Improve accessibility by helping overcome language barriers
For example, consider these two mockups of the navigation panel in the Zia’s Pizza app:
A lo-fi mockup without icons and a hi-fi mockup with icons.

 Low-fidelity mockup of Zia’s Pizza app navigation menu with no icons.

 High-fidelity mockup of navigation menu with icons for menu items.

By adding the icons on the right, the designer has enhanced the app’s navigation, saved space,
and made the design more engaging and accessible. In this review, you’ll explore how the
designer added and edited these icons in their mockup.

Determine Where to Include Icons

When determining where to include icons, designers typically focus on a product’s user flow and
identify places where icons might guide and support users. In your own mockups, you might
begin by identifying 2–3 places to include icons.

Depending on the needs of your specific design, this may include:

 Home menu icons

 Contact icons
 Settings icons

It may also include icons in a navigation menu, like those in the example above.

You’ve probably interacted with icons like these in the websites and apps you use every day.
Think about ways that such icons help designs:

 Save space by condensing words into visuals

 Catch the user's attention with imagery
 Make it easier to transition to another page or location

In the Zia’s pizza app, for example, the classic house icon condenses the “Home” menu item into
an easily recognizable visual, which is made especially interesting by the design’s bright red
color. Even a user who doesn’t understand the word “home” may recognize that icon and use it
to easily navigate to the app’s home screen.

Design or Import Effective Icons

Once a designer has decided where to include icons, it’s time to get those icons into the design.
Figma enables designers to import, create, adjust, and save icons within the application itself.
Designers can even import open-source icons by using this
free Material Design plugin for Figma.
If they need or are inspired to create custom icons, they can design them from scratch.

Pro tip:
If you choose to design icons from scratch, consider the design principles discussed on the
Material Design website.

Essential Guiding Questions

 Will this icon be inclusive and accessible for users?

 Have I added an alt-text label to describe what the icon means?
 Have I chosen iconography that represents the company’s brand and meets any relevant
branding guidelines?

Example: Zia’s Pizza App

High-fidelity mockup of navigation menu with icons for menu items:

 House icon for Home

 Plus icon for Build Your Own
 Pizza slice icon for Browse Pizzas
 Heart icon for Saved
 Person icon for Profile
 Question mark icon for Help

Most of these icons are industry-standard icons that designers use for similar purposes across
many kinds of products. Regardless of their location, culture, or background, many users will
immediately recognize these common icons and understand exactly what they mean.

The pizza icon for “Browse Pizzas,” while specific to the app, clearly captures the information
that users will get from the screen, and it also represents Zia’s brand.

There isn’t necessarily an industry-standard icon associated with the “Build Your Own” screen,
so the designer opted for a simple plus sign icon. This icon may work, but the designer should
validate it during usability testing.

With the possible exception of the plus icon, all these icons make it easier for users to navigate
the product. They’re interesting and coherently branded: their bright red color is one of the app’s
accent colors, and it links the icons with the “Zia’s” logo at the top of the menu.

These icons are all freely available from the Material Design icon set.

Add and Edit Icons in Designs

To add and edit icons in Figma, the icon files must be in .svg format. Once you have saved your
icon file or downloaded an open-source icon to your computer, those icons can be added to a
mockup.

Steps to Add Icons in Figma

1. Insert the icon

o In your Figma canvas, go to the toolbar at the top and look for the Shape tools
option (rectangle icon).
o Select the rectangle icon → choose Place image/video from the drop-down menu.

Note: Figma is launching their new interface UI3 this year. Updates will be released on
a rolling basis. To help users transition, Figma has created a resource for Navigating
UI3: Figma’s New UI.

2. Open the file

o When prompted, find the icon file you want to insert and click Open.
3. Place the icon
o Click on the spot in your canvas where you want to place the icon.
o You can also drag the icon into place after it appears.
4. Adjust the size
o Select the icon → hold Shift while dragging a corner to keep proportions
consistent.

House icon with a proportion label (24 by 24) and a blue border shows the icon has been
selected and its proportions constrained with the shift button.

o Alternatively, use the Design tab in the right sidebar to adjust size with keyboard
input.
5. Change the color
o Adjust the color of your icon to match your design's color palette.
6. Add a label
o If applicable, add a text box under the icon and add a label.
o Format icon labels consistently with your typographic choices.

Set and Save Icon Types to a Library

In Figma, designers can reuse components and publish them to a team library.

Steps

1. Select an icon and click the Create a component button (four squares in a diamond
shape).
 House icon and top toolbar in Figma canvas. In the toolbar, the Create a component
button is highlighted.

2. If working alone, the component will be saved in the Local components section of the
Assets panel.

Figma Assets panel with Local components section open. A House icon is highlighted.

3. When working on a team, publish icons to your team library for access through the
Assets panel.
A shared library maintains consistent branding and style at scale.

Populate Mockups with Icons

Once designers define and save the icons, they can begin implementing them throughout their
design. Icon choices may change during the design process. Always update icons to be consistent
with the latest design decisions.

Reflect on Icons
Effective designers pause to reflect on icon choices. Ask yourself:

 Will these icons guide and support users by saving space, catching attention, and making
it easier to transition to another page or location?
 Are there alt-text labels for screen reader accessibility?
 Are the icons culturally/geographically neutral?
 Are the icons and labels consistent with the color palette and typography?
 Is the iconography consistent with branding and style guidelines?

Key Takeaways
Now you’re ready to add icons to your own project portfolio designs!
This is another exciting moment in the creation of your hi-fi mockups because icons are a
powerful tool for making designs more usable and meaningful.

Icons help designs:

 Save space
 Get users’ attention
  Transition users to new locations
 Convey the product’s brand

As you apply icons to your project portfolio, remember that you’re aiming for a portfolio with 3–
5 completed design projects.

Let me know if you'd like this exported as a PDF or formatted in Markdown, Word, or any other
format.

//////////////////////////////////////

Course 5 Module 1
Section 4: Use iconography in mockups

25:4. Assignment
//////////////////////////

Course 5 Module 1
Section 4: Use iconography in mockups

26:5. Reading

Learn About More Visual Design Elements

So far, you’ve learned about the importance of typography, color, and iconography in mockups.
As you continue to design your own mockups, it’s also important to understand the most basic
visual design elements, like lines, size, shape, and images. Here's a bit of good news: You don’t
have to be artistic to use these elements as you design. So let’s check out each one!

Four Foundational Elements: Lines, Size, Shape, and Image

Lines

 Illustration: Three vertical lines in blue, red, and green.

 A line is a straight figure connecting two points in space.
  In the world of UX design, lines can be used to:
o Differentiate sections of an app
o Connect two related ideas
o Add emphasis to certain parts of the design
 Example: You may choose to place a line below header text to draw additional emphasis
to titles.

Size

 Illustration: Four columns, each smaller than the last.

 The size of an element is in relation to other elements and factors that affect the design.
 Especially important when designing for small screen sizes (e.g., mobile phones).
 The size of elements can determine how users experience your design, for better or
worse.
 Example: A button that's too small can frustrate users or cause them to tap the wrong
part of your design.

Shape

 Illustration: A green circle with a plus sign and a red circle with an "x".
 Shape is defined as lines around a self-contained space that includes length and width.
 Shapes appear in almost every app design:
o Rectangles
o Squares
o Circles
o Other custom shapes
 Examples:
o A circle with a plus sign (+) may indicate expanding a menu.
o A circle with an "X" may be used to close out a window.

Image

 Illustration: An image of a burger and fries.

 In UX design, images are used to:
o Tell stories
o Make an impact without words
o Add visual emphasis
 Images can be:
o Static (pictures and illustrations)
o Moving (animations and GIFs)
 Should be relevant to:
 o The story you want to tell
o The users you're designing for
 Example: If your home repair app addresses a clogged gutter, include an image of a
clogged gutter to drive emotional impact.

Putting It All Together

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

1. Visual Appeal

 Consider how the content of your designs will be experienced by users in the real world.
 Ask yourself:
o Are your lines connecting or dividing the right design elements?
o Are any shapes accidentally overlapping?
o Did your image upload correctly to Figma?
 Review your work with heightened attention to detail, specifically looking for elements
that might not be visually appealing.

2. Accessibility

 Think about how users with various accessibility needs might react to the elements you
include.
 Ask yourself:
o Do headers stand out from the information below by using lines or other visual
elements?
o Do all of your images have alternative text?
 Ensuring accessibility is critical to making your work a success!

Additional Resource
As you continue to apply visual design elements in your mockups and beyond, reference this
short guide from Usability.gov about visual design basics. It covers the elements you've learned
in this part of the course and more!

Let me know if you'd like this in a downloadable format (like PDF or DOCX).

///////////////////////////////
Course 5 Module 1
Section 4: Use iconography in mockups

27:6. Video

Add Images to Your Mockups

0:00

Welcome back. You've just learned about three fundamental visual design elements:
typography, color, and iconography. In this video, you'll explore various ways to include
images in your designs.

Why Should You Include Images in Your Mock-ups?

 Images can help communicate a message without using words.
o Scanning and scrolling is a popular way that users interact with apps and
websites.
o Adding images helps tell the story in a different way.
 Example:
o When you're trying to book a hotel room, photos of the room are important for
deciding whether you want to book the room or not.
o You might consider things like:
 The view
 The size of the bathroom
 The layout of the beds
o Images can show this type of information in a way that words can't.

Images Create an Emotional Response

 When users visit an app or website, having a set of strong images throughout the app or
website can create a connection to the product in a way that supports the content.
 To create this emotional response:
o It’s important that the image fits the UI (User Interface), which is concerned with
how a digital product's interface looks and functions.
Example: Twitter’s “Fail Whale”
 Think about the popular social networking platform, Twitter.
 One image that was used from 2008–2013 was an illustration taken from artist Yiying
Lu’s Lifting a Dreamer art piece.
 It featured a whale being lifted by birds, and was used to signal service outages.
 The image added some levity and personality to a product reliability issue that users
connected with.
 The Fail Whale is a great example of how images can help:
o Add visual interest
o Bring balance to UI pages that are light on features or experiencing service issues
 Though it has since been replaced with other imagery, the Fail Whale is still fondly
remembered.

Images Set a Product Apart from the Competition

 The text in your app or website describes the features and benefits of the product.
 The next time you visit an app or website, pay attention to:
o The images they use
o How those images affect the browsing experience

To Review:
 Images help:
o Enhance your designs
o Create connection to the product for users
o Establish a stronger brand presence
 When choosing an image format:
o Consider the message you want to communicate
o Consider any images that may have already been used in other places in the app
 No matter which type of image you use, there should be a clear purpose for using it.

Icons vs. Photos and Illustrations

 Your app or website will often contain icons that communicate small messages to the
user.
 However, photos and illustrations should most often be used:
o In places where they can help enhance the design
 o By adding context to the text that appears on the page

What’s Next
Next up, we'll explore techniques for arranging elements on the page.
Meet you there.

Would you like this content formatted into a downloadable document (PDF or Word)?

////////////////////////////////////

Course 5 Module 1
Section 4: Use iconography in mockups

28:7. Reading

Find Stock Images for Mockups

As you work on your mockups, you might want to include an image to illustrate a concept or to
act as a placeholder. There are many sites where you can download images for free, including:

Unsplash
 Search and download free, high-resolution images.

Blush
 Create and customize free illustrations by artists from all over the world.
 You can install the plugin or create your own doodle.

Check out these two great resources, and bookmark them to use while you design!
Would you like this exported as a document or presentation format?

/////////////////////////////////////

Course 5 Module 1
Section 4: Use iconography in mockups

29:8. Reading

Additional Design Considerations

In addition to the visual design principles of typography, iconography, and color, there are a few
more design features you should know about as you begin to create mockups. In this reading,
you'll learn about elements like hyperlinks, buttons, and inputs, which can help you design
easy-to-use products.

Hyperlinked Text ![link icon]

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.

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:
o Filled button with square corners
o Filled button with rounded corners
o Filled button (square or rounded) with shadow
o 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.

To find out more about adding buttons to your mockups, check out:

 Material Design's comprehensive guide to buttons

 UX Planet's 7 Basic Rules For Button Design

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.
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”).

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

To learn more about adding inputs to your designs, check out:

 Material Design's guide to text fields

 UX Planet's The Anatomy of Input Field

Would you like this formatted into a downloadable PDF or a presentation format next?

//////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////

Course 5 Module 1
Section 5: Understand page layouts - grids and containment

30:1. Video

Introduction to Layouts

0:01 — Opening Statement

Hey there. You've already learned about a few of the important design elements used to create
your mockups. However, you'll need more than just typography, color, and iconography to create
a design. You also need to learn about layouts, which are ways to arrange elements on a page.

0:18 — Definition and Importance of Layouts

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

0:36 — Reusing Layouts and What’s Next

Layouts can easily be borrowed or reused from other projects with similar pages. For example,
there are popular layouts for:

 Home screens
 Login screens
 Checkout screens

There are many ways to lay out a page in the world of UX design. In the upcoming videos, we
will cover a few things that can tie your designs together:

 Grids
 Containment
 Space

Ready to get started? Let’s go.

Would you like this formatted into a printable PDF or presentation next?

///////////////////////////////////

Course 5 Module 1
Section 5: Understand page layouts - grids and containment
31:2. Video

Use Grids to Guide Layouts

0:00 – Introduction to Grids

Hey there. Let's start our discussion about layouts by focusing on grids.
When you design a mockup, the correct placement of elements on your page can improve user
flow and make it easier to navigate.
But it can be tricky to guess where to place elements within your mockup, especially as a new
designer.

Luckily, we have tools to make correct placement or layout easier.

0:24 – Basic Grids and Layout Grids

Basic Grids

 These intersecting lines divide pages into small squares that allow you to easily layout
elements in a design.
 The lines on the grid are evenly spaced to help you design consistently and manage
spacing of elements.
 Here's what a basic grid is like in Figma.
 If you drew wireframes on grid paper in an earlier course, these grids might look familiar.

Layout Grids

 It's more common for UX designers to use a layout grid.

 A layout grid is a series of columns and alleys that allow you to organize elements in a
design.
o Columns are the colored blocks.
o Alleys are the spaces between the columns.
 Here's what a layout grid is like in Figma:
o Columns are a light red and are all the same width.
o Alleys are white and are also all the same width.

Number of Columns by Device Type

 The number of columns in a layout grid depends on the type of device you're designing
for:
o Larger screens (e.g., websites on laptops or desktops): 12 columns.
 o Smaller screens (e.g., tablets or apps): 4 to 8 columns.
o Smartwatch: Only 1 column.

Keep in mind: No matter what device you're designing for, the number of columns in your layout
grid depends on how you want to organize and split up your content.

1:37 – Choosing Between Basic and Layout Grids

You might be wondering:

Should I use a basic grid or a layout grid when I design?

 This varies for each designer, so the choice is yours.

o Some designers use both basic and layout grids.
o Some use only one.
o Some designers don’t use grids at all.

Why use a grid as a beginner?

1. Grids create clarity and consistency

o An effective grid guides the eye, making it easier and more pleasant to scan
elements on the screen.
2. Grids quicken the design process
o It becomes faster to place elements on the screen.
3. Grids make it easier to collaborate
o With a grid, designers will generally know where to place things.

2:44 – Real-World Example: Peacock App

Let's check out a mockup from an entry-level designer who now works at Google.

 Designer: Dane
 App: Peacock
 Feature: Users are prompted to search for friends or locations near them
 Page Layout:
o A search bar appears above images of cities like:
 New York
 San Francisco
 Chicago
Key Observations:

 The squares for each image are exactly the same size.
 The search bar is centered directly in the middle of the screen above the images.
 This indicates that Dane used a grid to plan his design.

Thanks to the use of a grid, Dane's completed mockup has a visually appealing layout.

Reusability of the Layout

You could even reuse this layout for another purpose.

For example:

 A food ordering app where each image box is a different restaurant.

Conclusion
You're starting to get the hang of how to lay out a page.

Coming up, we'll discuss another thing to keep in mind when laying out a page: containment.

Would you like me to compile this into a visual slide deck or PDF for easy presentation?

////////////////////////////////////

Course 5 Module 1
Section 5: Understand page layouts - grids and containment

32:3. Reading

Create Grids in Mockups

Introduction
Grids are a helpful and practical tool to use as you create designs.
Grids give consistency and structure to your design, and they help ensure that your designs fit
within the screen boundaries.

Basic Grid and Layout Grid Examples on Figma

 Remember, a basic grid has intersecting lines that divide pages into small squares that
allow you to easily lay out elements in a design.
 If you used grid paper to draw your wireframes, a basic grid will look familiar!
 A basic grid is on the left in the image above.

Basic grids are useful to help you design consistently, but UX designers more commonly use
layout grids.

 A layout grid is a series of columns and alleys that allow you to organize elements in a
design.
o Columns are the colored blocks.
o Alleys are the uncolored spaces between the columns.
 A layout grid is shown on the right in the image above.

You can also apply more than one grid to a frame and edit them separately.

So let's explore how to use grids in Figma!

Create and Apply Grids

To apply a layout grid to your designs in Figma:

1. Select the Frame in the Layers panel or on the canvas.

o If you're working on a file you've already started designing, be sure that you’re
selecting the Frame and not another element’s layer by accident.
2. On the right side of the screen is the Properties panel.
o In the Layout grid section, click the + icon.
3. By default, a basic grid, which Figma calls a Uniform Grid, will be applied to the
Frame.
o Uniform grid gets its name because all of the squares in the grid are a uniform
size.
4. You can update the properties by clicking on the icon with nine squares, in the shape of
a square, to the left of Grid to open the Layout grid settings.
Check out Figma’s Help Center to learn some
tips for using grids and to explore
types of grids (uniform, column, row),
including a visual with an example of each type of grid.

Align the Elements to a Grid

A control is a feature that helps you align design elements.
In Figma, controls are located at the top of the Properties panel.

Aligning the elements on your Frame to a grid will help your layout appear even, organized, and
"tidy," as Figma describes it.

Here are the controls in Figma, in the order listed below:

 Align left
 Align horizontal centers
 Align right
 Align top
 Align vertical centers
 Distribute horizontally
 Distribute vertically
 Tidy up

Learn more about aligning objects in this article from Figma’s Help Center.

Auto Layout
Another feature in Figma that you might want to use when creating mockups is Auto Layout.
With Auto Layout, your designs can shrink or grow in response to a change.
For example, you can create buttons that grow or shrink as you edit their text label.

There are a few ways you can add Auto Layout:

 Select a frame, then click the plus (+) icon next to Auto Layout in the right sidebar.
 Right-click the frame or object, then select Add Auto Layout.
 Use the keyboard shortcut Shift + A.

Learn more about Auto Layout in the Figma Help Center.

Stay Inside the Lines
Using grids can help improve the consistency and visual appeal of your mockups, so be sure to
use them!

To learn more, check out this video tutorial from Figma on

alignment and distribution—it will take you through the steps to perform these actions directly
in Figma.

Or, read this article from Figma's blog that explains layout grids:
everything you need to know about layout grids

For a different perspective, you can also learn how to

build better designs with layout grids
in this article from Smashing Magazine.

Would you like this formatted as a downloadable PDF or styled document for class or team use?

//////////////////////////////////////////

Course 5 Module 1
Section 5: Understand page layouts - grids and containment

33:4. Reading

Review: Create Grids in Project Mockups

Purpose of Using Grids

You’ve learned that grids will help you decide where to place elements in mockups.
There are a few reasons to use grids. They:

 Create clarity and consistency by making it easier to scan the elements on the screen.
 Quicken the design process by making it faster to place elements on the screen.
 Make it easier to collaborate on designs, since designers will generally know where to
place things using the grids in your designs.

You’ve also explored the Figma functions that will help you
create, customize, and align grids in your mockups.
Zia’s Pizza App Example
Now, you'll review a completed example that shows how grids were applied to the Zia's Pizza
app.

Figma canvas with two high-fidelity mockups of Zia’s Pizza app.

Left mockup includes layout grid of pink vertical columns and white vertical alleys.
Right mockup includes Uniform Grid of intersecting, evenly spaced vertical and horizontal lines.

Create Grids in a High-Fidelity Figma Mockup

In the example, the designer applied a layout grid to the hi-fi mockup on the left and a basic
grid to the hi-fi mockup on the right.
Remember that Figma refers to a basic grid as a Uniform Grid.

Steps to Apply Grids to Your Mockups

1. Select a frame in the layers panel on the left or click the panel in the canvas.
2. Click the plus (+) icon next to the layout grid in the design panel on the right.
o By default, a Uniform Grid will be applied to the frame.

Figma canvas with design panel to right. On the canvas, a frame with default Uniform Grid
applied.

Customize Grids
Next, in the example, the designer customized their grids for a mobile app.

When you’re ready to customize the grids in your mockups, you can update a grid’s properties
by clicking on the grid icon in the design panel on the right to open the layout grid settings.

To Apply Recommended Grid Settings for Mobile Apps:

1. Click the grid icon to open the layout grid settings.

2. Click the grid drop-down menu and select columns.
3. Make any changes needed to match the following grid settings:
Property Value

Count 5

Color FF0000 10%

Type Stretch

Width Auto

Margin 0

This grid provides structure to help you arrange the elements in your design to fit within the
boundaries of a smartphone screen without cluttering the frame.

Align UI Components with the Grid

Finally, the designer for Zia’s Pizza added UI items to their frames and aligned those items with
the grids.
For instance, notice how:

 The buttons span the width of the grid and are aligned to the edge of the columns.
 The icons in the header and the image for "Today's Top Pizza" also have their edges
aligned to the grid.

Guidelines for Aligning UI Items in Your Mockups:

1. First, you can:

o Align the edges of your components along the edges of the grid columns.
o Align components to fit within the center of the grid columns.
o Use a mix of these two alignment methods.
2. Next, click and drag each UI component in the canvas to adjust its position.
3. Finally, use Figma’s align features to adjust the alignment of a component or multiple
components at once.

Review Figma’s help article and video on aligning objects to learn more about these features.

Auto Layout Feature

In addition to Figma’s align features, you might also find the Auto Layout feature helpful.
Auto Layout allows you to resize or redistribute UI components to automatically fit the frame
they’re in.
There’s a lot you can do with this feature, and
Figma’s help article on auto layout will guide you through each function.

Editing Grid Settings

As you design with grids in the future, feel free to edit your grid settings to best meet your
design needs and preferences.

 Selecting a frame and clicking the grid icon will reopen the grid settings for that frame.

Check out this

[article from Figma about grid basics]
and this
[article from Figma about the types of grids].
The latter includes examples of each type of grid to help you see how you might edit your grids
in the future to best meet your needs.

Key Takeaways
 Grids are powerful tools for designing and aligning elements with consistency and
efficiency.
 When used effectively, they’ll save you time and yield better designs throughout your
project portfolio, for which you’re aiming to create 3–5 complete design projects.

Would you like this documentation exported to PDF or formatted for a design presentation slide
deck?

//////////////////////////////////////

Course 5 Module 1
Section 5: Understand page layouts - grids and containment

34:5. Video

Use Containment in Layouts

Introduction
0:01
Hello again. We've started to explore how to lay out elements on a page effectively using grids.
Now, it's time to discuss another thing to keep in mind when arranging elements on a page:
containment.

Containment Overview
0:14
Containment uses visual barriers to keep designs neat and organized.
Barriers like lines or colors help limit content to a specific section of a design.

Four Methods of Containment

0:25
There are four methods of containment:

 Dividers
 Borders
 Fill
 Shadow

Let's discuss each method using an example from the homepage of the dog walker app.

Example Introduction
0:37
Do you like what I've done with it while you were working on your own project?
I even added a cute little image of a dog on the choose-a-time button.

0:46
You can learn more about how to find free images like this in the reading.
I'm going to have some fun with this mockup to bring to life each of these four methods.

1. Dividers
0:57
First, let's talk about dividers.
As a refresher, dividers are lines that separate sections.
They can be simple yet effective tools for quickly breaking up content that doesn't belong
together.

In our dog walker app, you'll notice that we use a gray divider between each dog walker that's
available.

2. Borders
1:17
Similarly, borders use lines to break up sections of a page.

1:22
Borders are continuous lines that often form shapes like squares or rectangles.

1:27
When I first created the choose-a-time button, I just had text and the image of a dog.
The lack of a border made it difficult for users to know it was a button.
So I decided to add a rectangular border to make it more clearly a button.

3. Fill
1:42
Third, we have fill.
Fill assigns colors to borders and shapes, just as you might think—the color fills in the object.

1:51
This makes content stand out, which creates a new focal point within the mockup.

1:56
The choose-a-time button still isn't as clear as buttons on other apps I've used.
So I'm applying an orange fill to give it more emphasis.

4. Shadow
2:06
Lastly, you can add shadows to your designs to create dimension.
Often, designers use shadows in combination with borders or fill.

2:15
Shadows help break up elements even further.

2:18
Check out the shadow I've applied to the choose-a-time button.
Now it's almost three dimensional.

2:24
You feel like it's coming off the page.

Conclusion
Alright, your mockups should be starting to come together.
You now have two tools in your toolbox that you can use to lay out elements on a page:

 Grids
 Containment

Up next, let's add one more tool to your toolbox, spacing, which can help make your mockups
even more visually appealing.

See you there.

Would you like this formatted version exported to PDF or converted into a slide presentation?

//////////////////////////////////

Course 5 Module 1
Section 5: Understand page layouts - grids and containment

35:6. Reading

Create Containment in Mockups

Introduction
As you determine the layout of elements on the pages of your mockups, be sure to consider
containment.

As a reminder, containment uses visual barriers to keep designs neat and organized. In other
words, barriers like lines or colors help limit content to a specific section of a design.

You were introduced to four methods of containment in the previous video:

 Dividers
 Borders
 Fill
 Shadow

In this reading, you'll get a better understanding of how to create each of these containment
methods in Figma.

Create Dividers
Dividers are single lines that separate sections of content in a design. Dividers can be simple yet
effective tools for quickly breaking up content that doesn’t belong together.

Adding a divider in Figma is pretty simple, but you need to know how the sections of your
mockups relate to each other in order to determine where dividers should be placed.

To create a divider in Figma:

1. Identify sections of content in your mockup that need to be separate from one another.
2. In the toolbar at the top left of the screen, select the Rectangle tool, which is represented
by an icon that looks like a square.
3. Select Line from the dropdown menu, as shown in the image below.

graphical user interface, application

4. Choose the area of your mockup where you’d like to draw the divider. Click and drag
your mouse to pull a straight line across the Frame.
5. Click on the new line that was added to your mockup to select it. In the Design panel on
the right side of the screen, go to the Stroke section, where you can control the look of
the line you created. Select a color for the line and the line size, as shown in the image
below.
Add Borders
Borders are continuous lines that form shapes, like rectangles, that break up sections of a page.
Borders usually form around a specific design element or important text. Adding a border can
differentiate between pieces of content in your designs.

To add a border in Figma:

1. Identify the content that you feel needs to stand out from the rest of the content in the
mockup.
2. In the toolbar at the top left of the screen, select the Rectangle tool, which is represented
by an icon that looks like a square.
3. Draw a rectangle on your Frame. Resize the rectangle to fit around the outside of the
element that you want to emphasize.
4. In the Design panel on the right side of the screen, go to the Fill section. Remove the fill
from the rectangle you’ve created.
5. Go to the Stroke section of the design panel. Add a stroke to the rectangle using the
plus (+) icon on the right side. The stroke will outline the rectangle.
6. Use the weight field to select a weight or thickness of the stroke, in pixels. Enter a value
in the field provided, or scroll through values using your mouse/trackpad while the field
is in focus.

To learn more, check out this article from Figma about how to
apply and adjust stroke properties.

Select Fill
Fill assigns colors to objects in your design. The color you choose will fill in the design
element, which makes content stand out on your page.

To select fill in Figma:

1. Click to select a Layer in your design that you want to add fill to.
2. In the Design panel on the right side of the screen, go to the Fill section. Click the plus
(+) icon to add a fill to the layer.
3. Figma will add a default solid fill with a hex value of C4C4C4. Click on the small
colored rectangle, or fill swatch, to open the color picker. You can use the color picker
to select any color to fill your shape.

graphical user interface, text, application

Learn more about adding
fills to elements
in the Figma Help Center.

Apply Shadow
Shadows create dimensions, especially when used in combination with borders or fill. There are
two different types of shadows: drop shadows and inner shadows.

 Drop shadows come directly off of the element and can go in any direction. Drop
shadows are perfect for making buttons feel like they’re coming off of the page.
 Inner shadows move inward onto the element. Inner shadows are a great way to show
that a button is being pressed.

To apply a drop shadow in Figma:

1. Click to select a Layer in your design that you want to add a shadow to.
2. In the Design panel on the right side of the screen, go to the Effects section. The drop
shadow effect is applied by default, as shown in the image below.
3. Adjust the drop shadow using the Effect settings icon, which looks like a sun. Feel free
to play around with a few different shadow options in order to find one that you want to
use in your mockups!

To apply an inner shadow in Figma:

1. In the Design panel on the right side of the screen, go to the Effects section. The
dropdown menu is on drop shadow by default. Click on the arrow to view the rest of the
dropdown menu, and select Inner shadow.
2. Adjust the drop shadow using the Effect settings icon, which looks like a sun. The
effect is subtle, but you should notice a shadow inside of the shapes you’ve selected.

graphical user interface, text, application, chat or text message

For more details about using shadows in your designs, check out this article about how to
add shadow or blur effects
in the Figma Help section.

Let me know if you’d like this document exported as a PDF or converted into a printable guide.

/////////////////////////////////
Course 5 Module 1
Section 5: Understand page layouts - grids and containment

36:7. Reading

Review: Create Containment in Project Mockups

You’ve learned how to apply containment elements to your portfolio project mockups.
Containment uses visual barriers to keep designs neat and organized.

You’ve also learned that there are four methods of containment:

 Dividers: Lines that separate sections

 Borders: Continuous lines that break up sections of a page and often form shapes, like
squares or rectangles
 Fill: A color feature within borders and shapes
 Shadow: An effect that creates dimension, often used in combination with borders or fill

Evaluate the Mockups in Terms of Containment Issues

Figma canvas with a high-fidelity mockup of Zia’s Pizza app illustrating a design that
doesn’t have clearly defined sections and buttons.

In this example, the designer started by evaluating their current design for containment issues
and had these observations:

 It's difficult to tell where one section ends and the next one begins.
 Due to the background color, it looks like there are two sections. In reality, however,
there are three main content sections.
 It is not clear that in the “Pizzas You Might Like” section, there is a button.

Apply Divider Lines and Fills to Separate Sections

After evaluating this screen, the designer looked for areas where it might be helpful to separate
sections or where content and elements run together. The examples below show the “before” and
"after” of how dividers and fills were used to separate entire sections.
Two close-up comparison images of Zia’s Pizza mockups.
The left example has no divider line or clear separation of sections. The right example shows a
divider line and different background fill color applied.

Let’s break down the changes that were made to the “after” version on the right:

 A divider line is used between the top navigation bar and the content below it.
 A fill is added to one section of the background. The fill is meant to show a more
permanent separation than the inset divider, which is separating different content in the
same section. Adding a fill to the “Today’s Top Pizza” section helps distinguish it from
the other content sections.

Add Borders and Shadows to Form Shapes

Buttons are an excellent place to start adding borders in your project mockups. A lack of borders
on buttons can make it difficult for users to identify them as buttons. Notice how the example
below from the Zia's Pizza app uses a border to clearly identify the component as a button.

Bilder mit zwei Schaltflächen mit Rahmen.

Eine hat eine rote Füllung mit rotem Rahmen, die andere eine weiße Füllung mit eine

The designer identified that the button in the “Pizzas You Might Like” section wasn’t clearly
identified. To improve this, the designer added a shadow to the “Pizzas You Might Like” section,
creating a border and allowing it to act like a card because it was separated from the rest of the
content.

Two button images.

The left example has no border or shadow applied. The right example has a border and shadow
applied.

Before and After

Figma canvas with two high-fidelity mockups of Zia’s Pizza app.
Left mockup has a mostly white background; the bottom one-third of the app is light green. In
the "Pizzas You Might Like" section, it is unclear whether “The Incredible” is a button because it
does not have a border.

On the right mockup, the app is divided into sections, indicated by differing background colors.
In the “Pizzas You Might Like” section, the button appears to be selectable given the drop
shadow around the pizza name and price.
The designer implemented the changes as seen in the image on the right. Note the following
improvements:

 It's easy to tell where one section ends and the next one begins. The three content sections
are now clearly defined by the different background colors.
 A divider line is placed between the current wait time and the number of pizzas in the
queue to separate the content sections.
 It is clear that in the “Pizzas You Might Like” section, there is a clickable button.

Expand Use of Containment Elements to Other Screens

Once a designer knows how and where to add containment elements to one screen, the next step
is to add them consistently throughout all the other screens of the project.

In the Zia’s Pizza example below, the designer added divider lines between the sections and
also applied the same border and shadow treatment to create card layouts that are clickable.

Mockup of two sections of Zia’s Pizza app.

A divider line is separating the two content sections and borders and shadows are used to
indicate clickable card layouts.

Improve Your Portfolio Projects by Applying Containment

Elements
When you’re ready, you can use this example as a guide to review and revise your own portfolio
projects in terms of containment elements.

Remember, you need to have 3–5 completed projects for your portfolio. Keep iterating and
improving along the way!

Key Takeaways
 Use containment methods such as dividers, borders, fills, and shadows to keep designs
neat and organized.
 Evaluate your designs for ways to contain elements and keep content and interactions
more organized.
 Refine designs in one screen by adding dividers, borders, fills, and shadows to help
separate content into logical sections and identify buttons and other important objects.
  Implement the same changes in all other screens.

Let me know if you'd like this exported to PDF or any other format.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////

Course 5 Module 1
Section 6: Understand page layouts - negative space

37:1. Video

Use Negative (White) Space in Layouts

Introduction

0:01
Hey there. We've just covered how grids and containment can help you lay out a page. Now, let's
add one more tool to your toolbox: spacing.

What Do We Mean by the Word Space?

0:11
What do we mean by the word space? Well, space is something we're all familiar with. When we
write, we leave a space between every word in the sentence. Or when we look at the homescreen
of our phones, there is space between each app icon.

White Space in UX Design

0:26
In UX design, this is called white space. White space is the gaps between elements in a design.
Keep in mind white space is often referred to as negative space. So why is white space
important?
1. Emphasis on a Focal Point

0:41
First the use of white space can provide emphasis on a focal point within the design.

0:47
This can help focus the user on an action they need to take. For example, think about the Google
Search homepage; the search bar and Google logo are surrounded by white space. The use of
white space clearly communicates the action users should take: search.

2. Grouping Items (Proximity)

1:10
Second, the use of white space can help group items together, which is also known as proximity.

When elements like buttons or text are placed close to each other on a page, users naturally
group these elements together and expect them to be related. On the other hand, when elements
are placed far apart from one another, users don't think they're related. Remember Gestalt
principles from earlier in this certificate program? Well, proximity is one of the Gestalt
principles.

Visual Example of Proximity

1:32
Let's check out this graphic depiction of proximity. The image on the left contains 16 circles of
the same size in a 4x4 grid with similar spacing.

1:42
The assumption is that all of the circles are grouped together and would be related.

1:48
The image on the right also contains 16 circles of the same size in a 4x4 grid. However, more
space has been placed between the second and third columns of circles.

1:59
This additional space makes it appear like the circles are split into 2 groups of 8, and those 2
groups would not be related.
3. White Space Helps With Readability

2:24
Third, white space helps with readability. Leaving more white space between elements makes it
easier to focus on each element. Take a look at this example. The website on the left has little
white space, because it uses a large font and a big image, which are grouped nearby one another.

This website is pretty difficult to read, because our eyes are jumping between elements. In the
website on the right, the content is the same but there is more white space. This design uses a
smaller font and a smaller image. This allows the eye to look at each element and makes the
website easier to read.

4. Preventing User Errors

2:43
Okay, one more thing to keep in mind when it comes to white space.

2:48
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.

Educating Stakeholders

2:59
When you get your first job as a UX designer, you may have to help educate your clients or
cross-functional teammates about the importance of white space. Businesses often feel that more
content is better. It's important to help those stakeholders understand that using white space in
the design will make their product easier to use and will hopefully lead to better business results.

Business Benefit Example

3:21
For example, if the sign-up button is clearly emphasized using white space, more users are likely
to click it, which is a win for the business.
Conclusion

Now you have all the tools you need to add elements to your mockup and lay out those elements
on a page. Good luck putting what you've learned here into practice with your own design
project.

Let me know if you'd like this exported as a PDF or formatted for slide presentation.

//////////////////////////////

Course 5 Module 1
Section 6: Understand page layouts - negative space

38:2. Reading

Use Negative Space in Mockups

Introduction
Taking advantage of space, in addition to color, lines, and text, is an important way to make your
designs visually appealing and easy to read.
Negative space is the area that surrounds an object within an image. In other words, negative
space is the gaps between elements in a design or the space that’s not being occupied.

Negative space is also often called white space or empty space. Many UX designers prefer the
term negative space because backgrounds of designs aren’t always white, and the space that's
empty in the design will reflect the background color.

Example: Google Homepage

Check out how the Google Search homepage uses negative space in the image below.
The biggest elements on the page are the Google Doodle that features the Google logo and the
search bar.
There are a few small links across the top of the page, but most of the page is negative space.
This clean design makes the page visually appealing and draws their attention to the part of the
page that they need to interact with to meet their needs, which is the search bar.
Image Reference: google homepage

The Importance of Negative Space

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

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

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

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

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

Use Negative Space in Your Designs

Dog Walker app examples of Line spacing, padding, and margin

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

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

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

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.

Apply Your Learnings

Using negative space between design elements will help to create a better user experience and
can result in a clean, elegant design that holds users’ attention.
If you’re curious to learn more about using negative space, watch this video of a real designer
showing you
how to use negative space to increase readability of objects.

Let me know if you'd like this in a downloadable format such as PDF, Markdown, or
PowerPoint.

///////////////////////////

Course 5 Module 1
Section 6: Understand page layouts - negative space

39:3. Assignment
////////////////////////////////

Course 5 Module 1
Section 6: Understand page layouts - negative space

40:4. Reading

Review: Revise Project Mockups by Adding Negative Space

Overview
You’ve learned about using negative space to add emphasis, readability, and clear grouping to
your design.
This review will demonstrate how a designer used negative space to improve the Zia’s Pizza
app.

Evaluate Negative Space in Current Design

Figma canvas with a high-fidelity mockup
Figma canvas with a high-fidelity mockup of Zia’s Pizza app illustrating a design that is crowded
and has readability issues.

As you’ve learned, any space that doesn’t have an element in it is negative space.
In this example, the designer started by evaluating the negative space in the mockup and had
these observations:

 The content is tightly packed.

 It’s hard to read and overwhelming.
 The content sections are too close together.
 The customization options are tightly squeezed together.
 There are too many sections on the page to be easily usable.

Determine How to Improve the Design’s Spacing

Once the evaluation was complete, the designer determined specific ways to use negative space
to improve the grouping, emphasis, and readability.

Grouping

Close-up image of the “Browse Zia’s Pizzas” section illustrating cards that are too close
together.
This before image shows that the cards were too close together to be easily usable, so the
designer decided to add more negative space around the cards.
This reinforces the Gestalt principle of proximity and, in this case, will make the hierarchy of the
cards simple to comprehend.

Emphasis

Close-up image of customization buttons in Zia’s Pizza app.

Close-up image of customization buttons in Zia’s Pizza app. Illustrates buttons are too
close together to easily interact with.
This before image shows how close the customization buttons were, making them hard to
interact with.
The designer determined that adding negative space around the customization buttons would
help emphasize the actions that the user needs to take.
Readability

Close-up image of crowded text area in Zia’s Pizza app.

This before image shows that the text was hard to read, so the designer decided more negative
space is needed between the content sections to help improve readability.

Refine the Design’s Negative Space

Figma canvas with a side-by-side comparison of two high-fidelity mockups of Zia’s Pizza
app. Both have the same content.
Left mockup is more crowded with less negative space, and the elements run together.
Right mockup has more negative space, and it is clear where the sections are.

Before and After

The designer implemented the changes as seen in the image on the right.
Note the following improvements:

 Grouping: The user can better tell which elements are grouped together, and which
aren’t, because of the use of additional negative space.
 Emphasis: The spacing between the different types of pizza is clear, and the ingredient
sections are separated enough to be distinct and easy to interact with.
 Readability: Everything is clearly separated and defined appropriately using the space
between sections and elements.

As you can see, the amount of space between and around the elements plays a big part in the
usability.
Once the designer made the improvements and adjustments to this one screen, then they repeated
the process for all of the mockup screens.

Improve Your Portfolio by Addressing Negative Space

When you’re ready, you can use this example as a guide to review and revise your own portfolio
projects in terms of negative space.
Remember, you want to aim for 3–5 completed projects for your portfolio.
Keep iterating and improving along the way!

Thinking of the three primary strengths of negative space listed above, you can experiment with
your layout to make your design easier to use.
Remember that any previous decisions aren’t locked in. If you need to make adjustments to
previous decisions like color or text, that is fine.
Key Takeaways
 Use negative space to add emphasis, improve readability, and create clear groupings in
your own portfolio project mockups.
 Start by identifying the places where there is not enough negative space.
 Determine places to use negative space to improve the grouping, emphasis, and
readability.
 Implement the changes in one screen first, and then repeat on all other screens.

Let me know if you’d like this content converted into a PDF, Word Document, or presentation
format.

////////////////////////////////

Course 5 Module 1
Section 6: Understand page layouts - negative space

41:5. Reading

Common Design Patterns in Apps

Graphic

Graphic of three phones showing different apps - Burger Garden, Burger Nest, and The Vegan
Cow

Introduction
In this part of the course, you've been learning about page layouts. As you begin to layout pages
for the app you're designing, it can be helpful to know about common layouts and patterns that
are used in existing apps.
Knowing about these layouts can help kickstart your visual design process, save you time, and
improve your design work.
Common Screens in Mobile Apps
You may have noticed that mobile apps tend to have certain types of screens in common. The
layout and appearance may differ between apps, but they all share the same purpose and design
considerations.
Below are some of the most common types of mobile app screens. Keep them in mind as you
begin creating wireframes for your mobile app portfolio project.

Home Screen

The home screen is the first screen users encounter when they open an app.
Home screens display the app’s main content and features, and serve as a starting point for users
to explore further.

Since the home screen lets users know what an app has to offer, the content needs to be easy to
understand, use, and navigate.
Common navigation elements, like a bottom navigation menu and a search icon, make it easy to
get started with an app because they are familiar to many users.

It can be tempting to fill a home screen with lots of content, but that can create a cluttered and
overwhelming experience for users.
Focusing on essential content—and making good use of white space—makes home screens
easier to use.

Onboarding Screens

Onboarding screens introduce first-time users to an app’s main components and functions.
They can help users get started quickly, especially if an app has unique or unfamiliar features.
Onboarding screens can also collect information to create a more personalized user experience.
Designers have a lot of options when it comes to these screens, so they should be tailored to the
experience of a particular app.

A good onboarding flow can boost user engagement and retention.

But because they’re often made up of several screens, they need to be easy to navigate.
Designers can minimize drop-off by using clear, concise copy and engaging graphics to create a
seamless and memorable experience.

Profile/Account Screen

A profile, or account, screen contains a user’s personal details (like their name and email) and
their app preferences (like order history and accessibility settings).
Because a profile screen contains a lot of important information, it should be clearly organized
and easy to navigate.
That’s why it’s a best practice to make them as simple and clean as possible.

Checkout Screen

The checkout screen is where users complete purchases.

Checkout can be more complex than other parts of an app since it usually involves a few forms
for payment and shipping info.
This step can be stressful, so it’s important that users feel as safe as possible.

Designers can help by making it clear what information is needed for each form field and adding
visual cues to indicate that a field has been filled out correctly.
They can also let users know their personal data is secure and include a confirmation message
when a user completes a purchase successfully.

Key Takeaways
The more you can incorporate good design practices into your wireframes, the easier the rest of
the design process will be.
You’ll save time and effort, leaving you space to experiment with your design ideas.

We've shown you a few common examples of mobile app layouts, but there are many available
options.
Check out this article from Design Rush on the
8 effective mobile apps design patterns,
such as splash screens, navigation drawers, and floating action buttons.

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

 Basil (recipes)
 Owl and Fortnightly (news content)
 Crane and Rally (analytics)
 Shrine (eCommerce)
 Reply (social media)
For general info on adapting the components of a mobile app to different contexts, visit the
About Material Studies page.

Would you like this formatted as a printable PDF or Word document?

///////////////////////////////

Course 5 Module 1
Section 6: Understand page layouts - negative space

42:6. Assignment
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////

Course 5 Module 1
Section 7: Module 1 review

43:1. Video

Wrap-up: Starting to Create Mockups

Timestamp: 0:00

Hello.

You've just started creating high-fidelity designs, congrats. Now you have a taste of what it's like
to create refined design work.

Summary of Progress

 First, you were introduced to visual design, which is how a product or technology
appears to users.
 Then, you started to create your first mockups.
 To create these mockups, you used visual design elements like:
 o Typography
o Color
o Iconography

What’s Next

In the next part of this course, you'll learn about some common visual design principles, which
will help improve and refine your mockups.

Final Note

Like I mentioned before, visual design is a massive world.

Ready to explore more?

Let's get started.

Let me know if you'd like this exported into a specific format such as PDF or DOCX.

//////////////////////

Course 5 Module 1
Section 7: Module 1 review

44:2. Reading

Glossary terms from course 5, module 1

Terms and definitions from Course 5, Module 1

Basic grids: Intersecting lines that divide pages into small squares, which allows you
to easily

lay out elements in a design

Borders: A method of containment that uses continuous lines that often form shapes,
like
squares or rectangles, to break up sections of a page

Containment: The use of visual barriers to keep elements of a design neat and
organized; the

four methods of containment are dividers, borders, fill, and shadow

Dividers: A method of containment that uses single lines to separate sections of a

page

Fidelity: How closely a design matches the look and feel of the final product

Fill: A method of containment that assigns colors to borders and shapes

Font: The size, thickness, and emphasis of characters of text

High-fidelity: A design that closely matches the look and feel of the final product and
is more

refined or polished; called “hi-fi” for short

Iconography: A system of graphic images or symbols associated with a subject or

an idea

Layouts: Ways to arrange elements on a page

Layout grid: A series of columns and alleys that allow you to organize elements in a
design

Low fidelity: A design that has a lower amount of complexity and is less refined or
polished;

called “lo-fi” for short

Mockup: A high-fidelity design that represents your final product, without the
interactivity of a

prototype

Negative (white) space: The gaps between elements in a design

Shadow: A method of containment that creates dimension in combination with
borders or fill

Typography: The technique of arranging letters and text to make the language
readable, clear,

and visually appealing

Typographic hierarchy: The ordering of typefaces and fonts in a layout to create

divisions

that show users where to focus and how to find information

Typeface: The overall style of text, distinguished by stroke weight, shape, type of
serif, and line

lengths

Type classification: A general system to describe styles of type, like serif and sans
serif

User interface: Concerned with how a digital product's interface looks and functions

Visual design: How a product or technology appears to users

//////////////////////////////////

Course 5 Module 1
Section 7: Module 1 review

45:3. Assignment
///////////////////////////////////

Course 5 Module 1
Section 7: Module 1 review

46:4. Asignment
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////