UX/UI BEST PRACTICES FOR WEB DESIGN: Free Web Design Course | Episode 12

on today's episode we're going to cover the best practices for user experience and user interface and how to apply them on your next web design stay tuned [Music] hey everybody what is up if you're new here to the channel my name is ron segal and here on flux we're talking about everything that's got to do with web design design in general and freelancing so if you're new here make sure you're subscribed we have videos dropping three times a week on mondays wednesdays and fridays on today's video we're going to cover the best practices and the way that we're going to do this is by showing you some good examples and bad examples so let's start with ux user experience basically we're going to talk about two things here the first one is navigation and making sure that people actually understand where they are on the website let's let's get started with a good example so here we have apple's website okay it's easy to show apple is a good example but you see here you have the navigation and if let's say we're going to go into mac for example so first of all when we're in mac you can see that the navigation here is marked a little bit differently i would say that it's pretty minor here you can see the mac is gray versus all the other ones are you know white and also you have obviously here you have the mac sub navigation and obviously types of macs and if you would pick one of them here then you now can see that you're within mac and you have kind of a sub menu that says macbook pro and if you're going to scroll down that kind of navigation is going to stick with you so you always know where you are on the website you're now on a page that's called macbook pro so now this is a good type of navigation that uses the main navigation for the website and then a sub navigation and also keeps you in track on what page you are now let me show you an example where this doesn't happen so here we have the national vehicle solution basically a website for releasing cars and besides the fact that it's a little bit overwhelming here let's see if we pick something in the navigation let's say we go to leasing guides we click this gap insurance now first of all it doesn't look like nothing happened but let's click funding options all right now i'm in a different page but actually i have no clue where i am right none of this the navigation here is marked such as to show me what page i'm at right there is some kind of a title here not that big and noticeable but if i scroll down i still have no clue right now where i am on the website let's try something else maybe special offers all right so notice that now that we click special offers they do use something here that is called breadcrumbs bedcrumbs is actually a good practice sometimes when you have complicated website to show you the structure so basically it means that there's the homepage and under that we are right now on the page that's called car special offers but i don't know why it sometimes it shows you sometimes it works and sometimes it doesn't work on this website so obviously that's not really a good practice but you can see why it can be a little bit confusing so again what i want you to take away from this is that something that is very important is that the function of the navigation is to first show us what's actually available for us on the website it wants to show the visitor hey you can learn more about this and this and that but also you have to remember people are not going to stay on the home page forever sometimes they won't even start from the home page maybe somebody linked to an inner page of the website so the navigation is the tool that shows somebody you know where they are on the website to give them a little bit of context here on this website it's not done very very well all right let me jump into the second point in terms of best practices for user experience and that is the copy and i mean copywriting the text that you have on certain places specifically on buttons on the website you want your buttons to be very very clear so that people know you know that when you click a certain button what's going to happen otherwise if they're confused or if they're not sure they might hesitate and they end up not purchasing not clicking or not doing what you actually want them to do so i went back here to the apple website and you can see here that they say buy or learn more it's pretty straightforward right but let me go here okay here's another website this is a website of a graphic design services and i don't know portland maine all right so here first of all this website has a lot of problems when it comes to you know when it comes to hierarchy but you can go back and watch the video on hierarchy and realize why there's problems here but when i look at the buttons that they have here one of them is shop shop or online store okay sounds pretty straightforward the other one says idea search what does idea search means when you're in a website for graphics now what will happen if i click this i don't really know and that's confusing so that's a bad thing you don't want to do let me see if i click this actually opens up a new website and takes me somewhere else to some kind of a product i have no clue what i'm seeing right now so this is confusing right you don't want you want to give people context about what's going to happen and why are you even sending them to there so the second best practice you need to remember be very very clear with the names of either pages buttons or sections on your website because you want to make sure that people understand what they're reading right now where they are and what's going to happen if they're going to click a certain button all right i want to move into ui user experience and talk about how can we make sure that we're again not confusing people and telling them the right thing to do so one thing i want to talk about is how how buttons look like okay so if you go back here you know and we look at how do we know that some things are buttons all right so obviously you know some in the navigation we we know that usually these are buttons and when we go over them we get the cursor to change its its cursor to kind of a fingery and then we also get in this case kind of an interaction and hover interaction something changes and basically it tells us that this is a button but in a more [Music] in a more visible way here in these buttons they are a different color so we kind of know that when something is a different color it might be linkable and then we maybe try to hover it so in this case everything that's blue is also a button if we're going over into this website although it has a lot of problems you can clearly see that these are the buttons right because they are kind of like you know they have kind of a border either they're within a box or or something like that however this also has something that's a little bit confusing here right because here we have blue text that is a button and then blue text that isn't the button right here this 500. so this is confusing you don't want to do something that tells a different story or that has different functions in different contexts because you want to teach your your visitor in the website what does what and if sometimes blue text is a link and sometimes blue text isn't a link that's kind of confusing right so you want to have some kind of a consistent way of explaining what does what now again let's go back here it's kind of obvious that these are buttons because they have this you know the border but then again there's also kind of blue text black text here and i already know because i visit a lot of websites and here blue blue text was linked here sometimes blue text was linked and here blue text is not a link so why did they just change the color right every all the text is black and here it's blue so again this is a little bit confusing you have to stay in context that you know people are browsing different different websites and there are all these kind of markers such as when a text is in a box it's usually a button when a text is blue a lot of times it would be a button or just a different color than black if it's not black maybe it's a color if it's underlined maybe it's a color so you have to keep these things in mind you're not designing your website in a vacuum without context from other websites people are visiting you know they're crossing crisscrossing or jumping between different websites so you need to keep that in mind and you want to make sure that you design your website in a way that's very very consistent and does not confuse them okay let's let's check out another website and this is a website another graphic design service here we have something a little bit weird that we have here we're here to help then there is a button that says get quote and then get in touch and then call us now so there is three basically call to actions these ones are buttons but this is not a button and in this case i'm i'm confused just because i think i have a lot of possibilities now it's okay to have multiple calls to action but then you want to kind of create hierarchy within them right and we talked about this in the video between hierarchies you want to make one of them primary and the second one secondary because when we have two of them and actually this this tells me something else i'm a little bit confused should i get a quote or should i get in touch or should i call you now and if i call you now this is not clickable so how do i even call you now so this is something that's again too confusing i have too many options some of them look the same some of them don't function the way that i expect them to function and this is a little bit confusing on this website fetch design i'm trying to look here where is the call to action and i'm and i scroll the way to the end then i see get in touch and then there's the name and then their email now i'm trying to click the get in touch because it looks a little bit different but this is obviously not a button this is also not a button this is also not about it this is a button all right so the email is actually a button but look it doesn't look any different from any other thing how would i know that this is a button now mind you i'm on desktop so i'm you know moving around my my cursor looking for what's clickable but imagine this website on mobile i wouldn't even imagine that something is clickable and i have no kind of indication visual indication that this is clickable so this is again not a good practice you want to make sure that things that are clickable they look clickable and they look like a button if you want people to click them all right so i think that kind of sums up the the thing the the principle in user experience where we're saying that you want things to look the way that they behave so that they don't confuse mostly we're talking about buttons here the last principle that i want to cover in terms of you know user interface is contrast a lot of times people would just put elements with lacking contrast let me show you an example so this website has the biggest text here on an image and it's a white text on a white mountain so there is no contrast here which makes reading this text very very difficult in general also having just busy images like here in the back background is kind of a bad practice because it makes reading the text very hard but just in terms of contrast we have here white on white which is very very difficult let me open up a different one so here we have also kind of purple on blueish purple so the contrast here is very very low which just makes it kind of fuzzy in the eye and not really not really nice to look at you can actually you know lose that because you don't see it and also we have kind of a gray on gray here so here even though they try to create contrast by adding kind of a black overlay on top of the image which usually helps if you want to so here imagine the snow is white it it actually and we turned it into gray so there is enough contrast when the text is big and white however here we have small text which also is not really white it's kind of a grayish and it's on a grayish snow so here we have a problem of contrast and readability so that's one more thing that you want to make sure that the you know the the ui that you create or all the elements on the page has significant contrast so that people can actually look at it and read it and the website is useful all right i hope this was helpful make sure you watch this next video here in our course to keep learning about web design and we'll see you there

Channel: Flux Academy

Views: 215,405

Keywords: become a graphic designer 2022, freelance web designer, graphic designer job, ran segall, web design, web design business 2022, web design freelance, web design freelancer, web designer career, web design 2022, flux academy, free web design course online 2022, best web design course 2022, how to design a website from scratch 2022, web design free course 2022, learn web design online, free web design course 2022, introduction to web design 2022, web design tutorial 2022

Id: Cn2KgB_01mE

Length: 13min 2sec (782 seconds)

Published: Mon Jun 01 2020