There are so many layers to building great web applications, and frontends are perhaps the simplest thing to get right.
However, with new tools like Framer Motion, GSAP, or these UI kits coming out, I’ve begun seeing a new wave of overengineered frontends that feel like a high schooler’s hackathon project.
Transitions
Users aren’t profiling your app with DevTools. As long as an interface “feels” fast, it’s fast, no matter how musty your backend is.
For example, take a loading spinner. A fast spinner or skeleton creates the illusion of speed. A slow one does the opposite.
Transitions are everything. A button that has a 200ms transition on the background feels slower than a button with no transition. A dropdown that has a 200ms opening animation feels slower than a dropdown that just opens when I click the fucking button.
Especially if a user is hovering that button or clicking that menu 10+ times a day, remove your intro/exit animations altogether. Your website will automatically feel faster.
Colors
My eyes hurt from seeing shitty gradients and graident text on every web3 and crypto landing page I’ve seen.
A good interface has a boring palette and is defined by consistency. One primary color, one neutral scale, and a single accent. That’s it.
If you do use gradients, use them very sparingly so they don’t look like visual noise. Maybe once in a hero section, or in some web graphics and illustrations. That’s it.
Typography
Simple rules here. Pick a single font, maybe 2 fonts (one for headings, one for body), and a monospaced font if you need it.
Remember, the more custom fonts you use is the more overhead you have on your website, so honestly prefer using the system font wherever you can.
Font sizing is where this usually goes off the rails. Pick a base size and scale from it. Body text should sit at around 14-16px, and headings should feel obviously larger without screaming. If users have to think about the hierarchy, it’s not working.
Animation
As described with transitions above, animations are a double edged sword. If you honestly don’t have the design sense developed, it’s better to honestly leave out most animations than to risk making your interface feel worse.
Animation and motion are tools to make your interface feel fluid and intentional, not flashy and distracting. Unless you’re building a design agency, leave out the custom cursors and morphing buttons.
Spacing
Most “ugly” UIs are just spacing problems.
- Create a consistent padding/margin system
- Keep a few layout primitives that you reuse
- Dense UIs feel fast when spacing is intentional; sparse UIs feel slow when it’s arbitrary.
Accessibility
This is one of the easiest things to get right.
- Good contrast and font sizing
- Remember to honor prefers reduced motion
- Test out keyboard and focus states
Use the WAVE evaluation tool to test and diagnose issues with accessibility on your website.
One thing I’ve consistently emphasised across this post is simplicity. You’ve probably heard this a thousand times, but great interfaces feel intentional. The user doesn’t “think” about the interface while interacting with it.
Good design is a result of constraint. Fewer colors, fewer fonts, fewer animations, and fewer items fighting for your attention. The best interfaces disappear, and that’s the point.