0
1
00:00:01,170 --> 00:00:04,520
Now, we've seen how to install Bootstrap and what it can do.
1

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
2

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,
3

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
4

5
00:00:22,230 --> 00:00:23,500
HTML structure,
5

6
00:00:23,580 --> 00:00:26,380
the first thing that you need to do is to wireframe.
6

7
00:00:26,490 --> 00:00:31,670
Now, wireframes are a low fidelity representation of your design.
7

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.
8

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
9

10
00:00:42,150 --> 00:00:44,430
ahead and just build the house straight away,
10

11
00:00:44,430 --> 00:00:44,940
right?
11

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
12

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
13

14
00:00:55,560 --> 00:00:58,330
costly and time consuming to fix later on.
14

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
15

16
00:01:04,620 --> 00:01:10,010
get buy in on your designs and be able to iterate through your design process.
16

17
00:01:10,170 --> 00:01:13,400
So you might want to create one version using your wireframe,
17

18
00:01:13,470 --> 00:01:15,560
see if, you know, other people like it.
18

19
00:01:15,570 --> 00:01:18,030
If you're working for somebody, that'll be your boss.
19

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
20

21
00:01:22,350 --> 00:01:27,360
be able to settle on a design before you go ahead and implement it.
21

22
00:01:27,420 --> 00:01:30,530
And that's what wireframing is perfect for. Now,
22

23
00:01:30,540 --> 00:01:32,480
it's meant to be low fidelity,
23

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.
24

25
00:01:38,100 --> 00:01:41,890
Now, the opposite of this is what's called a mock-up.
25

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
26

27
00:01:48,390 --> 00:01:50,610
it's almost like you've gone into the future,
27

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
28

29
00:01:56,160 --> 00:01:58,930
the present to try and show people what it looks like.
29

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
30

31
00:02:03,930 --> 00:02:05,000
to end up getting.
31

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
32

33
00:02:10,170 --> 00:02:13,310
them exactly how you want it to look.
33

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
34

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
35

36
00:02:24,610 --> 00:02:25,250
mock-up.
36

37
00:02:25,470 --> 00:02:27,840
And it really bogs you down.
37

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
38

39
00:02:34,680 --> 00:02:39,560
good idea about the layout and structure, and then looking at some UI patterns,
39

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,
40

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.
41

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
42

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
43

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
44

45
00:03:09,360 --> 00:03:10,470
and the rationale.
45

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
46

47
00:03:16,350 --> 00:03:17,280
web design
47

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
48

49
00:03:23,280 --> 00:03:27,010
for planning the layout and seeing where everything is going to be.
49

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
50

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.
51

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
52

53
00:03:44,520 --> 00:03:45,530
called a prototype,
53

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.
54

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
55

56
00:03:57,510 --> 00:04:01,400
Dribbble, which is a place where designers put up their portfolios.
56

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
57

58
00:04:05,820 --> 00:04:10,320
beautiful designs that people have created as a part of their job,
58

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
59

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
60

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
61

62
00:04:32,790 --> 00:04:34,310
particular shade.
62

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,
63

64
00:04:38,910 --> 00:04:42,930
and it's a fantastic starting point to get inspiration for your web design.
64

65
00:04:42,960 --> 00:04:45,230
So let's do the same for our web site.
65

66
00:04:45,240 --> 00:04:48,300
Let's start off by creating a wireframe.
66

67
00:04:48,360 --> 00:04:50,650
So how would you go about doing this?
67

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
68

69
00:04:57,120 --> 00:04:58,210
and a piece of paper.
69

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
70

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
71

72
00:05:14,070 --> 00:05:19,670
printouts in order to wireframe your web site. And they're free to download,
72

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 
73

74
00:05:24,750 --> 00:05:25,320
wireframing.
74

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
75

76
00:05:31,350 --> 00:05:33,500
standard tool is Balsamiq,
76

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.
77

78
00:05:38,160 --> 00:05:40,590
It's quick, it's really really easy,
78

79
00:05:40,590 --> 00:05:43,350
and the best part is that it's really collaborative.
79

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
80

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
81

82
00:05:54,630 --> 00:05:56,130
the designs as they need.
82

