Top 4 design choices you should make before building a website, according to Refactoring UI
Published: 2021-10-29 00:46:48

Developer [Adam Wathan](https://twitter.com/adamwathan) and designer [Steve Schoger](https://twitter.com/steveschoger) are perhaps best known as the minds behind the frontend phenomenon [Tailwind CSS](https://tailwindcss.com/). But before they revolutionized the web styling world with their sparkling CSS framework, they did something simpler: they wrote a book.

[Refactoring UI: The Book](https://www.refactoringui.com/book) is a masterclass in visual design for the web, designed __specifically__ for frontend web developers. If you're a developer that wants to learn more about design, or build a side project that doesn't look like crap (or default Bootstrap), this is a must-read. It's short - it's only 218 pages with a large font size and tons of pictures - and concise: everything is explained in a simple and to-the-point fashion that doesn't waste a second of your time. Every sentence is its own nugget of wisdom, and you won't have to reread a single one of them.

While much of the content in Refactoring UI will serve well as a quick reference to solve specific design problems - "Why do these paragraphs look kind of weird? Is it the padding? The line height?" - Refactoring UI also outlines a lot of the design decisions you should make __up front__ when designing a site. Decisions that - if you make them early - will save you a whole lot of time down the line and, if you make them late, will be difficult to implement without significant refactoring.

So, in an effort to document those specific decisions - since I'll probably have to make them later - and to share that knowledge for easy reference, I'll be (hopefully) briefly outlining them here.

## 1. Personality

You might want your website to present a certain sort of personality.

There are three styling choices you should make early on to accomplish this: font, border radius, and colors.

For a refined, professional look:
- Use a prominent serif font
- Use no border radius on elements
- Incorporate 'sophisticated' colors like blacks and golds

For a playful look:
- Use a rounded sans serif font
- Use a high border radius
- Use bright neon colors, like pinks, purples, and light greens

For a neutral look:
- Use a neutral sans serif font
- Use a medium border radius
- Use tried-and-true colors like blue

We'll get into more details about font an colors later. 

## 2. Decide on a set of values for common style properties

For things that use pixel sizes, instead of agonizing over if something is 1px too big or 1px too small, have a good range of pre-selected sizes to choose from.

This goes for things like font size, padding, and element sizes.

A good starting point is a *geometric* scale - each size is a certain multiplier larger than the previous one, let's say 25% or more. 

So for font size, for example you might use a 33% multiplier, giving you 12px, 16px, 24px, 32px - each is 33% larger than its predecessor.

Style properties that you might consider making these systems for include:
- Font size
- Margin
- Padding
- Width
- Height
- Box shadows
- Border radius
- Border width
- Opacity

The geometric approach will apply better to some properties than others - it's just a rule of thumb, and you may need to add a couple of extra sizing options in between the values the geometric scale gives you. 

## 3 Choose your fonts

Yeah, this overlaps with #1. Organizing blog posts is hard.

The number of fonts you'll want will depend on your site and the complexity of its design, but you'll probably want at least 3: one for headings, one for UI, and one for body text.

- For each of these fonts, you'll want to choose a font with *at least 5* weights - that will give you more flexibility, and some reassurance that whoever created the font put some real thought into it. 
- When in doubt about what fonts are good, just look at what's most popular on Google Fonts.
- Heading fonts should have relatively short lowercase letters (called x-height)
- Fonts for UI controls should be a neutral sans-serif, like Helvetica
- Body text fonts should generally be serif fonts with relatively tall lowercase letters (large x-height), which will increase legibility.

## 4. Choose your colors

You need more colors than you think.

There are 3 classes of colors you'll need to choose: Greys, primary colors, and accent colors.

### Greys
- You generally want 8-10 greys. The darkest should be a very dark grey (not black), and work your way to either pure white or something close to it.
- Greys will usually be used for UI components and text

### Primary colors
- Your site should have one or two primary colors to choose between. You'll want 5-10 shades of each.

### Accent colors 
- You'll also want some accent colors - 5-10 shades of each. The number of accent colors can easily vary from 1 to 10, depending on the complexity of the site.
- Some accent colors may serve *semantic* purposes. For example, a "DELETE" button would likely be red to serve as a warning of destructive potential. A confirmation message might be green to represent something positive. A 'caution' icon might be yellow.

### Defining your shades
Every shade of a given color should be defined ahead of time. Here's how you do that.

- Pick a base color (the middle shade)
- Pick your darkest shade and your lightest shade.
- Then, start filling in the gaps - pick the shade between "lightest" and "medium", then the one between "medium" and "darkest", and then fill in the gaps between those.
- While picking shades, don't just change the lightness value of the color! Adjust the saturation too - generally saturation should be lowest at 50% lightness, and highest towards the extremes.
- For grays, consider not using a "true gray" (0% saturation) - for cooler grays, give them a blue hue (~210). For warmer grays, give them an orange hue (~40). Then, give a bit of saturation (between 10 and 22%).