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.