83
00:05:56,160 --> 00:05:57,720
So it's really really cool.
83

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
84

85
00:06:04,620 --> 00:06:06,740
what we need to do when we start coding.
85

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
86

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
87

88
00:06:17,370 --> 00:06:18,290
with me.
88

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.
89

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.
90

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.
91

92
00:06:33,780 --> 00:06:37,410
I can just hold down R and start creating a box.
92

93
00:06:37,500 --> 00:06:41,880
I can change the box from rectangle to maybe a browser window.
93

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.
94

95
00:06:47,940 --> 00:06:53,600
So on my web site I would first like to have maybe a header section.
95

96
00:06:53,610 --> 00:06:56,320
So let's create a rectangle
96

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
97

98
00:07:05,520 --> 00:07:11,090
maybe a mobile phone maybe over here somewhere down here.
98

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
99

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
100

101
00:07:28,950 --> 00:07:30,650
maybe some menus over here.
101

102
00:07:30,720 --> 00:07:34,990
So let's just go ahead and search for a link bar.
102

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 
103

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
104

105
00:07:49,590 --> 00:07:51,270
add a brand,
105

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
106

107
00:07:59,250 --> 00:08:00,680
a little bit like the logo.
107

108
00:08:00,720 --> 00:08:02,070
Yeah looks pretty good.
108

109
00:08:02,430 --> 00:08:06,390
And then down here maybe you'll have a little bit more text,
109

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.
110

111
00:08:14,070 --> 00:08:18,920
Let's make that maybe left aligned, maybe make that all aligned together.
111

112
00:08:20,240 --> 00:08:25,070
And then finally at the bottom I probably will want to have some buttons.
112

113
00:08:25,250 --> 00:08:28,590
Let's look for a button and drop it down here.
113

114
00:08:28,760 --> 00:08:33,010
Maybe one will be download on Android, the other one could be download on iOS.
114

115
00:08:33,020 --> 00:08:36,610
And let's use their guidelines to put that in.
115

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
116

117
00:08:43,040 --> 00:08:45,540
designing the next parts of our page.
117

118
00:08:45,560 --> 00:08:49,960
So maybe we would have some images down here that shows off our features.
118

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
119

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
120

121
00:09:07,690 --> 00:09:09,750
a little bit of explainer text underneath,
121

122
00:09:09,750 --> 00:09:14,380
so I'm just going to hold down T and start dragging.
122

123
00:09:14,380 --> 00:09:17,430
Maybe we would need like 2 lines, something like that.
123

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
124

125
00:09:26,890 --> 00:09:29,950
show off the features of our web site.
125

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.
126

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
127

128
00:09:41,410 --> 00:09:45,850
navigate through these little different tabs to see what it is that you need.
128

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
129

130
00:09:53,320 --> 00:09:55,810
a web site, you'll know how to wireframe it,
130

131
00:09:55,840 --> 00:09:58,870
so we have a guide as to how you should design up your web site
131

132
00:09:59,020 --> 00:10:00,620
when you start coding it up.
132

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
133

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
134

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,
135

136
00:10:22,780 --> 00:10:24,330
pricing table,
136

137
00:10:24,820 --> 00:10:28,080
another call for action at the bottom trying to get people to download it,
137

138
00:10:28,110 --> 00:10:30,340
and finally you've got your social icons etc..
138

139
00:10:30,550 --> 00:10:34,450
And this took me maybe about 10 minutes to create.
139

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.
140

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
141

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.
142

143
00:10:49,600 --> 00:10:52,390
Now if you want you can create your wireframes in Balsamiq.
143

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
144

145
00:10:58,600 --> 00:11:01,720
Sneak Peek It and draw it by hand as well.
145

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
146

147
00:11:08,620 --> 00:11:11,840
we can judge who has the best designs for this
147

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
148

149
00:11:17,410 --> 00:11:22,130
but also for how crazy your startup ideas can be.
149

150
00:11:22,260 --> 00:11:25,760
So pause the video and give this challenge a go.
150

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
151

152
00:11:32,170 --> 00:11:35,050
by hooking it up with various components.
152

153
00:11:35,050 --> 00:11:38,440
So for all of that and more I'll see you on the next lesson.