1
00:00:00,000 --> 00:00:04,530
[MUSIC]

2
00:00:04,530 --> 00:00:06,130
Hi, I'm Nick.

3
00:00:06,130 --> 00:00:08,610
When creating software like websites and

4
00:00:08,610 --> 00:00:13,260
mobile apps, one of the most important
parts is the user interface.

5
00:00:13,260 --> 00:00:14,790
As creators of software,

6
00:00:14,790 --> 00:00:19,380
things like the layout of a web page,
the shape of buttons, or even a font

7
00:00:19,380 --> 00:00:24,650
choice is a visual language that we
use to communicate with the audience.

8
00:00:24,650 --> 00:00:28,610
It tells people what pieces of
information are most important and

9
00:00:28,610 --> 00:00:31,920
how they can interact
with that information.

10
00:00:31,920 --> 00:00:34,350
In order to explore this
visual language and

11
00:00:34,350 --> 00:00:39,560
find the best ways to communicate ideas,
designers will often experiment

12
00:00:39,560 --> 00:00:44,170
with many different possibilities and
iterate on the directions that work.

13
00:00:44,170 --> 00:00:46,030
And with looming deadlines and

14
00:00:46,030 --> 00:00:50,510
the high cost of engineering finished
products, it's important that designers

15
00:00:50,510 --> 00:00:55,465
are able to iterate quickly to find
the best solution as soon as possible.

16
00:00:55,465 --> 00:01:00,634
[SOUND] Even before we create a solution
that communicates with end-users,

17
00:01:00,634 --> 00:01:06,057
designers need a way to communicate their
intentions to other people on a team.

18
00:01:06,057 --> 00:01:08,822
Like engineers, product managers, or

19
00:01:08,822 --> 00:01:11,840
clients that want a project built for
them.

20
00:01:14,010 --> 00:01:18,720
Prototyping with paper or digital
tools can help us explore solutions

21
00:01:18,720 --> 00:01:22,970
at the beginning of a project when
it's easier to change direction.

22
00:01:22,970 --> 00:01:25,510
Toward the middle or the end of a project,

23
00:01:25,510 --> 00:01:30,470
it's more difficult to make drastic
changes because by then lots of code has

24
00:01:30,470 --> 00:01:34,250
been written to support design
decisions that were made at the start.

25
00:01:34,250 --> 00:01:37,810
We can, of course,
make smaller adjustments along the way,

26
00:01:37,810 --> 00:01:43,020
as it's nearly impossible to create
the perfect solution from the outset.

27
00:01:43,020 --> 00:01:44,650
But when budgets and

28
00:01:44,650 --> 00:01:49,410
scheduling are a concern, it helps to
make the big choices at the start.

29
00:01:51,030 --> 00:01:54,920
I'm a big advocate of sketching
out websites on paper or

30
00:01:54,920 --> 00:02:00,000
using simple tools to create wire frames
which are just simple line drawings.

31
00:02:00,000 --> 00:02:04,770
But sometimes, when you're working
on a high profile project or

32
00:02:04,770 --> 00:02:09,170
you need to communicate a final
version to a client before coding,

33
00:02:09,170 --> 00:02:13,930
it helps to have a higher fidelity
mock-up that's closer to the end result.

34
00:02:13,930 --> 00:02:19,040
And it's even better if that mock up can
include interactivity to give stakeholders

35
00:02:19,040 --> 00:02:24,190
an idea of how the app will flow
from one interface to the next.

36
00:02:24,190 --> 00:02:29,160
In this course, we're going to create an
interactive prototype of a prosumer photo

37
00:02:29,160 --> 00:02:30,960
editing app for mobile phones.

38
00:02:30,960 --> 00:02:35,650
We'll do this using a free
web-based tool called Figma.

39
00:02:35,650 --> 00:02:39,840
We'll create a few different states the
screen might be in, and then connect them

40
00:02:39,840 --> 00:02:44,140
together so that when the prototype is
shared with other people, they can click

41
00:02:44,140 --> 00:02:48,430
on different areas of the screen and
get a sense of how it might work.

42
00:02:48,430 --> 00:02:51,170
Now, let's take a look
at Figma in more detail.