WEBVTT 0 00:01.170 --> 00:04.520 Now, we've seen how to install Bootstrap and what it can do. 1 00:04.560 --> 00:10.590 But before jumping headfirst into designing our web site, the first thing I want to talk about is what 2 00:10.590 --> 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 00:16.860 --> 00:22.230 one of the first things that you will do before touching any code, any CSS, or even creating your 4 00:22.230 --> 00:23.500 HTML structure, 5 00:23.580 --> 00:26.380 the first thing that you need to do is to wireframe. 6 00:26.490 --> 00:31.670 Now, wireframes are a low fidelity representation of your design. 7 00:31.710 --> 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 00:37.380 --> 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 00:42.150 --> 00:44.430 ahead and just build the house straight away, 10 00:44.430 --> 00:44.940 right? 11 00:44.940 --> 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 00:51.270 --> 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 00:55.560 --> 00:58.330 costly and time consuming to fix later on. 14 00:58.410 --> 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 01:04.620 --> 01:10.010 get buy in on your designs and be able to iterate through your design process. 16 01:10.170 --> 01:13.400 So you might want to create one version using your wireframe, 17 01:13.470 --> 01:15.560 see if, you know, other people like it. 18 01:15.570 --> 01:18.030 If you're working for somebody, that'll be your boss. 19 01:18.150 --> 01:22.350 If you're not working for anybody then it might be friends or colleagues, but essentially you want to 20 01:22.350 --> 01:27.360 be able to settle on a design before you go ahead and implement it. 21 01:27.420 --> 01:30.530 And that's what wireframing is perfect for. Now, 22 01:30.540 --> 01:32.480 it's meant to be low fidelity, 23 01:32.490 --> 01:38.020 so it's meant to look really really simple and it shouldn't take you too long to produce. 24 01:38.100 --> 01:41.890 Now, the opposite of this is what's called a mock-up. 25 01:42.030 --> 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 01:48.390 --> 01:50.610 it's almost like you've gone into the future, 27 01:50.610 --> 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 01:56.160 --> 01:58.930 the present to try and show people what it looks like. 29 01:59.070 --> 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 02:03.930 --> 02:05.000 to end up getting. 31 02:05.040 --> 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 02:10.170 --> 02:13.310 them exactly how you want it to look. 33 02:13.320 --> 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 02:18.390 --> 02:24.600 getting really stuck on choosing the colors or the icons or, you know, or which images to include in the 35 02:24.610 --> 02:25.250 mock-up. 36 02:25.470 --> 02:27.840 And it really bogs you down. 37 02:27.930 --> 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 02:34.680 --> 02:39.560 good idea about the layout and structure, and then looking at some UI patterns, 39 02:39.570 --> 02:45.600 so going to web sites like ui-patterns.com and looking at their design patterns, and you think about, 40 02:45.630 --> 02:50.370 you know, the problems that you're actually trying to solve as you're designing your web site. 41 02:50.370 --> 02:58.200 So for example if you needed to have a carousel or a basically a slideshow because the user needs to 42 02:58.200 --> 03:03.720 browse through a set of items and possibly select one of them then you can see some of the examples 43 03:03.720 --> 03:09.360 that they've picked up for example from Amazon or from other places and look at, you know, the solution 44 03:09.360 --> 03:10.470 and the rationale. 45 03:10.470 --> 03:16.350 And this is a really really good web site for understanding how other people have solved problems using 46 03:16.350 --> 03:17.280 web design 47 03:17.280 --> 03:23.100 and to be inspired for your own designs. Then the next step is to create a simple sketched wireframe 48 03:23.280 --> 03:27.010 for planning the layout and seeing where everything is going to be. 49 03:27.120 --> 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 03:32.880 --> 03:39.010 Photoshop or Illustrator, to create really sort of photo realistic versions of your future web site. 51 03:39.240 --> 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 03:44.520 --> 03:45.530 called a prototype, 53 03:45.530 --> 03:51.390 so an animated version of your web site that really shows off what exactly is going to look like. 54 03:51.690 --> 03:57.510 Now a really good resource for looking for inspiration on all of these fronts is a web site called 55 03:57.510 --> 04:01.400 Dribbble, which is a place where designers put up their portfolios. 56 04:01.410 --> 04:05.820 So, for example, if you just search for something like 'website', you can come across some really really 57 04:05.820 --> 04:10.320 beautiful designs that people have created as a part of their job, 58 04:10.320 --> 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 04:16.950 --> 04:23.910 place to get inspiration. And a really cool thing about Dribbble is that you can even search Dribbble by 60 04:23.910 --> 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 04:32.790 --> 04:34.310 particular shade. 62 04:34.320 --> 04:38.610 So this is a really really cool place where you can get lost for hours and hours, 63 04:38.910 --> 04:42.930 and it's a fantastic starting point to get inspiration for your web design. 64 04:42.960 --> 04:45.230 So let's do the same for our web site. 65 04:45.240 --> 04:48.300 Let's start off by creating a wireframe. 66 04:48.360 --> 04:50.650 So how would you go about doing this? 67 04:50.820 --> 04:57.090 So, in order to create wireframes, the easiest thing that I tend to recommend is just to use pencil 68 04:57.120 --> 04:58.210 and a piece of paper. 69 04:58.470 --> 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 05:05.010 --> 05:14.010 download and print out for browsers or for mobile or for tablets, and you can start drawing on these 71 05:14.070 --> 05:19.670 printouts in order to wireframe your web site. And they're free to download, 72 05:19.760 --> 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 05:24.750 --> 05:25.320 wireframing. 74 05:25.320 --> 05:31.350 Now if you want to be a little bit more advanced in wireframing, then pretty much the industry 75 05:31.350 --> 05:33.500 standard tool is Balsamiq, 76 05:33.630 --> 05:37.950 and I've been using this for a number of years and it's really really nice. 77 05:38.160 --> 05:40.590 It's quick, it's really really easy, 78 05:40.590 --> 05:43.350 and the best part is that it's really collaborative. 79 05:43.350 --> 05:48.960 You can share your designs with, say, you know, somebody who commissioned you to design the web site, or 80 05:48.960 --> 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 05:54.630 --> 05:56.130 the designs as they need. 82 05:56.160 --> 05:57.720 So it's really really cool. 83 05:57.750 --> 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 06:04.620 --> 06:06.740 what we need to do when we start coding. 85 06:06.930 --> 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 06:12.840 --> 06:17.370 just go ahead and download and print out some of these wireframe sheets so that you can follow along 87 06:17.370 --> 06:18.290 with me. 88 06:18.330 --> 06:23.040 So I'm just gonna log in and I'm going to create a new project. 89 06:23.070 --> 06:27.820 So this is my new project and this is my new wireframe which is what I'm going to edit. 90 06:27.840 --> 06:33.780 So I click on that to open up my canvas and it's pretty easy to get going. 91 06:33.780 --> 06:37.410 I can just hold down R and start creating a box. 92 06:37.500 --> 06:41.880 I can change the box from rectangle to maybe a browser window. 93 06:42.140 --> 06:47.670 And now I've got a lovely browser window that I'm going to start designing. 94 06:47.940 --> 06:53.600 So on my web site I would first like to have maybe a header section. 95 06:53.610 --> 06:56.320 So let's create a rectangle 96 06:56.420 --> 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 07:05.520 --> 07:11.090 maybe a mobile phone maybe over here somewhere down here. 98 07:11.340 --> 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 07:21.120 --> 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 07:28.950 --> 07:30.650 maybe some menus over here. 101 07:30.720 --> 07:34.990 So let's just go ahead and search for a link bar. 102 07:35.100 --> 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 07:43.290 --> 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 07:49.590 --> 07:51.270 add a brand, 105 07:51.300 --> 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 07:59.250 --> 08:00.680 a little bit like the logo. 107 08:00.720 --> 08:02.070 Yeah looks pretty good. 108 08:02.430 --> 08:06.390 And then down here maybe you'll have a little bit more text, 109 08:06.540 --> 08:13.950 so like a large sort of telling people what my app is all about over here. 110 08:14.070 --> 08:18.920 Let's make that maybe left aligned, maybe make that all aligned together. 111 08:20.240 --> 08:25.070 And then finally at the bottom I probably will want to have some buttons. 112 08:25.250 --> 08:28.590 Let's look for a button and drop it down here. 113 08:28.760 --> 08:33.010 Maybe one will be download on Android, the other one could be download on iOS. 114 08:33.020 --> 08:36.610 And let's use their guidelines to put that in. 115 08:36.620 --> 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 08:43.040 --> 08:45.540 designing the next parts of our page. 117 08:45.560 --> 08:49.960 So maybe we would have some images down here that shows off our features. 118 08:50.000 --> 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 08:57.320 --> 09:07.690 we can copy and paste a number of these into the web site, and then we'd probably need 120 09:07.690 --> 09:09.750 a little bit of explainer text underneath, 121 09:09.750 --> 09:14.380 so I'm just going to hold down T and start dragging. 122 09:14.380 --> 09:17.430 Maybe we would need like 2 lines, something like that. 123 09:17.920 --> 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 09:26.890 --> 09:29.950 show off the features of our web site. 125 09:29.980 --> 09:35.460 And basically you just continue designing your web site until you're happy with how it looks. 126 09:35.470 --> 09:41.350 So you can search through here for whatever you need like buttons or images or menus or you can just 127 09:41.410 --> 09:45.850 navigate through these little different tabs to see what it is that you need. 128 09:46.060 --> 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 09:53.320 --> 09:55.810 a web site, you'll know how to wireframe it, 130 09:55.840 --> 09:58.870 so we have a guide as to how you should design up your web site 131 09:59.020 --> 10:00.620 when you start coding it up. 132 10:00.670 --> 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 10:05.260 --> 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 10:14.050 --> 10:22.390 section, a features page, maybe some testimonials, and maybe some press that we've had for our start up, 135 10:22.780 --> 10:24.330 pricing table, 136 10:24.820 --> 10:28.080 another call for action at the bottom trying to get people to download it, 137 10:28.110 --> 10:30.340 and finally you've got your social icons etc.. 138 10:30.550 --> 10:34.450 And this took me maybe about 10 minutes to create. 139 10:34.450 --> 10:39.670 So it's very very quick and it's meant to be rough and ready to show you the layout. 140 10:39.730 --> 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 10:44.740 --> 10:49.510 perfect, because we're going to do that anyways later on when we create our web site. 142 10:49.600 --> 10:52.390 Now if you want you can create your wireframes in Balsamiq. 143 10:52.450 --> 10:58.600 Alternatively, if you don't want to give them your email, then you can just print out the templates from 144 10:58.600 --> 11:01.720 Sneak Peek It and draw it by hand as well. 145 11:01.720 --> 11:08.620 So if you have designed anything particularly fantastic, I want to see it in the Q & A section so that 146 11:08.620 --> 11:11.840 we can judge who has the best designs for this 147 11:11.840 --> 11:17.170 theoretical startup that you're going to make. And points are awarded for, not only great web design 148 11:17.410 --> 11:22.130 but also for how crazy your startup ideas can be. 149 11:22.260 --> 11:25.760 So pause the video and give this challenge a go. 150 11:25.930 --> 11:32.170 Now in the next lesson we're actually going to go about implementing all of this design using Bootstrap 151 11:32.170 --> 11:35.050 by hooking it up with various components. 152 11:35.050 --> 11:38.440 So for all of that and more I'll see you on the next lesson.