How to NOT Suck at UI Design - April 2021
HTML-код
- Опубликовано: 28 сен 2024
- My Ultimate Figma Design Masterclass (1,800+ students. 90+ Videos. 10+ hours.) 👉 thedesignershi...
Shipfaster UI - Advanced Figma Design System (1,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets) 👉thedesignershi...
Sign up to my newsletter for exclusive content:
mizko.net/news...
Follow me on IG (Daily updates):
/ themizko
===
🔗 Links
Personal portfolio: mizko.net
Instagram: / themizko
LinkedIn: / mizko
Twitter: / mizko
Level up with all my design courses and resources: thedesignershi...
![Yailin La Mas Viral, @kreizyk.official - Dale 2 (Remix) [Video Oficial]](http://i.ytimg.com/vi/JaYHBzgqz94/mqdefault.jpg)
14 Advanced Tips to Design FASTER in Figma 👉 ruclips.net/video/eARLkF2P6Y4/видео.html&t
Speed up and supercharge your design process with my Figma Design System 👉 gum.co/figma-design-system-td (Get $10 OFF - youtube-10)
Yours truly,
Mizko
You vs the designer your client tells you not to worry about (Mizko)
Haha you deliver the lols every time 😂
Thank you so much for confirming my doubts, I'm a beginner UI designer and I always thought that dribbble designs are not the best for the real world, I come from a background of development and when I see all the impractical UI's that are overly flashy on dribbble, I just lose it and go into the circle of "should I design like those?". Great video!
I can't thank you more mizko. Learned a lot from you🔥🔥👍
Grateful for you watching too ✨
Good tips! The the quiz style is a great touch to engage us and have us think and apply knowledge.
A couple of additional form improvements:
1) Stack form fields in single column
2) You may also separate the form into multiple steps
Not nitpicking, just sharing these suggestions as a way of applying my learnings.
Thanks for your tipps, regarding:
A) It is good practice to orient the order on postcards etc (sth. of the real world / thst has been already learnt). Especially if it's name and last name, so you can write it down as usual on one line.
To add something for Mizko here too: Regarding consistency, he should name it "Email" or "Email address", not both.
Loving this quiz format! Mizko, what’s your take on whether form fields should be a) outlined for accessibility and b) void of placeholder text, to draw the eyes to the empty form fields. (With the exception of ‘Please select...’ in a dropdown). I’m always tempted to create beautiful minimal fields but then, #a11y!
very insightful tips in this video, but that lack of contrast on the form fields was a downer! I thought you will fix that too. but good informative content. love it! I'll do the masterclass very soon. :)
Your videos are awesome, keep them coming!
Thank you Mel 🔥 Thanks for the kind comments
Showing keyboard is really good idea which i never noticed thanks :) How devs know there is a input without there is keyboard/tool for input.
I loved this, was really helpful, would love to see more videos of you fixing bad designs
Hey! Amazing tips n tricks buddy!
Broh please create a video on alignment and consistency please 🙏🏼
Done!
Great video Mizko! Very helpful refresher
Hey, I have to say I really like dribbble and the concept behind it. I don't think you should "copy" what you see there, I think you should only get inspired. It is exactly like a concept car. They are beautiful and their only purpose is to innovate, to go just a little outside of what is "normal".
Thank you so much for the very practical tips!! UI = Detail Matters. I am pushing the "Like" button!!
For the first example can a dark overlay on the image be executed so the user can not only see the image but also read the text no matter how bright the image is
Great video. These tips was very useful.
Thank you Andrew!
These are great! Super helpful, keep it up!
I love your contents 🌟🌟
Thank you Zahid! Glad you find this useful
Since Dribbble designs can sometimes be misleading for UI designers, I was wondering if you have any other design inspo recommendations
I thought you were gonna mention accessibility, and the bad 'Form' design practice of that 'Stay Secure' screen, but whatever I'm a nobody.
🤣
Sir You misspelled "Re-enter", This video is a proof That my whole life was a Joke 😂😂😂😂. Thanks Man 🔥🔥🔥🔥😌
Thanks for another great video!
Thank you!
Are captions on the form UI or UX enhancements? I always get confused between what is UI or UX in those cases.
What do you mean by caption?
@@Mizko the titles you added above the inputs
@@MrMoromoro87 ah! Form labels. People remove them and try get fancy with how they interact etc. Labels are 100% accessible and anything fancy and interactive starts to become difficult to maintain.
Labels don’t “look” the nicest but they do a fine job on telling the user what the input is about. Quick to scan aswell.
People debate about this all the time. My stance is if it works, don’t re-invent it. We have bigger fish to fry 😉
@@Mizko that’s it ja ja ja form labels!! XD
🙌🏼🙌🏼🙌🏼
would you considering put all the input boxes in one column so users can read faster in the 3rd example?
Hello. Your content is so amazing and helpful.. the information u share is hard to find.. i just dont know how to thank u 🙏🏻 ❤️.. btw i sent u the same message on Instagram incase u didnt c it.
Thank you Hadi! I’ll try check my DMs there are a lot of messages
@@Mizko 🙏🏻 🙏🏻 keep up the great content man 🙏🏻 ❤️ i will make sure to tag u in my posts just so u see the great impacts u did and how u motivated me brother 🙏🏻
Crack
Simple: just don't make modern UIs. Modern UI designers are hack frauds and the UIs of old are ten times better.
I can do soup 👌
Let me know, how many did you guess right? 😉
The alignment I got right and the text over the photo failed accessibility but I need more practice! I’ve gone over so many of these examples previously but I seem to forget them when I’m put under pressure of “time/taking a sip) 😆
Thank you for the video! It was awesome help!
I spotted more UX mistakes that were more visible than UI ones. Great video!
I also thought that the text fills should have more contrast. Whether having a slightly darker text field background colour or having a boarder with a soft grey colour.
By the way, I just want to say thank you for sharing your passion and knowledge with the world. I'm a late bloomer that recently transitioned into product design, and I'm learning so much from you. Oh! Let me know if I can help you to grow your design system in Figma. I've been building a design system for a startup company and I've also been using auto layout ever since it came out haha. Building a design system is time consuming and tedious work, but I can help to ease that load a bit :) Let me know Mizko, I sent you an email to your business email!
When I should start freelancing?? I mean when I know that I am able take responsibility of others work?
I think you missed out one pretty common UX mistake on the form design,.. the placeholders should not be there at all in this case, like you dont have to explain anyone what a first name means
Thanks for pointing that out Tomas
Dribble designs are eye-catching but don't work in practice oftentimes. Love these UI videos, great content!
Thank you! It's a new month, so I need to drop another one :)
Love your content buddy! Thanks for spreading your knowdlge :)
Anytime :)
As a design newbie, your channel has been a life saver for me. I've learnt so much. Thank you for having such an amazing teaching style.
I need you as my mentor!!
Thank you Roter! Join my exclusive designer community if you're looking for mentorship and a small community to be part of - thedesignership.com/pro
Helpful tips for new designers (the one with the keyboard helped me and change my perspective of thinking). Thanks, Mizko!
🔥
lol none of these designs suck but these were still important improvements
Thank you!
Thank you for the valuable information you've provided thus far. I'm going to add your channel to my featured channels list.
Thank you so much! Honoured!
Another great video from the UX Ninja Master. 👀🔥
Thank you! 🥷
You are great, I learn this all with 42. Thank you for sharing your knowledge. 😘
Design is for everyone :) Never too old for this career.
I am a CEO and thought I should see if my designers suck or not lol...
Haha! Love it
Great video
Thanks V!
Ooh! I love your videos. Just getting started on transitioning from architecture to UX design. You're one of the few youtubers whose contents I've been bingeing on, and you are definitely my favorite! Your videos are so well-structured, easy to understand and packed with information. :)
Thank you Aparna! Lots of people transitioning from Architecture. Best of luck and I'll be here to help with as many videos as I can.
This video does NOT suck
Scared me for a second. Happy to hear it does NOT suck 😂
Helpful and needed tips.
Thank you!
The Bruce Lee of Design
What’s Bruce Lee’s favourite drink? WATAAA
Sigh I didn't see them
Now you will :)
Hey Mizko,
Your content is pure value. Keep pushing, your channel is going to blow up! :)
Really appreciate the kind words Julian! Thank you! 🔥
bro your information is to good. 👌can you makes videos on Adobe Xd. and micro animation..
Hm. I haven’t used XD in a long time. I wonder if I should pick it back up again!
@@Mizko yes please do that.. 😃🤞🏻
make more tutorials on - How to NOT Suck at UI Design-2,3,4,5,6,7.........999
Great, we loved your video! We’ve just posted a video about UI Design on our channel. Check it out! 😊
Hey!! I get to learn so much from you. Thank you so much. Could you please create a website design on Figma considering all the factors in mind. From the start till the end. What should be the icon size, how to maintain consistency, typography. I have been struggling in creating a consistent website and it's just too painful. At least for me.
Thank you so much for this! Highly appreciated...
Hey love the videos. Can I embed CSS from elsewhere (Sketch, etc) into Figma to create a design or even an interaction?
6:31 what do you think about the contrast of the boxes with the background , I felt like the contrast should have been higher .
4:55 here comes the Hicks law
Decrease the number of options and break down bigger tasks into smaller chunks or parts for the user.
#4th, 9:02.In this Design texts are not aligned (like: Account info, personal details and first name)
Amazing videos bro. 👍👍
The first issue that stands out with the UI design at 9:34 is that the text appears to be swimming in bright white, hard to read. User's looking at a light pretty much.
I think overusing placeholder text is another common mistake in form design. If the label says “Re-enter new password”, placeholder text that says “re-enter password” or “Renter password” ;) is superfluous
As a beginner, sometimes i used gradient dark and white so that text will be seen whatever color does photo have
I gently smashed the like button as you say.
damn i suck 😵
Good tips
amzziingg
Thanks for the tips !! Are you considering launching a design system exclusively for mobile devices?
😉 we are working on iOS right now
Your contents are amazing. Another very helpful one. Thanks much for this.
Thank you Hansuli Really appreciate the comment. Keep them coming!
wow this helped a lot! i just started learning yesterday. thank you for the advice!
✌️
Thanks for the tips mizko really appreciate it
🙏🏼🙏🏼🙏🏼
Yes alignment! Another one is being considerate when you create a new component or variation! You should ask is it necessary to introduce a component that is already similar to exisiting ones? I notice some designers reinvent the wheel too often. A component should also work in a variety of contexts.
These where some great tips Mizko, awesome video 🥰
Amazing tips indeed! Congrats, perfect video like always.
Mizko saying smash the like button reminds me the video from Nigelng as Ungle Roger "smash the like button like asian parents smash their children" It makes me laugh a lot lol.
As a novice in design sometimes I feel lost and can’t understand what’s wrong with my design for a long time. This video was really beneficial. Thanks a million for such valuable information🤩
I've probably watched every videos of you and they are reallyyy helpful THANKS!
Really valuable... thanks
For ur question, I got 3 of them right
This was very helpful for me!! Thank you :) I would love it if this were a series and you made more videos like this!
So what's on my mind for a while now: How do you avoid subjectivity within UI design (besides accessibility standards, WCAG 2.0)?
You can reduce the subjectivity of a product’s goal through design principals, team brainstorming, and user research.
Thank you Mizko. I see one of your screens had a keypad. Could you do a video on how to design an ios keypad or probably point me to a resource for that? Thanks!
You can search for ios keyboard in the Figma community resources :)
@@gibby132 Thanks Alex.
Nice tips dude.
I really thought you were going to address the lack of contrast on #4 when you asked what would annoy you :)
I assume it's because of the processing of the video but just to let you know, input color is almost as light as the background which makes them barely visible.