Reading Refactoring UI

These are just notes from the book, as a front-end developer I found this book pretty useful as a guy with no design background.

Chapter 1 - The Start

Start with a frame not a layout

Instead of starting with a shell of the whole app, start with actual pieces of functionality for your app. An app is a collection of features and you should focus on that first.

Details come later

Don’t think about low level decisions such as font sizes or colours. Do not obsess over the small details first. A good way to start is to design everything in grayscale, where you have to use spacing, contrast and size to do all the heavy lifting. Stuff like wireframes are disposable and quickly change over time.

Choose a personality

Typeface. Serif for a an elegant/classic look, rounded sans-serif for a more playful look and neutral san-serif for a plainer look.

Colour. Blue is safe and familiar, gold says expensive and sophisticated, pink says someting not as serious.

Border Radius. A small border radius is serious, large radius is more playful and no border radius is serious.

Language. More personable language will make it more friendlier.

Designing a system

Define systems in advanced so you don’t have a limitless amount of options to choose from. Systemise everything such as [font size, font weight, line height, color, margin, padding, width, height, box shadow, border radius, border width and opacity]

Chapter 2 - Hierarchy

Not all elements are equal

Use visual hierarchy refers to how important elements in an interface appear in relation to another. Don’t make things that compete for attention as it gets a bit chaotic. When you deliberately de-emphasize secondary and tertiary info, and make efforts to highlight elements that are most important.

Chapter 3 - Layout and Spacing

Chapter 4 - Designing Text

Chapter 5 - Colour

Chapter 6 - Creating Depth

Chapter 7 - Working with Images