1
00:00:00,000 --> 00:00:09,314
[MUSIC]

2
00:00:09,314 --> 00:00:11,025
Hi, I'm Hope.

3
00:00:11,025 --> 00:00:13,270
Let's learn about wireframes.

4
00:00:13,270 --> 00:00:14,520
Whether you're a designer or

5
00:00:14,520 --> 00:00:18,830
not, wireframing is an important
skill to have in your toolset.

6
00:00:18,830 --> 00:00:23,055
It's beneficial for product managers,
marketers or anyone else with ideas for

7
00:00:23,055 --> 00:00:25,230
a website or mobile app.

8
00:00:25,230 --> 00:00:27,050
Wireframes are a valuable tool for

9
00:00:27,050 --> 00:00:32,040
visualizing user experiences, iterating
on ideas and sharing ideas with others.

10
00:00:33,070 --> 00:00:38,271
A wireframe is a drawing which visualizes
the elements of a website or mobile app.

11
00:00:38,271 --> 00:00:42,774
Wireframe fidelity ranges from rough
pencil sketches to polished renderings,

12
00:00:42,774 --> 00:00:45,035
but all wireframes share a common goal.

13
00:00:45,035 --> 00:00:46,484
They focus on the structure and

14
00:00:46,484 --> 00:00:50,190
functionality of a web page
instead of the visual design.

15
00:00:50,190 --> 00:00:54,680
This is what makes them particular
useful in the early stages of a project.

16
00:00:54,680 --> 00:00:59,410
They allow you to focus on the concepts
and quickly iterate through your ideas.

17
00:00:59,410 --> 00:01:03,190
Generating several rough ideas is
important because your first idea is

18
00:01:03,190 --> 00:01:05,460
usually not your best idea.

19
00:01:05,460 --> 00:01:09,540
And you want to get feedback before
sprinting in the wrong direction.

20
00:01:09,540 --> 00:01:14,140
It's best to quickly generate low effort
wireframes, decide on a direction,

21
00:01:14,140 --> 00:01:17,889
and then flesh out the chosen
wireframe into a polished mockup.

22
00:01:18,940 --> 00:01:23,162
The first important concept to grasp with
wireframing is that the initial focus

23
00:01:23,162 --> 00:01:25,945
should be on the core structure and
functionality.

24
00:01:25,945 --> 00:01:30,781
When you start to imagine your design,
you may get carried with how it'll look.

25
00:01:30,781 --> 00:01:33,076
Instead of focusing on the visual design,

26
00:01:33,076 --> 00:01:36,401
this is the point where I encourage
you to sketch wireframes.

27
00:01:36,401 --> 00:01:38,923
Let's imagine a scenario.

28
00:01:38,923 --> 00:01:41,320
Imagine you're ready to
build your dream home.

29
00:01:41,320 --> 00:01:45,340
Overflowing with enthusiasm, you construct
several vision boards filled with

30
00:01:45,340 --> 00:01:49,910
fabric swatches, color chips, and
inspirational magazine clippings.

31
00:01:49,910 --> 00:01:52,370
When you take this stack
of ideas to the builder,

32
00:01:52,370 --> 00:01:55,410
they direct you to begin
the planning with an architect.

33
00:01:55,410 --> 00:01:58,680
The architect initially disregards
her inspiration folder.

34
00:01:58,680 --> 00:02:02,260
She begins planning the core structure of
the home, starting with the floor plan.

35
00:02:03,260 --> 00:02:05,420
The floor plan is drawn and
shared with you for

36
00:02:05,420 --> 00:02:07,990
feedback, in the form of a blueprint.

37
00:02:07,990 --> 00:02:09,570
The blueprint can be changed and

38
00:02:09,570 --> 00:02:14,900
finalized without first deciding on
the curtain fabric or the paint colors.

39
00:02:14,900 --> 00:02:18,670
Think of wireframes as the blueprint
of your website or mobile app.

40
00:02:18,670 --> 00:02:21,880
All the visual details,
all the stuff on your vision board

41
00:02:21,880 --> 00:02:24,380
will come later once you
have a solid foundation.

42
00:02:25,660 --> 00:02:29,180
Now that you have a general understanding
of wireframes, let's see how they look.

43
00:02:30,430 --> 00:02:33,800
Here's a wireframe I created in Sketch
when I was working on a refresh of

44
00:02:33,800 --> 00:02:35,982
the Treehouse home page.

45
00:02:35,982 --> 00:02:40,950
A wireframe is essentially a drawing of
a user interface that's devoid of color,

46
00:02:40,950 --> 00:02:42,960
graphics, and styling.

47
00:02:42,960 --> 00:02:47,000
It communicates the major components
of a screen, such as sections,

48
00:02:47,000 --> 00:02:51,340
buttons, text, videos,
and any custom modules.

49
00:02:51,340 --> 00:02:55,030
It's predominantly comprised of
simple shapes, such as rectangles,

50
00:02:55,030 --> 00:02:59,880
which represents sections of content and
serve as placeholders for images.

51
00:02:59,880 --> 00:03:02,410
Rectangles can also
represent blocks of text.

52
00:03:03,530 --> 00:03:06,640
Visualizing the major components
helps define the layout and

53
00:03:06,640 --> 00:03:10,070
determine the available
functionalities on any given screen.

54
00:03:11,160 --> 00:03:15,325
Seeing the layout in this way helps
clarify the hierarchy of content so

55
00:03:15,325 --> 00:03:17,860
the users can navigate
the information easily.

56
00:03:18,980 --> 00:03:23,120
Figuring out what functions will be
available to the user on each screen

57
00:03:23,120 --> 00:03:25,790
is also helpful for
your team to define early on.

58
00:03:27,030 --> 00:03:29,680
Here's a wireframe I drew on paper.

59
00:03:29,680 --> 00:03:31,755
This drawing was for a landing page.

60
00:03:31,755 --> 00:03:35,860
I was designing a widget that allows
exploration of the library content to

61
00:03:35,860 --> 00:03:37,282
perspective students.

62
00:03:37,282 --> 00:03:39,388
These are just a couple examples.

63
00:03:39,388 --> 00:03:42,777
Later, you'll learn about other
types of wireframes, too.