5 levels of UI skill. Only 4+ gets you hired.

there are five main levels of UI design quality and only level 5 is the one that you should be striving for this is the level where recruiters will actually be reaching out to you directly themselves without you chasing after them we already established that for juniors you need really strong UI skills to get hired the reality is hard and simple your UI skills grow the more you do it the more you practice based on the right learning sources at level 4 you have a pretty big chance of getting a job if recruiters notice your portfolio and anywhere below level 4 you need to be extremely lucky to get hired or while the recruiters with something else the more you practice and the more you learn how to recreate great design the bigger your chances of getting the industry job did I get the job yes at level five there's gonna be a lot of small seemingly invisible tweaks and changes in the design that most regular people will never notice that includes the recruiters in many cases as well they won't know that you used a special golden ratio spacing distance here but they will feel it because if the design is good objectively good and it's a pretty objective measurable thing then people subconsciously feel that it's something of high quality in this video I'll guide you through all five levels of app design I'm gonna be using an app that we designed at level five and then I'm kind of gonna try to break it a little bit for every level lower than five we're starting with number five and keep in mind that of course this is just an example a real product probably could look a little bit different and possibly even better but this is to show you what an approach to a number of five stages at first glance it just looks good it looks dribble worthy but is there more to it let's explore one thing that's a dead giveaway of a good product is what's the font that the designer picked how many different font styles are there how many different font families and font sizes and as you can see this design just has one font with four sizes and a couple of styles all of the icons are not randomly placed but rather they have their own invisible touch targets and they are aligned to those touch targets so with regards to the rest of the interface another thing is that the icons within the touch targets and the icon within the circular pattern the plus are not randomly spaced it's all calculated based on some of the design principles and it can be calculated in multiple ways but the point is that this is made that way on purpose this is not a random size for the icons now I'm not gonna show you pixel or Point values here because that's not the point as you can see we have an x on the right side and this is the base of our grid and when you align everything correctly you see that there are no random values there are multiples of X everywhere that happens to practically every spacing from every side nothing is random here and that becomes even clearer when we simply divide all of the objects in here all the elements into logical groups as you can see there are different spacings between the groups but they are consistent that way we can scan the entire screen and quickly understand which element is belonging to which section and what is connected to what this is the basic and the principle of good UI design and I'm not gonna even mention the obvious things like consistent corner radiuses and consistent spacings on every side for buttons and other on-screen elements one thing that is also important to mention is consistent icon thickness for all icons that are outlines this is stage four it's actually still a pretty good design there are some small issues there but if you can make designs on that level uis on that level you shouldn't have a problem with finding a job but let's explore some of the differences between this and number five the first thing is inconsistent icon thickness and as you can see this one icon that I'm pointing at right now is of different thickness than the arrow on the button and some of the other icons on the screen because yeah the icon on the button is too thin especially comparing to the thickness of the font on that button someone was going fast here and there's slightly different spacing between very similar looking headers the plus icon size was I think just eyed and wasn't really calculated it's not really bad but it's not really matching the Aesthetics of the entire design and here's somebody also forgot that using Color alone to show the selected tab is not enough because some people won't see that color so you need at least to have some sort of an indicator or a background that's different so it works for everybody and similar thing here the inactive indicator is just a slightly different color than the green but it doesn't look different for people who won't see the color and this is something I find extremely funny actually because when you're making a design like that you often come up with different versions of the cards and you sometimes forget that one of the cards that's just a little bit sticking out from the side of the screen has still different font sizes and a slightly different alignment because yeah nobody notices that right and when we add the calculated spacing from Stage 5 you'll see that these spacings are not as calculated things are a little bit randomly spaced they still look pretty good but it's not really based on anything so a lot of the visual hierarchy is broken and the groups are looking a little bit different now and if you have a UI design on that level chances are you're still gonna get hired for a junior roll welcome to level three if you're at this level and you've been designing for less than a year or around a year congratulations this is a good place to be but this is not a hirable level first issue is what I call font overload there are a couple different sensitive fonts in here and matching sensors that are similar to each other it's really difficult to do right so in this case this basically results in typographic mess the corner radius of the button doesn't match the card the card color is not a color that matches the blue of the app and the icon the 3D illustration inside is way too big and not proportional to the content there's also chaos in text hierarchy because it's too big and too close together it's really hard to read the bottom menu selection has an even lower contrast practically everything on this screen is misaligned and a little bit mismatched good example is the heading font being too low and the plus Circle being a little bit too small considering how big the icons next to it are at first glance it doesn't look too bad but it's really far from an employable level design welcome to Stage 2. if you're at this stage you still have some work to do just looking at the alignment practically everything is a little bit off misaligned move to the side and not in the right spot a good example is the bottom navigation icons which are too big and align pretty randomly also trying a colorful background when you're just starting out is really risky and you can end up with something like this that doesn't really match any of the elements on top classic font overload with different spacing misaligned fonts and different font Styles even between similar sections on top of that really really bad alignment and in also many places that background the indicator is barely visible the 3D illustration proportion inside the first card yeah that's really really bad and even here we're still pretty forgetful if you're at stage 2 keep going you're already doing some things right but there's still a lot for you to learn and you can learn a lot of that from my YouTube videos and my courses and leaving the best for last as you can see pretty much everything that can be wrong is wrong here two big icons missing touch targets completely misaligned everything multiple different fonts with different spacing multiple Corner radiuses different line thicknesses different colors and a background that doesn't match anything here if you're at this stage you have a lot of work ahead of you but don't worry because that shows that you know how to move some rectangles so now you need to move them in the right places if you want to progress from this stage try my beginner UI playlist on this channel and try my first mobile app UI courses and the boring UI course that should help you in a significant way and here is a quick comparison from level 5 on the left to level 3 in the center all the way to level 1 on the right which level are you and of course there is a level six it's a hidden level like in video games and that is adding micro interactions and Screen Transitions and beautiful animations to a level 5 design it actually puts it even higher in the recruiter's eyes because if things are moving that means that you have more skills than just mid ti so having a beautiful design that's beautifully subtly animated not over the top is going to definitely turn some heads but how do you get to level 5 obviously it's practice but how what to practice well on our platform which is going to be linked in the description as well we are launching something new it's going be a free challenge to recreate a beautiful level 5 design by yourself every week we will supply you with the design itself with all the image Assets in it and the list of fonts and colors and your job would be to recreate the design exactly the same from scratch we will be launching this soon for now you can improve your skills by following the tutorials on this channel including a whole free animation course that's a dedicated playlists here and also you can learn from my paid courses which are an inexpensive way to progress a lot faster if you're below level 4 right now don't worry every great designer has been at level 4 and every great designer has been at level one too you need to stay motivated and practice practice and of course have a beautiful day [Music] wanna taste the girls [Music]

Channel: Malewicz

Views: 416,984

Keywords: ux, ui, uxui, ux design, ui design, user experience, ui skills, ui designer, junior ui designer, senior ui designer, senior designer, junior designer, figma, adobe, sketch, protopie, tutorial, tips, tricks, ui tips, ux tips, ui tutorial, ux tutorial, ux jobs, ux portfolio, design portfolio

Id: nS1UrJnncWc

Length: 11min 5sec (665 seconds)

Published: Mon Nov 28 2022