Notes on RefactoringUI
Refactoring UI is a project by Adam Wathan & Steve Schoger. It is a package of useful resources for developers who want to sharpen their design skills.
After reading and studying the book I noted some of the concepts. I highly recommend these resources to anyone interested in creating better-designed apps. link
- Start with a feature, not a layout. Design small elements first, and then combine them into a layout.
- In the beginning, design without color. Use just shades of gray. This will help to focus on size and spacings.
- Blue color is a safe pick 👍
- Limit your choices. Create a design system for sizes, colors, spacings, etc.
- Learn techniques to emphasize and deemphasize elements.
- Start with to much white space. Then remove it.
- Use grids with caution. Some elements need to have a fixed width.
- Don’t use relative sizing. Use your defines system.
- Don’t use em and rem for height. This can cause factorial sizes.
- If not sure about your font choice, pick up something popular. Font ‘taste’ will come with time.
- A paragraph shouldn’t be wider than 30em.
- Align text by baseline.
- Line height depends on many factors. Don’t always use 1.5.
- In most cases, links shouldn’t be underlined or even colored.
- Short text can be center aligned. Text longer than 2 or 3 lines, should be left aligned.
- Numbers should be right aligned.
- If text is justified, enable hyphenation.
- Use HSL for colors.
- You need a lot of colors. Grey, Primary, Accent. Start with button background.
- Shadows add depth.
- Use overlays, image contrast or subtle shadow to help with text visibility on hero images.
- If you want to use a screenshot of an app in the design, the screen must be taken like on a small resolution device.
- To level up your skills, recreate favorite designs.