With the COVID-19 Lockdown, finally, I took time to finish Refactoring UI by Adam Wathan & Steve Schoger.
You can download two chapters from their website. If you can not afford it or want to understand what you will get you can refer my notes below.
Start a new project — start off wireframing/designing/implementing the main
parts of the UI first. Rest can wait!
- Details can come in later. Don’t worry about colors, font sizes, etc.
By designing in grayscale, you’re forced to use spacing, contrast, and size
to do all of the heavy lifting.
- Designing Process is cyclic. Design <=> Code.
- Design what can be implemented today in code. Rest can wait.
- Design Personality is important.
- Blue is safe and familiar — nobody ever complains about blue.
Define systems in advance — It’s a bit more work up front, but it’s worth it
— it’ll save you a ton of decision fatigue down the road.
Systems — Font size, Font weight, Line height, Color, Margin, Padding,
Width, Height, Box shadows, Border radius, Border width, Opacity
- Pick a base colour — and choose 8-10 shades around it. You will need it.
- Not all elements are equal — use de-emphasize, font size, font weight
Size isn’t everything — Relying too much on font size to control your
hierarchy is a mistake
Don’t use grey text on colored backgrounds. Choose a color with the same
hue, and adjust the saturation and lightness instead.
You might not need a label at all — In a lot of situations, you can tell
what a piece of data is just by looking at the format. Combine labels and
values. The data itself is what matters, the label is just there for
clarity. If you’re designing an interface where you know the user will be
looking for the label, it might make sense to emphasize the label instead of
Separate visual hierarchy from document hierarchy — it’s easy to fall into
the trap of making those titles bigger than they really need to be.
Balance weight and contrast – Icons generally cover a lot of surface area.
Unlike text, there’s no way to change the “weight” of an icon, so to create
balance it needs to be de-emphasized by contrast.
Every action on a page sits somewhere in a pyramid of importance.
Primary actions should be obvious. Solid, high contrast background
colors work great here.
Secondary actions should be clear but not prominent. Outline styles or
lower contrast background colors are great options.
Tertiary actions should be discoverable but unobtrusive. Styling these
actions like links is usually the best approach.
- Primary actions should be obvious. Solid, high contrast background
Start with too much white space — It is easier to remove white space than
- Establish a consistent spacing and sizing system.
You don’t have to fill the whole screen. If you need more columns on smaller
screen use it.
- Grids are overrated — Not all elements should be fluid.
Relative sizing doesn’t scale — It should be in relationship with the
Type Scale – avoid ems. You will need more options at the start of the scale
and lesser as it increases.
Ignore typefaces with less than five weights — typefaces that come in a lot
of different weights tend to be crafted with more care and attention to
detail than typefaces with fewer weights.
- Keep your line length in check — 45 to 75 characters per line.
Baseline, not center – wehn using multiple font sizes to create hierarchy on
a single line.
- Line-height is proportional. Taller for para, shorter for headlines.
- Not every link needs a color.
Align with readability in mind — if something is longer than two or three
lines, it will almost always look better left-aligned. Right-align numbers.
Hyphenate justified text.
- Use letter-spacing effectively — Tightening headlines.
Ditch hex for HSL
Hue is a color’s position on the color wheel — it’s the attribute of a
color that lets us identify two colors as “blue” even if they aren’t
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. 0% lightness is pure black, 100% lightness is pure
white, and 50% lightness is a pure color at the given hue.
- Hue is a color’s position on the color wheel — it’s the attribute of a
You need more colors than you think — You can’t build anything with five hex
codes. You will need Greys, Primary color(s), Accent colors, Reds, Yellows,
When you need to create a lighter or darker variation of a color in your
palette, don’t get clever using CSS preprocessor functions like “lighten” or
“darken” to create shades on the fly.
Greys don’t have to be grey — If you want your greys to feel cool, saturate
them with a bit of blue. To give your greys a warmer feel, saturate them
with a bit of yellow or orange.
- Accessible doesn’t have to mean ugly.
- Don’t rely on color alone – Add icons etc.
- Emulate a light source.
- Use shadows to convey elevation.
- Even flat designs can have depth.
- Overlap elements to create layers.
Everything has an intended size – Don’t scale up icons. Don’t scale down
screenshots. Don’t scale down icons, either. Re-draw them.
- Beware user-uploaded content – Control the shape and size.
Prevent background bleed from images. Use a subtle inner box shadow or a
semi-transparent inner border.
- Supercharge the defaults – bullets, link, checkboxes, radio buttons etc.
- Add color with accent borders.
Decorate your backgrounds – color, patters, simple shape or illustration
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. There’s no point in presenting a bunch of actions
that don’t do anything until the user has created some content.