Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Figma is a free web-based design tool that you can use in your browser. In order to explore this visual language and find the best way to communicate ideas, designers will often experiment with many different possibilities and iterate on the directions that work.
[MUSIC]
0:00
Hi, I'm Nick.
0:04
When creating software like websites and
0:06
mobile apps, one of the most important
parts is the user interface.
0:08
As creators of software,
0:13
things like the layout of a web page,
the shape of buttons, or even a font
0:14
choice is a visual language that we
use to communicate with the audience.
0:19
It tells people what pieces of
information are most important and
0:24
how they can interact
with that information.
0:28
In order to explore this
visual language and
0:31
find the best ways to communicate ideas,
designers will often experiment
0:34
with many different possibilities and
iterate on the directions that work.
0:39
And with looming deadlines and
0:44
the high cost of engineering finished
products, it's important that designers
0:46
are able to iterate quickly to find
the best solution as soon as possible.
0:50
[SOUND] Even before we create a solution
that communicates with end-users,
0:55
designers need a way to communicate their
intentions to other people on a team.
1:00
Like engineers, product managers, or
1:06
clients that want a project built for
them.
1:08
Prototyping with paper or digital
tools can help us explore solutions
1:14
at the beginning of a project when
it's easier to change direction.
1:18
Toward the middle or the end of a project,
1:22
it's more difficult to make drastic
changes because by then lots of code has
1:25
been written to support design
decisions that were made at the start.
1:30
We can, of course,
make smaller adjustments along the way,
1:34
as it's nearly impossible to create
the perfect solution from the outset.
1:37
But when budgets and
1:43
scheduling are a concern, it helps to
make the big choices at the start.
1:44
I'm a big advocate of sketching
out websites on paper or
1:51
using simple tools to create wire frames
which are just simple line drawings.
1:54
But sometimes, when you're working
on a high profile project or
2:00
you need to communicate a final
version to a client before coding,
2:04
it helps to have a higher fidelity
mock-up that's closer to the end result.
2:09
And it's even better if that mock up can
include interactivity to give stakeholders
2:13
an idea of how the app will flow
from one interface to the next.
2:19
In this course, we're going to create an
interactive prototype of a prosumer photo
2:24
editing app for mobile phones.
2:29
We'll do this using a free
web-based tool called Figma.
2:30
We'll create a few different states the
screen might be in, and then connect them
2:35
together so that when the prototype is
shared with other people, they can click
2:39
on different areas of the screen and
get a sense of how it might work.
2:44
Now, let's take a look
at Figma in more detail.
2:48
You need to sign up for Treehouse in order to download course files.
Sign up