Web Design: How to Get Started in 2019 (+ Resources)

That’s awesome. Web design is such an amazing craft, skill and profession, but there seems to be no definitive guide around the web. So in this article I’m going to try to bring together all the knowledge that I have and some of the resources in which you can go, learn and build your web design. Skill, hey everybody! What’s up and welcome to another segment of designer mind in this week’s article, I want to kind of take you step by step if you’re at zero.

If you want to become a web designer, we want to learn all the skills necessary to be able to create amazing websites and even work with your client, and do this professionally we’re going to talk about this in this article now, this article is not about the Business aspect of becoming a web designer finding your first clients and stuff, like that. I discussed those topics on in different articles.

Here I’m going to discuss how to build the skills and the craft of actually being able to design websites before you can go out and sell them to clients. So let’s get started talking about that. So I think the the word or phrase web design is comprised of two actually things web and design. So I want to get started and talking about design. If you want to be a web designer, you need to have the basic understanding concept and skills of a designer in general, so you might want to start learning about what design is? How do you get how or what are the best practices of design, and I want to show a few resources which I think can get you up and running with that.

So one book, which I really like is called universal principles of design, and this is a book with a bunch of really short and small one-page chapters. Each of them is talking about a different concept, it’s kind of like do and don’t and what works in design in general, but it will really get you into the habit of understanding how to think as a designer. So this is a really really practical book which you can just go through and start understanding how to think like a designer.

What works, what doesn’t what questions you should be asking yourself. We really put you in the framework of what is design now. The second thing, which is very very old, you’ll, need to work when no matter what design you’re going to be working on you’ll need to build some type of graphic skills, because type is everywhere. That’s the main way that we communicate to other people and basically web design is just another communication tool, we’re trying to get a message across and we do that a lot using type and typography.

So you want to make sure that you understand how you work with type: what’s the different between fonts, how to choose the right sizes, how to build a good grid, good books that I found useful when I just start got it started with design our thinking with Type and the other one is a very classic grid systems by Joseph Muller brookmont you’ll get all the links in the description for these books, so those two books I think they’re really relevant to have kind of as reference always you can.

You know, and it’s good to have a physical copy of them as well, because you always want to refer back to them. Get inspiration, get some ideas, help you kind of think through solutions of how to structure type and layouts in your doesn’t matter. If you’re doing a poster or a web design at the end of the day, you’re still you you have some information, you need to think about how I put this information in front of other people.

Those books will help you to think about how to build those kind of skills. So those are basically, I would say, the books that will help you build up your design, skill in general. Obviously, there’s also kind of the visual communication aspect of it, which is what does the visual that you’re putting in front of people whether it is a photograph, whether it is illustration, what does it communicate? What message does it convey so there’s a lot of aspects into you know the visual aspect of visual communication.

I did not touch upon this. I actually don’t know if there’s a really good resource covering that aspect I could not think about, but I think that if you get into design using, you know the the principles of design and understanding type and layout you have. You already have a lot assets and skill to take that into the world of the web. So let’s move into the world of the web. So one of the first things that you need to understand and I’m showing here an article, it’s actually from 2011, but I just didn’t see anybody who wrote in a good article about the process of web design and obviously I’m trying to do that in the articles Here and I did few segments on the process of web design, so but this article that I’m showing you here – this is an actual article from 2011 that I use when I basically got started covering you know a typical process of planning and doing the design.

So it’s kind of high-level, but I still think that if you read it today in development and launching and post lunging, I still think that you can get something out of it, even if the tools of the trade have changed through the years a little bit. The the process as a process is something that is very much the same, and I think that before you move on into a project, okay, you can still do some some websites for yourself, as you know, personal experiment, you might say, but when you want to turn Your web design into a professional into a profession that then necessarily means that you have to work with other people, and you need a process for how to think about a project, and I think this article will help you understand the each phase planning doing the design.

Developing the website and what you need to do after you develop it and launch it and make sure that everything worked correctly. So you need to have that process in place so making sure that you have a process. It doesn’t matter. If you take it from this or if you read some of the articles that I have on my blog regarding how I do strategy and then design, you need to have some sort of process in place before you get started.

