When I started my coding career, I wanted to build immersive experiences. My mind was racing with app and website ideas that I wanted to bring to life. With these big ideas came challenges, like “how the heck do I translate this idea in my head to the web? Better yet, “how do I make it look good?”
Over the last half decade, I’ve been in a unique position to grow as a developer and designer. Along the way, I learned a few core techniques that have helped me make all of my designs better.
So, let’s dive in and see how we can level up your design game!
4px grid system
When I first started coding, I would come to my computer and start throwing components on the page. “12px of padding for this button, 14px between these paragraphs, etc.”
To no surprise, this resulted in disjointed designs and unreliable experiences. I found myself frustrated that I could never turn the corner and make anything as good as I saw in the wild.
Then I learned about the 4px grid system. This didn't absolve me of all my design sins, but it gave me a framework for making consistent designs. The 4px grid system is based on the principle that elements are sized, padded, and margined by multiples of 4 (4, 8, 16, 20, 24, 28, etc.). This unlocked two things for me: first, scalability became much easier. Instead of estimating dimensions for different screens, I could now create standard sizes. For example, on mobile a button can have a padding of 8x4px but on a desktop it should be 12x16px.
Second, by standardizing elements in my designs, the design felt more integrated. For instance, on one of my marketing sites, if we set our h1 to 72px, our h2s will be smaller than that. If it's 36px (half) or 56px (roughly a quarter), there's now a consistent starting point that lets me maintain uniformity in my designs.
Fonts are fickle, keep it simple
There are few things in this world that spark inspiration quite like a good font. You realize it's the ideal fit for your project and rush to incorporate it into your design system. End of story, right?
Not exactly… One thing I learned early on is that fonts can get complicated fast. Even with the best intentions a beautiful font can lead to decision fatigue. “How big should it be? What weight should I make it? Does letter-spacing even matter?”
A few years ago, I took MDS’s Shiftnudge course, and its typography lessons had an immediate impact on my designs. He summarizes many of those lessons in this thread, but the main takeaway is to limit your type choices.
Choose one font family and use size and weight to distinguish content types. Limit yourself to four sizes, one for each content type (e.g., H1, paragraph, subtitles). Apply the same principle to font weights. As a result, simplifying these decisions will provide design clarity, allowing you to make legible, clean designs without overthinking it.
Gray is the new black
Early on as a designer, I was always inspired by bright bold color palettes. I still am! But, I've come to realize that integrating such colors, especially in SaaS software designs, can pose challenges.
My strategy to address this has been to develop a comprehensive gray color palette. This approach, where a spectrum of grays complements a striking primary color, has enhanced my design.
TailwindCSS has been a great resource for me in providing phenomenal gray palettes. But to take this to the next level there’s a trick to help harmonize your gray palette with your primary color.
To do this you take your primary color in HSB format by setting the hue the same as your primary color’s hue. Then tweak the saturation and brightness, to identify a foundational gray. This then sets the tone for the entire gray palette. Building on this foundation, I then derive 8-10 varying shades of gray, following the guidelines provided by Refactoring UI.
Conclusions
These three tips helped unblock years of bad design habits. They're the three tools I bring to every project now. I know for some they'll be old hat but for your new developers and designers out there please explore them! The resources included in the article have been so helpful in my career, and I hope they can be for you as well!
