5 Uncommon UI Design Tips | Part 1

[@fraserembrey5676]

0:13 Harmonious colour with HSL slider 2:41 Perfect length copy 4:38 Heading semantics 8:29 Consistent spacing 10:28 Rule of thirds

[@Mizko]

Appreciate this Fraser! I forgot to include it. Pinning your comment for contributing to a great cause 🙏🏼

[@fqras]

The harmonious colours is a good one. Thanks. For text lengt I just remember one thing: 12 words. This tip also works for full screen websites where 75% would be too wide.

[@deytroy8612]

Never had the idea of the text length and compacting the text in a page... Great job always ...

[@Mizko]

Thanks Dey!

[@arianecarvajal7326]

I really enjoyed the examples you showed us, it's easier to learn and to see the improvements

[@hellofath]

The semantic headings is gold information. It’s new to me and thank you for sharing!

[@Mizko]

Thank you!

[@uxalok]

Man oh man, they are really some of good uncommon tips for sure Being a FT UX/UI designer I hardly knew 2...3 tips of 'em Thanks 💪mizko

[@Mizko]

Thank you Alok!

[@Mizko]

If you missed last week's video, I'd highly suggest you check out the following video. I spent $80,000 on a new office (Life update) 👉kzbin.info/www/bejne/g5iTk6xtnrKBfJY Yours truly, Mizko

[@knapkinn]

Only took 2 tips to subscribe, love the detail and breakdowns you give!

[@boxoffisa]

This guy is a wonderful teacher. I subbed. Keep em coming.

[@aydemironur35]

When you said rule of thirds i thought you will teach the photo placement trick but you got me again :) nice tips ty so much Mizko ❤️

[@Mizko]

Haha! Onur :)

[@uicheetah]

Newbee here all the things were new for me. Thanks a bunch mentor. May God bless u

[@princhipehdesigns5922]

Some amazing great tips in this video. Love the Rule of thirds, its something I always done and nice to get some validation for such decision

[@LucasPiresApps]

Omg, this content is superb! Thank you so much for this 🔥

[@primalscream40]

Perfect length of copy. Thanks for that tip. 👍

[@Mizko]

Appreciate it!

[@spindext]

I like the rule of thirds tip!

[@Mizko]

Thanks!

[@jcyrilyee]

Great text length tip! Is there a plugin to enable that green area? In webflow, I’d generally make the max width of the text to around 60 ch.

[@Mizko]

No there isn't a plugin, but it's actually based on 50-75 characters not %. My mind slipped when I was explaining.

[@karimemad8869]

@@Mizko so how can i make this green grid?! for example?

[@amirivno9801]

great mizko learned a lot

[@omneyashawky2210]

Super informative !!! keep going

[@njengathegeek]

Nice vid Mizko, when it comes to color theory, it's a nightmare to me, nice to see you touched something in relation to that

[@Mizko]

Thank you Chris! Glad you enjoyed it.

[@SinaNouri21]

Thank you, plz share more like this 😘

[@Mizko]

Ah! It seems people really enjoyed this. I'll continue this series :)

[@lanxnguyen3632]

The heading semantics section is gold. I'm not sure if just me or not, but I always run into this problem. If I pick H3, it seems too bold but H4 is wrong. any suggestions?

[@madhawapriyashantha3722]

you can style them as you want

[@craigchihururu3538]

I didn't know about the text length. I always looked for what looks good but now I have a reference

[@Mizko]

Glad you found it useful :)

[@chiaza7735]

Great vid Mizko. As regards number of characters on a line, what if it's on mobile

[@jameshuisang]

Hmm… HSL method could be a game changer for systemizing colors in the design system 🧐

[@Mizko]

It's already been used in all the color generators in Figma :)

[@bartomiejcwikaowski3393]

Good stuff:)

[@oussamabouyardane2431]

Hi Mizko, Please can you tell me which font you used on the "Harmonious color palettes" ?

[@morrison2733]

Do you have a design system up on Figma community and if yes. Do you mind sharing a link to it? Also if no, do you mind recommending quality options

[@tejasgaikwad01]

Rule of 2 was interesting

[@mt000mp]

mizko, update and fix the shipfaster UI, it has component errors in instance swapping.

[@Mizko]

The update is coming. I’m testing v.2.3 in the video as you can see.

[@njengathegeek]

Hello Mizko, we haven't seen you for a while, 😉 how is the office build going?

[@pizcadechef]

I think you're misinterpreting the readability rule. I says 50-75 characters, not percent of the page.

[@Mizko]

You are correct! It even said it right in-front of me. As I'm filming, navigating Figma and speaking at the same time - I sometimes slip an error - my apologies!

[@hardboiled2000]

part 2?

[@superment]

It’s not 50 - 75% of page. Paragraph should be 50 - 75 CHARACTERS wide.

[@Mizko]

You are correct! It even said it right in-front of me. As I'm filming, navigating Figma and speaking at the same time - I sometimes slip an error - my apologies!

[@MrInsider33]

Sorry to say but the second point is completly wrong. As stated in the article you have shown, it's 50-75 ch. Thats characters. So there should be 50-75 characters on every line. Depending on the width of the screen 50-75% is way too much

[@MrInsider33]

Also if your type size is small it's also way too long. CH you can take for every type size (this is only for copy not titles)

[@vuufke4327]

moar lik dis pliiz

[@Mizko]

You and a few others really enjoyed this, I'll continue the series.