This year, I started learning about making websites. I’m getting into stuff like HTML, CSS, and JavaScript, and I’m even trying to create my own website. It’s been a pretty cool adventure so far. And guess what? I found this awesome book called “Refactoring UI” that’s been a huge help!
This book is amazing! It’s like having a friendly coach who shows you the best way to make your website look great and work well. The book is super easy to read and understand. It gives you really clear advice on how to make your website better. It’s not just about writing code; it’s about making your website nice to look at and easy for people to use.
When I read “Refactoring UI,” it’s like having a helpful guide right next to me. It teaches you more than just the technical stuff. It helps you create websites that people will enjoy using. I’ll share some of the main tips from the book below, but there’s so much more inside. It’s packed with helpful advice and cool ideas. If you want to get better at making websites, you should definitely read it!
Summary
Step by step building a good UI
- Focus on the functional feature first.
- Hold the color. Focus on spacing, contrast, and sizing first. Why? Read here.
- Design in simple first. Why? Read here.
- Choose the personality: typography, color, border radius, language style
- Limit your choices. Define system in advance and start with a smaller set of options
Don’t rely on size
- relying too much on font size to control hierarchy is a mistake
- try using font weight or color to do the same job
Designing Layout
- Start with too much white space. Give every element a space to breath and you can remove it next until you’re happy with the result.
- Define the spacing and sizing system. Start with a sensible base value, then build a scale using factors and multiples of that value.
- You don’t have to fill the whole screen
Designing Text
- Choose a scale
- Avoid em units. Why? Read here.
- Use good fonts
- Keep line length in check
- Align mixed font sizes by their baseline. Why? Read here.
- Not every link needs a color, specifically when you’re designing an interface where almost everything is a link. Sometime, using heavier font weight or darker color instead is enough.
- Keep readability in mind
- Use letter-spacing effectively
How to work with color?
- Use HSL system
- Break good color palette into 3 categories:
- Greys
- Primary color(s)
- Accent color(s)
- Define shades up front
- Don’t let lightness kill saturation
- Greys don’t have to be grey
- Don’t rely on color, using icons sometime is much wiser.
Why do you hold the color when starting a project?
Design in grayscale, so you’re focus on the spacing, contrast, and size to do all of the heavy lifting → clear interface with a strong hierarchy that’s easy to enhance with color later.
Why shouldn’t you design too much at the beginning?
When you’re designing a new feature, expect it to be hard to build. Designing the smallest useful version you can ship reduces that risk considerably. Build the simple version first and you’ll always have something to fall back on.
Why shouldn’t you use em units while designing text?
- Because em units are relative to the current font sise of nested elements is often not actually a value in your scale.
- Stick to px or rem units–it’s the only way to guarantee you’re actually sticking to the system
Why should you ignore typefaces that have fewer than five weights?
- Because typefaces that come in a lot of different weight tend to be crafted with more care and attention to detail than typefaces with fewer weights.
Why should you trust the popularity of font?
- As simple as: If a font is popular, it’s probably a good font.
Why should you align mixed font sizes by their baseline?
- Align mixed font sizes by their baseline, which is the imaginary line that letters rest on. When you align mixed font sizes by their baseline, you’re taking advantage of an alignment reference that your eyes already perceived.
Author: Adam Watan, Steve Schoger
Publication date: 11 December 2018
Number of pages: 252 pages
