Refactoring UI e-book 2023-11-06

Make your ideas look amazing without relying on a designer. Learn how to create beautiful user interfaces yourself using specific tactics explained from a developer's perspective.


"I know it looks terrible, but I have no idea why."

Hello! My name is Adam Watan and I'm a full stack developer who didn't like design before.

I was friends with Steve Shoger for many years and we worked together on several side projects - he did the UI design and I took care of the development.

Like many developers, I always wanted my ideas to look amazing without relying on a designer, but every time I tried to develop something myself, I was always frustrated and gave up.

I've always been right brain - I'm logical and analytical, so I'm good at programming, and people like Steve are intuitive and creative, so he's good at design.

But after working closely with Steve, I began to understand the little tricks. Tricks that didn't require any kind of artistic talent, but made things look better right away for reasons that made sense to me as a developer.

Design with tactics, not talent .

Here's a specific design tactic I'm sure you use every day, but clearly haven't noticed:

Use fewer borders.

Borders are a great way to differentiate two elements from each other, but using too many of them can make your design feel busy and cluttered.

Instead, try adding a box shadow, using contrasting background colors, or simply adding more space between elements: Changes like this don't take any talent - if you know the tactic, you just need to spot the problem and apply the solution.

The various design courses put so much emphasis on high-level principles like color theory and typography, which, while important, never helped me make instant improvements like the specific tactics I picked up from Steve.

Working together, we knew we could create something better.

Over the past few years, we've helped thousands of developers improve their designs with quick tips, in-depth articles, and video tutorials.

Refactoring UI brings together everything we know about design and brings it together into one comprehensive package that includes a book, screencasts, component gallery, custom-designed resources, and more.

This is exactly what I needed when I tried my best to make my projects look amazing.

What have we collected

This isn't just a book - it's all you need to get started creating the best designs today.

When we first started working on this project, our ambition was rather modest - to take all the tips and tricks that we shared on Twitter, combine them into one resource and release them to the world.

But the more time we spend planning, the more we realize that we have an opportunity to create something better than this. What was not just a book, but rather a complete survival kit for web design.

Here's what we got ...

Book

A beautiful PDF, containing 50 incredibly visual chapters, spread over 250 carefully typed pages.

This book contains literally everything we know about web design, broken down into short, easy-to-read chapters.

Each chapter is designed to be as independent as possible, so you can read them in almost any order. And if you want to sit down and read it all at once, you have no problem getting through it in just a couple of hours.

We hate books that repeat the same ideas over and over to fill the page counter. This book is written much like our blog posts - every sentence is worth considering.

Video lessons

The book teaches you a lot, but there are some things you can best learn by watching an expert do it on his own.

We've put together three detailed video tutorials that show you how to take all the ideas from the book and apply them to three common UI design scenarios:

• Complex shape interface development
• Create a data-driven dashboard
• Styling a text landing page

Each video is carefully edited and has the correct tempo so don't waste time watching them.

Component gallery

How many times have you had to look at other apps to get ideas for things like button styles, form layouts, or navigation routines? This has always been a huge challenge for us with our own work, so we created a component gallery to address it.

The Component Gallery is a huge resource with over 20 component / layout categories and over 200 individual component styles.

It includes medium fidelity mockups of every idea we could think of, for every component we could think of, including things like:

• Button Styles
• Login page layouts
• Marketing Page Sections
• Map layouts
• Table Styles
• Navigation patterns
• ... and many many others.

Never again will you need to browse another site for layout inspiration.

Color palettes

If you've ever used an online color picker generator, you know that the five swatches they give you will never be enough to create a real interface.

We solved this problem by manually creating over a dozen full color palettes, including 10 shades for each included color, as well as a sample user interface showing how these colors are intended to be used: We also put together a huge library of custom color scales that you can use to create your own palettes without manually selecting each individual shade.

Font Recommendations

Trying to choose the perfect font for a project is a nightmare. There are thousands of fonts to choose from, and trying to make an informed decision without seeing a particular font in the right context takes forever.

We've put together a list of over 30 fonts that we love and break it down into three categories: user interface, headlines, and article copy.

Each font is shown as a sample user interface for this category, so you can get an idea of exactly how it will look where you intend to use it without having to try each font yourself.

If you've ever felt uncomfortable trying to choose a font, it will save you tons of time.