Iterating on a Design

Generally speaking, it's a good idea to think in terms of iterations or passes. 0:00 An iteration is one version of your project, and 0:06 there will likely be several versions between the start and the final product. 0:10 When creating a design, your first idea is almost never your best idea. 0:15 There are always things that can be improved or 0:20 changed, to better suit the goals of the project. 0:22 For example, the arrangement of page elements we created on a mobile device, 0:26 probably isn't the best way to communicate with the audience, on a desktop computer. 0:31 Or perhaps after stakeholders see the first version of the site, 0:37 they might ask for changes. 0:41 After the product launches, you might get feedback from customers, 0:43 or information that comes from analytics data. 0:47 In almost every case, your first try isn't going to be your best work. 0:52 So you should embrace all the feedback you can, and 0:57 use it to make the project better. 1:01 We've done a first pass on the mobile version of the site. 1:03 But there might be some ways we can make it better. 1:07 We've created this free floating design, but 1:11 we should wrap it in a mobile phone container. 1:15 Let's drop in an iPhone container. 1:19 So I'll go to containers, and you can drag in either iPhone or smartphone. 1:21 I'll just pick iPhone here, and let's drag that onto the canvass. 1:29 And these containers will be scaled appropriately. 1:34 And if we zoom out even further, we can see that this 1:39 website doesn't quite fit into this container. 1:44 And you'll also notice that it's going behind the container. 1:49 So to fix that we can just click on the container, and 1:53 then right-click or secondary click, and choose send to back. 1:57 And then the other thing we should do, is actually lock this layer. 2:03 So let's move this over to the upper left, right click on it, and choose lock iPhone. 2:07 And that will lock the layer in place until we right-click on it again, and 2:16 choose unlock. 2:20 And that way we won't select it accidentally. 2:21 So now let's try to put this website inside of this iPhone. 2:24 And you can see it doesn't quite fit. 2:29 So we need to make some adjustments, so 2:31 that this site is proportional to this particular device. 2:33 So let's zoom back in, and let's start working on these adjustments. 2:40 So first, I'm going to make 2:48 this image a bit more narrow. 2:53 I'll move Coming this Summer in a bit. 2:59 We can make this Pre-Order button a little bit smaller. 3:02 And we'll decrease the font size a bit, maybe to 16. 3:07 And I think that looks pretty good. 3:17 Up here, we need to reduce the size of this tagline. 3:21 So let's maybe try 18 point font. 3:26 That works! 3:30 And we'll bring in this logo and the hamburger menu. 3:32 And that's looking good. 3:39 Now, we just need to adjust some of this copy. 3:40 And it's okay if this ends up scrolling further down 3:46 the page once the final copy is in place. 3:50 It's not a big deal, we just want to align everything right now. 3:54 And then we'll put the social buttons back in place, 3:58 and center them on the page. 4:03 Okay, great. 4:10 Now, we can zoom out and take a look what this looks like. 4:11 I'm generally pretty happy with this. 4:15 I'm gonna move these elements down, just a little more. 4:17 To give each one of these things some room to breathe, and give it some space. 4:24 And I think that looks pretty good. 4:33 This feels a bit cleaner than the free-floating page we had previously. 4:35 Elements are properly scaled to fit the context of the phone, 4:40 and they're aligned with one another, along an imaginary grid. 4:44 However, it's still a smart idea to design without 4:48 putting a box around your work at the start. 4:51 Keeping the space open will allow you to think freely, and 4:54 come up with the best way of presenting the information, 4:57 rather than trying to cram it into an arbitrary area. 5:01 Now, let's keep this design on the side, and 5:06 we're going to select all of these elements. 5:10 And we'll copy them by hitting Ctrl+C on Windows, or 5:15 Command C on Mac, and then click in any blank area. 5:19 And we'll paste them by hitting Ctrl+V on Windows, or Command V on Mac. 5:24 And that will duplicate the items, and 5:32 we can just drag these over to the right here. 5:35 This is what's going to become our desktop layout. 5:39 So first, let's make this headline a lot bigger so 5:42 that it stretches across a wider area. 5:46 I'm gonna zoom out just a bit, To give us some room to work. 5:49 So we'll bring this font size back up, maybe say, something like 40, 5:55 or we can probably go even higher here, to something like 60. 6:01 I think that looks good. 6:05 Move these items out of the way here. 6:08 Now let's make the area for our images bigger to match. 6:12 So I don't think they need to stretch all the way across the horizontal width of 6:17 the page, like on a phone layout but, we'll make them still pretty large here. 6:21 And maybe take up a bit chunk of the left side. 6:27 Next, let's put this pre-order button to the right side here. 6:31 We want the images to capture their attention, but we don't want to shove 6:38 the button all the way out of the way, because that's the call-to-action. 6:43 So we want that up high on the page, kinda front and center. 6:47 So let's make this button a little larger. 6:53 I think that's good. 6:59 And we'll make the font sizes larger here, maybe say, 20 or even 24 on that. 7:01 And let's do something similar for 7:09 the coming this summer, say 20, maybe even like 28. 7:14 That's pretty good, and we'll center that along the button. 7:21 So let's zoom in a little bit, get a better look at this. 7:24 This looks like it's coming together nicely. 7:29 Move this up a bit. 7:31 We still want to include the marketing copy down here to educate the customer, 7:34 but stretching it all the way across the full width of the page, 7:39 will make long lines difficult to read. 7:43 So let's just stretch it across the width of the product images. 7:45 So we'll say that's kinda the space for this copy. 7:51 And of course, in our final design, we would adjust things like font sizes, 7:55 and so forth, to make it fill the space a little bit more neatly. 8:01 And this does leave the right side a little bit bare. 8:06 But this type of thing can be changed later when you 8:09 further iterate on the design. 8:12 And this could be resolved with higher fidelity design details, like a square box 8:14 around the preorder area, to separate the page into two columns. 8:19 Or the page could be tweaked with different fonts, sizes, line heights, and 8:25 so forth. 8:28 This wireframe is just meant to get all the elements into one place. 8:29 Now, let's stretch out the logo a little bit. 8:34 Because on the desktop version of the site, 8:39 we'll probably have the full logo lockup with the image and 8:42 then the company name, rather than just a small icon. 8:47 And we can do the same with the navigation. 8:53 So let's delete this small menu here. 8:56 And I'm gonna go to text, and I'll grab this menu bar here. 9:01 And typically, this is meant for an actual desktop application, 9:07 but we can use it for this website too. 9:11 And we can separate each element with a comma, so 9:14 we'll say Home, Products, Support and the About page. 9:18 So we'll stretch these out. 9:26 And let's bump up that font size as well. 9:30 Maybe something like 16. 9:34 And we'll align that with the right side of the page and the middle of this logo. 9:40 And we're almost done, let's just move these social icons around a bit, 9:47 maybe change them to be extra large icons. 9:54 That's good. 9:58 And let's try to find the center there. 10:00 I think that's pretty good. 10:06 And finally, let's put all of these elements inside of a browser window, 10:08 so that we can clean things up a bit further. 10:14 So I'm gonna go to containers, and instead of an iPhone, 10:17 I'm going to drag a browser window into place here. 10:22 And we'll right-click on that, say Sent to Back, and 10:26 we'll zoom out a bit further here. 10:31 And we can just kind of wrap all these page elements, just like this. 10:35 And of course a browser window can be resized, however the user might like. 10:43 So we'll just wrap these elements just like this, and zoom back in. 10:48 And I think this looks pretty good. 10:56 I'm gonna lock this browser into place. 10:58 Maybe move some of these elements down here, 11:02 to give them a little bit more vertical space, 11:06 give that tagline some room to stand out on its own. 11:10 And now that we have two different screen sizes side by side, we can compare the two 11:15 to make sure that we're delivering a good experience on both. 11:21 And the desktop size we designed, 11:27 will likely fit smaller screens and possibly tablets. 11:29 If you wanted to take things further, you could create an even larger layout, and 11:33 have one more size up for particularly large screens, but we'll stop there. 11:38 We just iterated a bit on the design we already created. 11:46 But if you want to do more exploration, you should take some of the same 11:49 elements and come up with a completely different design. 11:54 Perhaps there are other approaches that do a better job 11:58 of communicating to the audience, that you could iterate on even further. 12:01 I hope you enjoyed this overview of designing websites. 12:07 Like I said at the beginning, there's no standardized approach, and 12:10 this is just one way of tackling the problem. 12:14 You should feel free to be flexible, and 12:16 experiment with different techniques to find the one that works for you. 12:19