All language subtitles for 3. Web Design 101 - Wireframing

Now, we've seen how to install Bootstrap and what it can do.
1

But before jumping headfirst into designing our web site, the first thing I want to talk about is what
2

the workflow of a web designer might look like. And a lot of times if you're working as a web designer,
3

one of the first things that you will do before touching any code, any CSS, or even creating your
4

HTML structure,
5

the first thing that you need to do is to wireframe.
6

Now, wireframes are a low fidelity representation of your design.
7

So it's meant to be done with a pencil, a piece of paper, and it's meant to be really quick.
8

The idea is that, you know, say if you're an architect and you wanted to build a house, you wouldn't go
9

ahead and just build the house straight away,
10

right?
11

You might then discover that, oh, actually I created the roof that's too big for this room, or the windows
12

are too big for the wall, and you end up with a whole bunch of problems that's going to be very very
13

costly and time consuming to fix later on.
14

And this is exactly the same with a web site. Before you write down any code, you want to be able to
15

get buy in on your designs and be able to iterate through your design process.
16

So you might want to create one version using your wireframe,
17

see if, you know, other people like it.
18

If you're working for somebody, that'll be your boss.
19

If you're not working for anybody then it might be friends or colleagues, but essentially you want to
20

be able to settle on a design before you go ahead and implement it.
21

And that's what wireframing is perfect for. Now,
22

it's meant to be low fidelity,
23

so it's meant to look really really simple and it shouldn't take you too long to produce.
24

Now, the opposite of this is what's called a mock-up.
25

Now, a mock-up is meant to be a high fidelity representation of your app or your web site's design, and
26

it's almost like you've gone into the future,
27

you've taken a screenshot of what it looks like while it's in action, and you've brought it back into
28

the present to try and show people what it looks like.
29

Now the great thing about mock-ups is that they are really pretty much what you see is what you're going
30

to end up getting.
31

And if you are getting somebody else to create your web site then it's nice to have a mock-up to show
32

them exactly how you want it to look.
33

Now the problem with this is that, if this is the first thing you start messing around with, you end up
34

getting really stuck on choosing the colors or the icons or, you know, or which images to include in the
35

mock-up.
36

And it really bogs you down.
37

So the classic workflow is to start off by looking at other people's web sites, which will give you a
38

good idea about the layout and structure, and then looking at some UI patterns,
39

so going to web sites like ui-patterns.com and looking at their design patterns, and you think about,
40

you know, the problems that you're actually trying to solve as you're designing your web site.
41

So for example if you needed to have a carousel or a basically a slideshow because the user needs to
42

browse through a set of items and possibly select one of them then you can see some of the examples
43

that they've picked up for example from Amazon or from other places and look at, you know, the solution
44

and the rationale.
45

And this is a really really good web site for understanding how other people have solved problems using
46

web design
47

and to be inspired for your own designs. Then the next step is to create a simple sketched wireframe
48

for planning the layout and seeing where everything is going to be.
49

Then the optional next step is to create a mock-up, so to go into the sketch app, or use something like
50

Photoshop or Illustrator, to create really sort of photo realistic versions of your future web site.
51

And finally, you know, if you really really wanted to go the extra mile, then you can actually create what's
52

called a prototype,
53

so an animated version of your web site that really shows off what exactly is going to look like.
54

Now a really good resource for looking for inspiration on all of these fronts is a web site called
55

Dribbble, which is a place where designers put up their portfolios.
56

So, for example, if you just search for something like 'website', you can come across some really really
57

beautiful designs that people have created as a part of their job,
58

and also there's prototypes and there's a whole bunch of animations, and it's just a really really nice
59

place to get inspiration. And a really cool thing about Dribbble is that you can even search Dribbble by
60

color, so you can specify a tone that you quite like and you can narrow down all of the designs by that
61

particular shade.
62

So this is a really really cool place where you can get lost for hours and hours,
63

and it's a fantastic starting point to get inspiration for your web design.
64

So let's do the same for our web site.
65

Let's start off by creating a wireframe.
66

So how would you go about doing this?
67

So, in order to create wireframes, the easiest thing that I tend to recommend is just to use pencil
68

and a piece of paper.
69

Now if you want, there's a web site called Sneak Peek It, and they have these beautiful templates that you can
70

download and print out for browsers or for mobile or for tablets, and you can start drawing on these
71

printouts in order to wireframe your web site. And they're free to download,
72

and once you click on download you get a zip file which you can open up and print out and start
73

wireframing.
74

Now if you want to be a little bit more advanced in wireframing, then pretty much the industry
75