A lot of people just want to jump right in to open up their their favorite design tool and start designing and developing, but you need to have a process that process should probably include planning and strategy, so make sure you have that now. I want to show some other resources that I use. This one is, I think, is really helpful for people just starting out. It’s called good, you i.Org, but basically what they’re doing here is they.

They are testing out a lot of they’re, doing a/b testing and for people who don’t know a be testing is doing two types of design and seeing which one of them performs best get more of the result that they’re trying to do – and here they made a Bunch of ideas and they’ve tested them and you can see which one works in which one doesn’t and they’re actually explaining here why things work? Well, others don’t work.

So if you just go over all of these patterns, you might you can learn from their experience, understand what works and what doesn’t work so you’ll, you can use better design patterns and you can also, if you feel like you, need to explain a client at some Point why you chose this version versus that version. You have that, as kind of a data to to pull from an experiment that happened in the past. That being said, by the way, things change, depending on industries and stuff like that, and sometimes you might want to test again and iterate and do a/b testing on your own website when you’re doing it with your clients.

But AV testing is, I would say, a bit more complicated topics and not a lot of web designers get to it at the beginning. So at the beginning I think it’s great to learn from them. What works and what doesn’t work. So you can get started not at knowing nothing, but you can already learn from what others have tested and know that are working and know that it’s better user experience, because that’s what people react better to so this is good UI after that, I’m putting here a Rewards, I don’t know if you know that you from might know that, because it’s one of the biggest designer, where it’s II’s use that use that website as inspiration, because this website sometimes the website there are maybe impractical in terms of their there’s they’re very experimental.

They might not be practical for what you are doing, but for me this is kind of like website that are pushing the envelope of web design of what is possible technologically, with development interactions animation all these types of things. So it really opens your mind to what is possible and, of course, you’re not going to copy/paste a solution from there, but seeing what what is possible, not just in terms of beautiful design visually.

You can also see this developed and see how they’ve executed the design idea here. So I think it’s really inspirational and might trigger some new ideas for the design that you might want to do yourself. I also use because I developed with web flow. I use the web flow showcase, a lot because you know you can see also projects here, but not only see how they look like you can actually open them up in web flow and see how they’ve build it.

So, for me this is inspirational in both the you know. The visual sense of inspiration, but also develop developmental, is inspiration, and is that a thing can you actually say that, but showing you what you’re able to do pretty easily, probably with web fluency, and you can learn from that and get ideas that you might want to Use for the project that you have right now, one more thing that I use is, I use be Haines specifically because they have very good search, filtering and segmentations.

So I might, if I have a website that I’m working on, which is in let’s just take the the auto industry. I might use the search function here because you can filter for web design and then search for automotive or something like that and you’ll be able to see website that we’re done for client in that space or even just experimental experimental purposes. But the point here as well is not to copy but to see how other people have dealt with solving the the pot of the problem for that industry by the way – and this is not to replace the research part of of your web design – we do not Cover research here, I’m just basically telling you about kind of like inspiration process, but it allows you to see how others have solved this problem, but also in the research.

You should probably see what competitors are doing so you’re not doing the exact same thing, which might be a bad thing for your client, so be Haines is one more thing that I’m using the next step, because it’s usually wire framing then this loads up. This was just recommended to me in the comments few days ago. This is a wire framing kit called platformer, which is for sketch figma Adobe XD is for everything.

I did not try this myself, and this is a premium. It cost something like I think, $ 60, but from looking at it it looks pretty cool. I did not so far. I did not use any pre-made UI kit, I’m just doing the wireframes myself and but I think that if you’re just starting out then having a built-in library of components of wireframes to try to kind of build your first website from LEGO bricks, I would call it That we’re already proven to work to some extent.

I think that can be useful, so you might want use this one. You might find a free alternative online, but using some kind of a kit might help you when you get started in stress, getting the structure right. So that you can, you know, have the layout and structure for the website and again I have a few articles about wire framings. Basically, I, when I do wire framing I the reason that I like to use figma right now is because I want to collaborate on the text together with my clients and use that not just as a mock-up for the structure, but also build the content together with The client that way, that’s why I use figma, but I’m discussing this more in depth in other articles, other tools that I’m using not sure why this is not load.

I couldn’t find a great resource for free icons, also premium icons, but you can basically search here for everything that you need, for example, an alert, and if you want to have free icons, you set the free here, then you can choose vector icons if you need Them and just download the SVG from here. I use this all the time for everything that does not require really custom-made icons when you’re and a lot of times.

Those are you, you need very standard icons for you, know, location or alert, or something like that. You might want to just you know: go ahead and download them from here. It will save you up a lot of time. Another one for icons that I use is the noun dick twitches, as you can see from just from here. Those are a little bit more elaborate, creative and complex icons. You can use them for free and then you add in in the footer or something a credit to the creator or you can pay $ 1 to use them.

I find this very useful and I use that sometimes see what else I have here. Unsplash is probably, if you’re using images and you’re not you, do not have the budget to do custom photography for for your website. Unsplash is the free resources for designers with really great photography. You can search here. Download photos use them for free, it’s great for for mock-ups, but a lot of times for even for the final stage of the design.

Because there’s are some really really high quality photos here on on splash and thank you for all the creatives which are sharing their photography for free on this website. The last part, obviously you know I I use web flow to build my website. So obviously, for me, the process the development process usually goes from design to development, which I do myself using web flow and then using using loom, which I don’t have online right now, but loom is.

Let me see if I have it here. No, it’s not loom is basically a Chrome extension which I use to communicate and kind of record myself presenting the website to my clients and kind of teaching them how to use the CMS. So that’s another tool I use at the, I would say post lunch process at the end of the process, so this is basically how I would get started. I would learn the skills for a design using the books that I’ve mentioned, use the create a process and use it on a few website that I would probably do either for free for friends.

I know that in the different articles that I do about how to get started professionally, you know and try to build a freelance business around web design. I’r talking a lot and I am fully into it about Nishi, finding a niche that you’ll get it started with, but to build the craft. You know to learn how to do web design yourself, there’s nothing better than actually designing and building websites, and any website would do for that.

As long as you work with other people and not just self initiated, projects are cool and they’re nice, but that’s not going to build your skill of collaborating with others and going through the whole process of you know doing the planning doing the the wire framing doing The delivery, so I would do that with any client, that’s possible and I got started. You know doing work for friends, family anybody that would basically need a website.

Once I’ve built the skill itself. I could take it into saying now. I want to build a business around this now. How do I build a good portfolio? How do I build a client bait, but that is for the next step. First, you must master the craft itself hope this article was helpful for you. If you want more articles about web design, design in general, the business of freelancing and the business of design make sure you’re subscribed to the blog there’s a new article.

Every day see you on the next one. You

Web Design
SEO Service
Google Citation Service
Contact us Today
559.300.9101

/by

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

/by

Web Design Tutorial – 5 IMPORTANT Tips!

I have built my first website using Wix the power of Wix, and this is what I did take a look easy as peasy. When I first got started grading websites, my designs would look absolutely terrible. It would look like some colored rainbows mixed with different colors and poop brown, color and also fonts from the 90s, but we made the truth. We made the work we build out the things, but I learned a lot from that point in my life and in this episode I’m going to give you a few tips to greatly improve your designs in case you’re, struggling with that part of the process and the Last step is going to be the best saved at the end of this article.

That’s a lie. I’r lying! It’s just for read time. People do this kind of stuff. I thought I’d, give it a try, but I cannot lie it’s hard. I’r an honest man. Let’s give it two claps for honesty: that’s free moving on so number one on the list. The first big issue that a lot of people have is they pick out way too many colors. So, as you can see, you have too many colors. That makes your design look not that good and second of all, color is very important because, besides the actual design, the color, you can also use color to put emphasis on certain things on your page, such as the button or the nav or whatever you want.

