A Beginner’s Web Design Tutorial for 2018 – Part 1 of 2

You know absolute beginners or coders, because the today’s topic is going to be taking and designing a user interface or a website from scratch in like a an app like Adobe experience, design or sketch or whatever.

And then how do you take that design and know how to properly put it into HTML and CSS and structure it, and so usually on my tutorials, I’m either covering one aspect of you know just design like in Adobe XD or just one aspect of HTML and Css, so I thought I would do a two part article tutorial between today and tomorrow, where today, I’m just going to show you how to do this design right here and think about.

You know good design fundamentals when you, when you’re doing like website and UI design, and then tomorrow we’ll focus on taking the same exact design and I’ll show you the thought process, at least from how I approach it in using HTML and CSS to recreate the exact Thing you see here in the browser and we’ll also make it responsive as well. Alright, so hopefully I you guys will enjoy this and today’s question is: do you use CSS frameworks, or are you 100 % custom, or do you prefer to rate your CSS custom without in the any help of HTML or CSS frameworks? Alright, so go ahead and let me know in the comments I will comment with the first comment in pin it with my answer and yeah.

So let’s go ahead and get started. Ok, so let’s go ahead and get started. We’re going to use Adobe experience design for this, and this is a UI design tool and I’ve cut over to quite a bit in the past, and also you can look at. I could do a search for more of that stuff. Um over here is the art board. We can toggle this on and off. I mean not the art board, but the section where displays artboards and layers.

So let’s go ahead and get started here. So the first thing that we’re going to do get a background color, depending on your purposes me just simply, white, there’s, no really right or wrong way in this in terms of initially choosing a background as long as it’s not some massive image that takes forever to Load – but I hide to that – we’re just going to use for this purpose a gradient background, so we’re going to choose the artboard and we’ll choose this color over here choose linear gradient.

We can move these things around, there’s a lot of different CSS linear, gradient generators that we can use as well to mimic this. So the fact that this is all off center and stuff – it’s not a problem to replicate when it comes to CSS – let’s see here so this first color picker. Let’s choose like this color we’re going to kind of have a vibrant sort of background here, very vibrant. Actually, alright – and this is fine as long as whatever you’re putting on top of it in terms of content, contrasts well, for instance, if we took this a rectangle like this, which is what we’re going to need to do, but we made it a color like the Fill, for instance, let’s get rid of the border here, the fill, for instance.

If we made it like a red that would be horrendous, you want it to really contrast, well, usually close, a maximum contrast or as close to maximum contrast as possible. So, in this case it would be white to white. We can contrast with this background. I weigh more so than if we just made it black. Black may not be bad, and it could have a use case here, and it does contrast quite well with it, but maximum contrast and for my purposes would be white here.

Okay, so now you have to ask yourself, you know when you’re designing a web site of some sort. You know what type of navigation do you want to have? Do you want to have you know a horizontal navigation, for instance like this? If I hit ctrl D to duplicate this change, the background color here slightly, you know to have our link our logo over here. Our links over here, that’s completely fine or you know.

Maybe we want to have something like a control panel or a left navigation right here, like a two column layout, essentially where our navigation and and other elements would be over here. This is what I’m going to choose personally in for the fill again when it comes to the fill, because we’re we’re putting it right to the left side, or this is all the way to the left side, and it’s going to be. We wanted to contrast very well just as this white section did, because the background purple /boot blue over here, you know, for instance, like I said if we made it red, if it still, it would look bad.

So you want to have a lot of contrast, but you do want to change it up, just so that you can create a separation between this over here and this over here. All right, so a light gray would work. We can even do like a desaturated light. Blue over here, I think, that’s what we’ll do and it complements it well all right, so it’s already coming along very easy. Now we can either start working here or over here.

Let’s, just it doesn’t really matter really, let’s just start over here and, let’s just say, for instance, we want to have a maybe like a avatar or like a picture of us or something so I’m holding shift alt and I’m left clicking and dragging out with the Ellipse tool and you could choose to have a border or not that’s kind, of just personal preference – I’m not going to need to fill this in with I’m.

Maybe I will, during the HTML and CSS part tomorrow with an actual image, I’m just going to leave this as a placeholder at for the time being and then also I’m going to left-click and drag with the type tool all the way out and then Center. This and we’ll just put I our name, Johnny doe, and then I make this black and for a text montserrat, I’m always using that fonts free from Google. You can use whatever you want.

Of course, let’s get out rid of this here, so we get more room and the size um go a little bit larger. You just left-click and drag up to increase that value over there. Alright, and that looks pretty good and notice. I everything so far is really spaced out. Well, you know I’m not taking this, and just you know making some massive thing where it’s touching the very edge you want to have a lot of padding a lot of margin, a lot of white space as it’s called it’ll, really help the design breathe.

In a sense, it’ll be easy to use and easy to read. So that’s one thing: it’s real important! Now, let’s put just a little navigation over here, so I’ll, take the type tool and just got ta left-click once and I’m going to put in home, and what’s us also left online, this alright home and we’re going to make this I well for now, I’m just Going to leave it at this size, but I’m going to tell you we’re going to change it and I’ll.

Tell you why in a second, let’s go ahead and then we’ll do a repeat grid. So we repaid grid like this and allows us to easily adjust a spacing and an equal manner between all the elements, all right and then I can also, for instance, change this size right here. So initially we just left it at the size in relation to the name right here, the the being the same size. There would be kind of an issue when it when it when it referred to as visual hierarchy in design fundamentals.

