nurture

Introduction

I recently embarked on a career transition that I’ve been equal parts excited and nervous about — the leap from communication design to product design. Naturally, I needed guidance, mentors, and resources to help me navigate this new space. It’s easy to get lost in the plethora of material available on the internet, but luckily for me, a colleague recommended a book that I have found to be a gem. Refactoring UI by Adam Wathan and Steve Schoger is a great resource for practical insights and actionable advice that can expand your design skills and elevate your UI game.

The authors, Adam Wathan and Steve Schoger, are prominent members of the UI/UX community online — Wathan is also the creator of Tailwind CSS, which is a widely used utility-first CSS framework. Written for developers with little to no design training, Refactoring UI delivers solid advice with great clarity and illustrative examples. This is what makes it a great read for someone who’s new to the UI/UX space (like me!) I highly recommend giving this book a read — it’s short enough to get through in two afternoons and the advice will stick with you for a long time.

Key Takeaways

The book gets straight to the point and wastes no time with preambles — so I’ll do the same. Here are some key design insights I picked up.

1. Detail Comes Later

One common pitfall for new and even experienced designers alike is to get stuck making low-level design decisions that keep them from finishing a big feature. Which typeface should I use? What style should the icons be in? Where should the shadows fall? These smaller decisions can be made later in the process once you have the main outlines locked.

The authors share a tip from Jason Fried of Basecamp on how to keep things simple: if designing in Figma gives you too many options to play around with, try designing your first wireframes on paper with a thick marker. The thickness of the marker will stop you from obsessing over little details and allow you to quickly draw a variety of different layouts.

They also advise holding on the colour, even when you’re ready to move on to high-fidelity work. Much of the design advice in this book is aimed to help you design faster — but this particular instruction stood out for me because it forces you to design better. By refraining from relying on colours immediately, you’ll be forced to use spacing, contrast, and size to create a visual hierarchy and do all of the heavy lifting. The result will be a clearer and well-thought out interface that’s now ready to be enhanced with colour.

2. Don’t Agonise Over Small Decisions

As someone who tends to get stuck in the weeds a lot, this was my favourite insight from the book; it follows from the previous point and is a recurring theme throughout. When you’re standing in the middle of a clearing in a forest, you could go in any direction and feel lost trying to figure out which is the right one. You’ll probably feel just as lost trying to decide if the body text in your UI should be 14px or 13px or 12px. Instead of randomly trying arbitrary values, the authors advise limiting the world of options by defining systems in advance. This applies to decisions on matters like font size, font weight, colours, margins, padding, shadows, and other low-level design decisions.

Instead of picking a new value every time you need a different font size, or reaching for the colour picker for yet another shade of blue, choose from a set of options that you define beforehand. Taking the time to create a comprehensive system once will help you avoid decision fatigue and save valuable time during your design process when you have to make the same decisions again and again — while also giving you more coherent results.

I’ve learned from my experience that layouts with consistent spacing and margins look clean and feel elevated, whereas randomly sized elements and erratic design choices are seen as telltale signs of a sloppy design job.

3. Levelling Up is Easy

Another credit to this book is the author’s commitment to not making you do any more work than you have to. Their suggestions are focused on creating systems that help create better designs with less effort and in less time.

One such insight in the concluding chapters is “supercharging the defaults.” By this they mean that instead of adding new elements to jazz up a page, you can customise and amplify what’s already there. An example would be replacing bullets with icons or adding colours to radio buttons and checkboxes.

Adding colourful accent borders is another simple way to make bland parts of the interface look more attractive and polished, while also reinforcing the brand colours.

The simplicity of these suggestions shows us that you don’t need to get deep into high-level theories about colour or typography to make your app screens look great.

Not only can I understand the logic behind each piece of advice, but because these insights are so easy to implement, I can almost instantly see improvements in my work. And that is what makes this resource so valuable — it inspires confidence; whether you’re a developer, an engineer, or an amateur designer, you will feel like creating beautiful interfaces is well within your capabilities.

To take a deeper dive into these insights and see more case studies using the applications of these principles, you can read Refactoring UI here.

Have you come across a helpful resource for product design that we should definitely check out? Send it our way here: heynurture@arbisoft.com.