Introduction and Context

I'm currently working on a website for friends of mine who rent out vacation homes. I saw the complete redesign of the website as an opportunity to learn more about user experience and design. In addition to introducing myself to Figma and reading two books on UX, I read the book Refactoring UI by the creators of Tailwind CSS. It is a practice-oriented design manual for developers and designers. Here’s what I learned.

Starting from Scratch

When you start working on a new web application, start with an actual working component instead of focusing on the layout. You need some working features to make informed decisions about the layout.

Try to ignore details like font, icons, and shadows at the beginning of a design process. You can even leave out color and design in grayscale to focus on spacing, contrast, and size.

With a few design choices, you can build up a personality that suits your business model. Use a serif typeface for an elegant and classic look and a rounded sans-serif for more playful cases. Follow your gut feeling when it comes to choosing the colors. A large border-radius translates to a more playful personality, while no border-radius feels more serious and formal. Don’t try to reinvent the wheel. Follow your gut feeling and look at competitors in your domain for inspiration.

Limit your choices by setting up a design system early on. By doing so, you only have to do the hard work of picking an initial value once. You should set up a fixed set of variables for things like:

• Font size
• Font weight
• Line height
• Color
• Margin
• Padding
• Width
• Height
• Box shadows
• Border radius
• Border width
• Opacity

You don’t need to define your entire design system upfront. Whenever you face a new design decision, take the time to establish a consistent rule.

Hierarchy is Everything

Visual hierarchy is the most rewarding design principle and lets you come up with a good design without artistic talent.

Don't just use font size to control the hierarchy. Use both color and font size to convey meaning. Embrace three colors and two font sizes as a limit for most of your UI design.

Instead of emphasizing one element with more color and contrast, work in reverse by de-emphasizing competing elements.

When designing buttons, focus on visual hierarchy over semantics to guide user attention. Destructive actions should only appear bold and red when they're the main focus.

Layout and Spacing

Begin with generous whitespace and gradually reduce it until the layout feels balanced. Usually, we just add enough whitespace to make a design not look bad. By reversing the approach, we can create great design.

Grids can bring structure to layouts, but strictly following systems like 12-column grids often leads to suboptimal designs. Elements like sidebars scale unnecessarily with screen size. Instead, use fixed widths where appropriate. You can give elements a max-width and only shrink it when the screen size gets smaller than the maximal width.

Designing Text

Restrict yourself to a few font sizes. You can use modular scales like the major third (4:5) or the perfect fifth (2:3). With that, you have a good number of values to choose from for simple websites.

When designing more complex interfaces, you can stick to hand-crafted scales for more variety. In any case, 16px is a good starting point since it is the default font-size for all major web browsers. Stick to px or rem units instead of em for consistency.

When choosing the font, you should use a font with more than five weights. Google Fonts lets you filter by this constraint, which leaves you with fewer options to choose from. Another option is to filter by popularity – use this feature as a form of social proof.

Keep the line length in check to ensure good readability. Keep the characters per line between 45 and 75 characters. Therefore, you can use 20–35em for layouts to keep the width in relation to the font size.

When aligning multiple fonts vertically, stick to the baseline for reference instead of the center. The baseline is the imaginary line that letters rest on.

Following a few basic rules for choosing the right line-height can leave out the guesswork. Keep the line-height proportional to the line width. Shorter paragraphs work fine with a line-height of 1.5, while wider ones should use 2 or more. Small text should use extra line space for guidance.

In general, choose line-height and font size inversely proportional: Use a taller line-height for small text and a shorter line-height for large text.

Working with Color

Instead of using Hex or RGB format for representing color, use HSL. HSL uses hue, saturation, and lightness, which emphasize connections between colors.

• Hue is the actual color on the color wheel with values from 0 to 360 representing the degree.
• Saturation tells how vivid a color looks (0% is gray and 100% is the most intense).
• Lightness tells how close the color is to black and white (0% is black, 50% is the given color, and 100% is pure white).

Don’t confuse it with HSB.

You most likely are going to need way more colors than you think. A good color palette can be broken down into three categories:

1. Grays are the foundation with a good number of shades to create hierarchy. In practice, 8 to 10 shades give enough freedom for most cases. Don’t use pure black since it can look unnatural.
2. Primary Colors: One or at most two basic colors are sufficient. This does not mean that you cannot derive 5–10 variants with lighter and darker shades from this hue.
3. Accent Colors: On top of the primary colors, you should pick a few accent colors for communicating importance and the semantics of components. Red for destructive actions, yellow for warnings, and green for positive trends. Just as with the primary color, create a palette with 5–10 shades for each color. With complex dashboards and interfaces, it is not uncommon to have ten different colors with 10 different shades.

With those three colors in place, you are ready to set up the palette. Start with the base color by choosing the color in the middle of the scale. A good rule of thumb is to choose a shade that works well as a button background. Next, choose the darkest color reserved for text and the lightest to tint the background of an element. Next up, start filling the gaps. Good practice is to settle on 9 colors with the lightest shade being 100 and the darkest being 900. 500 is the base shade.

Don’t use colors as the only indicator for meaning. Add icons to indicate positive and negative trends. Same with destructive buttons. Instead of using different colors for graphs, try out different shades of the same color. Always use color to support something that your design is already saying; never use it as the only means of communication.

Creating Depth

To create depth in user interfaces, mimic how light behaves in the real world. Light usually comes from above, making top edges lighter and bottom edges darker. Raised elements should have lighter top borders and small drop shadows beneath them, while inset elements need darker upper shadows and lighter bottom highlights to appear recessed.

Using shadows effectively can simulate elevation, making elements feel closer or further away and guiding user attention. Even in flat design, depth can be created using lighter or darker color contrasts, overlapping elements, or solid, blur-less shadows for a clean but dimensional look.

Conclusion

These were some of the topics covered in the book. The book contains many other small tips and can be used as a reference book during work. I am pleasantly surprised by how many great visualized examples there are and how rich the chapters are. Here you can see the finished work: