3 Principles for better Web Design: Navigation, Hierarchy & Color

on today's video I'm going to share with you the three core principles the underlying principles that every web design has and can either make or break the website stage hey everybody what is up my name is Ron Sega you know when I was just starting out as a web designer I can really recognize easily pretty easily what a good web design is but I was trying to do it myself I always struggled and I realized now that it was because I didn't understand the underlying principle of what it takes you know to do to design a good website I thought it was oh they have this beautiful illustration or they have this beautiful image but it's not that because the website can be actually a bad website even if it has an amazing illustration on it so today I want to cover these three principles and the three principles are the navigation the hierarchy and the use of color we're gonna break these down with examples I'm gonna show you how this works well and how this can actually ruin the web design so let's start to break it down by the way if you're new here on this channel and you are excited about design web design and freelancing make sure that you are subscribed and we have a free web design course that covers all of these principles in depth now let's break it down in and check this out so here's a website this is a lawyer's website and for the first principle that we want to talk about is the navigation so I'm going into this website and I actually just looking at it and remember one thing that's core to remember is that most people will leave the website within the first 15 seconds if they don't understand if this website is for them now I'm trying to see what this website has in it alright so it's a lawyer's website but what do they have on this website in the honest truth is that I don't know because everything is actually hidden here under the menu so I'm gonna click this I'm gonna see first of all I'm gonna see this contact form but if I look here on the left I'll see a lot of stuff right so there's about the firm I can click that and see underneath and then meet the team practice area all these stuff is really really important to me because that will help me understand if they can even help me with the stuff that I need help with assuming that I need a lawyer now they've made this really really hard for me to find right I have to go here and click the menu just to explore what's on this website and then go here and click again just to understand what their practice area is so they've made it really really hard on me and then if I end up clicking or getting to another page on the website I'm not easily sure like where actually am I on this website and how do I get back or how do I see what else is on the website so in this case the navigation is actually hidden and makes it hard for me to understand what's on the website and how to navigate to different places on the website and again if this is a barrier for me I'm gonna leave this website super super quick so I will show you a different web design a website of a lawyer firm and here this is very very simple right you've you have the navigation here as you would expect at the top this is something that we normally see in web design and because they have a lot of things here you can see that when I'm hovering one of them they're showing me actually a lot more information so in this case it's really easy to first of all see in a glance what they're offering on this website what kind of contents are in this web site and I don't even have to click I can just hover with my mouse and I can really see pretty easily who they're helping what their services are so without much you know hard work I can really quickly see if this is for me and then I can each actually click and get they're super super fast and no matter where I am on the web site again I have access to this now note that I went over to a different page and I get here the I can actually see this as part of expertise competition all right so it's very easy and clear to see where you are on the web site even after you've moved to a different page and when I'm scrolling down here they even have this navigation as kind of a sticky now this isn't a must but it does help me to navigate quickly if I need to go back into the home page or if I need to move to a different page so this is the first principle but again it's super super critical principle the principle of easy to see and understand navigation in your website whatever whether you are having one page or three pages or 20 pages it's still super important to know what content your website has let's talk about the second principle which is hierarchy hierarchy basically means what do I see first what grabs my attention first where is my attention goes to as as a you know as a user you know I'm going here now the problem with what's going on here in terms of hierarchy is that everything is trying to be too big everything is like grab trying to grab as much attention as possible so obviously we have this huge San Francisco family lo attorney this is huge the buttons are huge and they're using colors to try to grab my attention requests you know consultation or read testimonials the logo is actually huge and they're putting in here the you know a big phone number and a big menu button so everything tries to grab my attention what happens when everything tries to grab your attention basically it means nothing grabs your attention because you're just overwhelmed right so let's move into the good website and here there's very very clear hierarchy even if I remove this pop-up here it's very clear that the only thing that you look at when you get started with is the exceptional outcomes they're kind of like value proposition and then you can you know your eyes probably moves down to the to the subtext where you can read a little bit more about themselves and as a third you know the third hierarchy might be explore possibilities where you can you know move down into the next section and all these the logos all everything here in the you know the navigation second it is very very small not to try to distract you now one more thing that contributes to the mess that we see here and the the lack of hierarchies is a little bit lack of contrast right so because the image in the background here is pretty bright it's also grabbing our attention so the image is grabbing our attention while the text grabs our attention there's just too much going on here but here even though they have a moving video in the background they took the time to add this black overlay which makes sure that no matter what's in the background even if there is white here in the background there's enough contrast that the text still stands up and the the video is more of a background than actually trying to grab your attention now what we're talking here in hierarchies we did kind of look at the top of the website but it's also very you know as you move along you still have hierarchies everywhere right so imagine we're scrolling here San Francisco this is obviously you know the first hierarchy but then instead of going here and starting to read the text this whole area of you know just logo and navigation or phone number still grabs your attention more than this so this is a little bit again the wrong way to look at it here if I'm scrolling down here you can see that now what's grabbing my attention here is probably this headline and then how can we help you and then the different expertise or if I'm scrolling here then I have this title and then these blog posts to look at so the navigating the the users attention with good clear hierarchy is super crucial throughout the website and this is really a huge differentiator between a great website and a crappy website the last principle that I want to cover is the principle of how do you use color right so if we're trying to look at what colors they're actually using here so obviously white white is a color that they chose and the the other colors that they're using is this orange color and this purplish color okay now I want to talk about how they're using this color so usually there is a few principles that you can use color for of course you can use it to communicate emotion or kind of a brand identity but also it has in web design some functional you know functional things to it it denotes if something is you know is working or is a button or is clickable it tells you what is more important than something else but with this choice of color here with both you know the orange and the purple I'm not sure what's the difference between them right and a lot of times when you'll have I'm used to understand that if a text is in a caller it's usually a link now here it's not the case okay one more thing that is problematic again with the colors here is that they're very actually similar to the background so instead of having a good contrast so the buttons will pop and that I'll be able to see them they're actually kind of blending in with the background especially you know the purple or blue an orange on one another they're not a good very good combination here and so here again I I think that orange text should be a link it's actually not a link and they're just using this color here look check this out this I'm pretty sure this is a link because it's a color it's not but the black the black color is actually a link so this is just a very very confusing use of color and as I've mentioned and you can see it here like the the orange on the purple it doesn't create a good contrast it's not a you a great color combination you just create a lot of confusion if I'll take a look here here obviously again they're using white as a color and they're only using one color which is the orange one but they're making sure that first of all here as you would expect everything that is a color is also a link right so this is a link these things here are links and here again they're they're creating kind of a typographic hierarchy but also this is also a link so here they're only using one color but they're always using it with a good contrast and good kind of functionality to it it's not confusing me it's just helps to stand out and yeah and explain what's what's going to happen if you click something right so I hope this helped you kind of break down and understand these three core principles the navigation the hierarchy and the collar and this will help you kind of look when you judge other website but also when your design your own website clearly to think about am i using these principles correctly or not as I've mentioned we do have a fool on free intro to web design course I'll add the playlist below this video watch these videos where we break down these principles and many others in more depth and I'll see you on the next video bye bye

Channel: Flux

Views: 83,346

Rating: 4.960597 out of 5

Keywords: become a graphic designer 2020, freelance web designer, graphic designer job, ran segall, web design, web design business 2020, web design freelance, web design freelancer, web designer career, web design 2020, flux academy

Id: GJN7TemsZtY

Length: 11min 29sec (689 seconds)

Published: Wed Jun 24 2020