Refactoring UI - Complete Package

Make your ideas look impressive without relying on a designer. Decide how to create beautiful user interfaces yourself, using specific tactics that take a developer's perspective into account.

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

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

I've been friends with Steve Shoger for years, and we worked on a few side projects together - he did the UI and I took care of the development.

Like many developers, I always wanted to make my ideas look amazing without relying on a designer, but every time I tried to create something on my own, I was always disappointed and suggested.

I've always been right-brained - 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 artistic talent, but made things look better right away for reasons that mattered to me as a developer.

Design with tactics, not talent.

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

Use fewer borders.

Borders (borders) are a great way to keep two elements separate from each other, but using too many of them can make your design look busy and cluttered.

Instead of this outline, add a shadow for the block, using contrasting colored lights or simply adding more space between elements: the changes given do not require any talent - if you know the tactics, you just need to see the problem and apply the solution.

Different approaches to design focus so much on high-level principles like color theory and typography, which, while important, never lead to immediate improvements like the specific tactics I picked up from Stiva.

Working together, we knew we could create something better.

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

UI Refactoring takes everything we know about design and combines it into one comprehensive package that includes books, screencasts, a component gallery, curated resources, and more.

This is exactly what I needed when I was struggling to make my projects look amazing.

What we collected

This isn't just a book—it's everything you need to start creating better designs today.

When we first started working on this project, our ambitions were quite modest - to take all the tips and tricks we shared on Twitter, learn them in one resource, and release them into the world.

But the more time we spend planning, the more we realize that we have the 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 consisting of 50 incredibly visual chapters spread across 250 carefully selected pages.

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

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

We hate books that repeat the same ideas over and over again to fill the counter pages. This book is written much like our blog posts—every sentence is worthy of attention.

Video lessons

The book will teach you a lot, but there are some things that are best learned by watching an expert do it himself.

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

• Standard form interface development
• Create a data-centric dashboard
• Text page styling is closed

Each video is carefully edited and paced correctly, so don't waste any time watching it.

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 procedures? This has always been a huge problem for us with our own work, so we created a gallery of components to solve it.

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

It includes average 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
• Card Layouts
• Table Styles
• Navigation schemes
• ... and many many others.

You'll never have to look at another site for layout inspiration again.

Color palettes

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

We decided to solve this problem by hand-creating over a dozen complete color palettes, including 10 shades for each included color, as well as a sample UI showing how these colors are intended to be used: We've also compiled a huge library of custom color scales for you to 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 specific font in the right context takes forever.

We've compiled a list of over 30 fonts we love and broken it down into three categories: UI, Headings, and Article Copy.

Each font is shown as an example UI for that category, so you can get an idea of exactly what it will look like where you intend to use it, without having to try each font yourself.

If you've ever felt awkward trying to choose a font, this will save you a ton of time.

Custom Illustrated Icons

Refactoring UI also includes a set of 200 beautifully illustrated SVG icons: SVGs are pre-optimized and colors can be easily customized to suit your brand using just CSS - no knowledge of design tools required.

Complete package

• 250 page book in PDF format
• All three detailed video tutorials
• Component Inspiration Gallery with over 200 component ideas and layouts
• Over a dozen complete color palettes tailored to app user interfaces
• Font showcase, including over 30 recommendations by font category
• Exclusive icon library including 200 easily customizable SVG icons