Book Notes: Refactoring UI

9 May 2020 ⏱️ 8 min

Get latest articles directly in your inbox

These are highlights/notes from book “Refactoring UI” by Adam Wathan & Steve Schoger.

These are personal notes, would recommend reading the book, but in case you are short on time - just skim through these notes 😊

Refactoring UI is such an amazing read. It highlights small but essential stuff in designing websites. If you are an engineer who is bad at designing, this book is made for you. (Like me 😁). If you are building products or starting out with some website/app, do read this book! You’ll thank me for the recommendation later. Let’s begin.

In case you are looking for book recommendations! Check Learnshots

Introduction

Start with a feature, not a layout
An app is popular because of features — first do the needful
Only have what you need for your feature at the start
Don’t introduce colors
By designing in grayscale, you’re forced to use spacing, contrast, and size to do all of the heavy lifting
Don’t design everything beforehand — like every single feature
Make a simple design -> Make it real -> Iterate
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.

Personality

Font

Sans serif — neutral
Rounded sans serif- playful

Colors

Blue is safe and familiar
Gold might say “expensive” and “sophisticated”
Pink is a bit more fun, and not so serious

Border Radius

Large — playful
No border — serious

Language

Sweet
Professional

Limit your choices

Don’t reach for the color picker every time you need to pick a new shade
Choose a set of 8–10 colors to choose from
Don’t tweak font size, have a defined small, medium, large, larger fonts.
Have a defined system for
— Font size
— Font weight — Line height — Color — Margin — Padding — Width — Height — Box shadows — Border radius — Border width — Opacity

Hierarchy is Everything

When everything in an interface is competing for attention, it feels noisy and chaotic, like one big wall of content where it’s not clear what actually matters
Use tiny font size and a lighter shade for text which is not that important
A dark color for primary content (like the headline of an article)
A grey for secondary content (like the date an article was published)
A lighter grey for tertiary content (maybe the copyright notice in a footer)

Font weights

A normal font weight (400 or 500 depending on the font) for most text
A heavier font-weight (600 or 700) for the text you want to emphasize

Other Points

Don’t use grey in colored backgrounds, instead reduce white opacity.
Try to reduce the focus of other stuff, instead of adding more design stuff to your highlighted component
Labels are the last resort
it’s much easier to emphasize important or identifying information, making the interface easier to use while at the same time making it feel more “designed”.
De-emphasize the label by making it smaller, reducing the contrast, using a lighter font weight, or some combination of all three.
Balance weights and contrast
Bold is good, but if it’s taking much focus, then make it light(use a softer color)
Primary actions should be obvious
Secondary actions should be clear but not prominent
Tertiary actions should be discoverable but unobtrusive.

Layout and Spacing

Use a lot of white space — it should be removed, never added
A better approach is to start by giving something way too much space, then remove it until it you’re happy with the result.
To make something actually look great, you usually need more white space.
If you want your system to make sizing decisions easy, make sure no two values in your scale are ever closer than about 25%.
Don’t always focus on using the whole screen
If you’re building a responsive web application, try starting with a ~400px canvas and designing the mobile layout first.
Instead of sizing elements like this based on a grid, give them a max-width so they don’t get too large, and only force them to shrink when the screen gets smaller than that max-width.
Give fixed widths where you don’t wanna change size based on screen size
Use a smaller canvas, this way site works on a laptop screen, you can then change it accordingly.
As a general rule, elements that are large on large screens need to shrink faster than elements that are already fairly small

Designing Text

Use simple and good fonts — Sans serif, Helvetica
Ignore typefaces with less than 5 weights.
For the best reading experience, make your paragraphs wide enough to fit between 45 and 75 characters per line.
Align mixed font sizes by their baseline, which is the imaginary line that letters rest on:
Advice that a line-height of about 1.5 is a good starting point from a readability perspective.
Line-height and font size are inversely proportional — use a taller line-height for small text and a shorter line-height for large text.
Links don’t need a color always. Emphasize most links in a more subtle way, like by just using a heavier font-weight or darker color.
Don’t center long-form text like paragraphs
Right align numbers
As a general rule, you should trust the typeface designer and leave letter-spacing alone.

Color

HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.
Hue is measured in degrees, where 0° is red, 120° is green, and 240° is blue.
Saturation is how colorful or vivid a color looks. 0% saturation is grey (no color), and 100% saturation is vibrant and intense.
Lightness is just what it sounds like — it measures how close a color is to black or to white.
Primary Color — Accent Color — Lot of greys
When using white text on a colored background, you’d be surprised how dark the color often needs to be to meet that 4.5:1 contrast ratio.
Have contrasting color and text to have a better visibility and look

Creating Depth

Simulating light in a user interface (box-shadow)
Use lighter colors instead of white. Like if a button is dark blue, use a very light blue as shadow
Raised vs Inset — both give a depth effect
Use a smaller shadow for something like a button.
Medium shadows are useful for things like dropdowns;
Large shadows are great for modal dialogs, where you really want to capture the user’s attention
Shadows aren’t only useful for positioning elements on the z-axis statically; they’re a great way to provide visual cues to the user as they interact with elements, too. Eg. Elevating a button on click/hover
Create depth with color — lighter element appear close, darker feel away
Overlap elements to create layer

Working with Images

Use high-quality stock photographs
Make sure your text and image have some contrast for better visibility (Use an overlay on image to reduce light, reduce contrast, colorize image)
Don’t scale up images, scale down
Take screenshots of smaller screen and components so that it looks more realistic on your website
Don’t scale down the icons
Control shape and size of the image if you are accepting image from the user (background-size: cover;)
Add a slight shadow to images to avoid background bleed if the image has the same color as the background

Finishing touches

Replace bullets with icons
Add color with accent borders, like the active name should have a bottom border
Change background colors for emphasizing an individual panel, as well as for adding some distinction between entire page sections.
Add simple shape or illustration in sections, not whole background
Don’t overlook empty states -
Try incorporating an image or illustration to grab the user’s attention, and emphasizing the call-to-action to encourage them to take the next step:
Empty states are a user’s first interaction with a new product or feature. Use them as an opportunity to be interesting and exciting
Use less border -> more box shadows
Add extra spacing if looks congested anywhere across the site
Use custom dropdowns, buttons, lists, etc Choose the best which suits your purpose, make it something now very common, something new and exciting for user. Eg. add images in table, dropdowns

More book summaries

Liked the article? Consider supporting me ☕️

I hope you learned something new. Feel free to suggest improvements ✔️

I share regular updates and resources on Twitter. Let’s connect!

Keep exploring 🔎 Keep learning 🚀

Liked the content? Do support :)