Ephemeris of the Mind (Book Review) Refactoring UI
Time to read: 3 min read
Book Cover
Don’t let your existing beliefs hold back your designs — constraints are powerful but sometimes a bit of freedom is just what you need to take an interface to the next level.
Review
In this very short and incredibly practical book targeted at engineers dipping their toes into design (me), Wathan and Schoger (people behind Tailwind CSS, the framework that we use in our front-end at Tower), go through the basics of software UI design. The topics covered range from general design philosophy (iterate fast and don't over-design) to very tactical advice (align-items: baseline).
The book is composed of various tidbits about design such as colors, layout, and fonts. The authors not only explain the logic in practical terms (oftentimes I find other design books overly focused on theory), the authors also have visual examples explaining the concepts. There are so many practical tidbits I took away that I can apply directly to Tower. The most notable being:
Good designers use systems, such as a fixed list of colours, font sizes, etc. The idea is to make a few decisions ahead of time and pick from those decisions. This is to prevent going into the minutiae for every single decision. I find that this is especially applicable today for people who use AI to code on the front-end. Having the AI adhere to pre-defined systems is probably the best way to have a coherent UI.
It's important for design to have a personality (is your app serious/professional or is it fun/playful?). Tower is a professional piece of software so we opted for black/white and neutral colours.
Don't be a slave to the grid system (percentage-based spacing). We kind of already do this subconsciously with our sidebar-reliant layouts (fixed-width sidebars with seperate grid for page contents). That being said, line height and line length should be proportional (more height for longer lines).
One should be pessimistic about features. We actually ran into this exact issue with our AI chat. Initially we envisioned a fully agentic AI that can do everything so we selected a chat-based interface that let users message anything they wanted. It became very clear quickly that this was a terrible idea (we only built out term extraction-based workflows) and instead we built more workflow-focused UI to not overwhelm/confuse users.
One can make content stand out by not only emphasizing it (ie. entry in sidebar), but also by de-emphasizing content around it. Furthermore, instead of just relying on colours, one can rely on contrast and symbols to communicate (our Analytics page probably needs this). Also, labels should only be used as the last resort.
Empty states are often very important because they are usually the first things that a user sees when they first log on. I immediately updated all of Tower's empty state pages after reading this to hide the normally complex UI and and focus on core actions (creating new project, uploading files, etc).
Conclusion
Highly recommend this to all engineers who have to think about UI.