All language subtitles for 08 - Introduction to wireframes.en

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!