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.