How to NOT Suck at UI Design - April 2021

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...

[@Mizko]

14 Advanced Tips to Design FASTER in Figma 👉 kzbin.info/www/bejne/m3K1fZ58Z7Vpj5Y&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

[@nicklamela2294]

You vs the designer your client tells you not to worry about (Mizko)

[@Mizko]

Haha you deliver the lols every time 😂

[@jules7926]

Dribble designs are eye-catching but don't work in practice oftentimes. Love these UI videos, great content!

[@Mizko]

Thank you! It's a new month, so I need to drop another one :)

[@favouruche2468]

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.

[@steliospapadopoulos4099]

Helpful tips for new designers (the one with the keyboard helped me and change my perspective of thinking). Thanks, Mizko!

[@Mizko]

🔥

[@aparnakumar9917]

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. :)

[@Mizko]

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.

[@jatinraj4974]

I can't thank you more mizko. Learned a lot from you🔥🔥👍

[@Mizko]

Grateful for you watching too ✨

[@ajaym6795]

Thank you for the valuable information you've provided thus far. I'm going to add your channel to my featured channels list.

[@Mizko]

Thank you so much! Honoured!

[@kehltales4956]

As a beginner, sometimes i used gradient dark and white so that text will be seen whatever color does photo have

[@Mizko]

Let me know, how many did you guess right? 😉

[@itsvaleria]

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) 😆

[@itsvaleria]

Thank you for the video! It was awesome help!

[@juliastup]

I spotted more UX mistakes that were more visible than UI ones. Great video!

[@TheExplosion]

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!

[@blacklightiteh5052]

You are great, I learn this all with 42. Thank you for sharing your knowledge. 😘

[@Mizko]

Design is for everyone :) Never too old for this career.

[@xFZYEDITS]

Love your content buddy! Thanks for spreading your knowdlge :)

[@Mizko]

Anytime :)

[@sajidmoinuddin5424]

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. :)

[@gabrielcameron]

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.

[@captteemo9133]

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.

[@pranavichitti5534]

Another great video from the UX Ninja Master. 👀🔥

[@Mizko]

Thank you! 🥷

[@melissat9037]

Your videos are awesome, keep them coming!

[@Mizko]

Thank you Mel 🔥 Thanks for the kind comments

[@charisaemmanuel5969]

Thank you so much for this! Highly appreciated...

[@julianbeing]

Hey Mizko, Your content is pure value. Keep pushing, your channel is going to blow up! :)

[@Mizko]

Really appreciate the kind words Julian! Thank you! 🔥

[@Carlos-dm5fo]

wow this helped a lot! i just started learning yesterday. thank you for the advice!

[@Mizko]

✌️

[@noorulabedin9775]

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.

[@stacyfeel]

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🤩

[@StephLiew]

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!

[@abhishekchaubey1471]

Helpful and needed tips.

[@Mizko]

Thank you!

[@jameshskim]

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!

[@themegarockerman]

I loved this, was really helpful, would love to see more videos of you fixing bad designs

[@nseckinoral]

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.

[@HighOnKoffee]

Hey! Amazing tips n tricks buddy!

[@randomramyeon4209]

I gently smashed the like button as you say.

[@playpiano2264]

Broh please create a video on alignment and consistency please 🙏🏼

[@Mizko]

Done!

[@KathBorup]

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.

[@aydemironur35]

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.

[@fastertrackcreative]

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.

[@pynbhalangsohtun8479]

Thanks for the tips mizko really appreciate it

[@Mizko]

🙏🏼🙏🏼🙏🏼

[@hansulibakshi9303]

Your contents are amazing. Another very helpful one. Thanks much for this.

[@Mizko]

Thank you Hansuli Really appreciate the comment. Keep them coming!

[@tomassafar2806]

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

[@Mizko]

Thanks for pointing that out Tomas

[@diademrocks]

This was very helpful for me!! Thank you :) I would love it if this were a series and you made more videos like this!

[@maansibislam977]

I've probably watched every videos of you and they are reallyyy helpful THANKS!

[@culsonlandon9346]

Great video Mizko! Very helpful refresher

[@emmaandlynn]

Thank you so much for the very practical tips!! UI = Detail Matters. I am pushing the "Like" button!!

[@VladCristeaYT]

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".

[@andrew_to]

Great video. These tips was very useful.

[@Mizko]

Thank you Andrew!

[@sonaligupta9703]

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.

[@goukigod]

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

[@r8teful]

These where some great tips Mizko, awesome video 🥰

