How Not to Design Modern UI
Hey, it’s Rachel!
It's been more than a year since I last wrote to you. I was dealing with burnout and focused on taking things at my own pace. I’m back! 🌱
If you don't recall who I am or are wondering when you subscribed to this, I totally understand! You probably subscribed through my website (rachelhow.com) or my YouTube channel.
In this newsletter, I share the What, Why and How (not necessarily in this order) – Practical tips and resources on UI/UX Design & Productivity. If your priorities have shifted and you no longer wish to stay subscribed, feel free to unsubscribe at the bottom of this email.
With that out of the way, let’s get to the core idea of today’s letter 📮
How NOT to Design Modern UI
Watch the full YouTube video (10 min)
The video version is probably more engaging since I could show instead of tell. Here’s also the written version if you prefer to read:
1. Shadows
Do you agree with this tweet? Well, in my opinion, there’s a bit of truth in this.
Avoid harsh shadows. Instead, use soft and natural shadows for UI. Your shadows also don’t need to be 100% black (#000000). Experiment with different levels of opacity, blur and colours.
This Figma plugin, Beautiful Shadows, lets you experiment with different lighting and intensity to get natural-looking shadows. I don’t like that this plugin results in SO many layers of drop shadows, but I like to use it as a way of experimenting quickly and then work backwards from the desired outcome.
In the YouTube video, I share examples of well designed UI with or without the use of shadows, including Wise, Airbnb, Lifesum etc. I use Mobbin to find design references for app/website designs.
2. Typography
Avoid: Too many variations of fonts in your app or website.
Choose fonts that are clean, easy to read and have multiple font weights (3 to 5 font weights are perfect). If you’re looking for free fonts, Google Fonts and Fontshare are great starting points.
You can experiment with pairing Serif and Sans Serif fonts to give character to your designs, like so:
3. (un)Boring Footers
There are nothing wrong with simple, functional footers on your website. However, we can all take inspiration from sites that have creatively used footers to leave a lasting impression. footer.design is a great place for that!
4. Intrusive Pop Ups
…unless it’s necessary, like warning users of a dangerous action that they’re about to perform, or something of consequence.
Nobody likes pop ups that interrupt the user experience and feels like an ad. Instead, consider less intrusive elements like banners, inline CTAs or toasts like so:
5. Cookie Cutter Layouts
Today, many designs look alike. Many designers may be using UI kits, resulting in cookie-cutter layouts. While UI kits save us a lot of time, I still suggest that experienced designers start a project with a basic UI kit.
However, if you only use UI kits and don't tailor them to the product you're designing, your layout will end up looking like everyone else's.
With AI now capable of generating designs in seconds, we need to up our game and create visually engaging work.
My suggestion: Start with a basic UI kit. Here’s what mine looks like! It’s so basic and lightweight that it does not get in the way of my creative process.
I suggest you first focus on strengthening your design foundations. Aim for creating consistent, user-friendly layouts. Avoid reinventing the wheel. Then, once you've accomplished this, consider ways to make your UI visually engaging and push the boundaries.
There’s nothing wrong with simple, functional UI that just works. However, I believe that designers should push the boundaries a bit (while still prioritising functionality).
6. Overuse of Gradients
Yikes. I love gradients. Gradients can add depth and make our UI more interesting. When gradients are used excessively, it may make your designs look dated.
The usual rule of thumb is to have less than 3 primary colours at a time and if
preferred, you can use gradients as a way to guide users on where to focus.
For better context, watch the video for detailed walkthroughs.
7. Faded, Low Contrast UI
Because they may look outdated (unless tastefully done).
Here's a quick critique on how UIs with low contrast create accessibility issues by making text harder to read:
Pastel colours do not necessarily make your brand look outdated. It's about using the right imagery, visual language, typography, while maintaining good contrast.
8. Overcrowded Interfaces
Cluttered designs with too many elements can overwhelm users.
Embrace white space. White space is not wasted space; it’s crucial because it helps to balance design elements, organize content for better readability, and create a clean look.
However, this also depends on the cultural context and what your users prefer. Websites in Japan, Korea, and China have more vibrant colours and a higher density of information on a single page compared to Western websites.
9. Cheesy, Generic Visual Assets
Avoid using cheesy, generic stock images, icons or illustrations. Sites or apps that use generic visual assets fail to earn our trust, and also makes us want to leave the page right away.
Choose visual elements that have more character, appear more personalized, and are less commonly used, like the below:
What if you don’t know which imagery is more effective for your site/app?
A low-effort method to validate this is to conduct an A/B test with two different images to see which one drives more clicks to your call-to-action.
More creative ways to include visuals in your site/app:
When a design is rooted in simplicity and functionality, it stands the test of time. This is why we still like classic furniture or famous logos after many years. (Hint: The classic Eames lounge chair or Nike logo)
Hope this is helpful!
Useful things 👀
- Mobbin - My go-to UI/UX design reference library since 2019
- Microcopy - Super cute place to get microcopy ideas for your site/app
- Buttery.so 🧈 - Buttery smooth, minimal icons for interfaces. Built by yours truly!
- Design Spells - A repository of design details that feel like magic. This site just sparks so much joy.
- footer.design - Design inspiration for non-boring footers to leave a lasting impression
That’s a wrap! ☕️
See you in the next letter,
Rachel How
When you’re ready, here are 3 ways I can help you:
- Subscribe to my YouTube Channel for more content like this.
- Check out all my free and paid resources on UI/UX Design, Solopreneur Systems, Webflow Guides, and my tools and gear list!
- Get your brand in front of 8,000 readers by sponsoring this newsletter.
🤔 Can’t find what you need? Request a video/content - I’ll try my best :)
