Top 4 design choices you should make before building a website, according to Refactoring UI

Developer Adam Wathan and designer Steve Schoger are perhaps best known as the minds behind the frontend phenomenon Tailwind CSS. 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 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%).