A Stupid Guide on UI Design for Engineers

Who is this guide for?

Any engineers who are building any form of GUI applications (web, mobile, desktop apps, etc).

What will this guide focus on?

This guide will focus on the looks, not on how your apps behave (user experience). There are resources out there that can serve you better on the latter.

Rule 1: Don’t use Montserrat

• Use more “neutral” fonts. If you’re not sure there are two safe options:
  • Use the system’s default font
  • Inter

And as the title goes: Don’t use the damn Montserrat (yes, I am looking at you, all the “corporate” sites).

• Serif font? It’s hard to get it right. Avoid it if possible. If you have/want to:
  • Use Serif for the headings/title, and Sans-Serif as the body text
    • Serif follows the Sans-Serif, not the other way around
  • If you build a site like gwern (or something with full of Serif font): be careful on the font weight!

Rule 2: Colors

• Don’t use pure black (#000) or pure white (#fff), unless you know what you’re doing (which you probably don’t).
• Don’t reinvent the wheel on the colour set. Use TailwindCSS colour guides or something similar.
  • This applies whether you use dark mode/light mode.

Rule 3: Icons? Be consistent!

• Be consistent. If you use outline, fill, or duotone, pick one and be consistent
  • Don’t be like Grok

Rule 4: Spacing

Remember this sequence:

1 - 2 - 4 - 6 - 8 - 10 - 12 - 16 - 18 -20 - 24 - 28 - 32 - 36 - 40 - 48 - 64 - 72 - 80 - 96

The important bit is: Except for 1, there’s no odd number spacing.

Rule 5: Opacity?

• Don’t use it! Use a different colour instead (see rule #2).

References

I read this book a few years ago. I think it’s a good resource if you want to dive deeper into this.