Create a Modern Web Design from Scratch – Full Process – Part 1 of 2

Go share is also super affordable with an annual subscription of being less than ten bucks a month. But if you’re, one of the first 500 people to click on the link here in the description in YouTube, then you get the first two months: 100 % free. So join up everyone what’s up Gary Simon, of course, cetera column. So today we’re going to be embarking upon a two-part article series, where I show you how to design that modern landing page that I showed you at the beginning of this article now, if it seems a little bit jagged for that initial animation.

That’s only because of the frame where otherwise, it’s very smooth, you can check out the code pen as well all right, but this first article I’m going to be showing you how to work within Adobe XD to create this design, I’m going to go over a lot Of my thought process behind the decisions that I make then in two days I’m going to be uploading, the second article and final article, where we go all over all the front-end development stuff.

And you know: how do we translate this Adobe XD prototype into something that actually works on the web? It’s also going to be fully responsive and I’ll, be showing you a lot of interesting tips and tricks that you probably didn’t know about already. So we’re also going to be using G SAP, which is the green sock animation platform to handle all these interesting animations. Alright. So if you haven’t yet make sure to subscribe and let’s get started alright, so let’s go ahead and get started, I mean Adobe.

Xd just died, the the new document window we’re just going to choose web 1920 here to get started alright and by default, let’s close that out for now, and so this is basically just going to be a fictional landing page for maybe like a guitarist company or Something like that, or maybe an or musician or some sort, there’s something in my eye course, and I you have a lot of different options and chew in terms of how you choose to structure the layout.

First of all, you have to ask yourself immediately: what is the call to action? You know what is it that you want these people to do the visitors you usually want them to perform some sort of action, whether that be you know, click on a link to learn more to buy something to enter their email whatever, and that’s really going to. I direct your initial decisions in terms of what content you’re going to be placing where and what you’re going to be emphasizing in terms of prioritizing everything and visual hierarchy.

I you also have to address you know. First of all, you need to educate your visitors. You know what this site is about immediately, and you usually do that through the headline, a strong headline, with a supporting description of some sort, something that will help people easily identify the purpose of the website. If people don’t know what’s going on, they leave like that. I so I decided I we’re going to have like a sort of multi column kind of block level layout just for this demonstration.

So what I mean is we’re going to have kind of like a hero, section right here traditionally for a long time, people I did hero sections like this. You know you have your your navigation up top here. You might have some sort of a headline Center, but the sub headline and then like some type of dive. Usually they can illustrate enough some sort, we’re going to kind of step outside of that and break the trend and I’m seeing more unique layouts.

Fortunately, just because we’re starting to evolve or continuing to evolve rather as UI designers, and so we’re going to have kind of like just this big column right here, dedicated to the primary information like the headline, the call to action, and it will probably make it go Right around here, it’s not going to be read either and factors going to make it this color for now and we’re going to put an image in here.

Actually, in fact, let’s do that now we’re going to have like a photograph through CSS the background image property. We’re going to make it a also a cover three, the background size property as well. So a cover will just take a photograph that you place inside it and just make it a hundred percent. No matter what so I’m here at Google Images and I’m going to do a search for guitarist all right, so the guitarist you want to make sure if you’re using Google Images go to settings note, go to tools rather uses rights, labeled for reuse with modification.

That way, you have the right to use these images. Now when it comes to photography in UI designer, I could dedicate an entire article to. I think it did already. Actually, I on the YouTube blog, but you have to really choose the right photographs, especially if you’re planning on having important content on top of it like type like eyes. You know information and we’re going to do that entirely right here.

I so we want to use an image that a will contrast well and be also makes sense right. So, as I was looking through these initially before you know, when I was preparing you know, there’s several that would work. I depended on the amount of content you’re going to have, for instance, this one right here. I, if you wanted a darker sort of feel this space right here, would be really great to have like a headline and maybe a sub headline or like a call to call to action or something because it’s not much happening in this image same thing right here.

I decided to choose this one. I this is a quite large image, but if you click on the link, it allows you to specify a width and height and it’ll just download it for you right away. So I believe I chose like 1600 for the width and then just hit. Ok – and I you can click download right here at the bottom, so that will download it. Alright, we’re going to show that real, quick and then we’re going to drag that image onto our container.

Tada works very simple, alright. So I next after that, what to do our other eye column right here, so where it’s a two column layout, but we’re going to have who rose right here. Alright! So for this first row, let’s get our rectangle and you could go like just 50/50. If you wish – or you could do maybe like this or this I’m going to choose to do something like this, where it’s more like, I two-thirds of the width down or the length or other, and so it’s real important if you’re going to have multiple like these, These sort of block level layouts to separate them in some way, so you could separate them in a manner of different ways, but the most important element here is contrast.

