[MUSIC]

Hi, I'm Nick.

When creating software like websites and

mobile apps, one of the most important parts is the user interface.

As creators of software,

things like the layout of a web page, the shape of buttons, or even a font

choice is a visual language that we use to communicate with the audience.

It tells people what pieces of information are most important and

how they can interact with that information.

In order to explore this visual language and

find the best ways to communicate ideas, designers will often experiment

with many different possibilities and iterate on the directions that work.

And with looming deadlines and

the high cost of engineering finished products, it's important that designers

are able to iterate quickly to find the best solution as soon as possible.

[SOUND] Even before we create a solution that communicates with end-users,

designers need a way to communicate their intentions to other people on a team.

Like engineers, product managers, or

clients that want a project built for them.

Prototyping with paper or digital tools can help us explore solutions

at the beginning of a project when it's easier to change direction.

Toward the middle or the end of a project,

it's more difficult to make drastic changes because by then lots of code has

been written to support design decisions that were made at the start.

We can, of course, make smaller adjustments along the way,

as it's nearly impossible to create the perfect solution from the outset.

But when budgets and

scheduling are a concern, it helps to make the big choices at the start.

I'm a big advocate of sketching out websites on paper or

using simple tools to create wire frames which are just simple line drawings.

But sometimes, when you're working on a high profile project or

you need to communicate a final version to a client before coding,

it helps to have a higher fidelity mock-up that's closer to the end result.

And it's even better if that mock up can include interactivity to give stakeholders

an idea of how the app will flow from one interface to the next.

In this course, we're going to create an interactive prototype of a prosumer photo

editing app for mobile phones.

We'll do this using a free web-based tool called Figma.

We'll create a few different states the screen might be in, and then connect them

together so that when the prototype is shared with other people, they can click

on different areas of the screen and get a sense of how it might work.

Now, let's take a look at Figma in more detail.