The best and relevant instructor for UI globally and that is Michal. I Haven't seen such a good and systematic approach for UI design than Michal's. I have all of the hype4 courses just because I have seen myself designing better and better in just 2 months.
@@MalewiczHype you are so full of shit sitting at my new job watching UI design guides, I've only done the intro year of media design so next to adobe CS5.5 and some logo's I made and a few AMV videos I had nothing to show for it still got the job this guy elitist views are not how the world works people don't be discouraged the job is as easy as it looks
I'm just gonna jump in here real quick as someone who contended for years with UX gatekeeping and rookies giving 'expert' advice: *you can get hired for anything at any level* you don't need to be 'level 5' to be considered. Keep practicing and don't let the clickbait get you down.
Yeah, I'm going to call bullshit on this video. In my experience, unless you're looking to be hired for high-profile, front-facing work, the people interviewing you will not be UX experts and wouldn't know the difference between the subtlety of 1-5. They want a good solid worker who can either follow design patterns, or they can help establish them. Looking at a few prototypes doesn't mean shit. More important is showing that you have a solid understanding of UI design principals. Show that you can advocate for the user, and show a solid work history.
My thoughts exactly. Now, his point about recruiters may be valid, as if your UI skill are lacking, you are less likely to be sought out, but that’s not the same as hire-ability. I got hired with no UI experience for my first job, never even touched HTML and CSS in my entire computer science degree. But they hired me and I learned how to make things in the first couple months and was in charge of a whole revamp for one of their apps in less than a year. It’s really not that big of a deal.
At some point, it's not about your UI design skills. It's about how you communicate with others. Are you a reliable team member? Do you provide context to any questions or problems you need help with? Do you anticipate upcoming questions from your coworkers and strive to answer them before they become issues? Do you take feedback effectively and incorporate it into your designs? Are you willing to help others with their problems? All of these are not UI problems. These are skills that a lot of people who don't get hired seem to be rusty in.
Stage 6 suggestions 😊: the optical alignment seems to be incorrect. Everything seems to be aligned on the left to single vertical line. However you want to shift the headings ~2px to the right and maybe the circles ~1px to the left to compensate. To simplify this rule, when you left-align a rectangle and a circle, the rectangle will *feel* more to the left than the circle. Same applies to rounded rectangles, etc. Also dark shapes generally *feel* bigger than the light ones. You may want to add 1px border to the light cards, maybe make the plus button 2px smaller in diameter, etc. “Awaiting” buttons seems odd - it’s not clear whether it’s a button (is it clickable? What is the action? What state it’s in?). Also the layering of blues might not be giving enough contrast to pass AAA - just guessing. The book icon is super ugly, looks cheap, sorry. The gradients are too brutal, a bit more subtle approach would help. Overall, there’s more work to be done with the gradients, highlights, shading, background, etc. Watching this on phone screen, so I don’t really see all the details, hence I might be wrong about some of the stuff I mentioned. Just my two cents what I see from quick glimpse. Great video though, love this explanation of which detail matter!! 👏👍
_since we're making up levels any way, here are some questions for other levels:_ Stage 7: where do we want to drive main user's attention? We not only need to tune this down, we need to highlight important parts. (and why does the bell notification and teammates icons have the same • near them?). Do we display the "Good morning, Angelina" just to show off that we know user's name? Stage 8: do we really need those menu and bell buttons atop, where it's hard to reach for mobile phone users? Can't we fit our main actions in the 5 buttons row in the bottom? wouldn't having two menus confuse users? and btw, with all the hand-picked spacings... how will the app scale on different devices? Is horizontal schedule layout actually comfortable for seeing a schedule on a vertical oriented screen? Stage 9: is our accessibility fine, especially around contrast of those dates in the cards? [...] Stage 13: is this a website or a mobile app? do we plan a website counterpart to it? what tools do we use to create the app? [...] Stage 17: actually, what problem does our app solve and who will be our users? Do we really need to manage the "teammates" list on the home page? Or even have it in the first place? How often and when will users open our app? [...] Stage 1: oh, I forgot to ask: does our company have a style guide? :D [...] Stage 23: do we need a design at all? are we even ready to make educated decisions on questions above? why don't we just draft these designs in power point and just hire 5 more people in the marketing department instead?
You should mention accessibility, color ratio contrast, button size, etc. This is where you'll see that as a designer, you are not only doing assets for Dribbble, but deeply thinking about your users. One layer you should mention is also how you collaborate with your peers. How is the dev hand-off? How is the communication with the stakeholders? Do you feel comfortable sharing a work in progress? How do you document your work? The list is long.
This video is amazing. I’m not an UI designer, but this is important in every kind of design. I can tell that this is one of the most important skills recruiters are looking for. All of this attention to detail is what’s gonna get you hired. You need to pay close attention and understand the importance of clean work, and why it’s so important in tight deadlines also. When you unlock that, you grow faster and you design faster too. Thank you so much for telling the nitty gritty of design, I hope it inspires many new designers to challenge themselves. I am gonna show this video to the great designers in my team also, haha. Greetings from Argentina ❤
GREAT! Probably around 4+ in terms of web design. Getting into details, that's where I'm at. I think this may help people skim the content: 0:00 - Intro 0:06 - The Importance of Level Five UI Design 1:36 - Level Five - The Principals of Good UI Design 3:53 - Level Four - No Problem Finding a Job 6:03 - Level Three - Good, But Not Enough 7:19 - Level Two - Some Work to Do 8:22 - Level One - Everything is Wrong 8:56 - Best Learning Resources to Help 9:09 - Comparison of Levels 9:20 - Hidden Level Six! 9:32 - The importance of animations in design 9:53 - How to Reach Level Five in UI Design 10:42 - Closing Remarks
Thank you! That means a lot, especially since youtube algo is currently undermining me quite a lot (hiding the videos). Commenting and watching the video from start to finish helps with that and luckily a small army here is fighting that algo battle with me :-)
You're one of the best UI Instructor that I know. Thanks alot Michal! I'm a fresh graduate of Computer Science but I shift my focus towards designing. You're one of those people who offered straightforward information and they're very easy to follow through! Thanks alot man
I do appreciate for the detailed feedbacklike example analysis. This işs how a feedback supposed to be, you show what's wrong, how it is supposed to be etc. Thanks again.
To be very honest, the stage 4 design looked THE BEST to me. The laws and rules may not necessarily always produce the most pleasing interfaces; not ALWAYS so please do not get too stuck to them. Sometimes, intuition and overall appeal simply works (even if it does not follow all the rules by the book) (FYI, I'm a Ui/Ux designer)
I would say stage 4 and 5 are pretty much on equal footing. There are things I like better about both. Perfect multiples are nice in theory, but perception doesn't work like that.
Level 4 has inconsistent roundings, fonts, and colors and worse readability due to smaller subheadings. Also, the 5 level had some contrast and readability problems as well. And some of the roundings could be visually adjusted too, it's not always worth it thus you should create some specifications in the design system for that instance, which is going to make it harder to consistently replicate it.
Ew no. Stage 4 White text on Green buttons, you can barely read them. And the header text lines are too close to each other. I wish people stopped using White text on bright color buttons.
The thing is every stage 5 designer will actually cringe at that stage 4 design. With experience, you will immediately see it feels “off”, and then you just know where to look at the usual suspects. The difference is all about balance and rhythm. It requires a lot of understanding of typography, color theory, optical alignment, etc. etc. to be able to pinpoint and fix these “invisible” issues.
I have recently started learning Ux, like 2-3 months back. I'm totally exhausted..doing it continuously for 10hours to someday 15hours. But Im happy after seeing your comparison that my work is not gone wasted. By your scaling system I'm at between 3rd to 4th stage. I have done many reworks already while continuing learning new rules and understanding designs..
I just started learning UI design and this is an eye-opener. I will be able to progress much faster with these tips. Thank you for the clear graphics to explain each point!
Level 5 looks nice, but there are other things to consider as well. For example, the icons contrast seems lower then 4.51:1 ratio, same with the text on 'Upcoming appointments' cards. From the UX side - what is the purpose of that hamburger on the top left? All the menu items are already in bottom row, the top left corner is the most difficult corner to reach with your thumb. What is the purpose of 'Good morning Angelica' ? It takes up lots of screen space without giving much value
There are and I think I mentioned that - it's not really about UX because UX of a fake, pretend, portfolio project is not important. When people see a "nice UI" they can hire you and then give you some wireframes for their real products so everything makes sense from the UX perspective :-)
Incredible! I just finished the Google UX Course and am on a 6-month UI self-learning journey. This video was of incredible use to me, thank you! There are so many points from the 4 version which I identified myself so I feel good! Thank Christ I'm not at level 1! I'm somewhere between 2 & 3 I'd say! Onwards and upwards!
This really breaks down just how much work / attention to detail you need to have for your projects. Even though it looks simple or "not important" it makes a huge world of difference for someone looking to hire.
I just wanted to say thank you for creating top notch quality content for both paid and free. You are really making a huge difference in the design world 🙏❤ Looking forward to your new courses!
@@m4xxxxxxxx-d7i i’d say level zero. I dont do UX design not artistic enough. But still like watching cool designs. But thats more of a personal preference, everything just enda up looking boring and the same.
@@bettmo7494 yes everything kind of looking the same part is so true, its like nothing has a soul anymore. Like the designs in the early days of the web were god awful, and made you want to pluck your eyes out, but they had something which is lacking in todays designs, which is character and a soul
As a developer, I’d like to say that the idea of being “unhireable” at anything below 4 is very untrue. Maybe if you’re only looking at Fortune 500 companies and positions making $500K a year, but for your average dev, you can get hired at 3, with them expecting you to improve while you’re there. Heck, I got hired as a web dev with no actual web development experience at all. Literally hadn’t touched HTML, CSS, or JavaScript. There isn’t some magical line of “yeah you’re not worth hiring until you’re here”, because then no one would get hired right out of college
One of the best Videos I watched on youtube, fr! so helpful because you showed that logical stuff you know, helped in understanding that oh! what's exactly the difference between each...
This is brilliant, I'm going through websites daily to find new inspiration for designs (I'm a dev, if I see something, I know how to make it, but can't come up with completely new designs). I never noticed those good designs are based on multiples of x as shown at 3:11 I just went through all components of my website and fixed it accordingly. Had been close most times but also found some way off. Looks way better now, thanks for sharing this information!
All the video taught me is recruiters are missing the forest for the trees. All stages of the UI is just merely a copy of Facebook UI, and the only differences between each is MINOR things. As a video game designer who has to make UI, it's what people actually do with the UI that is important, not alignment or whatever. There are some terrible looking UI that people play with more than sleek UI, and that is much more important. The closest any of that was touched on was the color choices in stage 5.
I had hard times telling the difference between 5 and 4, but when you switched to 3, the contrast became really stark. I’m not a designer, but web-developer though.
I really appreciate your dedication of making designs below level 4, it is extremely difficult to make design worse on purpose with high design experience :)
Thanks Michal like always! Good job, good content, good courses. Can't Wait for "Boring UI Course"! That will be gamechanger for me! Becouse already im working about design systems :)
Thanks! Of course the boring course is just a starting point to a design system, part 2 (possibly) of it will dive more in depth. This one is more about making the components in a consistent, beautiful and reusable way :)
It seem that if an employer has the knowledge of what a good UI design is might actually take a look at your portfolio. With that said, just how many pieces of work must you have and do you actually need to think of everything that ought to go into an app meaning all the features and functionality or simply show a believable finished product with awesome looking layout? I’m from a printing publishing background who never designed an app on the job but designed layouts for print. How can I word my skills and experience so that it captures the imagination of an employer?
Maybe the fastest way to improve design skills is to have immediate feedback upon every single piece of work you do? I believe to every word you say because I started watching your channel after doing every possible course/tutorial/book on internet. You are truly the best in this game.
Not only that, but immediate *good* feedback. There are many places to get feedback on designs, but not many places from a perspective of a level 5 designer
@@andrewd8026 I agree absolutely! I was once in a facebook group from some skillshare course on graphic design where beginners posted and gave responses to each other. The course lacked many information which I learned from other places so not only that they didn't know what they don't know they also didn't have proper feedback. This video is the truth and probably means that without mentor it will be extremely difficult to get a job as a entirely self thaught designer (me first as an example).
Awesome video! I think this video does well going over the parts of an interface, but there's certainty a huge amount of effort that goes into planning the UI layout to begin with, so in your example, deciding to put menu on the top left and alerts on the top right, bottom icon navigation, and splitting the UI into a greeting, a CTA, teammates, and appointment cards, the order, how the previews look and what content they display, and the overall navigation and app/site layout.
UI/UX is not just about design but the communication between developer and user. It can be likened to what makes the perfect car.... Perfect form/function with perfect engineering. It is simple. The "next level" of UX/UI is being able to creatively integrate an approved design with the technical UML database fields that allow developers to understand and easily/quickly implement the backend.
#1 is exactly the one I always see on LinkedIn. I always try to believe that the purpose is to ask for advice. However, the more I see those posts, the more I believe the intention is to “show off” their so-called good UI. I eventually had no choice but to quit those “UX groups” in order to avoid seeing those posts again.
To be fair that project was more like a 4.9 but I made it in like 20 minutes so there's that ;-) I am experimenting with some new methods this year - surely soon "creative people" will copy them on Instagram, but I'm happy when what I do helps people :-)
It's a lot of work to get into, but _dear god_ is UI/UX a good path to strive for. Alongside product rendering, it's among **THE** most in-demand skillsets you can have as a digital artist, and is comparatively easier to break into than, for example, asset modeling.
This video was so helpful! I've just started my journey in UI/UX design and your videos always leave me with such valuable information. I bought your UX book yesterday and I'm so glad that I did! 🙌
And after all your hard work, adjusting pixel by pixel, you can hand of your beautiful level 5 design to the front end engineers - and it then becomes a level 1 design.
Haha sometimes! But the thing is that designers work doesn't end with handing off the design. Doing Quality Assurance every step of the way is also part of the job description :-)
Hi, I want to say THANK YOU for posting these videos, it helps me a lot. Now, I don’t know if this good or bad to be honest but I am a beginner in UI design and level 5 is just common sense to me, this is how a job should be done using your normal human instincts and space orientation capabilities.
I would make the Level 5 + icon green. it's blue, the same color as card backgrounds. The actions, tabs, CTA's - are all green, except the + button. If a secondary style is needed for info heirarchy, perhaps outlined green, white middle.
Stage 5 just has a little more breathing space horizontally, that's basically it. Other differences are some lighter-weight icons and an accessibility bar on the home icon. The black text on green button is wrong and seems like the creator did it because it passes wcag 2.2, but in 3.0 this wouldn't pass. White on green, like in stage 4, is the correct choice here. It's all about the text luminosity.
Level 5: There seems to be multiple differences difference between the “Read report” and the “Join meeting” button in terms of corner radius and typography. Maybe not a great example to point out super precise UI design…not to mention accessibility. White text on green base might not be good enogh…
Hm. Correct me if I'm wrong but speaking in Layman's terms - the difference between a great, user-friendly design and a bad one is in the consistency of the design. So the more you stick to the repetition of the spacing of the elements, fonts, you can essentially design without thinking. Having a design system comes to mind having all the fonts, colors, sizes, and spaces provided. Of course, there are other things like color matching, typography, visual hierarchy, cognitive overload yada yada yada but nailing down the consistency seems to be the key to having great designs.
You can tell when people mention these things that they're coming from the design heavy side rather than development heavy, because you get most of this for free in development. When you develop you aren't just dragging and placing things wherever you want. You're defining the sizes, margins, padding, etc. with numbers that are reused. I'm never going to manually add different margin dimensions or border radiuses on everything just for the hell of it. And with newer preprocessors, they can be reusable variables. This doesn't always work out for everything. There are some standard applied styling rules that mess things up; there are design kits with quirks you might be forced to use; offset icons; line heights that need tweaking to anchor; etc... but consistency in that respect is the easiest part imo. Most design problems can be easily cleared up just by knowing what not to do. Contrast issues, for instance. It's extremely easy to identify. The last and hardest leg is relative. You know you need white space, but how much is appropriate in each case? You know you need visual hierarchy, but what exactly are you going to use to establish it? Which fonts will work best in these scenarios and what should their proportions be? What about the artistic elements of design? Most importantly, are we effectively communicating to the user. In fact, many things cannot be optimized without trial and error. We can use principles to get most of the way, but it becomes subjective really quickly and user testing is the only way to know if a design is more effective than another.
In Level 5, is there a way to make the Awaiting button look more disabled? Especially if it were on a white background. I think to me, the only thing giving it away is the closeness to the card background color, and the copy "Awaiting" itself. But to me, if it said anything else, and were on a white background, it would not look disabled. I think i would instead make it white with a slight outline, and then the text inside it gray.
Hola!! Este año empecé a estudiar UX/UI, he comprado todos tus cursos y han sido la mejor inversión de mi vida... espero con ansias el nuevo y un curso de animaciones para ese Nivel 6. Thanks !!
I know UX is not the focus here, but if you had to add names for the "Your teammates" section, how would you fit their names in there? REALLY TINY font? or change it to pill shapes with avatar+name label?
There are a couple of ways of doing these (and all can be "right") - one way is outlined in a tutorial from 2021 on this channel on Hierarchy - just search this channel videos for the word hierarchy and you'll find it :)
Great video but I have one concern: mathematical precision isn't always how the human eye interprets layout. A small square icon will look closer to an object than a circular icon on the other side of the object. Sometimes font kerning and colours may need to be slightly adjusted to give the appearance of consistency. Surely a little subjective correction is needed from time to time, correct?
Yes and that's on purpose because most companies would hire a designer that sometimes misses contrast - they'd simply tell the designer not to do it whe working on the actual product :)
Stage 5 looks nice, but it still has one serious flaw from a practical perspective: it wastes space like crazy. If this would be on a phone, particularly the button fonts are already pretty small. Look how much space the text and images/icons actually take up. I'd say it's no more than 10% of screenspace. And that huge greeting actually doesn't count. Of course, that's not going to stop anyone from hiring you, because there are few organizations who care about practical UX in the applications they order. Some care about looks, some care about functionality, noone cares about ergonomics. But you should care, if you care about your users at all.
I was struggling to stay motivated in my career change journey, but I felt the spark again after watching your course. Thanks a lot! ❤ I like the content and love the direct way you say things. It's a breath of fresh air and what keeps me hooked. I wanted to take a go at the weekly challenges you mentioned. Could you tell me where I may find them?
Are you in our slack community yet? If not, you need to email me or DM on Twitter. That's step one - we share the beta of the platform through the community only for now (it will be open in 1-2 weeks to everyone)
Great Video and I love it! But If you had taken the reverse level approach, going from 1 to 5, People could also discover what is wrong with their designs but also what they can do to make it better.
The best and relevant instructor for UI globally and that is Michal. I Haven't seen such a good and systematic approach for UI design than Michal's. I have all of the hype4 courses just because I have seen myself designing better and better in just 2 months.
wow thank you!!! super happy to hear that ❤️
@@MalewiczHype Design principles are just a mental model that is corrected through learning thus your “level” improves.
@@MalewiczHype you are so full of shit sitting at my new job watching UI design guides, I've only done the intro year of media design so next to adobe CS5.5 and some logo's I made and a few AMV videos I had nothing to show for it still got the job this guy elitist views are not how the world works people don't be discouraged the job is as easy as it looks
@@MalewiczHype I can pay with bitcoin Boring UI Course? sanctions((
I'm just gonna jump in here real quick as someone who contended for years with UX gatekeeping and rookies giving 'expert' advice: *you can get hired for anything at any level* you don't need to be 'level 5' to be considered. Keep practicing and don't let the clickbait get you down.
Yeah, I'm going to call bullshit on this video.
In my experience, unless you're looking to be hired for high-profile, front-facing work, the people interviewing you will not be UX experts and wouldn't know the difference between the subtlety of 1-5. They want a good solid worker who can either follow design patterns, or they can help establish them. Looking at a few prototypes doesn't mean shit.
More important is showing that you have a solid understanding of UI design principals. Show that you can advocate for the user, and show a solid work history.
Thank you! These videos started popping up in my feed and I can't till my eyes far enough to the back of my head..
Yes but they do have eyes. And things always look better when they’re better.
@@clarkcant Hi, Clark. Please where is the best place to start?
My thoughts exactly. Now, his point about recruiters may be valid, as if your UI skill are lacking, you are less likely to be sought out, but that’s not the same as hire-ability.
I got hired with no UI experience for my first job, never even touched HTML and CSS in my entire computer science degree. But they hired me and I learned how to make things in the first couple months and was in charge of a whole revamp for one of their apps in less than a year. It’s really not that big of a deal.
At some point, it's not about your UI design skills. It's about how you communicate with others.
Are you a reliable team member?
Do you provide context to any questions or problems you need help with?
Do you anticipate upcoming questions from your coworkers and strive to answer them before they become issues?
Do you take feedback effectively and incorporate it into your designs?
Are you willing to help others with their problems?
All of these are not UI problems. These are skills that a lot of people who don't get hired seem to be rusty in.
At the heart of this we should be collaborators.
That's after being hired. You must be hired first.
Stage 6 suggestions 😊: the optical alignment seems to be incorrect. Everything seems to be aligned on the left to single vertical line. However you want to shift the headings ~2px to the right and maybe the circles ~1px to the left to compensate. To simplify this rule, when you left-align a rectangle and a circle, the rectangle will *feel* more to the left than the circle. Same applies to rounded rectangles, etc.
Also dark shapes generally *feel* bigger than the light ones. You may want to add 1px border to the light cards, maybe make the plus button 2px smaller in diameter, etc.
“Awaiting” buttons seems odd - it’s not clear whether it’s a button (is it clickable? What is the action? What state it’s in?). Also the layering of blues might not be giving enough contrast to pass AAA - just guessing.
The book icon is super ugly, looks cheap, sorry.
The gradients are too brutal, a bit more subtle approach would help. Overall, there’s more work to be done with the gradients, highlights, shading, background, etc.
Watching this on phone screen, so I don’t really see all the details, hence I might be wrong about some of the stuff I mentioned. Just my two cents what I see from quick glimpse.
Great video though, love this explanation of which detail matter!! 👏👍
_since we're making up levels any way, here are some questions for other levels:_
Stage 7: where do we want to drive main user's attention? We not only need to tune this down, we need to highlight important parts. (and why does the bell notification and teammates icons have the same • near them?). Do we display the "Good morning, Angelina" just to show off that we know user's name?
Stage 8: do we really need those menu and bell buttons atop, where it's hard to reach for mobile phone users? Can't we fit our main actions in the 5 buttons row in the bottom? wouldn't having two menus confuse users? and btw, with all the hand-picked spacings... how will the app scale on different devices? Is horizontal schedule layout actually comfortable for seeing a schedule on a vertical oriented screen?
Stage 9: is our accessibility fine, especially around contrast of those dates in the cards?
[...]
Stage 13: is this a website or a mobile app? do we plan a website counterpart to it? what tools do we use to create the app?
[...]
Stage 17: actually, what problem does our app solve and who will be our users? Do we really need to manage the "teammates" list on the home page? Or even have it in the first place? How often and when will users open our app?
[...]
Stage 1: oh, I forgot to ask: does our company have a style guide? :D
[...]
Stage 23: do we need a design at all? are we even ready to make educated decisions on questions above? why don't we just draft these designs in power point and just hire 5 more people in the marketing department instead?
@@kosnk Bro I thought you wouldn't stop ever 😅
These tips were really useful
Really on point I was ... I hate it when people use random 3D icons in UI doesn't make sense
You should mention accessibility, color ratio contrast, button size, etc. This is where you'll see that as a designer, you are not only doing assets for Dribbble, but deeply thinking about your users. One layer you should mention is also how you collaborate with your peers. How is the dev hand-off? How is the communication with the stakeholders? Do you feel comfortable sharing a work in progress? How do you document your work? The list is long.
These are important issues, but not the theme of this specific video.
This video is amazing. I’m not an UI designer, but this is important in every kind of design. I can tell that this is one of the most important skills recruiters are looking for. All of this attention to detail is what’s gonna get you hired. You need to pay close attention and understand the importance of clean work, and why it’s so important in tight deadlines also. When you unlock that, you grow faster and you design faster too. Thank you so much for telling the nitty gritty of design, I hope it inspires many new designers to challenge themselves. I am gonna show this video to the great designers in my team also, haha.
Greetings from Argentina ❤
GREAT!
Probably around 4+ in terms of web design. Getting into details, that's where I'm at.
I think this may help people skim the content:
0:00 - Intro
0:06 - The Importance of Level Five UI Design
1:36 - Level Five - The Principals of Good UI Design
3:53 - Level Four - No Problem Finding a Job
6:03 - Level Three - Good, But Not Enough
7:19 - Level Two - Some Work to Do
8:22 - Level One - Everything is Wrong
8:56 - Best Learning Resources to Help
9:09 - Comparison of Levels
9:20 - Hidden Level Six!
9:32 - The importance of animations in design
9:53 - How to Reach Level Five in UI Design
10:42 - Closing Remarks
Top notch content, Michal! Please keep making vids! You’re my favorite UXD Mentor on TH-cam- practical, no BS, engaging with real-life examples
Thank you! That means a lot, especially since youtube algo is currently undermining me quite a lot (hiding the videos). Commenting and watching the video from start to finish helps with that and luckily a small army here is fighting that algo battle with me :-)
That’s probably the best way to teach a thing, by showing this examples. Thanks a lot!
You're one of the best UI Instructor that I know. Thanks alot Michal! I'm a fresh graduate of Computer Science but I shift my focus towards designing. You're one of those people who offered straightforward information and they're very easy to follow through! Thanks alot man
I've taken many courses. Michal's focus on the basics that seem to be untouched in other courses. He has helped me level up as a designer.
I see your progress and I’m super proud, you’re doing great! 🤗
@@MalewiczHype thank you!
As someone who is a newbie in UI/UX designer, this is super helpful. These small things matter a lot! Thank you for the video!
I do appreciate for the detailed feedbacklike example analysis. This işs how a feedback supposed to be, you show what's wrong, how it is supposed to be etc. Thanks again.
To be very honest, the stage 4 design looked THE BEST to me. The laws and rules may not necessarily always produce the most pleasing interfaces; not ALWAYS so please do not get too stuck to them. Sometimes, intuition and overall appeal simply works (even if it does not follow all the rules by the book)
(FYI, I'm a Ui/Ux designer)
Fair enough, stage 4 is roughly the stage I noticed people get a job from - and I really talked to nearly 1000 designers in 2021-2022
I would say stage 4 and 5 are pretty much on equal footing. There are things I like better about both. Perfect multiples are nice in theory, but perception doesn't work like that.
Level 4 has inconsistent roundings, fonts, and colors and worse readability due to smaller subheadings. Also, the 5 level had some contrast and readability problems as well. And some of the roundings could be visually adjusted too, it's not always worth it thus you should create some specifications in the design system for that instance, which is going to make it harder to consistently replicate it.
Ew no. Stage 4 White text on Green buttons, you can barely read them. And the header text lines are too close to each other. I wish people stopped using White text on bright color buttons.
The thing is every stage 5 designer will actually cringe at that stage 4 design. With experience, you will immediately see it feels “off”, and then you just know where to look at the usual suspects. The difference is all about balance and rhythm. It requires a lot of understanding of typography, color theory, optical alignment, etc. etc. to be able to pinpoint and fix these “invisible” issues.
Excellent analysis Michal, a few days ago I bought one of your video courses and I'm learning a lot
Great to hear! Which one did you get?
@@MalewiczHype How to create a case study
Oh that's a popular one - people who took it have it a lot easier :)
This is so inspiring i must say. It drove in me some energy to move on and improve as a beginner. Thank you so much
Glad to hear! I made this into a series and there's more episodes now
I have recently started learning Ux, like 2-3 months back. I'm totally exhausted..doing it continuously for 10hours to someday 15hours. But Im happy after seeing your comparison that my work is not gone wasted. By your scaling system I'm at between 3rd to 4th stage. I have done many reworks already while continuing learning new rules and understanding designs..
I just started learning UI design and this is an eye-opener. I will be able to progress much faster with these tips. Thank you for the clear graphics to explain each point!
This is exactly the type of content that gets me curious:))
good to hear! which level are you now?
Swear to God, level one triggered some type of anxiety in me when i saw it.
Level 5 looks nice, but there are other things to consider as well. For example, the icons contrast seems lower then 4.51:1 ratio, same with the text on 'Upcoming appointments' cards.
From the UX side - what is the purpose of that hamburger on the top left? All the menu items are already in bottom row, the top left corner is the most difficult corner to reach with your thumb.
What is the purpose of 'Good morning Angelica' ? It takes up lots of screen space without giving much value
There are and I think I mentioned that - it's not really about UX because UX of a fake, pretend, portfolio project is not important. When people see a "nice UI" they can hire you and then give you some wireframes for their real products so everything makes sense from the UX perspective :-)
Incredible! I just finished the Google UX Course and am on a 6-month UI self-learning journey. This video was of incredible use to me, thank you! There are so many points from the 4 version which I identified myself so I feel good! Thank Christ I'm not at level 1! I'm somewhere between 2 & 3 I'd say! Onwards and upwards!
Glad it was helpful!
This really breaks down just how much work / attention to detail you need to have for your projects. Even though it looks simple or "not important" it makes a huge world of difference for someone looking to hire.
Frankly speaking, this video shows the right way of improving design skills. And the right way a mentor should explain things!
Great video! Helps a lot. I would also add that proficiency in design systems is a huge asset for UI designers.
I just wanted to say thank you for creating top notch quality content for both paid and free. You are really making a huge difference in the design world 🙏❤ Looking forward to your new courses!
thank you so much, making a difference is exactly my goal!
I actually found design number 2 the best. The green actually helps in a predominant blue design and gives it a tiny bit of life.
You are on level 1 my man
@@m4xxxxxxxx-d7i i’d say level zero. I dont do UX design not artistic enough. But still like watching cool designs. But thats more of a personal preference, everything just enda up looking boring and the same.
@@bettmo7494 yes everything kind of looking the same part is so true, its like nothing has a soul anymore. Like the designs in the early days of the web were god awful, and made you want to pluck your eyes out, but they had something which is lacking in todays designs, which is character and a soul
Love how you compared each level! This was cool. Would love to see more vids like this for sites and apps.
There's already 5 or 6 more in this series on the channel :)
Oh do you have a playlist? Love the channel@@MalewiczHype
This is one of my favorite videos you've made. Super helpful, thank you!
Good video! But I did notice that on the stage 5 design, there's still a different card design on the third card off screen 😜
As a developer, I’d like to say that the idea of being “unhireable” at anything below 4 is very untrue. Maybe if you’re only looking at Fortune 500 companies and positions making $500K a year, but for your average dev, you can get hired at 3, with them expecting you to improve while you’re there. Heck, I got hired as a web dev with no actual web development experience at all. Literally hadn’t touched HTML, CSS, or JavaScript. There isn’t some magical line of “yeah you’re not worth hiring until you’re here”, because then no one would get hired right out of college
Excellent vid that explains every single small details of that, I'm gonna put those in practice
One of the best Videos I watched on youtube, fr! so helpful because you showed that logical stuff you know, helped in understanding that oh! what's exactly the difference between each...
This is brilliant, I'm going through websites daily to find new inspiration for designs (I'm a dev, if I see something, I know how to make it, but can't come up with completely new designs). I never noticed those good designs are based on multiples of x as shown at 3:11
I just went through all components of my website and fixed it accordingly. Had been close most times but also found some way off. Looks way better now, thanks for sharing this information!
All the video taught me is recruiters are missing the forest for the trees. All stages of the UI is just merely a copy of Facebook UI, and the only differences between each is MINOR things. As a video game designer who has to make UI, it's what people actually do with the UI that is important, not alignment or whatever. There are some terrible looking UI that people play with more than sleek UI, and that is much more important. The closest any of that was touched on was the color choices in stage 5.
If that is your definition of Level 5, then I'm Jony Ive.
Congrats Sir Jony!
It's a definition of level 5 for JUNIOR designers.
There are higher level than that - obviously.
Thanks for doing this, Michal. It's going to be super helpful, and also, thanks for sharing this awesome piece. 🤗
I had hard times telling the difference between 5 and 4, but when you switched to 3, the contrast became really stark.
I’m not a designer, but web-developer though.
The difference isn't that big but it is there
I really appreciate your dedication of making designs below level 4, it is extremely difficult to make design worse on purpose with high design experience :)
It's actually quite fun!
No it's pretty easy, you just have to create a design with eyes close !
Especially without just making them obviously intentionally bac
@@OctagonalSquare Exactly, I did my best to try to do it, and I'm telling you it's hard to after xx years in design :D
I think I am almost 4 still need some work but thank you for making me realize how can i improve, such underrated channel.
Level 1 - this is my product manager's level of design 😄
Thanks Michal like always! Good job, good content, good courses. Can't Wait for "Boring UI Course"! That will be gamechanger for me! Becouse already im working about design systems :)
Thanks! Of course the boring course is just a starting point to a design system, part 2 (possibly) of it will dive more in depth. This one is more about making the components in a consistent, beautiful and reusable way :)
It seem that if an employer has the knowledge of what a good UI design is might actually take a look at your portfolio. With that said, just how many pieces of work must you have and do you actually need to think of everything that ought to go into an app meaning all the features and functionality or simply show a believable finished product with awesome looking layout?
I’m from a printing publishing background who never designed an app on the job but designed layouts for print. How can I word my skills and experience so that it captures the imagination of an employer?
I haven't gotten a stable job yet but the reach outs and engagements got better when I got better with my visual game.
Thanks for the information, even subtle details make the difference.
Maybe the fastest way to improve design skills is to have immediate feedback upon every single piece of work you do? I believe to every word you say because I started watching your channel after doing every possible course/tutorial/book on internet. You are truly the best in this game.
Not only that, but immediate *good* feedback. There are many places to get feedback on designs, but not many places from a perspective of a level 5 designer
@@andrewd8026 I agree absolutely! I was once in a facebook group from some skillshare course on graphic design where beginners posted and gave responses to each other. The course lacked many information which I learned from other places so not only that they didn't know what they don't know they also didn't have proper feedback.
This video is the truth and probably means that without mentor it will be extremely difficult to get a job as a entirely self thaught designer (me first as an example).
Can't wait for those challenges!! 😻
That is a really important things on right examples. Thanks a lot. Now I'm confident I think in right way
Great! Confidence is a good thing to have :)
this is really good video. thanks for the advice and motivation. I lost it yesterday, but now I get it again
Awesome video! I think this video does well going over the parts of an interface, but there's certainty a huge amount of effort that goes into planning the UI layout to begin with, so in your example, deciding to put menu on the top left and alerts on the top right, bottom icon navigation, and splitting the UI into a greeting, a CTA, teammates, and appointment cards, the order, how the previews look and what content they display, and the overall navigation and app/site layout.
This one was free ladies and gentlemen
Much appreciated!!
UI/UX is not just about design but the communication between developer and user.
It can be likened to what makes the perfect car.... Perfect form/function with perfect engineering.
It is simple.
The "next level" of UX/UI is being able to creatively integrate an approved design with the technical UML database fields that allow developers to understand and easily/quickly implement the backend.
#1 is exactly the one I always see on LinkedIn. I always try to believe that the purpose is to ask for advice. However, the more I see those posts, the more I believe the intention is to “show off” their so-called good UI.
I eventually had no choice but to quit those “UX groups” in order to avoid seeing those posts again.
Great video! Realized I'm somewhere between level 4-5, probably a level 4.3
To be precise, corner radius of top card and bottom cards are equal, but corner radius of top button and bottom buttons are different.
Really looking fwd. to the design challenge.
I love to replicate designs...😍🔥
That's a great way to learn and I can't wait to launch it :)
💥🔥 what a great vid - it's executed/illustrated so well!
Really showcases ur teaching style ~ ~ ~ filling in the gaps like a level 5 😜
To be fair that project was more like a 4.9 but I made it in like 20 minutes so there's that ;-)
I am experimenting with some new methods this year - surely soon "creative people" will copy them on Instagram, but I'm happy when what I do helps people :-)
Sadly on level 1- great I found this channel!
Welcome aboard! Level 1 is good because knowing the difference will allow you to quickly move up :)
It's a lot of work to get into, but _dear god_ is UI/UX a good path to strive for. Alongside product rendering, it's among **THE** most in-demand skillsets you can have as a digital artist, and is comparatively easier to break into than, for example, asset modeling.
your video is really valueable for everyone who want to be a great UI Designer, thanks a lot Michal
The video that will force me to subscribe!
Amazing Content!
This video was so helpful! I've just started my journey in UI/UX design and your videos always leave me with such valuable information. I bought your UX book yesterday and I'm so glad that I did! 🙌
Can't wait for the recreation challenge! Hope it comes out soon!
Wow, great content! Thank you for the insightful instruction.
And after all your hard work, adjusting pixel by pixel, you can hand of your beautiful level 5 design to the front end engineers - and it then becomes a level 1 design.
Haha sometimes! But the thing is that designers work doesn't end with handing off the design. Doing Quality Assurance every step of the way is also part of the job description :-)
Hi, I want to say THANK YOU for posting these videos, it helps me a lot.
Now, I don’t know if this good or bad to be honest but I am a beginner in UI design and level 5 is just common sense to me, this is how a job should be done using your normal human instincts and space orientation capabilities.
That is awesome! If you already have an eye for design it means it will be faster to learn! Congrats!
I would make the Level 5 + icon green. it's blue, the same color as card backgrounds. The actions, tabs, CTA's - are all green, except the + button. If a secondary style is needed for info heirarchy, perhaps outlined green, white middle.
I just started UI Design and level 5 was already obvious to me. I guess I'll make a great UI Designer. Even more motivated now
Thank you so much for the guide! It's been a huge help.
me not even wanting my career to be in the IT area
THIS IS PERFECT FOR ME
You are adorable!
One time I saw a project level 1 on behance. Its crazy to imagine but i s-a-w. 😳
Stage 5 just has a little more breathing space horizontally, that's basically it. Other differences are some lighter-weight icons and an accessibility bar on the home icon. The black text on green button is wrong and seems like the creator did it because it passes wcag 2.2, but in 3.0 this wouldn't pass. White on green, like in stage 4, is the correct choice here. It's all about the text luminosity.
Level 1 really reminds me of old internet times (like 2013), it's kinda nostalgic
for me old internet is more like 1996 😂
Gaaaaaaadamn this video is super helpful - thanks so much!!!
Glad to hear it!
Level 5: There seems to be multiple differences difference between the “Read report” and the “Join meeting” button in terms of corner radius and typography. Maybe not a great example to point out super precise UI design…not to mention accessibility. White text on green base might not be good enogh…
Lol sounds like you were itching to find a problem…
That was really helpful. Thanks man.
Hm. Correct me if I'm wrong but speaking in Layman's terms - the difference between a great, user-friendly design and a bad one is in the consistency of the design. So the more you stick to the repetition of the spacing of the elements, fonts, you can essentially design without thinking. Having a design system comes to mind having all the fonts, colors, sizes, and spaces provided.
Of course, there are other things like color matching, typography, visual hierarchy, cognitive overload yada yada yada but nailing down the consistency seems to be the key to having great designs.
You can tell when people mention these things that they're coming from the design heavy side rather than development heavy, because you get most of this for free in development. When you develop you aren't just dragging and placing things wherever you want. You're defining the sizes, margins, padding, etc. with numbers that are reused. I'm never going to manually add different margin dimensions or border radiuses on everything just for the hell of it. And with newer preprocessors, they can be reusable variables. This doesn't always work out for everything. There are some standard applied styling rules that mess things up; there are design kits with quirks you might be forced to use; offset icons; line heights that need tweaking to anchor; etc... but consistency in that respect is the easiest part imo.
Most design problems can be easily cleared up just by knowing what not to do. Contrast issues, for instance. It's extremely easy to identify.
The last and hardest leg is relative. You know you need white space, but how much is appropriate in each case? You know you need visual hierarchy, but what exactly are you going to use to establish it? Which fonts will work best in these scenarios and what should their proportions be? What about the artistic elements of design? Most importantly, are we effectively communicating to the user. In fact, many things cannot be optimized without trial and error. We can use principles to get most of the way, but it becomes subjective really quickly and user testing is the only way to know if a design is more effective than another.
thank you for the relevant instructions sir
You are welcome, new episode of this just dropped!
Really great and Imp points covered..Thanx
In Level 5, is there a way to make the Awaiting button look more disabled? Especially if it were on a white background. I think to me, the only thing giving it away is the closeness to the card background color, and the copy "Awaiting" itself. But to me, if it said anything else, and were on a white background, it would not look disabled. I think i would instead make it white with a slight outline, and then the text inside it gray.
Although I am not a design at all, this video makes me so anxious...
great malecz really need this one.
Hola!! Este año empecé a estudiar UX/UI, he comprado todos tus cursos y han sido la mejor inversión de mi vida... espero con ansias el nuevo y un curso de animaciones para ese Nivel 6. Thanks !!
¡Gracias! Quiero agregar muchos mini-cursos (gratuitos) a TH-cam en los próximos meses. Estoy en mi camino a España en este momento :-)
@@MalewiczHype Super!!! 😃😃 Estaré pendiente.. Gracias!!
I know UX is not the focus here, but if you had to add names for the "Your teammates" section, how would you fit their names in there? REALLY TINY font? or change it to pill shapes with avatar+name label?
I am excited for the free challenge 😍
We will def. need a few weeks still, but I am hoping for a rather quick release ;)
@@MalewiczHype I desperately need that mate.
So many value on this vidéo OMG THANKS YOU A LOT !!!
2:38 Can we have a video tutorial on these calculations??
There are a couple of ways of doing these (and all can be "right") - one way is outlined in a tutorial from 2021 on this channel on Hierarchy - just search this channel videos for the word hierarchy and you'll find it :)
Level 3 reminds me of Twitter since they let that sink in. Won’t be surprised to see it drop to level 2
Great video but I have one concern: mathematical precision isn't always how the human eye interprets layout. A small square icon will look closer to an object than a circular icon on the other side of the object. Sometimes font kerning and colours may need to be slightly adjusted to give the appearance of consistency. Surely a little subjective correction is needed from time to time, correct?
the level 4 version, still have Contrast issues on the main buttons (white text over light green background) not a very good color choice.
Yes and that's on purpose because most companies would hire a designer that sometimes misses contrast - they'd simply tell the designer not to do it whe working on the actual product :)
8:35 the page for the homework made by my mates:
Love your videos so much gonna start my journey soon and this brings me so much inspiration and hope truly thank you.
Awesome to hear this! Make sure to start with UI! :)
I need to leave a comment here.
This is the best 🤩
Stage 5 looks nice, but it still has one serious flaw from a practical perspective: it wastes space like crazy. If this would be on a phone, particularly the button fonts are already pretty small. Look how much space the text and images/icons actually take up. I'd say it's no more than 10% of screenspace. And that huge greeting actually doesn't count.
Of course, that's not going to stop anyone from hiring you, because there are few organizations who care about practical UX in the applications they order. Some care about looks, some care about functionality, noone cares about ergonomics. But you should care, if you care about your users at all.
Amazing and really helpful video. I am definitely going to subscribe 😅
Yay! Thank you!
I have a newly found respect for UI designers.
I was struggling to stay motivated in my career change journey, but I felt the spark again after watching your course. Thanks a lot! ❤
I like the content and love the direct way you say things. It's a breath of fresh air and what keeps me hooked.
I wanted to take a go at the weekly challenges you mentioned. Could you tell me where I may find them?
Are you in our slack community yet? If not, you need to email me or DM on Twitter. That's step one - we share the beta of the platform through the community only for now (it will be open in 1-2 weeks to everyone)
@@MalewiczHype awsome thanks, will DM you 😊
Hi Michal. Thank you for your awesome videos. Where can I find a 30 days UI Challenge? Thank you.
It will launch on our platform hype4.academy in a few weeks ☝️
@@MalewiczHype Thank you. I have a question. How can I sign up for the hype4 academy? I only see the log in path. Thank u
at least I can get to level 4, and now I know what mistakes I often make, thank you 😆
Great Video and I love it! But If you had taken the reverse level approach, going from 1 to 5, People could also discover what is wrong with their designs but also what they can do to make it better.
Will do it that way next time :)