9 simple rules to boost your UI design skills [Webflow + Figma]

Enhance Your UI Design with These 9 Rules | Web Design Tips and Tricks

Are you looking to take your UI design skills to the next level? Join me as I share my nine rules for creating impressive designs that will wow your clients. Stick around till the end because the last rule is the simplest yet most effective one. Let's dive right in!

Rule Number 1: Increase contrast by using a darker color for headlines compared to paragraphs. See how I transformed a design with dull headlines into a visually striking one just by adjusting the color contrast.

Rule Number 2: Opt for readable fonts in your body copy. I'll demonstrate the readability test using four different fonts, so you can ensure your text is easy on the eyes.

Rule Number 3: Apply the 60/30/10 rule when selecting colors. Learn how to allocate your base color, accent color, and call-to-action color effectively to create a visually pleasing design.

Rule Number 4: Embrace well-known design patterns that users are accustomed to. Avoid confusing your website visitors by adhering to common behaviors and expectations.

Don't forget to show your support by liking this video and subscribing to my channel for weekly content on Webflow, Figma, and Creative Business.

Rule Number 5: Utilize micro animations to provide feedback to users. Witness how subtle animations can enhance user experience and guide interactions.

Rule Number 6: Design with a grid and leverage maximum width whenever possible. Discover how grids can help maintain consistency and organization in your designs.

Rule Number 7: Embrace the law of proximity to visually group related elements together. Learn how spacing and positioning can enhance the clarity of your design.

Rule Number 8: Implement animations on key elements to draw attention. See a real-life example where a simple scroll animation directs the user's focus effectively.

And finally, Rule Number 9: Optimize font sizes using font scales for desktop and mobile. Understand the importance of adapting font sizes for different screen sizes.

If you're interested in learning more about font scales and their implementation in Webflow and Figma, check out the linked video.

I'm eager to hear from you! Leave a comment below with your own design rule or tip to add to this list.

Thank you for watching, and remember to stay in the flow!

#UIDesign #WebDesignTips #DesignRules #Webflow #Figma #CreativeBusiness #DesignPatterns #MicroAnimations #GridDesign #FontScales #StayInTheFlow

[builtbydima]

Great video as always man, thanks. I like that the content you are putting out here is not something just to please the algorhitm, but actually is informative and useful!

[hamsolo]

Greetings brother, Absolutely love your videos, this channel will be the Number 1 Youtube learning spot for webflow trust me. Could you make a video on animated backgrounds with gradients please? could be lottie or integrated or however else your geniusness may do it lol

[johnnymuller]

Why are so many websites using Inter? I don't get it – in your test it ranks bad and the file size is way too big and influences the performance significantly. Do you have good alternatives for paragraph fonts?

[JustCcRachel]

Great tips Felix! What are your 12-Column Grid settings (Type, Width, Margin, Gutter) when using the Relume library in Figma?

[SeshRogen]

How do you choose a color palette for a website?