Generally speaking, it's a good idea to think in terms of iterations or passes.

An iteration is one version of your project, and

there will likely be several versions between the start and the final product.

When creating a design, your first idea is almost never your best idea.

There are always things that can be improved or

changed, to better suit the goals of the project.

For example, the arrangement of page elements we created on a mobile device,

probably isn't the best way to communicate with the audience, on a desktop computer.

Or perhaps after stakeholders see the first version of the site,

they might ask for changes.

After the product launches, you might get feedback from customers,

or information that comes from analytics data.

In almost every case, your first try isn't going to be your best work.

So you should embrace all the feedback you can, and

use it to make the project better.

We've done a first pass on the mobile version of the site.

But there might be some ways we can make it better.

We've created this free floating design, but

we should wrap it in a mobile phone container.

Let's drop in an iPhone container.

So I'll go to containers, and you can drag in either iPhone or smartphone.

I'll just pick iPhone here, and let's drag that onto the canvass.

And these containers will be scaled appropriately.

And if we zoom out even further, we can see that this

website doesn't quite fit into this container.

And you'll also notice that it's going behind the container.

So to fix that we can just click on the container, and

then right-click or secondary click, and choose send to back.

And then the other thing we should do, is actually lock this layer.

So let's move this over to the upper left, right click on it, and choose lock iPhone.

And that will lock the layer in place until we right-click on it again, and

choose unlock.

And that way we won't select it accidentally.

So now let's try to put this website inside of this iPhone.

And you can see it doesn't quite fit.

So we need to make some adjustments, so

that this site is proportional to this particular device.

So let's zoom back in, and let's start working on these adjustments.

So first, I'm going to make

this image a bit more narrow.

I'll move Coming this Summer in a bit.

We can make this Pre-Order button a little bit smaller.

And we'll decrease the font size a bit, maybe to 16.

And I think that looks pretty good.

Up here, we need to reduce the size of this tagline.

So let's maybe try 18 point font.

That works!

And we'll bring in this logo and the hamburger menu.

And that's looking good.

Now, we just need to adjust some of this copy.

And it's okay if this ends up scrolling further down

the page once the final copy is in place.

It's not a big deal, we just want to align everything right now.

And then we'll put the social buttons back in place,

and center them on the page.

Okay, great.

Now, we can zoom out and take a look what this looks like.

I'm generally pretty happy with this.

I'm gonna move these elements down, just a little more.

To give each one of these things some room to breathe, and give it some space.

And I think that looks pretty good.

This feels a bit cleaner than the free-floating page we had previously.

Elements are properly scaled to fit the context of the phone,

and they're aligned with one another, along an imaginary grid.

However, it's still a smart idea to design without

putting a box around your work at the start.

Keeping the space open will allow you to think freely, and

come up with the best way of presenting the information,

rather than trying to cram it into an arbitrary area.

Now, let's keep this design on the side, and

we're going to select all of these elements.

And we'll copy them by hitting Ctrl+C on Windows, or

Command C on Mac, and then click in any blank area.

And we'll paste them by hitting Ctrl+V on Windows, or Command V on Mac.

And that will duplicate the items, and

we can just drag these over to the right here.

This is what's going to become our desktop layout.

So first, let's make this headline a lot bigger so

that it stretches across a wider area.

I'm gonna zoom out just a bit, To give us some room to work.

So we'll bring this font size back up, maybe say, something like 40,

or we can probably go even higher here, to something like 60.

I think that looks good.

Move these items out of the way here.

Now let's make the area for our images bigger to match.

So I don't think they need to stretch all the way across the horizontal width of

the page, like on a phone layout but, we'll make them still pretty large here.

And maybe take up a bit chunk of the left side.

Next, let's put this pre-order button to the right side here.

We want the images to capture their attention, but we don't want to shove

the button all the way out of the way, because that's the call-to-action.

So we want that up high on the page, kinda front and center.

So let's make this button a little larger.

I think that's good.

And we'll make the font sizes larger here, maybe say, 20 or even 24 on that.

And let's do something similar for

the coming this summer, say 20, maybe even like 28.

That's pretty good, and we'll center that along the button.

So let's zoom in a little bit, get a better look at this.

This looks like it's coming together nicely.

Move this up a bit.

We still want to include the marketing copy down here to educate the customer,

but stretching it all the way across the full width of the page,

will make long lines difficult to read.

So let's just stretch it across the width of the product images.

So we'll say that's kinda the space for this copy.

And of course, in our final design, we would adjust things like font sizes,

and so forth, to make it fill the space a little bit more neatly.

And this does leave the right side a little bit bare.

But this type of thing can be changed later when you

further iterate on the design.

And this could be resolved with higher fidelity design details, like a square box

around the preorder area, to separate the page into two columns.

Or the page could be tweaked with different fonts, sizes, line heights, and

so forth.

This wireframe is just meant to get all the elements into one place.

Now, let's stretch out the logo a little bit.

Because on the desktop version of the site,

we'll probably have the full logo lockup with the image and

then the company name, rather than just a small icon.

And we can do the same with the navigation.

So let's delete this small menu here.

And I'm gonna go to text, and I'll grab this menu bar here.

And typically, this is meant for an actual desktop application,

but we can use it for this website too.

And we can separate each element with a comma, so

we'll say Home, Products, Support and the About page.

So we'll stretch these out.

And let's bump up that font size as well.

Maybe something like 16.

And we'll align that with the right side of the page and the middle of this logo.

And we're almost done, let's just move these social icons around a bit,

maybe change them to be extra large icons.

That's good.

And let's try to find the center there.

I think that's pretty good.

And finally, let's put all of these elements inside of a browser window,

so that we can clean things up a bit further.

So I'm gonna go to containers, and instead of an iPhone,

I'm going to drag a browser window into place here.

And we'll right-click on that, say Sent to Back, and

we'll zoom out a bit further here.

And we can just kind of wrap all these page elements, just like this.

And of course a browser window can be resized, however the user might like.

So we'll just wrap these elements just like this, and zoom back in.

And I think this looks pretty good.

I'm gonna lock this browser into place.

Maybe move some of these elements down here,

to give them a little bit more vertical space,

give that tagline some room to stand out on its own.

And now that we have two different screen sizes side by side, we can compare the two

to make sure that we're delivering a good experience on both.

And the desktop size we designed,

will likely fit smaller screens and possibly tablets.

If you wanted to take things further, you could create an even larger layout, and

have one more size up for particularly large screens, but we'll stop there.

We just iterated a bit on the design we already created.

But if you want to do more exploration, you should take some of the same

elements and come up with a completely different design.

Perhaps there are other approaches that do a better job

of communicating to the audience, that you could iterate on even further.

I hope you enjoyed this overview of designing websites.

Like I said at the beginning, there's no standardized approach, and

this is just one way of tackling the problem.

You should feel free to be flexible, and

experiment with different techniques to find the one that works for you.