You separate them through contrast, and you have to take into consideration these colors and also the colors between these of these two blocks right here. So I this is where you get out, and you just start experimenting, I’m looking at right now how this particular color and the hue, the lightness and brightness interacts with. What’s next to it right here, particularly right here, so we experiment we go like all the way to like right here.

That is not good. I there’s just not enough contrast, but there’s just enough to where it’s throwing you off you’re wondering what’s going on. Of course, white works really well as a contrast, but then again, what is this one get to be this one’s? These two should also, if you’re going to try to rien, read if you’re going to try to reinforce the idea that there’s you know multiple blocks here. They have to be different so for this one I’m going to choose to make the color more in the yellowish and something that’s right around, not completely saturated, although that actually isn’t that bad.

I actually kind of liked that I was going to go with something more like right here. In fact, I think I will it does contour us just enough right here with this color, it’s in the same hue i, but it’s just more saturated. In fact, we’re going to stick right here, yeah, because I was I lied, there wasn’t enough contrast, so i’m diverging from my original plan just a bit, but you could see everything contrast real-world! Well, you can see.

This is clearly find container the next one down here. The one at the bottom I white, works perfect. It contrasts well with this in a contrast, well with this over here, you could even I don’t have to follow along with this part, but you could make it probably black as well. If you wanted to – and you see that works just as well so a lot of it is subjective and a lot of it, a lot of it is also very subjective or objective as well.

I so there’s certain things you should do and shouldn’t and then there’s certain things that are completely up to you all right. So I next up, let’s go ahead and start putting in the type based elements, so I’m going to put Gary Simon. I don’t know just this is going to be like the compliment company name. I guess you could call it. Of course, those of you who follow me. I love Montserrat, the font and I just use it just because most of you probably have already installed it anyways, and this is just a great all-around font, so people get mad that I use it too much, but that’s tough, tough, titty, alright! So now we’re going to duplicate this we’re going to have just a simple navigation just with three links right here, I’m going to say home and I’m going to duplicate this we’ll say about right: there, we’re even and also FAQ – I don’t know, I think, we’ll just Leave it like that, originally I had planned on making them not bold, like regular, which that works as well.

So I think we’ll just leave that there next, let’s put in our headline so next for the headline, then the main content of this section, I’m going to indent I’m not going to keep it on the same right here. I want it to have nice a lot of white space from the edge of the browser or the phone I and also from the top as well. So I’m I’m just going to click right here, we’re going to say, go musician. I don’t know some sort of catchy headline we’re going to make this bold as well increase the size of that quite a bit nice and juicy.

So we’re really saying hey. This is probably the first thing we want you to read right here and we’re reinforcing that through size also color, as it is completely 100 % contrast. If you made this white, for instance, it just doesn’t stick out as much as you can see. So it’s all about understanding the background color and what you have to work with and making that decision in terms of whether it should be lighter or darker.

This next one. Actually, let’s undo that we’re going to left-click and drag out a area, a type area and I’m just going to type in start touring all over the place and melting, the hearts of chicks. I don’t know okay, so now we will bring this down in terms of size and also weight, so we really want to create a clear distinction between these two type based elements. I see a lot of people and my Friday review shows where I review designs definitely check that out.

I do it every I do it by weekly. I see a lot of people getting visual hierarchy as it pertains to type completely wrong and that’s another thing: if you go to my blog search and type in visual hierarchy, you’ll find my article that I really talk about this. Well, you want to separate your different type based elements that not not every single one of them like, for instance, if you have a bunch of paragraphs, they should be styled the same, but when you have type based elements that are representing different ideas, I that go Together that are, you know physically close together, then you really want to separate them a lot, and you do that through scale or the font size.

You do it through contrast. Sometimes you don’t have to, though you can do through font weight as well all right. So I think that’s good right there, let’s create an interesting sort of button like a call to action button. I’r going to put a text right here, get famous alright, so we’ll make this bold, maybe a little bit smaller and we’ll wrap it in sort of like a trendy, little unique container of sorts and we’ll take out the fill and let’s also put an icon here.

So we’ll put I take our pen tool hold shift, alright, even it up there, we go, make it white or black. Rather sorry, I saw white and I said white and you want to make sure everything’s. You know evened up. This will give you a guide telling you you’re at the center right there of the text. That’s good, and you also want to make sure that your button, you know all the padding, is pretty consistent in terms of the light space from the top to the bottom and I’m looking for an even amount of white space from the top bottom and right.