[@zahidkaragoz3395]

I love your contents 🌟🌟

[@Mizko]

Thank you Zahid! Glad you find this useful

[@susangoodwin7419]

These are great! Super helpful, keep it up!

[@roter13]

I need you as my mentor!!

[@Mizko]

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

[@vishaldeshwal8289]

Amazing videos bro. 👍👍

[@anirudhsinghrathore5584]

Sir You misspelled "Re-enter", This video is a proof That my whole life was a Joke 😂😂😂😂. Thanks Man 🔥🔥🔥🔥😌

[@vaibhavnamburi2756]

Great video

[@Mizko]

Thanks V!

[@nathan-sg7cu]

I thought you were gonna mention accessibility, and the bad 'Form' design practice of that 'Stay Secure' screen, but whatever I'm a nobody. 🤣

[@camilayamada1915]

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.

[@udaytiwari5695]

6:31 what do you think about the contrast of the boxes with the background , I felt like the contrast should have been higher .

[@andia6865]

Good tips

[@megzi___9398]

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

[@miqdamsajid875]

Really valuable... thanks For ur question, I got 3 of them right

[@pawanguptatwin]

#4th, 9:02.In this Design texts are not aligned (like: Account info, personal details and first name)

[@Bender0330]

This video does NOT suck

[@Mizko]

Scared me for a second. Happy to hear it does NOT suck 😂

[@Foxygrandpa2131]

lol none of these designs suck but these were still important improvements

[@Mizko]

Thank you!

[@satyajitghoshal3176]

When I should start freelancing?? I mean when I know that I am able take responsibility of others work?

[@AkinsRealm]

Thanks for another great video!

[@Mizko]

Thank you!

[@tausifdeshmukh3830]

bro your information is to good. 👌can you makes videos on Adobe Xd. and micro animation..

[@Mizko]

Hm. I haven’t used XD in a long time. I wonder if I should pick it back up again!

[@tausifdeshmukh3830]

@@Mizko yes please do that.. 😃🤞🏻

[@Cuminbeef]

would you considering put all the input boxes in one column so users can read faster in the 3rd example?

[@LeithBrownbmindful]

Hey love the videos. Can I embed CSS from elsewhere (Sketch, etc) into Figma to create a design or even an interaction?

[@ismailtajudeen805]

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!

[@gibby132]

You can search for ios keyboard in the Figma community resources :)

[@ismailtajudeen805]

@@gibby132 Thanks Alex.

[@yashkanbargi]

🙌🏼🙌🏼🙌🏼

[@MrMoromoro87]

Thanks for the tips !! Are you considering launching a design system exclusively for mobile devices?

[@Mizko]

😉 we are working on iOS right now

[@bundybeamiana949]

Since Dribbble designs can sometimes be misleading for UI designers, I was wondering if you have any other design inspo recommendations

[@redsquad4one641]

So what's on my mind for a while now: How do you avoid subjectivity within UI design (besides accessibility standards, WCAG 2.0)?

[@thepilot7612]

You can reduce the subjectivity of a product’s goal through design principals, team brainstorming, and user research.

[@jamiepowl3983]

I am a CEO and thought I should see if my designers suck or not lol...

[@Mizko]

Haha! Love it

[@Saasou]

amzziingg

[@merisimamovic965]

The Bruce Lee of Design

[@Mizko]

What’s Bruce Lee’s favourite drink? WATAAA

[@pranavforyou695]

make more tutorials on - How to NOT Suck at UI Design-2,3,4,5,6,7.........999

[@MrMoromoro87]

Are captions on the form UI or UX enhancements? I always get confused between what is UI or UX in those cases.

[@Mizko]

What do you mean by caption?

[@MrMoromoro87]

@@Mizko the titles you added above the inputs

[@Mizko]

@@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 😉

[@MrMoromoro87]

@@Mizko that’s it ja ja ja form labels!! XD

[@joshuaomoijiade6627]

Sigh I didn't see them

[@Mizko]

Now you will :)

[@meowzers4380]

damn i suck 😵

[@butbutmybutt]

I can do soup 👌

[@hadiaradi9]

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.

[@Mizko]

Thank you Hadi! I’ll try check my DMs there are a lot of messages

[@hadiaradi9]

@@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 🙏🏻

[@cesarghful]

Crack

[@OpleidingTV]

Great, we loved your video! We’ve just posted a video about UI Design on our channel. Check it out! 😊

[@SamSquids]

Simple: just don't make modern UIs. Modern UI designers are hack frauds and the UIs of old are ten times better.