The text in here and if you have certain a lot of colors, you don’t know what to look at what’s important on the page, so general rule of thumb as a beginner is either just use, white or black for the background and then use one primary color To put emphasis so to fix this, as you can see, this camera has this orange looking thing here, so we’re going to use that as our primary color and everything else is either going to be black or white.

So, let’s, let’s fix this up, we’re going to take this blue just do a dark grey, maybe like that it doesn’t have to be pure black. We’re going to take this background, we’re going to turn the two white like that and then we’re going to take this button and we’re also going to get that orange color from this click on that. And then we go much better and I’m also going to take this turn it to whites like that now.

This is a super simple example, but take a look already much much better. I’r also going to take this GoPro. If I want to put some emphasis on this, also give this an orange color, that’s going to be fine alright, so we are putting emphasis on the title and on the purchase button. Now, if this is a bit boring, we can add a gradient to this background. So, let’s go here to let’s do radial gradient.

I can put it on the actual product, drag this up and just add, maybe a slight darkness to it. So let’s go here: let’s darken this up! Actually, let’s reverse it. So this is going to be white there and we’re going to darken this part of the image and now working. Why is it not working alright, so this works. Let me just flip this around, like that. Okay, while you do this to me, there we go much improved second tip on the list is let’s say I like this gray, looking thing: okay, that looks okay, but the problem now is that I don’t have enough contrast here on my text, so this black still Looks okay here just because it’s super super dark right! That’s pure black, but this orange color is now looking that.

Well, as you can see, if we look here, it’s kind of bright, it’s not that dark! So take that into consideration when you’re building out a website or a design or anything, is that if you have a darker background in the darker text, you’re not going to have enough contrast and the text is going to be hard to see. And it’s not nice. So, in this case, something like a bright value will work just fine like that, that’s good! So if I do want a bit of gray, I can get away with that, and this not only effects like white and black.

It affects color as well. So I can have a bright color like this, like a reddish color and, as you can see, the black text tool works. But this orange is not looking that nice anymore, so not only darkness and lightness, but also the way color is mixed, which mix with each other also is going to affect this. So if I go to something like a bluish color, as you can see now it’s easier to see rather than closer to that orange color, that’s going to make it way harder to see so keep these two things in mind and besides that you can also use Contrast to put emphasis on something on your like a text so not only colored like this GoPro here.

Theoretically, what I can do is use black here, that’s perfectly fine same as the text, but what I can do now, rather than adding the color to this or to this is I can make this a bit more greyish and, as you can see right now, this Gopro pops out way more just because we have contrast, so you can use color to put emphasis on something and also contrast to put emphasis on something number tree on.

The list is going to be white space white space is extremely important to give your design a bit of room to breathe, because having too much information on your screen is going to be actually way harder for your viewers to read so rather than having as much Information on a screen as possible, what you need to do is clear it up and organize it make the your text smaller just have more white space.

So let’s take this example for here: let’s just clean everything up just have one text here maybe make this even smaller. Just have more space here all right, just like that. These are way too big, they’re too close to each other. Let’s make these smaller have some more white space going on here. Something like that, that’s good! So now we can bring these down a bit they’re, not so close to the big title: they’re.

Okay, let’s also move this here and now take these and kind of move right about there. Okay. Now we can kind of work inside this, because we have these large titles, large pictures and large text. So let’s give these a bit of room as well. Let’s take this image, make this way smaller, like that, put it in the center there. We go. Take this title now again. What we can do is just change the font size to just have that white space.

There we go now. We can drag this up here now. We have enough space with the image and the title, so this is way easier to read and now we can also grab this text here, just like that, let’s actually make it smaller like 18, that’s good! Now! Another problem I have here it’s not only vertical space, but also horizontal space. As you can see, this is way too close to the card here, and it doesn’t look that nice so, let’s also add some horizontal space by dragging this pin just like that.

That’s much much better. Okay drag this up, just like that. Okay, now take a look at what we have. We can also do these a bit. Actually, I just have one text. Let me just add some spaces in here for now, but also space. That was out a bit more drop it in there, and this is what we have okay, so way easier to read way easier to get the information across than something like this number four is going to be symmetry and harmony.

