Love the final design. A few details I would change: - Skeuomorphic button doesn't fit the rest of the vibe to me, maybe a bit flatter with a gradient or subtle shadow to help it still pop - Change "2543 ratings" to "2.5K ratings" - Tighten up the main header line spacing
@@MalewiczHypeonly part that gave me pause is the inverted rounded corners of the white background around the title, but then I remembered the old transparent pseudo element with a box-shadow trick. Everything else is grids, gaps, transforms (and GSAP). Thanks for taking the time to show the progression 👏
You code the first level, let me code the level 5. We will see who can produce lesser css 😂😂😂. The consistency in the level 5 would helps in the code a lot, especially if you know how to leverage css inherit.
By following these steps when designing, even though they're simple - they make a big difference! I'm referring to them as a part of the design fundamentals. ✨🙌🏼
Wow, what an incredibly informative video on UI/UX! I found the information here really valuable and cool. It's amazing how it breaks down complex concepts in such an understandable way. Kudos to the creator for putting this together!
I was developing a design with different spacings all around. yes, it was painful. it would be much more easier to develop if all elements had a consistent spacing system.
Would have loved to see you start with level 1, then fix it until level 2, then fix that until level 3 etc. please please please as a mobile engineer this would help me so much
@@MalewiczHype what I meant is instead of talking about it in theory in each level, say "we started with level one, these are the items I fixed to make it level 2" then go all the way to 5. That way I can see how you prioritize and optimize designs along the path to greatness
After a year watching your channel Thanks God I can say lvl 5 here, would be nice to see from your POV Michal what come next after 5+ lvl. I know is where wild and super animated websites are all about (like awwards) I'd love to see a video of how get there and the tools we need to learn too for their development (framer,webflow,etc)
Hello Malewicz, thank you for sharing these valuable insights. I will make sure to pay attention to the color palettes in any pictures I use for my designs going forward. Lastly, I've noticed that you often emphasize the importance of checking for typos, but I couldn't help but notice a small typo in one of your impressive designs. Does that mean the design is not worthy of a second look?
I hate it when it's so hard to remember all these graphic design principles as I am having trouble visualize and think about all the checks. HOW do we divide and conquer in design? A gorgeous birthday cake looks daunting but you first start with flour which is simple. I am not a graphic designer but I do know how to look for inspirational works to copy and I do have some sense of balance and flow. I think the BEST way to divide and conquer a design is to start with a basic mission accomplished wireframe. No thrills no pizzaz just a blueprint. Then design with flat color and layout things safe using a picture and a paragraph that is safe checking for color, shape and sizes. Mission accomplished that is it'll work and users will have an easy time using the UI. But it's boring. Dress it up little by little as it's easier to build up than to see what's wrong with it and reduce. Keep checking your inspirational samples on your Mood Board. The main thing is flow, spacing and consistency. I wouldn't try to make a graphic design UI and place it onto my portfolio as it's TOO DAMN RISKY! I would play it safe grids and all just the mechanics with a little contemporary style so not to have your work look boring. An employer can forgive a little boring but not something that looks exciting and is a real mess. Why do you want to put a person there? Why do you want to place images all over? What does all of that even mean? If you're not a graphic designer then you won't understand it. Play it safe! If you want to take a big risk in adding graphic design then watch a RUclips video on how to make a good landing page about interior design. No one has the time to get a separate degree in Graphic Design in order to get a UI UX Designer job.
You see, I love this type of video. I learn so much by just watching it. For me, I'd rather change this button. I really don't think this fits the actual design, seems odd to me. Besides that, I'd love to ask you to make videos about how can we make these designs, you know? Like this one, I'm really interested in bento grids right now, but I can't find a single video teaching it step by step. Tysm for the content!
Please, can someone tell me the white rounded background box behind the title text with the border radius and inverted border radius, how can that be made in css ( in development ) .. shown in level 5 .. 7:50
That's the idea - and what's more important is to not even try to do all at once but improve gradually element by element. I've noticed this helps people the most!
Level 5 here I come! It’s nice to see someone talk about breaking the rules and follow the 20px paddings instead of 24 etc. little things but those count!
There is more than one set of rules - we rarely use a full 8-point grid in our client designs, but at some stages it's simply easier to align to a grid instead of using "feeling" :)
Yes, that's one of those extra things I hoped people would notice because at early stages it's also very important to communicate and the truth is 99% of the copy work is also done by designers ;)
@@MalewiczHype Hey Sir I love the uniform spacing and the dress colour is one thing is really amazing Great stuff from a Great one👌😉 Thanks for your guidance sir
video focuses on UI but I think there are 2 UX mistakes - we dont know which section is active - none of them has active status in navbar. New rating bar - the stars have gray color which looks like something disabled - its totally full or totally empty? Correct spacing in navbar is quiet obvious tip - thats level 4 or 5? I think its rather level 2 its literally one button in figma. Anyway cool design thanks for nice tips and making nice educational content
The spacing consistency is important, yet the way you measure them between the texts on the left seems a bit flawed: *baseline* and *em* is not how the space is measured on the web or prototyping tools. It would be more proper to outline actual blocks and measure the distance between those.
Thank you. Your videos have really helped me in my design journey, and I enjoy the way you explain each subject. Can you do a video on the similarities and differences between designing a home page and other content pages, please?
Love the final design. A few details I would change:
- Skeuomorphic button doesn't fit the rest of the vibe to me, maybe a bit flatter with a gradient or subtle shadow to help it still pop
- Change "2543 ratings" to "2.5K ratings"
- Tighten up the main header line spacing
That the point of the cta to stand out
level zero - just starting out - good content sir
level 0 is the easiest to grow from 🫡
Good follow up video might be on converting this design to tablet and mobile? I see a lot of people failing on this step.
RIP the developers who have to implement the final design..
I can code it myself easy, with animations. Frontend is a piece of cake when you can see design for what it is 🫡
@@MalewiczHypeonly part that gave me pause is the inverted rounded corners of the white background around the title, but then I remembered the old transparent pseudo element with a box-shadow trick. Everything else is grids, gaps, transforms (and GSAP).
Thanks for taking the time to show the progression 👏
You code the first level, let me code the level 5. We will see who can produce lesser css 😂😂😂. The consistency in the level 5 would helps in the code a lot, especially if you know how to leverage css inherit.
By following these steps when designing, even though they're simple - they make a big difference! I'm referring to them as a part of the design fundamentals. ✨🙌🏼
Thank you! That's exactly my goal to break down the complexity into simple steps as usually a handful of actions make the biggest difference! :)
7:19 what tool are you using to change the color ?
Isn't a tool. It's a good use of the pen tool and the blending mode of the mask in front of the image.
It seems like Sketch has updated its UI!
Wow, what an incredibly informative video on UI/UX! I found the information here really valuable and cool. It's amazing how it breaks down complex concepts in such an understandable way. Kudos to the creator for putting this together!
I love the progression and how little things make a big difference. I'd say I'm at Level 3 now. Working towards a 5
Great, when you established your current level it's only up from here!
I was developing a design with different spacings all around. yes, it was painful. it would be much more easier to develop if all elements had a consistent spacing system.
Would have loved to see you start with level 1, then fix it until level 2, then fix that until level 3 etc. please please please as a mobile engineer this would help me so much
I usually alternate between how we start - some of these start at level 1 , some at level 5 so next one should probably be the other way around :)
@@MalewiczHype what I meant is instead of talking about it in theory in each level, say "we started with level one, these are the items I fixed to make it level 2" then go all the way to 5. That way I can see how you prioritize and optimize designs along the path to greatness
Definitely feel like my mobile level is higher than my web level... Next month it's time to get started on a couple of those courses.
Web is cool to know as not many people learn it 🫡
Thank youuuu ❤❤❤
And have a beautiful day 🙌🙌
You too!
After a year watching your channel Thanks God I can say lvl 5 here, would be nice to see from your POV Michal what come next after 5+ lvl. I know is where wild and super animated websites are all about (like awwards) I'd love to see a video of how get there and the tools we need to learn too for their development (framer,webflow,etc)
Hello Malewicz, thank you for sharing these valuable insights. I will make sure to pay attention to the color palettes in any pictures I use for my designs going forward. Lastly, I've noticed that you often emphasize the importance of checking for typos, but I couldn't help but notice a small typo in one of your impressive designs. Does that mean the design is not worthy of a second look?
I hate it when it's so hard to remember all these graphic design principles as I am having trouble visualize and think about all the checks. HOW do we divide and conquer in design? A gorgeous birthday cake looks daunting but you first start with flour which is simple. I am not a graphic designer but I do know how to look for inspirational works to copy and I do have some sense of balance and flow.
I think the BEST way to divide and conquer a design is to start with a basic mission accomplished wireframe. No thrills no pizzaz just a blueprint. Then design with flat color and layout things safe using a picture and a paragraph that is safe checking for color, shape and sizes. Mission accomplished that is it'll work and users will have an easy time using the UI. But it's boring. Dress it up little by little as it's easier to build up than to see what's wrong with it and reduce.
Keep checking your inspirational samples on your Mood Board. The main thing is flow, spacing and consistency.
I wouldn't try to make a graphic design UI and place it onto my portfolio as it's TOO DAMN RISKY! I would play it safe grids and all just the mechanics with a little contemporary style so not to have your work look boring.
An employer can forgive a little boring but not something that looks exciting and is a real mess. Why do you want to put a person there? Why do you want to place images all over? What does all of that even mean? If you're not a graphic designer then you won't understand it. Play it safe!
If you want to take a big risk in adding graphic design then watch a RUclips video on how to make a good landing page about interior design. No one has the time to get a separate degree in Graphic Design in order to get a UI UX Designer job.
Thanks for the video! I wonder what Typeface is being used for Heading?
You see, I love this type of video. I learn so much by just watching it. For me, I'd rather change this button. I really don't think this fits the actual design, seems odd to me.
Besides that, I'd love to ask you to make videos about how can we make these designs, you know? Like this one, I'm really interested in bento grids right now, but I can't find a single video teaching it step by step. Tysm for the content!
Please, can someone tell me the white rounded background box behind the title text with the border radius and inverted border radius, how can that be made in css ( in development ) .. shown in level 5 .. 7:50
Hi Michal, any update on alternative ways of payments that dont require Credit cards for Indians here? thanks
I like the orange CTA from 6:26. Is that a gradient, an inner shadow, and a drop shadow?
I love these videos!
The better it does the more I’ll do 😀
i am at level 3 at design and while on lvl 3 i am a full stack developer manage front end and backend on my own
Thank you!
Always! 🙌
I really like the simple steps someone can follow and improve quickly.
That's the idea - and what's more important is to not even try to do all at once but improve gradually element by element. I've noticed this helps people the most!
level 1 looks like the old wild internet of the '90/early '00
Level 5 here I come! It’s nice to see someone talk about breaking the rules and follow the 20px paddings instead of 24 etc. little things but those count!
There is more than one set of rules - we rarely use a full 8-point grid in our client designs, but at some stages it's simply easier to align to a grid instead of using "feeling" :)
Great video as always. Thank you for all of your knowledge. I recently bought one of your course and i'm so excited to try it out.
Thank you for the support! I hope to do more of these breakdowns in the coming months :)
Great video with helpful tips.
Glad it was helpful! More to come!
7:26 how to make our figma app look like yours
Great video! I also noticed the copyright changed at level 5 and is so much more professional.
Yes, that's one of those extra things I hoped people would notice because at early stages it's also very important to communicate and the truth is 99% of the copy work is also done by designers ;)
Always thanks! It really helped
Glad to hear it! Which part did you like the most?
@@MalewiczHype
Hey Sir I love the uniform spacing and the dress colour is one thing is really amazing
Great stuff from a Great one👌😉
Thanks for your guidance sir
@@MalewiczHypeThe way you changed the color of the sweater for balance and harmony instead of just changing another photo is great! :)
So much attention to detail designing... but then the dev butchers it hahaha
I can code frontend so I know how to tell devs they’re lazy 😂
that strawman layout didnt stand a chance xD
What is this design style called?
video focuses on UI but I think there are 2 UX mistakes - we dont know which section is active - none of them has active status in navbar. New rating bar - the stars have gray color which looks like something disabled - its totally full or totally empty? Correct spacing in navbar is quiet obvious tip - thats level 4 or 5? I think its rather level 2 its literally one button in figma. Anyway cool design thanks for nice tips and making nice educational content
@Malewicz 6:15 you forgot about different colour under the text/photo and background :)
The spacing consistency is important, yet the way you measure them between the texts on the left seems a bit flawed: *baseline* and *em* is not how the space is measured on the web or prototyping tools. It would be more proper to outline actual blocks and measure the distance between those.
Thank you. Your videos have really helped me in my design journey, and I enjoy the way you explain each subject. Can you do a video on the similarities and differences between designing a home page and other content pages, please?
thank you .. i hope increase the videos from this series
One a month - yes.
Always love your content..
And the intro..never the same, never boring 😄😀
How did you create this animation at 9:44? The mockup and animation look amazing ✨
I am on lvl 3 but my problem is with colour it's hard to understand them and implement it in design
you are The God Father of UX industry....superb 😍
Love you sir!
You are the greatest!
I’m blushing ☺️ 🫡
Wow!
Thanks for the advices Malewicz
Thank you! This type of video is super helpful
Just back from vacation and a thumb up! 🙌
0
Great video. ❤❤❤Thanks a lot.
Malewicz, muito obrigado por me fazer um designer iniciante, se tornar melhor a cada dia com suas aulas claras e esclarecedoras.
No hoodie… No hired!!! ;)
In our company - definitely!