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

• Rework
• Let’s Talk Money
• Obviously Awesome
• Hell Yeah or No
• Almanack of Naval Ravikant
• Getting Real

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 🚀