How to NOT Suck at UI Design - April 2021

hello beautiful people it's misgo here and in this video i'm going to show you five teddy tips to help you not suck as a ui designer let's dive in so let's take a very quick look at this card design that i have created a very very common ui pattern that you would see on dribble and by the way guys if you use dribble as a source of inspiration for ui please take it with a grain of salt because really a lot of these design patterns are not realistic so without further ado with this card design let's imagine we are a customer on an e-commerce platform that sells clothes and we are browsing through the categories and we stumble across a card design that will represent all the different categories now this card specifically shows to the customer that this is for the casual clothing category now i'll give you a couple of seconds i'm going to have a very quick sip of my green tea and while i do that have a think about why is this execution of a card designed terribly wrong and it is an atrocious execution for ui designers so give you a very quick second to think about it alright guys without further ado the reason why this is a terrible execution and it is a very sucky ui is because we have specifically chosen a beautiful photo to be placed in this card without considering the fact that it needs to be scalable and it needs to accommodate any type of photos that we are going to be using in this project so what if we had a photo that had a light background the bottom half of the photo had a bit of a glare to it or there was some sort of white background and you couldn't read the text that was on top so what would be two i'm going to give you a quick quiz what would be two solutions that we can do right away to fix this issue so give you a couple of seconds and have another quick sip of my green tea guys gummy chart green tea it is the bomb guys so all right hopefully you have two quick ideas now this is the approach that we should be taking if you wanted to go down this visual style so first off you should have a consistent white background or a high contrast background for the text so no matter what photos you use when you hand this over to developers it's going to work or you can actually take the text out of the photo so it's always on a consistent background now it is very very important very very important for you to consider these because it is a very amateur mistake if you hand these designs over the previous designs over to a developer to integrate you need to make sure you are proactive and you're thinking ahead of your designs and you're considering what it would be like when we're going into implementation now the very second example of a sucky ui design take a look at this quick app that i've locked up for you guys so obviously this screen is for example like an ios app it allows the user to set a password and then they can continue to go creating their account now have a very quick think about this scenario here this scenario of what the user is currently doing what is inaccurate and why is this a sucky ui design have a quick think about it guys so so let me quickly reveal to you why this is a sucky ui design so obviously here the user the design is specifically trying to communicate to the team and to develop is that someone the user is inputting a password now what we need to do is whenever we are showing interactions we need to work with realistic apps realistic scenarios and realistic situations so if someone is typing on an app we need to show the keypad these are very basic fundamentals that a lot of designers overlook and especially on dribble and i'm not hating on dribble because i hate dribble i'm heading on dribble because it is setting the wrong expectation and guidance for new ui designers so whenever you are working in an app whether it's ios it's android or you're doing inter interactions on a web app make sure to think about what is the actual interaction that's happening and what do we need to show on the screen to accurately depict the right situation for the use case that we are designing for so hopefully that gives you another quick tip on how to not suck guys and if you appreciate that make sure to gently smash that like button and also don't forget to be cool all right guys so this third example of how to improve your ui design skills i want you to take a very quick look at this form and i'm not going to reveal it right away have a quick think about it there's no need to rush once again i'm going to have a quick sip of my green tea major tea now this one furiates me and i see this happen a lot with junior designers and anyone that's sort of new to the industry consistency guys consistency consistency consistency consistency or if you say that too many times it really does a funny thing with your tongue so if you take a look at this design on the left hand side over here we have some spacing that's consistent with the top but if you take a look on the right hand side and on the bottom of this whoa that consistency is way off par we have to make sure that we have details and clarity on all the spacing and make sure all the elements are very consistent the second thing is that these form fields are not aligned at all we have to make sure whenever we are working in our designs we have to make sure things are consistent and things have proper alignments this is a fundamental foundation that you need to focus on when you first start out as a ui designer and if you want to produce very beautiful and polished ui you know what you need to do you need to keep things aligned you need to keep things consistent and you need to keep it beautiful like this so make sure you have all the spacing consistent make sure all your items are aligned very very beautifully and this will bring a lot of consistency and polish to all of your designs so if you're thinking how do you align things really quickly in figma make sure to check my video and gently smash that link above about how to utilize auto layouts because this is the key to creating scalable and very scalable and pixel perfect and well aligned components within all your ui designs and it's going to be an absolute godsend and time saver if you appreciate that gently smash that like button alright guys with this form with the fourth quick tip to help you improve your ui designs you might have thought guys this already looks so beautiful what else is there that needs to be improved that needs improvement well let me assure you this is still not misco approved just yet guys have a quick think about this form ignore the fact that i've actually created a duplicate email input field there that's by accident aside from that what else on this form really infuriates me think about it empathize with ms co just think about what would really just annoy the s h i double t out of me have a quick think about it guys all right guys if you didn't think about this one it's a little bit of a tricky one anyone for that's new into ui design contextual copy so when you take a look at this design here yes it does look clean yes it does look beautiful obviously music designed it so it's going to be well designed but if you think about it if someone came into this form field with the intent of wanting to for example change their password or change their first name last name or update the email they need to scan through a lot of small sized and very similar fonts on this page what we need to do is actually provide more hierarchy so when someone lands on this form or on this page they can quickly scan really easily but then also see a clear separation within each section so let me show you what i mean from what we just did with the form and just by providing a little bit more of contextual copy meaning the little work the words that we're writing on the page personal details manage email address and change password one we are adding hierarchy on the page we are helping the user's eye sort of digest and process what is happening on this page second we are actually telling them specifically what each section is about without having to process all the small ui and the little words on the page with big clear headings we are telling them exactly this is personal details this is managing your email address and this is changing your password even if a user does not specifically read those titles and they're looking at just the input field in their peripherals within the eye it does some sort of magic thing and they can sort of read and see that this is about managing managing my email address and they don't need to go through and work their mind even further just to figure out where they should update their email so when you are working with ui focus on the ui make it look beautiful make it look delightful make it usable but don't forget that usability and delight does come through copywriting as well and a lot of ui designers forget about that the devil is in the details guys so the very last tip to help you not suck as a ui designer guys very quick one here we have a modal and i want you to have a very quick think about it what about this modal really irritates me and i'll give you a couple of seconds to think about it quick sip if you don't mind me alright guys here it is before we jump into it there is an issue with the number of words on the first line and the second thing for me is that there are too many different font sizes on this modal and this is a very simplified example when ui designers are designing an entire page so many times have i seen ui designers using up to five to six to seven or more different font sizes on a single page or design now this creates a lot of clutter and it's very consistent and it sticks out like a sore thumb for anyone who is pedantic about details so what we want to do is first to fix the issue of having too many words on one line the average the ideal number of words you do want to have on one line to make sure it's legible and easy to read is between 9 to 12 words and then what we want to do is we want to reduce having 1 2 3 4 different font weights and sizes to potentially maybe two to three all right so here's what we'll do reduce the modal make it more digestible and reduce the number of font styles and sizes on the modal so if you appreciated all these five tips one two three four five to help you not suck as a ui designer make sure to gently smash that like button guys oh and by the way before i let you guys go i have officially released version 1.2 of my designer ship design system for figma so if you are looking for a well-equipped advanced scalable design system to help you kick-start every single project or even if you are a in-house designer looking for a design system to leverage to help build out the design system for the company that you work for make sure to check the link in the description i've also left you a juicy coupon to get 10 bucks off my design system oh and if you have any more questions make sure to leave them in the comments below i have been spending hours literally hours replying to every single comment that's been coming through i love hearing from you guys so make sure to leave a comment love you guys and i'll see you in the video very soon [Music] you

Channel: Mizko

Views: 13,488

Keywords: ui design, figma, figma design, ui designer, ui, ui design beginner, ui design tutorial

Id: QZj-kv_so2k

Length: 12min 29sec (749 seconds)

Published: Thu Apr 29 2021