Creating good-looking user interfaces has always been a struggle for me. If you’re in the same camp, this might help.
I recently redesigned Lighthouse, and during that process built a system that helped me create much better designs than I ever did before.
This system is about achieving the best possible design with the least amount of effort. There’s no need to know about the psychological impact of colors, which fonts are best for which purpose, golden ratios, etc. This is expert-level design knowledge that is just distracting if you’re not on that level. The key is to focus on the few important aspects, and not try to optimize every tiny detail.
Hallmarks of bad design
For a long time I could tell when a design was good and that my own designs were bad, but I could never specify why my designs were bad. Now I can summarize it in two words: alignment and consistency.
Let me show you.
This is the previous UI of Lighthouse, before the redesign. A couple issues I see:
Icons in the navigation sidebar are not aligned The logo is further on the left than the other icons. Icon weight mismatch in the navigation sidebar The icons are thin, compared to the text, which is bold.
This one is very subtle, I’d never have thought of it, but once you see the difference it’s so obvious. “show summary” buttons The position of the “plus” button in the items is inconsistent, sometimes it’s more on the right, other times more on the left, depending on the text that comes before it. Alignment of item counts Item counts are shown in parenthesis right after the view name, consequently they start in different positions. And that makes it much harder to compare counts of different views (e.g. finding the ones with more than 100 items).
They all are either about positions being off (alignment) or elements looking differently than the ones next to them (consistency). These issues are subtle, if no one tells you what to look for they’re difficult to recognize.
... continue reading