Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,170 --> 00:00:04,520
Now, we've seen how to install Bootstrap and what it can do.
2
00:00:04,560 --> 00:00:10,590
But before jumping headfirst into designing our web site, the first thing I want to talk about is what
3
00:00:10,590 --> 00:00:16,560
the workflow of a web designer might look like. And a lot of times if you're working as a web designer,
4
00:00:16,860 --> 00:00:22,230
one of the first things that you will do before touching any code, any CSS, or even creating your
5
00:00:22,230 --> 00:00:23,500
HTML structure,
6
00:00:23,580 --> 00:00:26,380
the first thing that you need to do is to wireframe.
7
00:00:26,490 --> 00:00:31,670
Now, wireframes are a low fidelity representation of your design.
8
00:00:31,710 --> 00:00:37,160
So it's meant to be done with a pencil, a piece of paper, and it's meant to be really quick.
9
00:00:37,380 --> 00:00:42,150
The idea is that, you know, say if you're an architect and you wanted to build a house, you wouldn't go
10
00:00:42,150 --> 00:00:44,430
ahead and just build the house straight away,
11
00:00:44,430 --> 00:00:44,940
right?
12
00:00:44,940 --> 00:00:51,270
You might then discover that, oh, actually I created the roof that's too big for this room, or the windows
13
00:00:51,270 --> 00:00:55,560
are too big for the wall, and you end up with a whole bunch of problems that's going to be very very
14
00:00:55,560 --> 00:00:58,330
costly and time consuming to fix later on.
15
00:00:58,410 --> 00:01:04,620
And this is exactly the same with a web site. Before you write down any code, you want to be able to
16
00:01:04,620 --> 00:01:10,010
get buy in on your designs and be able to iterate through your design process.
17
00:01:10,170 --> 00:01:13,400
So you might want to create one version using your wireframe,
18
00:01:13,470 --> 00:01:15,560
see if, you know, other people like it.
19
00:01:15,570 --> 00:01:18,030
If you're working for somebody, that'll be your boss.
20
00:01:18,150 --> 00:01:22,350
If you're not working for anybody then it might be friends or colleagues, but essentially you want to
21
00:01:22,350 --> 00:01:27,360
be able to settle on a design before you go ahead and implement it.
22
00:01:27,420 --> 00:01:30,530
And that's what wireframing is perfect for. Now,
23
00:01:30,540 --> 00:01:32,480
it's meant to be low fidelity,
24
00:01:32,490 --> 00:01:38,020
so it's meant to look really really simple and it shouldn't take you too long to produce.
25
00:01:38,100 --> 00:01:41,890
Now, the opposite of this is what's called a mock-up.
26
00:01:42,030 --> 00:01:48,390
Now, a mock-up is meant to be a high fidelity representation of your app or your web site's design, and
27
00:01:48,390 --> 00:01:50,610
it's almost like you've gone into the future,
28
00:01:50,610 --> 00:01:56,160
you've taken a screenshot of what it looks like while it's in action, and you've brought it back into
29
00:01:56,160 --> 00:01:58,930
the present to try and show people what it looks like.
30
00:01:59,070 --> 00:02:03,930
Now the great thing about mock-ups is that they are really pretty much what you see is what you're going
31
00:02:03,930 --> 00:02:05,000
to end up getting.
32
00:02:05,040 --> 00:02:10,170
And if you are getting somebody else to create your web site then it's nice to have a mock-up to show
33
00:02:10,170 --> 00:02:13,310
them exactly how you want it to look.
34
00:02:13,320 --> 00:02:18,360
Now the problem with this is that, if this is the first thing you start messing around with, you end up
35
00:02:18,390 --> 00:02:24,600
getting really stuck on choosing the colors or the icons or, you know, or which images to include in the
36
00:02:24,610 --> 00:02:25,250
mock-up.
37
00:02:25,470 --> 00:02:27,840
And it really bogs you down.
38
00:02:27,930 --> 00:02:34,680
So the classic workflow is to start off by looking at other people's web sites, which will give you a
39
00:02:34,680 --> 00:02:39,560
good idea about the layout and structure, and then looking at some UI patterns,
40
00:02:39,570 --> 00:02:45,600
so going to web sites like ui-patterns.com and looking at their design patterns, and you think about,
41
00:02:45,630 --> 00:02:50,370
you know, the problems that you're actually trying to solve as you're designing your web site.
42
00:02:50,370 --> 00:02:58,200
So for example if you needed to have a carousel or a basically a slideshow because the user needs to
43
00:02:58,200 --> 00:03:03,720
browse through a set of items and possibly select one of them then you can see some of the examples
44
00:03:03,720 --> 00:03:09,360
that they've picked up for example from Amazon or from other places and look at, you know, the solution
45
00:03:09,360 --> 00:03:10,470
and the rationale.
46
00:03:10,470 --> 00:03:16,350
And this is a really really good web site for understanding how other people have solved problems using
47
00:03:16,350 --> 00:03:17,280
web design
48
00:03:17,280 --> 00:03:23,100
and to be inspired for your own designs. Then the next step is to create a simple sketched wireframe
49
00:03:23,280 --> 00:03:27,010
for planning the layout and seeing where everything is going to be.
50
00:03:27,120 --> 00:03:32,880
Then the optional next step is to create a mock-up, so to go into the sketch app, or use something like
51
00:03:32,880 --> 00:03:39,010
Photoshop or Illustrator, to create really sort of photo realistic versions of your future web site.
52
00:03:39,240 --> 00:03:44,520
And finally, you know, if you really really wanted to go the extra mile, then you can actually create what's
53
00:03:44,520 --> 00:03:45,530
called a prototype,
54
00:03:45,530 --> 00:03:51,390
so an animated version of your web site that really shows off what exactly is going to look like.
55
00:03:51,690 --> 00:03:57,510
Now a really good resource for looking for inspiration on all of these fronts is a web site called
56
00:03:57,510 --> 00:04:01,400
Dribbble, which is a place where designers put up their portfolios.
57
00:04:01,410 --> 00:04:05,820
So, for example, if you just search for something like 'website', you can come across some really really
58
00:04:05,820 --> 00:04:10,320
beautiful designs that people have created as a part of their job,
59
00:04:10,320 --> 00:04:16,950
and also there's prototypes and there's a whole bunch of animations, and it's just a really really nice
60
00:04:16,950 --> 00:04:23,910
place to get inspiration. And a really cool thing about Dribbble is that you can even search Dribbble by
61
00:04:23,910 --> 00:04:32,790
color, so you can specify a tone that you quite like and you can narrow down all of the designs by that
62
00:04:32,790 --> 00:04:34,310
particular shade.
63
00:04:34,320 --> 00:04:38,610
So this is a really really cool place where you can get lost for hours and hours,
64
00:04:38,910 --> 00:04:42,930
and it's a fantastic starting point to get inspiration for your web design.
65
00:04:42,960 --> 00:04:45,230
So let's do the same for our web site.
66
00:04:45,240 --> 00:04:48,300
Let's start off by creating a wireframe.
67
00:04:48,360 --> 00:04:50,650
So how would you go about doing this?
68
00:04:50,820 --> 00:04:57,090
So, in order to create wireframes, the easiest thing that I tend to recommend is just to use pencil
69
00:04:57,120 --> 00:04:58,210
and a piece of paper.
70
00:04:58,470 --> 00:05:05,010
Now if you want, there's a web site called Sneak Peek It, and they have these beautiful templates that you can
71
00:05:05,010 --> 00:05:14,010
download and print out for browsers or for mobile or for tablets, and you can start drawing on these
72
00:05:14,070 --> 00:05:19,670
printouts in order to wireframe your web site. And they're free to download,
73
00:05:19,760 --> 00:05:24,740
and once you click on download you get a zip file which you can open up and print out and start
74
00:05:24,750 --> 00:05:25,320
wireframing.
75
00:05:25,320 --> 00:05:31,350
Now if you want to be a little bit more advanced in wireframing, then pretty much the industry
76
00:05:31,350 --> 00:05:33,500
standard tool is Balsamiq,
77
00:05:33,630 --> 00:05:37,950
and I've been using this for a number of years and it's really really nice.
78
00:05:38,160 --> 00:05:40,590
It's quick, it's really really easy,
79
00:05:40,590 --> 00:05:43,350
and the best part is that it's really collaborative.
80
00:05:43,350 --> 00:05:48,960
You can share your designs with, say, you know, somebody who commissioned you to design the web site, or
81
00:05:48,960 --> 00:05:54,630
you can share it with friends and family or your colleagues, and they can add notes and add comments or change
82
00:05:54,630 --> 00:05:56,130
the designs as they need.
83
00:05:56,160 --> 00:05:57,720
So it's really really cool.
84
00:05:57,750 --> 00:06:04,620
So we're going to create a wireframe for our upcoming web site for our startup so that we know exactly
85
00:06:04,620 --> 00:06:06,740
what we need to do when we start coding.
86
00:06:06,930 --> 00:06:12,840
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
87
00:06:12,840 --> 00:06:17,370
just go ahead and download and print out some of these wireframe sheets so that you can follow along
88
00:06:17,370 --> 00:06:18,290
with me.
89
00:06:18,330 --> 00:06:23,040
So I'm just gonna log in and I'm going to create a new project.
90
00:06:23,070 --> 00:06:27,820
So this is my new project and this is my new wireframe which is what I'm going to edit.
91
00:06:27,840 --> 00:06:33,780
So I click on that to open up my canvas and it's pretty easy to get going.
92
00:06:33,780 --> 00:06:37,410
I can just hold down R and start creating a box.
93
00:06:37,500 --> 00:06:41,880
I can change the box from rectangle to maybe a browser window.
94
00:06:42,140 --> 00:06:47,670
And now I've got a lovely browser window that I'm going to start designing.
95
00:06:47,940 --> 00:06:53,600
So on my web site I would first like to have maybe a header section.
96
00:06:53,610 --> 00:06:56,320
So let's create a rectangle
97
00:06:56,420 --> 00:07:05,460
up here, and this header section is going to have a nice bright color, and then here I'm also going to have
98
00:07:05,520 --> 00:07:11,090
maybe a mobile phone maybe over here somewhere down here.
99
00:07:11,340 --> 00:07:21,120
So let's change that to a phone iPhone maybe looks good so we'll use that to show off our app that our
100
00:07:21,120 --> 00:07:28,920
startup is developing. So we can put that on the right over here and then maybe I'll have a section that's
101
00:07:28,950 --> 00:07:30,650
maybe some menus over here.
102
00:07:30,720 --> 00:07:34,990
So let's just go ahead and search for a link bar.
103
00:07:35,100 --> 00:07:43,290
So here's our link bar and we can put it up here on the right, and then maybe we want
104
00:07:43,290 --> 00:07:49,580
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
105
00:07:49,590 --> 00:07:51,270
add a brand,
106
00:07:51,300 --> 00:07:59,250
so maybe like the logo for my company. So I'll just hold down Y and create a large text that maybe looks
107
00:07:59,250 --> 00:08:00,680
a little bit like the logo.
108
00:08:00,720 --> 00:08:02,070
Yeah looks pretty good.
109
00:08:02,430 --> 00:08:06,390
And then down here maybe you'll have a little bit more text,
110
00:08:06,540 --> 00:08:13,950
so like a large sort of telling people what my app is all about over here.
111
00:08:14,070 --> 00:08:18,920
Let's make that maybe left aligned, maybe make that all aligned together.
112
00:08:20,240 --> 00:08:25,070
And then finally at the bottom I probably will want to have some buttons.
113
00:08:25,250 --> 00:08:28,590
Let's look for a button and drop it down here.
114
00:08:28,760 --> 00:08:33,010
Maybe one will be download on Android, the other one could be download on iOS.
115
00:08:33,020 --> 00:08:36,610
And let's use their guidelines to put that in.
116
00:08:36,620 --> 00:08:43,040
So that's the top of our page and we can just keep extending this browser by dragging it down and start
117
00:08:43,040 --> 00:08:45,540
designing the next parts of our page.
118
00:08:45,560 --> 00:08:49,960
So maybe we would have some images down here that shows off our features.
119
00:08:50,000 --> 00:08:57,230
So let's just go ahead and add some of those images in. So we can change our rectangle to an image, and
120
00:08:57,320 --> 00:09:07,690
we can copy and paste a number of these into the web site, and then we'd probably need
121
00:09:07,690 --> 00:09:09,750
a little bit of explainer text underneath,
122
00:09:09,750 --> 00:09:14,380
so I'm just going to hold down T and start dragging.
123
00:09:14,380 --> 00:09:17,430
Maybe we would need like 2 lines, something like that.
124
00:09:17,920 --> 00:09:26,890
And then we can copy that as well and get a few of these for each of our images, and this would basically
125
00:09:26,890 --> 00:09:29,950
show off the features of our web site.
126
00:09:29,980 --> 00:09:35,460
And basically you just continue designing your web site until you're happy with how it looks.
127
00:09:35,470 --> 00:09:41,350
So you can search through here for whatever you need like buttons or images or menus or you can just
128
00:09:41,410 --> 00:09:45,850
navigate through these little different tabs to see what it is that you need.
129
00:09:46,060 --> 00:09:53,320
And I want you to create a wireframe for your ideal startup web site so that in the future, if you create
130
00:09:53,320 --> 00:09:55,810
a web site, you'll know how to wireframe it,
131
00:09:55,840 --> 00:09:58,870
so we have a guide as to how you should design up your web site
132
00:09:59,020 --> 00:10:00,620
when you start coding it up.
133
00:10:00,670 --> 00:10:05,260
So I'm going to do the classic thing where I show you -
here's one that I made earlier. And this is the
134
00:10:05,260 --> 00:10:13,800
mock-up for our TinDog project, and basically I've split it into sections so that we've got maybe a header
135
00:10:14,050 --> 00:10:22,390
section, a features page, maybe some testimonials, and maybe some press that we've had for our start up,
136
00:10:22,780 --> 00:10:24,330
pricing table,
137
00:10:24,820 --> 00:10:28,080
another call for action at the bottom trying to get people to download it,
138
00:10:28,110 --> 00:10:30,340
and finally you've got your social icons etc..
139
00:10:30,550 --> 00:10:34,450
And this took me maybe about 10 minutes to create.
140
00:10:34,450 --> 00:10:39,670
So it's very very quick and it's meant to be rough and ready to show you the layout.
141
00:10:39,730 --> 00:10:44,740
We don't want to focus too much on the sort of mock-up side of things where we get everything looking pixel
142
00:10:44,740 --> 00:10:49,510
perfect, because we're going to do that anyways later on when we create our web site.
143
00:10:49,600 --> 00:10:52,390
Now if you want you can create your wireframes in Balsamiq.
144
00:10:52,450 --> 00:10:58,600
Alternatively, if you don't want to give them your email, then you can just print out the templates from
145
00:10:58,600 --> 00:11:01,720
Sneak Peek It and draw it by hand as well.
146
00:11:01,720 --> 00:11:08,620
So if you have designed anything particularly fantastic, I want to see it in the Q & A section so that
147
00:11:08,620 --> 00:11:11,840
we can judge who has the best designs for this
148
00:11:11,840 --> 00:11:17,170
theoretical startup that you're going to make. And points are awarded for, not only great web design
149
00:11:17,410 --> 00:11:22,130
but also for how crazy your startup ideas can be.
150
00:11:22,260 --> 00:11:25,760
So pause the video and give this challenge a go.
151
00:11:25,930 --> 00:11:32,170
Now in the next lesson we're actually going to go about implementing all of this design using Bootstrap
152
00:11:32,170 --> 00:11:35,050
by hooking it up with various components.
153
00:11:35,050 --> 00:11:38,440
So for all of that and more I'll see you on the next lesson.
16157
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.