Original subtitles

Hello!

To kick things off, I'll introduce some common terms.

They'll help describe what we'll work on for the rest of the course.

Let's start by explaining what a design is

in the context of this program.

A design solves a real problem that users are experiencing.

And a strong design always puts the user front and center.

A design can have different levels of fidelity.

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.

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.

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.

You can think of fidelity like a dial you can turn up or down.

For example, imagine you want to quickly draw the rooms of

an apartment on a piece of paper with pencil.

You might use simple rectangles and squares to indicate where the rooms

are and where the furniture is positioned in each room.

That would be a low-fidelity design. Or you can dial it up and make a detailed

drawing of the apartment, including paint colors and images of pieces of furniture.

Your design is now high fidelity because it looks more like the real apartment.

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

We'll cover high-fidelity designs in a future course.

So let's dive into one kind of low-fidelity design: wireframes.

A wireframe is a basic outline of a digital experience, like an app or

a website.

As the name suggests, wireframes look like they were created with wires.

They're mostly lines and shapes with some text.

So why do UX designers create wireframes?

Wireframes establish the basic structure of a page.

before any visual considerations, like color or images, are added.

Wireframes serve as an outline to get the team on the same page early

in the project.

Try using this as your guiding question when creating wireframes:

How do I organize information on the page in a way that makes sense for users?

Second, wireframes highlight the intended function of the product.

When drawing the wireframe,

you should think about how the elements serve the overall functionality.

For example, the function of a button should be clear,

and that functionality is expressed through the way that it's drawn.

We'll go through this in more detail later on.

Finally, wireframes help designers save time and resources.

Wireframes allow the team to quickly try out different design options.

They also serve as a guide for everyone involved in the project,

which saves time later.

You can create wireframes by hand or by using digital tools.

We usually start creating wireframes by drawing on a piece of paper.

We'll start drawing wireframes in the next video,

so get ready to try it out!