14 Things Designers Should STOP Doing

Key Takeaways

[Music] what is up everybody gary simon here today is a list of 14 things that i think you should stop doing as a ui designer now of course i could make a list that's probably a lot bigger but these are just things that it came to my mind that i could put into a quick video they're in no particular order and let's get started now wait before we get started though i need to mention that if you are an aspiring ui designer and you're not very good with ui design which would might be the case if you're aspiring then you should definitely check out my ui design bootcamp at scrimba.com at scroomba you don't just watch videos no no you're actually able to modify code in the browser while you learn my course on ui design features over 100 lessons that are specifically tailored to help you become an awesome ui designer and they're packed with interactive challenges so if you click on the very top link of the youtube description here you're going to get access not to just my ui design boot camp but many other courses that are offered by skriba.com alright so these are in no particular order the very first one number one is going to be using low contrast type stop doing that it's probably one of the number one things i talk about often that i see new ui designers get wrong i if you're working in adobe xd or figma in this case i there are plugins uh stark contrast it's for both of them that you can get it for and you can see if we select this uh the car the the ratio is just way too low you need to boost these up way more so that people can actually read these i and you want at least for small text i 4.5 to 1 ratio so that's going to be one of the number one things get your contrast correct for items that need to be you know visibly seen and that people need to be able to interact with so that's text and also icons all right number two centering content in a two column layout this is something i i see often um in this case we have two columns here we have these icons which are kind of structured in such a way that uh it defines the right side of this container and then we have this column over here where everything's kind of just centered in this context it makes much more sense it's going to really help frame the layout better if you left the line this content i and for instance this could you could center this as long as everything else in the other eye column was centered as well and also structured the same way so like an icon here header like a little headline and then the like a description that would work much better but in this case because this is really defining the right side of the column i'm going to push that over there to the left as well i the next one this is going to sound strange but i'm going to say being too creative i and this is what i mean so this particular case is actually kind of cool because this person is an html email developer so they developed or designed a user interface based on like a commonly associated uh email client but i see a lot of people i for their portfolios for instance using desktop layouts like where they emulate a mac or a windows layout and it kind of just makes it hard to use and navigate so if it's your portfolio you really want to try to stick to the conventional ideas but this one i'm actually kind of going to give a pass because it is pretty cool it is really relevant but if you're one of those people who are using trying to be creative by using like a desktop and creating a desktop interaction it's usually hard to use and it's not a good thing especially for your portfolio uh number four using overused illustration libraries or at least overusing them yourself there's many of them there's uh there's one called humans there's one called undraw right here i think most of us the designers have seen this library it's hugely successful it's designed pretty well uh but the problem is if you use it for like your portfolio for instance and i people i like potential employers or want to hire you and you're using like one of these as you're like your hero image or something like that i it's probably they're going to probably spot that and and you really want to as much as possible try to be too creative so does that mean you have to create your own illustrations from scratch not necessarily but i would really invest in something maybe more a little bit more unique or even higher in illustrator to do something custom for you if you really want to stand out and be unique having said that like if you use some of these for a client or whatever that's completely fine i'm not saying you should never use these but if you really want to be unique especially for your portfolio i would not use i you know these really familiar sort of icon libraries or illustration libraries all right so number five using unnecessary placeholder values we could see here for this contact form i it says name and then your name email your email address subject your subject um it's just unnecessary um just avoid using the placeholder value even for you know additional information i it there's been research about it that perhaps the placeholder value in some context or most context isn't even worth using i just use like a like a sub label underneath the label itself if you want to communicate more information but even in this case you don't need to because these are all pretty self-explanatory your message is your message your email is your email so this leads also leads me to number six and we're gonna stay on the same page here and that is not using clear enough contrast to your form elements i of course if we took away these your name little labels right here i a person really wouldn't know where to click in because the background of the element itself is the same as the background of the page and there's also only i would i guess you would say only i a border on the left and the right but you really want that border all the way around or and or change the background color of the element so that it contrasts enough against the background on which it's sitting that way people know exactly where to tap with their finger if they're on mobile or to click on their mouse button now number seven using subpar thumbnails so this is something i see often this person actually just kind of created an entire screenshot of the browser itself with all these tabs open and it just really clutters everything you really want to create nice polished thumbnails i if you look at dribbble.com i in actually i'll show you right now if i go to dribble.com i and we go to web design for instance i you know create thumbnails like this that you can actually integrate they're nice cool and sleek looking i and if you really pay attention and you take the time to create good thumbnails that i obviously will speak well to the client uh but just taking screenshots of the ui in in a browser context is not really ideal in my opinion all right number eight using high contrast borders so here's an example we have borders all around we have a border around the hero image we have a borders around these in these high contrast borders they simply just add visual clutter so they make the the design unnecessarily busy uh in this context so if i get out the dev tools here and i try to change one of these i let me come over here and find this so that we can get rid of the border looks so much better when we get rid of that i and so really it's a return to simplicity by getting rid of these high contrast borders here next up number nine using high contrast drop shadows so i'm talking about this right here this is a high contrast drop shadow now if you'd used a drop shadow that was maybe a lot i a lot less contrast you know uh very little opacity you can get away with it but shadows generally speaking they're meant to be like an afterthought uh otherwise like the high current church borders they just stick out too much they become a distraction so if i were to get here and get in our dev tools here select this and get rid of the box shadow here and here it just looks so much better when it's left clean like this all right number 10. now number 10 i don't have a slide for this is just going to be something people do um on their portfolios and it's usually from young people telling us your age if you're really young you're like a 16 year old ui designer or front end developer back in whatever i would leave your age out and this is something i did for some reason i was looking at back at my my portfolios back when i was a teenager and for some reason one of the first things i told people was my age well i was proud of it because i'm doing all this cool stuff as a teenager um but if your goal is to get hired you know of people who want to hire you they don't want to hire a teenager you know now am i saying outright lie no if they ask you your age tell them but i would not put that out there front and center saying that hey i'm a 15 year old ui designer hire me that's going to work against you all right so number 11 all right design better layouts if you have limited content so in this case we have an excessive amount of white space i and what you need to do is either one of two things take your type right here and really increase the size so that you can fill out the layout more and or add more content uh this right here still seems like an empty void that kind of makes sense because it's like a space theme but still you don't want to have this amount of white space especially on the large desktop resolution i it just it makes it feel just incomplete all right so next one is number 12 designing tiny customized scroll bars all right so this right here this customize scroll bar if i come over here and try to click it and i try to do it quickly it's i'm not i'm not having very i what i'm not having good success if i come over here and i try to i have to sit there and it's like a painful process if you're going to customize the scroll bar make sure you make it at least the width of the default scroll bar that you know browsers like chrome and firefox give you all right that way people don't have to sit there screwing around trying to find this not everybody has a scroll wheel that functions uh so you have to take that into account all right next up number 13 and that is putting too many links in your primary navigation up here we have a lot of links all right we have one two three four five six seven eight so generally speaking you don't want any more than five links in your primary navigation after that you need to either create a secondary navigation or a drop down or relegate the other links into your footer or other areas of the user interface um this right here is just a little bit too much and it becomes a little bit overwhelming for people to especially to to scan for quick items that they may want to access so limit those i would say to no more than five and finally giving no direction so we're going to back to this one you're not really giving me a clearly defined call to action um there is a tiny little bouncy down arrow indicating that people should scroll but that is not enough in and of itself so if you're going to use a scroll indicator make sure it's bigger and it's obvious in most cases you're going to want to use a button as well as a strong primary call to action and even include a secondary call to action that's styled differently all right so that is my very quick list all right everybody hopefully you enjoyed that of course there's probably many other things that you shouldn't do as a ui designer if you enjoyed this let me know make sure to subscribe and i'll see you all soon goodbye [Music]