So in this case, take a look. We have just more text in here, so what we have to do is actually expand this card all the way down here. But the problem is this: isn’t that good anymore, because we have cards that are shorter cards that are longer and cards that are just kind of in the middle okay, so symmetry is actually very important, making things look kind of the same. So, even though I have more text in here to make this look a bit better, what we can do is, even though I don’t have more text here.

I can also expand this down just to make it all symmetrical. Just like that now. Another important thing is also when it comes to white space, so even though the cards are okay, now the amount of space between the score and this card is not equal to this card. So here we have less face here. We have more space, so we can grab all three of them and also very important as to distribute horizontal spacing and there we go now.

We have equal spaces in here and what we can also do is add equal spaces between on the right of the page and left at the page. So this still doesn’t look. That good is against because we have more space here unless base here. So we can kind of center this around now these images are a bit stretched. So I apologize about that and let’s bring this back a bit like that, but there we go even though we have more text here.

We made everything symmetrical and nice-looking same thing. We can do with the title here, so let’s take this title and actually Center it like that, so it’s perfectly in the center, rather than being on the side here or like this or like this. Alright, just keep a nice symmetry between everything, and we can also do it down here. So I can make this footer stuff down here to kind of match up where the card starts so give that white space here on the left of the page.

So I can bring this up in here, so it starts at the same level as the card, and I can do the same thing with this. I can just bring it here where the card ends and there we go. We have way much more symmetry than the previous one, and harmony is a way. You kind of navigate your viewers to look at the information that you have on your page. So this is a harder example here. That’s that doesn’t really have any harmony.

It’s hard for me to read this word. I go. I go from here to down here to down here and this one is kind of just laying here and then we have a button up here, randomly laying that’s not on the same line. Things are just kind of put here together. This has harmony this last line. We have these images down here that I can just look from left to right. Alright, so, besides them being nicely and proportionately put on the page it it’s easy to read, it goes from left to right alright.

So this is a bit hard because we have just X laying around without any proper harmony. However, here’s another example: that’s a bit better. We have Tesla here or something here. As you can see, this has way much more harmony. If I read this page from up here to down here, I can do it very simply from left to right, from top to bottom left, right top to bottom top to bottom left to right left to right top to bottom.

So it’s very easy to read as where it comes to this. We just have a bunch of text laying around here. Alright, so that’s also very important. Besides. Symmetry is also have a nice harmony and, last but not least, even though you have great text good. Looking contrast and everything, if you have bad images, ugly, looking images, that’s going to ruin the whole experience, because images are probably one of the most important things on your website now, if you’re a beginner, I would highly recommend either going to pixels calm.

They have great images for you to use very high quality, great looking ones and also on splash ooh. There we go also on splash. Comm is very great. Sorry, I got distracted there, let’s go monetize, no! No, but if you can, if you do have a camera such as this guy, I would highly recommend you using your own pictures, because at the end of the day you are the only one that knows what exactly you are looking for.

So if you have a camera, take your own picture because that’s going to probably fit way better than anything on the stock image websites and even if you end up using a stock image, you can still take that and edit it and make it your own. So don’t just drag it inside your website. Think about it, see how it looks on your page. If it doesn’t maybe change the colors up a bit. Maybe you just want the model so cut out the model and insert it to your page like this, and then you can have way more customization this way, rather than just relying on whatever there is on that image, get key aspects and key things out of the Image and added to your website that way there you go, hope you enjoyed reading this episode and kind of taking a little bit of break from the programming self-adjust, because I’m working on that javascript course and that’s killing my soul.

I don’t, and I want my soul. I want right here so I want to make more of these alright, so that’s coming up in like a month or so, and that’s for exactly one. Don’t quote me on that one and until next time make sure to hit the like smack the ass okay and I’ll, see you at the next one.

Web Design
SEO Service
Google Citation Service
Contact us Today
559.300.9101

/by