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

1. Start with a feature, not a layout. Design small elements first, and then combine them into a layout.
2. In the beginning, design without color. Use just shades of gray. This will help to focus on size and spacings.
3. Blue color is a safe pick 👍
4. Limit your choices. Create a design system for sizes, colors, spacings, etc.
5. Learn techniques to emphasize and deemphasize elements.
6. Start with to much white space. Then remove it.
7. Use grids with caution. Some elements need to have a fixed width.
8. Don’t use relative sizing. Use your defines system.
9. Don’t use em and rem for height. This can cause factorial sizes.
10. If not sure about your font choice, pick up something popular. Font ‘taste’ will come with time.
11. A paragraph shouldn’t be wider than 30em.
12. Align text by baseline.
13. Line height depends on many factors. Don’t always use 1.5.
14. In most cases, links shouldn’t be underlined or even colored.
15. Short text can be center aligned. Text longer than 2 or 3 lines, should be left aligned.
16. Numbers should be right aligned.
17. If text is justified, enable hyphenation.
18. Use HSL for colors.
19. You need a lot of colors. Grey, Primary, Accent. Start with button background.
20. Shadows add depth.
21. Use overlays, image contrast or subtle shadow to help with text visibility on hero images.
22. If you want to use a screenshot of an app in the design, the screen must be taken like on a small resolution device.
23. To level up your skills, recreate favorite designs.