PRESENTER: Earlier in the course,
you created wireframes for your dedicated mobile app.
Now it's time to bring your designs
to life using visual design elements
and adding more details.
And the best way to do that is with a mockup.
As a reminder, mockups are static high-fidelity designs
used as a representation of a final product.
Keep in mind-- going from a wireframe to a mockup
should not feel like a paint-by-number exercise.
For example, it's OK to place an image
in a different part of your mockup design
than you planned for in your wireframe.
You should build your mockups in the same tool
you used to build your wireframes
and low-fidelity prototype.
It's a best practice to place a copy of your digital wires
above the area where you plan to create your mockups so you
can easily reference them.
Mockups include visual and UI elements
so UX designers and their collaborators
can get a better idea about the final state of the website
or app.
Mockups are not clickable or highly interactive,
which means they can be used to make
multiple iterations without affecting the functionality.
Let's explore the differences between wireframes and mockups
in a bit more detail.
Here's an example from an earlier course, when
my colleagues were working on the homepage of the dog walker
app in Figma.
On the left, the wireframes are static images
that give us an overview of the page layout and hierarchy.
You'll notice that the wireframes outline the content
without providing a lot of detail or color.
On the right, the mockup of the homepage
includes typography, color, and iconography.
These elements make it easier to map out the user flow,
and can help UX designers visualize the user journey
in a more dynamic way.
As you start creating your own mockups,
there are few visual design elements
you'll want to include.
The first one is typography.
Typography is the practice of arranging text and typefaces--
also known as fonts--
to make language legible, readable, and visually
appealing.
Typography can help add hierarchy to your designs,
make text easy to read, and add visual style.
You'll also use color in your mockups.
As you design, think about the messages
that certain colors communicate, how people understand color,
and how colors mix, match, or contrast with one another.
In addition, you'll probably want
to include a few icons in your mockups.
Iconography refers to the images or symbols associated
with a subject or idea.
Think about the hamburger icon that's often
used for navigation in apps.
It's really just three stacked horizontal lines,
but most people know that this icon indicates
there's a menu you can open up for more navigation options.
You'll also need to think about layouts, which are ways
to arrange elements on a page.
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 app designs
will be difficult for users to interact with.
Finally, keep in mind the visual design principles
that you learned about earlier, like emphasis, hierarchy, scale
and proportion, and unity and variety.
These principles help inform your design decisions.
Adhering to them can lead users to have
a more positive experience with your mobile app.
If any of these terms or concepts are unfamiliar,
you can review materials from earlier
in the certificate program, which are linked in the course
readings.
Awesome.
You're ready to create your own mockups.
Remember to share your designs in the discussion forum
to get some quick feedback from your peers.
[MUSIC PLAYING]
Now that you know how to go from wireframes to mockups,
it's time to start defining your design system.
A lot goes into creating mockups,
and you'll need a way to save and reuse the design elements
and components you will use.
This is where having a design system can really help.
As you might remember, a design system
is a series of reusable visual elements that
allow teams to design and develop a product quickly
and consistently following predetermined brand standards.
At this stage of the design process, one of your goals
is to document the decisions you're making
about your visual designs.
This means documenting the font, colors, layout, text,
illustrations, iconography, animation,
and other visual elements that your product includes
as part of your design system.
So why should you use a design system
for your current project?
When you're designing across devices,
having a good design system setup
can save you lots of time.
If you save your preferences as you go,
you won't need to make new decisions about a color
or style choice each time you adjust your mockup.
You can simply copy the element or component
you've already created and use it again in the new design.
Design systems also help keep your designs consistent.
And having consistent designs help ensure a uniform user
experience across devices and products.
For example, you'll want to use the same style of buttons
and the same font in the dedicated mobile app you're
designing now and in the responsive
website you will design later.
Creating a design system for your project
is a little different depending on the tool you're using.
If you're designing in Figma, you'll
need to create a sticker sheet.
And if you're working in Adobe XD,
you can use the Assets panel.
If you need more information about how to build your design
system, you can revisit demonstration videos
from earlier in the program.
In addition to creating your own small design system,
it can be useful to leverage an external organization's design
system.
For example, downloading a UI kit
from Google or any other company can help you get a head start
on your designs.
You'll have buttons, navigation bars, icons, and more
that you can easily customize to meet
the needs of your own designs.
Awesome.
Now it's time for you to create a design system
in the tool you're using.
Have fun.
[MUSIC PLAYING]
With your mockups ready to go, it's
time to create the high-fidelity prototype
of your dedicated mobile app.
You're getting close to having a final product that
can benefit the community you've chosen to serve.
Do you remember the steps to create a high-fidelity
prototype that were introduced earlier in the program?
As a quick refresher, they are-- one,
lay out the mockups in the order of the main user flow.
Two, connect the screens or elements within the screens.
Three, add interaction details.
In both Figma and Adobe XD, the trigger
defines what type of interaction will cause the prototype
to advance forward.
You'll probably stick to interactions
like tap for your dedicated mobile app or mouse click
for your responsive website later.
Four, adjust the animation.
Remember, the animation settings determine
how the prototype moves from one screen to the other.
Five, complete this process for all of the screens
in your dedicated mobile app.
So why would you create a high-fidelity prototype?
Well, the main reason is that hi-fi prototypes give you
the opportunity to test your app designs with users.
Testing helps you decide how to refine your mockups based
on the feedback that users provide.
And testing proves whether the potential solution
you've been designing addresses the community
problem you're trying to solve.
All right, that's it for our quick refresher
on high-fidelity prototypes.
Go ahead and turn your mockups into a high-fidelity prototype
now.
I know you can do it.
[MUSIC PLAYING]
I bet the high-fidelity prototype
of your dedicated mobile app is coming together nicely.
So it's time to put your prototype to the test.
You're about to conduct a usability study.
As you know by now, a usability study
is a technique used to evaluate a product by testing it
on users.
You've already conducted a usability study
to get feedback about your low-fidelity prototype
of the app.
Now you have the option to plan and conduct a usability study
to gather feedback about your high-fidelity prototype.
While the choice is yours, I'd recommend
that you conduct a usability study of your high-fidelity
prototype if you had a lot of feedback
and made changes to your designs in the low-fidelity phase.
You might also want to test the visual design of your product
to understand whether or not it resonates
with the community you've been designing for.
And if you weren't already convinced,
research shows that usability is key for the success
of mobile apps.
Common trends among successful mobile phone apps
are that users feel they're easy to learn,
user friendly, and make completing tasks quicker.
Even though designers agree mobile app usability is
important, there is not a single list
of guidelines to follow to create a mobile app.
Instead, the best way to test the usability of a mobile app
is through a usability study.
Because you recently conducted a usability study
on your low-fidelity prototype, I'm
just going to quickly remind you of how this process works.
First, you'll plan the study, which includes seven elements.
Second, you'll conduct a study, which could
be moderated or unmoderated.
Third, you'll analyze and synthesize the observations
you collected during the study.
Remember, the goal here is to turn your observations
into insights.
And finally, you'll iterate on your designs
based on the insights that your research uncovered.
If you'd like a refresher on any of these steps,
please go back to the earlier course material.
Now, before you conduct your study,
I'd like to share a few things to consider when conducting
usability studies on hi-fi prototypes for dedicated mobile
apps.
These are some insider tips based on my years of experience
in the field.
First, it's helpful to brainstorm interaction issues
that users may have with the product,
and then test those interactions.
Since you've added more complex interactions
in your high-fidelity prototype, like overlays and motion,
you want to make sure they're working correctly.
Second, it's important to test your prototype
on the correct platform and mobile app screen size.
For example, if you designed your app
for Apple iOS and its platform-specific interactions,
don't test it on Android phones or with Android users, who
may be unable to easily use that platform.
In addition, it's important to verify that your app meets
all the platform requirements.
You don't want to design an experience that's
incompatible with its conventions and user
expectations.
Third, spend some extra time thinking
about who your study participants will be.
Since you're designing an app focused on social good,
you should probably include study participants
who are members of the community you're trying to serve.
They can give you authentic and direct feedback
about whether your designs meet the real needs of the community
and if they're able to use your product effectively.
Whether you conduct a moderated or unmoderated usability study,
be sure to take lots of notes, and carefully record feedback
from participants.
Remember what you've already learned about spreadsheet
note taking, and put your skills to the test
during this final usability study.
So now, you have the chance to plan and conduct
your own usability study in order
to get feedback about the high-fidelity
prototype of your app.
Keep an open mind, and be ready to make changes
to your designs.
DAVE: Congratulations on finishing this course
from the Google UX Design Certificate.
You can access the full experience, including
job search help, and start to earn your certificate,
by clicking on the icon or the link in the description below.
Watch the next video in the course by clicking here.
And subscribe to our channel for more from upcoming