Visual hierarchy is really important and basically it’s just a way of saying alright. Can we create separation between elements, especially based on importance, so your names pretty important, obviously so we’ll make that bigger and then through design elements through aesthetics, we’re going to create separation between these elements, and you can do that in a manner ways font size color. I physical location, all these different things I plays into visual hierarchy, so I I double-click on this: let’s make this smaller also through font weight.

That’s another way, so we can go ahead and change this to maybe regular for the font weight. Alright. So now we’ve created separation already just through those elements, all right so now we’ll say we’re happy with that. I’r going to up group this home about me will do portfolio and contact so just kind of like a fictional portfolio. Here we’re going to duplicate this container and to even create more of a separation visually between these elements, between the name at the top and and the navigation here, oh by the way I used the Alt key to drag this down in size, we’re going to kind Of encase it in its own container, and it’s going to be very light, so I take this background, make it all the way with light and then make the opacity just right around there.

We create enough of a separation between all these elements. Still this, this white container over here still separates over here, and then this also separates between those elements or the element at the top. Rather, I’m going to just take all these and maybe just move them down a little bit all right, so very simple, obviously, but still very effective in terms of design. So let’s go ahead and do the right side so we’ll put over here a headline so become a master I’m just making any type of you know what let’s make it a little bit more relevant.

So this is a fictional portfolio. We’ll just do something like I’m a designer of things. You know some type of trendy annoying thing that a lot of designers do and they try to be unique, whatever let’s go ahead and make this bold notice, I’m making this. You know again we’re talking about visual hierarchy through over large font size, we’re making this the most important element, and this party, the first thing people are going to see it’s the headline it informs people so in terms of marketing is important as well.

In terms of the ad copy that you use, I think we’ll leave that that’s that’s pretty okay right there and then we’ll have maybe like a sub headline or just a small paragraph underneath it that might expand upon. You know the purposes of this page. A little bit more, let’s see here, we could just use lorem ipsum text, which is what a lot of people do, but let me real quickly just set the size at like 25 for now make it regular again we’re creating separation through font weight in font size.

You can also do through color as well, you design this thing and then make it a reality and the browser, oh yeah, imagine the possibilities of your new skill. Okay. This, of course, is not relevant at all to the purpose of this. I designed this fictional design here. You know that seems pretty good. You don’t want to make it too large. I you make it too large and it starts to I I would say not combat, but I try this challenge this this top up here.

For for too much emphasis, so we’ll make this a little bit smaller smaller, like that. I think that’s pretty good! Also, you can see the the line height by default where it says 29, the line spacing you can increase this a little bit more things would be spaced out a little bit better and then finally, that’s to a I maybe will make this come down here. We’ll do a call to action button down here and it’s called a call to action.

It’s just like a technical industry term, for you know in a very important button that you want people to click alright. So this is we’re taking make it slightly rounded and then we’ll get rid of the fill and we can use like a comp color, that’s close to it in this spectrum up here, like blue, there we go and then we’ll go ahead and put our call-to-action button Text left-click drag all the way from the right to the left and center it.

It’s just a quick way of centering text. Here, my firt folio and again we’re talking about contrast. We want things to contrast in a very maximum way, so this black on this, this darker, not darker blue, but you know pretty full on blue there’s, not much contrast, especially when we compare it and make this white. We can also make it stand out more by making it bold and adjusting the font size again.

You don’t want the font size to be too big, because then that just throws off the holding of thing, so you want equal margin. Space padding around the whole thing. Alright, so here you go, it’s only been you know, I don’t know how many minutes, but we already have a really solid design and just to show you for that, when we get to the HTML and CSS portion, I will do a little bit of a trendy, Modern background little thing here with some bezzie a curse, all right, actually on me back up just a little bit there we go.

This, of course, is entirely optional, so I hit escape after we’ve closed up the path with the Bezier curve and then get rid of a border we’ll give it a fill the fill. You know I seen a lot of people, especially these days, they’re doing a when it comes to these type of backgrounds. I’r really making these stick out. You could completely do this if you want to, by the way we’ll take this. This main container will give it a shadow just so I can show that process in CSS here we’ll make a pretty big blur X & Y of three something like that.

It’s pretty subtle, but it is a big blur radius. You could leave it like this or you could make maybe take a more subtle approach like that. That would work as well hell I might as well just let me see up here if I take that. Let me try to I drop this and get a interesting shade yeah. You know what I’m fine with that, we’ll leave it like that, all right, so the this is going to be the design, the UI that we go ahead tomorrow and, of course, if you’re reading this chances are tomorrow already occurred.

So you can just read the next article, but in terms of right now I’m going to be uploading, the the HTML and CSS process of taking this exact structure and this layout in making it a reality using HTML and CSS. So we’ll wrap it up our to tomorrow, alright guys, hopefully you enjoyed that make sure. I you guys check out the next article, which is tomorrow morning, if you’re reading this in the future, it’ll be already up on the blog and make sure you answer today’s question, which is: do you prefer to use a CSS framework when you’re starting out designing a Website and do an HTML CSS process, or do you do a hundred percent custom and the idea that you’re not using any type of framework that helps you alright, see you guys tomorrow?

Web Design
SEO Service
Google Citation Service
Contact us Today
559.300.9101