📖 Book
✓ Link checked
Paid
Beginner
Why we picked it
Design tactics written specifically for developers and non-designers who need to ship good-looking UI without a design background. The most practical 'make it not ugly' resource there is.
From
refactoringui.com
by Adam Wathan & Steve Schoger
~250 pages
- Use spacing, hierarchy, and font weight, not just color, for visual hierarchy.
- Start with too much whitespace, then remove.
- Design in grayscale first to nail hierarchy before adding color.
Open
refactoringui.com →
✍️ Essay
✓ Link checked
Free
Beginner
Why we picked it
Erik Kennedy writes for engineers and founders who were never taught design, and his rules are unusually memorable (light comes from the sky, double your white space, only use good fonts). Each one targets a specific amateur tell, so you can audit your own screens against them. The updated version reflects current UI conventions, not 2015 skeuomorphism.
From
Learn UI Design (Erik Kennedy)
by Erik D. Kennedy
25 min read
- Pick from a short list of proven fonts instead of the tool default
- Doubling white space is the fastest credibility upgrade
- Text over images needs a scrim or overlay to stay readable
Open
learnui.design →
📄 Article
✓ Link checked
Free
Intermediate
Why we picked it
The second half covers the moves that trip up founders most: overlaying text on images so it stays readable, making text pop and un-pop for hierarchy, and picking fonts that are safe rather than trendy. It closes with how to borrow from great products without ripping them off. Practical, specific, and free.
From
Learn UI Design
by Erik D. Kennedy
20 min read
- Use a scrim or overlay so text on photos stays legible
- Pick from a short list of proven fonts instead of guessing
- Steal structure and patterns from products you admire, deliberately
Open
learnui.design →
📄 Article
✓ Link checked
Free
Beginner
Why we picked it
A short, illustrated checklist of rules that are safe to follow when you have no design intuition yet. Never use pure black or pure white, saturate your grays, keep contrast high on important elements, and make every choice deliberate. It is the kind of list you keep open in a tab while you work.
From
anthonyhobday.com
by Anthony Hobday
15 min read
- Use near-black and near-white instead of pure black and white
- Give your grays a hint of your accent hue so they feel cohesive
- Every spacing and alignment choice should be intentional, not accidental
Open
anthonyhobday.com →
📖 Book
✓ Link checked
Free
Beginner
Why we picked it
Typography is where most non-designer products quietly fall apart, and this free online book fixes that with plain rules. Start with the ten-minute summary: sensible line length, generous line spacing, one good font, and restrained sizes. Getting just the text right lifts a whole product more than any decoration.
From
practicaltypography.com
by Matthew Butterick
Free online book, start with the 10-minute summary
- Keep line length to roughly 45 to 90 characters for readability
- One well-chosen font beats mixing several average ones
- Body text spacing and size matter more than any flourish
Open
practicaltypography.com →
📖 Book
✓ Link checked
Paid
Beginner
Why we picked it
The classic that gives non, designers four principles they will use forever: contrast, repetition, alignment, and proximity. Inconsistent spacing and weak alignment are two of the biggest reasons a no, code app looks sloppy, and this book trains your eye to catch them. Short, example, heavy, and readable in a weekend.
From
Robin Williams (Peachpit)
by Robin Williams
240 pages
- Alignment and proximity kill the scattered, thrown, together look
- Repetition of type and spacing makes a product feel like one thing
- Contrast should be strong and deliberate, not timid
Open
amazon.com →
📖 Book
✓ Link checked
Paid
Intermediate
Why we picked it
A logic-driven handbook aimed at developers who no longer want to depend on a designer, from someone who has designed products used by millions. It covers using color sparingly, building a consistent spacing system, and making interfaces accessible. Think of it as Refactoring UI's more systematic, checklist-heavy cousin.
From
practical-ui.com
by Adham Dannaway
Book plus Figma design system kit
- Build one spacing scale and reuse it everywhere for consistency
- Use color purposefully and sparingly, not decoratively
- Accessibility rules (contrast, hierarchy) also make things look better
Open
practical-ui.com →
📄 Article
✓ Link checked
Free
Beginner
Why we picked it
Color is where founders most often go wrong, and this walks you through a simple, safe system: one primary, a set of neutrals, and a couple of accents used with restraint. It explains how to build shades from a single base color so your palette feels intentional. Concrete enough to copy straight into your product.
From
DEV Community
by George Francis
12 min read
- Start from one primary color and derive a full shade range
- Neutrals do most of the work, accents appear rarely and on purpose
- A small deliberate palette reads as more professional than many colors
Open
dev.to →
Why we picked it
A free, fast preview of the Refactoring UI mindset that you can apply this afternoon. It gives you seven fixes (use more white space, add a hint of color, use fewer borders, think outside the box) that instantly lift a default no-code layout. If you only read one thing before your next design pass, read this.
From
Refactoring UI (Medium)
by Adam Wathan and Steve Schoger
10 min read
- Extra white space alone makes a cramped screen feel considered
- Accent color and soft shadows replace heavy borders and boxes
- Emphasize by de, emphasizing everything else, not by making one thing louder
Open
medium.com →
