ONLY Levels 4 and 5 Get you Hired
ฝัง
- เผยแพร่เมื่อ 13 มิ.ย. 2024
- I reviewed another 250 junior UX/UI portfolios this year (500 last year) and noticed some additional patterns in Dark Mode designs. Dark mode is becoming a thing, with most of modern products offering it, and it also looks cool. No wonder many juniors take the challenge and try to create a dark mode design all on their own.
Find out which level you're on RIGHT NOW, and how to go to the next one.
I believe you can be a level five designer.
Do you?
There are some high-level UI design rules AND some dark-mode specific ones. In this video I share my entire process and evaluate each level with extreme attention to detail.
Become a great UX/UI designer, whether you use Figma, Sketch, Adobe XD or any other tool, it's not just the tutorials, but rather the right approach - focusing on the right things and the right learning sources.
🚨 This is based on my own experiences with over a 1500 junior designers and their portfolios, tracking which ones later got an industry job and which ones didn't.
☝️ IMPORTANT: The screens shown as these examples are only focusing on LOOKS, not the UX because the product doesn't exist. If someone tells you recruiters will analyse the UX and how it makes sense of a fake, made-up product in a junior portfolio then sorry - 90% of the time ONLY UI matters.
🚨 The platform will launch at hype4.academy - for now there is NO way to create a new account - login is ONLY for people who purchased my paid courses. Subscribe to this channel to get notified when we launch the challenges.
🏆 Master design with me
✅ Check out the boring UI Course: gum.co/boringui
✅ Create an amazing case study: gum.co/uicasestudy
✅ 3000 people improved their skills: gum.co/uicourse
✅ Learn WebDesign from the best: gum.co/webdesigncourse
✅ Best book about UI (5000 sold): gum.co/uibook
✅ Learn UX cheap and easy: gum.co/guidetoux
🎉 See all my books & courses hype4.academy
🐦 My Twitter: / michalmalewicz
👨🏻💻 About me
I'm a designer, entrepreneur and startup founder. I started back in the late 90's and currently my main goal is to share my knowledge, both paid and free. This channel is one of the places where I share my tips on design, user experience, growth, marketing, life and mindfulness. Subscribe to stay in touch. ❤️
#portfolio #ux #design
00:00 - Five quality levels of UI
00:32 - Level 1
04:00 - Level 2
07:04 - Learn design
07:14 - Is this design funny?
07:50 - Level 3
10:34 - Common dark mode ui problem
11:04 - Level 4
12:15 - Level 5
13:15 - How to improve?
14:05 - Hidden message
![จังหวะนี้ - เม้ก อภิสิทธิ์ [ Official MV ] จอนนี่มิวสิค](http://i.ytimg.com/vi/4gQRZCkRyiU/mqdefault.jpg)
Just to give some hope, I have a background in GD , but I took the google course , finished in 4 months, watched tutorials and even took a UI course from malewicz …I got a couple interviews and a full time ux position at an agency 1.5 mo after graduation . Yeah maybe you don’t have concrete ux design proof , but UI gets you through the door. Trust me
Oh totally! And congrats on getting the job so quickly! Makes my day to hear that :)
The Google UX Coursera one or a UI course at Google?
Google ux coursera course. The ui they teach is kinda garbage honestly , though thr fundamentals are good . But you Def need some ui improvement after the course
Yeah, the UX process is much easier to train than a good eye for design.
Give me a handful of your luck and I'll thank you in cash someday..... Thank you for advice and hope.
I am largely self-taught, and I don`t even have the opportunity to buy serious courses.
I have only experience in creating match3, and some expirience of work in polygraphy. I`m good in Figma but I have only my study cases.
Do I have some chances in UI/UX?
Having better than good UI design examples in your portfolio will certainly push you to the top when looking for a position as UI/UX designer. As a manager myself the first thing that i check on portfolio examples is how the designer uses white space and alignment around the elements. It creates hierarchy between the elements in the page and is easier for the eye to navigate throughout. For spacing I recommend to use the rule of 8x and use it in every single element of your designs to create consistency.
Amount of font families and font sizes are also crucial for me when hiring a designer too.
I recommend to any beginner designer to create your own styleguide prior to start designing any UI because it will simplify the design process for you.
This video was excellent. Thank you!!
Thank you! Yeah many designers dont think about how important first impressions are and when a recruiter has to browse through 50-100 portfolios each day it really does make all the difference if a design looks great right away :)
I love how you use Modern Minimalism in all of your designs, I personally love that kind of design, especially the choice of font, feels so clean
That's a style that never gets out of style :)
Besides pressing the ''like'' button, I want to say this type of videos is super informative. Please, keep it up!
I have recently been offered a position as UX Design Lead, and I have to thank you for being one of my biggest inspirations and guidance throughout this journey.
I have been incredibly consistent in my efforts, I keeptaking your courses and supplementing them with additional animation courses to enhance my skills.
My next objective is to acquire some basic coding knowledge. Thank you, Michal!
Amazing news! That consistency is key to getting there, as it's all in the consistent practice.
Congrats! :)
That's incredible. How did you get the offer?
This series gets better and better everytime, I am hanging around level 4 and learnt so many things even while viewing level 2 screens, especially the small details like back chevron joint roundness 💪 can't wait for part 3 😎
Your skills are growing VERY fast!
@@MalewiczHype Learning from the best 😎
Can't wait! 🤩 The first one helped me A LOT!
This one is at least 2x more detailed with helpful tips :)
Great video as always Michal. Tons of great tips in this one! Looking forward to you continuing this series. 🔥🔥
Totally! There's so much potential here it's mindblowing :)
As I expected, another video full of tips 🥳 the first one got me to level 4,5. Maybe this one will get me to level 5? 😎 Love this type of videos. In just 14 minutes you give us more knowledge than most of the UX Bootcamps.
5 months ago I made the best decision in my career - got your book and courses instead of an expensive bootcamp and now I'm getting so many compliments on my designs. :)
I don't know how but you unlocked a secret switch in my brain and my skills and speed improved like 100 times.
That's the spirit! That secret switch is what makes you a designer - then you just look at stuff and instantly see what's wrong :)
Great video! When I first watched your older video, I was definitely a level 2/3. But I can now say, I’m definitely a level 4.1 (lol)…still a lot of work to do! Thank you for these - really really helpful!
That's amazing! Congrats on the progress! :)
Great video as always, the levels outlined I the video help you know were your current UI design skills are and also tells you what's NEXT, it's then up to you to decide how to get to the next level.
Exactly! And once the issues are shown I hope it will be clearer for people what they should work on and improve :)
Great UI lesson, as always!
Great Video Michal, Here are some suggestions I have regarding the design in Level 5:
-Potentially increasing the font weight of text of a button (which would lead to making sure icons would look consistent)
-Reduced the space between icon and button text to 8 pt.
-Increasing the font weight by one of categories (selectors category)
-If considering accessibility for users with eye constraints make the text more visible (perhaps increase the whiteness?)
looking forward to those daily challenges! :) I would say I'm at lvl 3. I love your videos, they are
very helpful
We're so close to releasing it ;)
Hi Michal, watching this it was feeling like that screen is a UI patient who is being diagnosed and analyzed by a doctor to become better lols. I always appreciate the way you teach and deliver the knowledge while presenting with such interactive visuals and real-life examples. I have a plan to buy a couple of your UI books this year ;-)
Awesome! I think this way of showing the BAD alongside the good can be beneficial to many designers struggling with jumping from level 3 above.
Yo 👋
These videos are very helpful!
Having your narration w/the compaisrson states between the levels is a proper learning experience 💪☀
Since I've been following you - you've made me very aware of how icons are presenting. I go out of my way now to try to catch the rounded or square corners and to fix them. It's a subtle thing but I agree that it keeps the look polished.
One thing I've always wondered and have yet to look into, what is actually considered "dark mode" and why so many people (understandably) default to using shades of black. I'm seeing more ppl try dark colors that aren't black but maybe not enough.
The shadow placement you mention, I've done this - - had the color blur on all sides.
I never thought about it being a shadow and not a glow-type effect. Hmmm.
Random side note, love the Blade Runner look of the equipment.
wow! looking forward to the daily challenge !!!
We're working hard on the platform, some of our community members are already "in" and doing the challenges, but it's still a closed beta until we're ready to deploy :)
A fantastic video from you as usual. Keep it up got my first UX design role last year following your content mate.
Awesome! Congrats! Messages like that always make my day! :)
Keep being awesome!
Always!
Another one. Nice!
Thanks for the video!
What I think about:
- Increasing the font weight by one of categories (selectors category)
- Potentially remove "total" and just realign to the middle price tag (seems barely visible, and I feel like it's missaligned until you see "total")
- Reduced the space between icon and button text to 8 pt.
- Potentially increasing the font weight of text of a button (which would lead to making sure icons would look consistent)
Keep being awesome 👍🎉
You too!
i love these videos! it helps inspire me and even though i'm only doing my bachelor's degree it helps me realise i'm much better than i thought i was! damn imposter syndrome. i'd love more of these like you said in the email!
That's great! Knowing where you're at is the essential first step to get better, so if you feel like you're already at 4 then it should give you confidence on job interviews too and that can be huge! :)
Loved that you started playing with AI in your Image choices, looks sleek🔥
In some cases it can be cool to image something that doesn't exist :)
First of all, I love your content! (I'm a senior designer at a big tech.) There is just one thing I noticed: do I see correctly that you're not using Autolayout and are using groups and rectangles everywhere? I checked some other videos and it seems like it. I think a lot of folks look up to you - me included :), but giving them a bad example with groups and rectangles may give them bad habit they will struggle with in many companies and may be seen as a "level 1-3" redflag quite easily as well. Apart from the practicality of it (it makes correct spacing much easier), it also better aligns with how the apps or webs are actually built and it supports systemic and general layout thinking. Using Autolayout is also a crucial basis to building larger organisms, components and design systems correctly.
I am teaching people NOT to use auto layout FIRST and align optically - with their eyes. That is on purpose because they first need to know and understand how alignment works and be able to just SEE when something is wrong. However I am not against auto layout and it will be heavily covered in my next upcoming course.
My main point is that people shouldn't START with auto layout because it's not always perfect (but it did improve quite a bit recently) and once you're comfortable with seeing good layout automatically, then you can (and should) use the tools that are available and helpful :-)
(and for some projects we do 100% optical alignment so auto layout wouldn't work for it and we give nudge values to developers - sure, it takes longer to code and is more expensive but it pleases the crazy perfectionist inside of me ;-))
So long story short - AutoLayout should be used after there's already an "eye for spacing" trained :)
@@MalewiczHype Ah, now I see the didactic reason :) Thanks for the explanation and fair enough if it comes with that disclaimer. It's true that often juniors "don't mind" misalignments and I get your point getting manual (if they have guidance) may better imprint what's correct, didn't think of that reason :) On the other hand, I've seen people just getting used to using groups and rectangles (misaligned) and know from colleagues within community it's then quite hard to revert that habit and it's what they often struggle with with their junior colleagues. I myself opt to show Autolayout right away in my classes and put a red flag on rectangles and groups, but you just made me realise I could better explain and emphasise what is actually a good spacing :) I think most jobs won't have the luxury to create optically aligned designs and Autolayout is mostly required - but I completely understand your perfectionism, I also need to slightly close my eyes sometimes and convince myself not to break that autolayout to give that the pixel push to perfection :)
Thanks for your content and looking forward to more!
@@klarascholleova1546 Thank you! Yes, that's a tight balance always. But I will be covering auto layout heavily in the Boring UI Course part 2 this year, especially now with vertical trim also making its way into regular CSS (albeit slowly) :)
This is amazing honestly. Thanks for sharing. Is it ok to request for a video on how to pay extreme attention to detail when designing with maybe examples from web and mobile. I believe this can be a course creation opportunity (Maybe). All in all, you're amazing. + I just purchased two of your courses plus one free one.
Thanks for the support! I plan to add these videos (this is the 2nd one in the series) to all my courses as a free bonus and there is a plan to do these once a month with completely different scenario - for example in May we could do a complex web dashboard on five levels ;)
I feel keeping 1 or 2 quirks from the lower levels while keeping the rest of the design at a level 4 or 5 would really help designers stand out, and not make all designs look exactly the same. But it's as they say, learn the rules if you want to break them. ;)
I'm kinda between 3 and 4. I make very less mistakes but I feel my designs are boring. I work on redesigning old point of sale systems which focus on functionality over aesthetics, but because of that I feel stuck and don't find many "WOW" projects in my portfolio.
Boring is NOT bad! As long as every spacing, font scale and color works well with the rest of it it is a great design!
Doesn't need to be flashy! :)
Thank you for this amazing vedio, it was really helpful😍
My pleasure 😊
it gets really tough to overcome level 3 ! It feels frustrating some days
That's true - most desingers are on levels 2 and 3, but in a way getting from 3 to 4 is just remembering about these couple things every time - eventually it becomes natural.
Hi there! Here are my thought about some tweaks on lvl 5.
1. Make selected option “10Tb” also blue (I think it will make that fact that you can choose from these options more obvious)
2. Make indicator on a cart icon also blue, now it’s not emphasized enough in my opinion (maybe it has a sense to put number inside)
3. Make description of the product a little bit darker (darker than titles “storage” and “customize” or instead that make those titles brighter)
4. I don’t know why but I want to put background under “back” button and “cart” button too (just a circles with the same parameters as you used for description background)
5. In my opinion storage+customize+price and button it’s one logical element because when you choose different options you control the price so we need to connect them and put it onto one background.
Overall I think it’s a great job. I love the result ❤ :)
what font are you using for the large titles in your video? looks pretty nice, less letter spacing and geometric as well!
@Malewicz You told us that there were still bugs in level 5 so I looked for it and found some.
1. The title font could've been bolder for more hierarchy.
2. The description felt more like a promo for the product as opposed to the information about the product.
3. I feel like a small version of the images could've been added above the carousel-indicators so the users could just click on the images they want to view so they don't have to keep swiping until they find the image they need.
4. If it's a shopping app a feature I'd like to see is wishlist button because that's all the users do most of the time including myself :)
5. I also feel like the button title could've used some boldness to show that it's the primary button, I feel it's more right I guess.
These are some noob thoughts that occurred to me while deeply observing the design and some of them might be absurd as I am still learning, I actually had a lot of remarks in my mind but I decided to not post all of them and embarrass myself 🙂🙂
These might be UX remarks because I am a UX student as well :)
These are some potentially valid points. Generally the current version does work quite well, but there are definitely some things that may be worth experimenting with.
Шрифт Papyrus на кнопке задает стиль всему дизайну =)
Totally!
Whoa your new haircut looks slick
Thanks! It's all an experiment as my hair doesn't conform to any norms, just grows in all directions ;)
Great video!
1. Icons up top could be made more similar in size
2. Cart icons (on the top right and on the add cart button) need to be consistent and same size
3. “Add to cart” button is crowded. Consider removing one of the icons.
Thanks! Valid points, but in point 2 they actually don't necessarily need to be exact same size - it all depends on the context. But they do need to have the same style (line thickness / roundness)
@@MalewiczHype got it! I'm still learning...thank you for explaining!
Would love to know your review on the Shift Nudge course by Matt or MDS
Haven’t tried it 🤷♂️
I would say i COULD be a 5 but struggle with spacing. Getting the ideal spacing for creating hierarchy - I just seem to be a little off. I'd also like to really work with design systems and how to integrate them into work :)
It takes time and practice but don't worry, you'll get there
this video made me get my ass back to figma to design lmao
but the phones have such weird display sizes how do i use a proper grid there, they are like 393*852
Some nights I wake up at 3AM drenched in sweat wondering how many levels to UI Design they are. Now I know.
I was waking up at 2:55AM every night but since this happened I sleep like a baby.
If eating glass was a picture, the level 1 UI would be it
there are competitions in eating glass, with professionals from all over the globe participating ;)
I'm about level 4 and working on my first UI design job. But I don't like my company and looking for a better opportunity...
That's a great place to be! With those skills you should be able to find a better one easy :)
Hi Mike, any update on the daily challenges ? Really looking forward to it !
We're working on the platform still, but closer each day
@@MalewiczHype thanks 👍🏼
I've been designing for a very long time and my designs are similar to level 4-5. The issues you pointed out were very clear to me since the beginning, although I would say that they almost came intuitively. What striked me the most though was your last comment - "You are probably getting job offers already" - and that is unfortunately far from being the truth.
I presume one of the factor is location and not having the sharing portfolio pieces in the correct social app, perhaps like Dribble.
What do you recommend to indeed attract such clients?
I made a video a few months ago called "location based rejection" (or similarly) - I talk about it more there as of course the emplyability is very reliant on the legal part of things - but there are ways around it like e-citizenship :)
Love your videos man!
Here’s a question .. what if you feel you’re at level 4/5 in UI, but don’t have practical real world experience on any case studies..
What would you emphasize in a portfolio/resumé?
Real world is not necessary when you’re above lvl4 AND know how to present it well :) Focus on doing case studies that break down your attention to detail.
@@MalewiczHype Thanks dude!!
Lvl 5 🎉🎉 I think we can even make lvl 6 😅 but from experience, there's alawys a room for improvement, I've never met a designer that looked at his final, beautiful designed project and honeslty said this👏is👏perfect👏
Of course! There's likely a level 7 too where you also prototype some nice micro-interactions and make it animated, but generally above level 4 is a good spot to be - congrats :)
Hi @malewicz I am a huge fan of yours. can you create a tutorial on how to add spacing in figma like the one you're discussing in the video? It will be a great help since spacing plays an important role in UI design.
I actually added this into both the boring UI course and the most recent AI course :)
@@MalewiczHype which one do you recommend? I'm really interested to take one of your course and learn from your expertise. However, as someone who belongs to a marginalized group, it will be a big help if you can offer parity pricing. Implementing parity pricing in online courses can help to make education more accessible and affordable for learners in different regions, which can help to increase the reach and impact of the course. I understand that creating and maintaining course materials requires a lot of time and effort, however you should consider offering parity pricing too. I will try my best to save for one of your course, most probably the boring UI since it offers 20% discount. I'm a fan of yours since day 1, the day when I saw one of your video. Keep it up!
We do have a 30% discount for countries with an unfavorable exchange to the dollar, if you’re interested just email me :)
@@MalewiczHype I already sent an email to your youtube email under about section of your channel! I hope you consider it. Thanks a lot!
Hi Michal, great video as always!
I was wondering... My designs have no style at all, meaning when it comes to spacing and vertical hierarchy, and consistency in general I'm doing really good, but I feel like I'm mixing some Soft UI with some Glassmorphism, then it's flat, and so on.
I'm having such a hard knowing if my titles should be bold or not, because as soon as it's bold it's not NeuFlat anymore. I'm doing really well otherwise, which is why it's so frustrating.
Could you show us how you'd do each of the Design Styles you've shown in your book? Like in more details? I swear I'm ready to pay for that kind of content 😅
Thanks man, have a nice day!
That is actually a very good idea, I’ll plan a video like that soon :)
Thank God I am at level 5
Congrats, it's the place to be!
Hi Michal, thought of reaching out to you to ask if you know any After effects like animation tool. I just found out that Invision Studio no longer exists and some of the figma plugins like figmotion don't work too great. Thanks!
I mostly use HYPE (Mac only) by Tumult right now, as it has a couple of features that allow me to work incredibly fast + it exports to html5 if I need to put something on the web :)
@@MalewiczHype Never heard of it. Checking it out right away. Thank you!
Can you tell me what was the plugin u used for highlighting the spacing?
no plugin, created these by hand
Thanks
You're welcome! It may become a thing! :)
@@MalewiczHype ya i wont ever turn down free info like this ! cheers
Can you make a case study of this app UI - CRED. Thanks
You mean a review? At first glance it looks nice, but I definitely see some room for improvement there
@@MalewiczHype Thanks for the reply, Yes like a walk-trough/case study whatever you like.
Is it a popular app?
❤❤❤
I miss the tune at the end :(
Sadly it's all about pleasing the mighty algo ;)
i was on level five
Wait we went through this video before… or am i mistaken?
That other one was a lot less detailed, like a teaser. This is the real thing, VERY in depth :)
Level 1 - Michał, mówię Ci, w tym szaleństwie jest metoda 🙃
Na pewno! Najwiekszy fun mam wlasnie robiac levele 1 (i czasem 2) - za miesiac jakis dashboard webowy wiec bedzie dużo do popsucia :-)
I am right between level 4 & 5😂
Awesome! Congrats! :)
Missing the white hoodie #BringBackTheWhiteHoodie :)
No worries, it's coming back in the next video!
@@MalewiczHype 😃
dude im like lvl 7
Congrats, you must be a design lead then :)
Why wear black all of a sudden? 😂
It's a dark mode design :-)
I feel level 4 is much better, lolz
It's really not :) But it's not bad, will grab attention strong enough :)
@@MalewiczHype yeah that's why it's better lolz. Idk u r right ofcourse, just an opinion as it's really comfortable to the eyes, also i get to see only the important stuff, although u r right as I am just new to this field but a customer I would go for that design. Thanks for replying and have a great day. ❤️
@@MalewiczHype like I have used apps with 5 lvl UI designs, and I rarely opened up that app again, idk why it's that, may be i don't need that app for such long time period, but here's what I learnt, if I don't invest a certain time in the app, like I get everything so easily then I just use the app, don't stay on it for long, and then end up rarely using it again, idk if that's just me, lolz.
But still, You need to have a skill to create a horrible Design 😶😶
Yes! And it can be quite fun as long as you know that it's bad ;)
I think I can do better than Level 5 since I don't find the font very appealing, plus the product name should be slightly bolder, the price of the article at the bottom is not well-aligned with the button, it should be centered vertically.
The thing about you not finding the font very appealing or the lack of boldness is a personal preference though :) But these can be valid suggestions of course - we personally recently explore that particular font AND thinner, larger headings. The alignment can be fixed however. There is one more issue there that's also questionable :)
@@MalewiczHype thanks for your further explanation.
Great to see that I'm between 4 and 5 but I still think I need to learn so much more about ui tools and good taste after all 🥲
Thank you for this guide! Makes me feel a lot more confident, specially in this time searching for my first job as a ux/ui junior designer 🥵
Great! That level is a good place to be. Good taste comes with time, and UI tools aren't that important - a good designer can work in anything :)