We can get away with it over here because we’re doing something a little bit unique, we’re having extend all the way off screen all right, so you could have done that button differently. For instance, I don’t do this, but I’ll just quickly demonstrate it. You could have just taken a right here, take these two elements and just put them in the center. You could have done that that works just as well, but if you want to be unique as long as you’re adhering to good design, principles and fundamentals, you can you know, do things differently like that, I so I think that’s good right there, let’s go ahead and Complete this area over here it’ll be done shortly.

I will go ahead and take this down. This is going to be like an h2 element in HTML. This would be h1. I’r this right here. This is this going to be secondary content. So it’s going to be ASA, I don’t know maybe it’ll be something like featured – will have some lorem ipsum text just duplicate this all right, so maybe it’ll come down around here with it selected I’m going to go to my plugins and there’s a lorem ipsum plug-in You can go ahead and click discover plugins, plugins and type in lorem and you’ll find it and you’ll be able to install it.

I’r going to choose fill with placeholder text. Alright, that’s good! I’r going to make this smaller font size and also increase the line height. Just a bit around 34 all right – and it looks pretty good to me right around there and then a real quick call to action just using this same sort of just this. These two elements, so I’m just going to control deselect those two duplicate them and then we’ll change this up real quickly.

To read more, I don’t know now, I’m also looking at the size of this element versus the size of this, and it’s a little bit too close. So I’m going to scale it down, maybe like nineteen. Alright, that looks pretty good right there to me and then, finally, we will take these two elements: duplicate them put them right here and I’m going to change. This is going to be like a email capture, so subscribe I’ll change.

This just Assoc, oh, is like two lines of text or something like that. I still think these are probably a little just a little bit too big in terms of font size, so I’m going to scale them down like to nineteen yeah. That’s that’s pretty good right. There we’ll take these to bring them down. Okay, then we’ll go ahead and put in a text field so notice. I mean it the width, so that’s an even amount of waste based between here and the right on the right side as well.

So it’ll span hundred percent in the container once we’re in HTML and CSS and then I’ll put in place holder text. So this will be email address and we will drop down the opacity just a little bit. So I’m using my keyboard, arrow keys to I get this aligned we’ll take these two elements, duplicate them and then I’ll make this one a fill of black and we’ll make this one white, and that rate this particular call to action.

You know it stands out pretty. Well, and then we’ll inside of here, we’ll just put in subscribe now again make sure this is all lined up as it should be. Alright, I just moving things around a bit. Alright, this line height. I want to get down just a tad bit there we go. Alright and there we go, I’m pretty happy with that as it stands, this is going to be very close to what it looks like in the browser and ordinarily.

If this is a real project – and you would also take this – and I you know – you would create – perhaps another artboard like an iPhone XR, just to show what this will look like when you’re in mobile or just basically a small device and what you would do Is probably extend this down and you would start taking these elements, and this is where it helps to understand. I front-end development as a UI designer and understanding, CSS and layouts and the grid, and all that so that you can understand.

You know which one would you have or prefer to should be shown on top and what else is possible. The CSS grid fortunately makes I a lot of that not entirely necessary in terms of understanding CSS as a UI designer, specifically because with the CSS grid, you can really move anything almost anywhere. You want, but it’s still helpful, to have an understanding of CSS if you’re a UI designer but yeah.

You would take these elements like. Perhaps you would start with this duplicate it put it over here. If you wanted to scale it down, you could do that as well like this and then take our stuff right here and maybe scale it down and then move them in and because this is such a small navigation and there’s not many links. It’s always advisable to discard the hamburger menu, because you can. I mean you have enough space here and why not do that? I it’s less clicking so for the UX, it’s less clicking to access the important information that they want to be able to access.

So you can always just do this or even sometimes put it on a second eye or secondary line underneath it. You could do that as well. I think we’re just going to do this, though, for our example. Alright and then you would take all this stuff and you would start translating it as well. You know this is going to be first and yeah right around there, and I think you get the point already, but you would basically just translate everything in terms of how you want it to look on a mobile viewport.

We’re not going to do that because we are you running pretty long in this tutorial anyhow, so in the article I’m releasing in two days on Friday, here I’m going to be showing you the HTML and CSS process, so there’s a few things can be mobile first. So we’re going to work within a mobile first context and if you don’t understand what that means, don’t worry I’ll, explain that and we’re going to do the HTML and the CSS and then work on the JavaScript to make this animate in a very cool and modern Way all right, so hopefully you found that useful.

If you did make sure to leave a comment subscribe and also click the notification bell icon to get notified every time. I upload a article, all right I’ll, see you guys later Inc, bye,

Web Design
SEO Service
Google Citation Service
Contact us Today
559.300.9101