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.