standard tool is Balsamiq,
76

and I've been using this for a number of years and it's really really nice.
77

It's quick, it's really really easy,
78

and the best part is that it's really collaborative.
79

You can share your designs with, say, you know, somebody who commissioned you to design the web site, or
80

you can share it with friends and family or your colleagues, and they can add notes and add comments or change
81

the designs as they need.
82

So it's really really cool.
83

So we're going to create a wireframe for our upcoming web site for our startup so that we know exactly
84

what we need to do when we start coding.
85

So go ahead and either sign up for a free 30 day trial if you want to use Balsamiq, or, if you don't, then
86

just go ahead and download and print out some of these wireframe sheets so that you can follow along
87

with me.
88

So I'm just gonna log in and I'm going to create a new project.
89

So this is my new project and this is my new wireframe which is what I'm going to edit.
90

So I click on that to open up my canvas and it's pretty easy to get going.
91

I can just hold down R and start creating a box.
92

I can change the box from rectangle to maybe a browser window.
93

And now I've got a lovely browser window that I'm going to start designing.
94

So on my web site I would first like to have maybe a header section.
95

So let's create a rectangle
96

up here, and this header section is going to have a nice bright color, and then here I'm also going to have
97

maybe a mobile phone maybe over here somewhere down here.
98

So let's change that to a phone iPhone maybe looks good so we'll use that to show off our app that our
99

startup is developing. So we can put that on the right over here and then maybe I'll have a section that's
100

maybe some menus over here.
101

So let's just go ahead and search for a link bar.
102

So here's our link bar and we can put it up here on the right, and then maybe we want
103

the link bar to be a little bit more in so that they're aligned on the right, and on the left maybe I'll
104

add a brand,
105

so maybe like the logo for my company. So I'll just hold down Y and create a large text that maybe looks
106

a little bit like the logo.
107

Yeah looks pretty good.
108

And then down here maybe you'll have a little bit more text,
109

so like a large sort of telling people what my app is all about over here.
110

Let's make that maybe left aligned, maybe make that all aligned together.
111

And then finally at the bottom I probably will want to have some buttons.
112

Let's look for a button and drop it down here.
113

Maybe one will be download on Android, the other one could be download on iOS.
114

And let's use their guidelines to put that in.
115

So that's the top of our page and we can just keep extending this browser by dragging it down and start
116

designing the next parts of our page.
117

So maybe we would have some images down here that shows off our features.
118

So let's just go ahead and add some of those images in. So we can change our rectangle to an image, and
119

we can copy and paste a number of these into the web site, and then we'd probably need
120

a little bit of explainer text underneath,
121

so I'm just going to hold down T and start dragging.
122

Maybe we would need like 2 lines, something like that.
123

And then we can copy that as well and get a few of these for each of our images, and this would basically
124

show off the features of our web site.
125

And basically you just continue designing your web site until you're happy with how it looks.
126

So you can search through here for whatever you need like buttons or images or menus or you can just
127

navigate through these little different tabs to see what it is that you need.
128

And I want you to create a wireframe for your ideal startup web site so that in the future, if you create
129

a web site, you'll know how to wireframe it,
130

so we have a guide as to how you should design up your web site
131

when you start coding it up.
132

So I'm going to do the classic thing where I show you -
here's one that I made earlier. And this is the
133

mock-up for our TinDog project, and basically I've split it into sections so that we've got maybe a header
134

section, a features page, maybe some testimonials, and maybe some press that we've had for our start up,
135

pricing table,
136

another call for action at the bottom trying to get people to download it,
137

and finally you've got your social icons etc..
138

And this took me maybe about 10 minutes to create.
139

So it's very very quick and it's meant to be rough and ready to show you the layout.
140

We don't want to focus too much on the sort of mock-up side of things where we get everything looking pixel
141

perfect, because we're going to do that anyways later on when we create our web site.
142

Now if you want you can create your wireframes in Balsamiq.
143

Alternatively, if you don't want to give them your email, then you can just print out the templates from
144

Sneak Peek It and draw it by hand as well.
145

So if you have designed anything particularly fantastic, I want to see it in the Q & A section so that
146

we can judge who has the best designs for this
147

theoretical startup that you're going to make. And points are awarded for, not only great web design
148

but also for how crazy your startup ideas can be.
149

So pause the video and give this challenge a go.
150

Now in the next lesson we're actually going to go about implementing all of this design using Bootstrap
151

by hooking it up with various components.
152

So for all of that and more I'll see you on the next lesson.