📖 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
Beginner
Why we picked it
Bad type is one of the loudest template tells, and this one page fixes most of it. Butterick gives you exact numbers for body size, line spacing, and line length, plus the small tells (curly quotes, one space after a period) that separate careful work from a wizard fill, in. Set these once in your no, code theme and every screen improves.
From
practicaltypography.com
by Matthew Butterick
5 min read
- Body text wants 15 to 25px, line spacing 120 to 145 percent, and 45 to 90 characters per line
- A professional font beats a system default like Arial or Times
- Curly quotes and single spacing are cheap, high, signal polish
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
Beginner
Why we picked it
The most accessible, practical intro to usability ever written, you can read it in a weekend and immediately fix your product. The definition of 'make it obvious, not clever.'
From
sensible.com
by Steve Krug
~200 pages
- Self-evident design is the goal, kill anything that adds thinking.
- Users satisfice: they scan and click the first reasonable option.
- Cheap, frequent usability testing beats large formal studies.
Open
sensible.com →
📄 Article
✓ Link checked
Free
Intermediate
Why we picked it
Research, backed breakdown of what actually makes users trust a site: design quality, upfront disclosure, current and comprehensive content, and connection to the wider web. It tells you where to spend your credibility budget instead of guessing. Useful when you want to justify design work to a co, founder who thinks polish is cosmetic.
From
Nielsen Norman Group
by Aurora Harley
12 min read
- Visual design quality is a real trust signal, not vanity
- Being upfront about pricing and terms reduces user anxiety
- Trust builds slowly, so avoid anything that feels like a letdown
Open
nngroup.com →
📄 Article
✓ Link checked
Free
Intermediate
Why we picked it
The foundational study behind almost every trust, in, design article, drawn from over 4,500 people. Its blunt finding is that people judge credibility heavily on visual design, layout, typography, and color, which is precisely why a sloppy no, code app loses trust before the content is even read. Read the source, not the summaries of it.
From
Stanford Web Credibility Project
by B.J. Fogg (Stanford Persuasive Tech Lab)
10 min read
- Nearly half of users judge credibility on visual design first
- Show the real people and organization behind the product
- Small errors like typos disproportionately damage trust
Open
credibility.stanford.edu →
📄 Article
✓ Link checked
Free
Intermediate
Why we picked it
Eye, tracking research showing that users scrutinize real, informative photos and completely ignore decorative stock imagery. This is the evidence behind our advice to use real photos or none. It will stop you from padding your screens with the same smiling, handshake stock shots that scream template.
From
Nielsen Norman Group
by Jakob Nielsen
8 min read
- Users study real product and people photos, and skip filler imagery
- Stock, feel, good images add clutter without adding trust
- If a photo carries no information, the screen is often better without it
Open
nngroup.com →
📄 Article
✓ Link checked
Free
Beginner
Why we picked it
If you want to understand why a font pairing works rather than just copying one, this is the clearest primer, straight from the source most no, code tools pull fonts from. It teaches contrast, hierarchy, and mood so you can make confident choices. Pair it with Fontpair: one gives you options, this gives you the judgment.
From
Google Fonts Knowledge
by Google Fonts
12 min read
- Pair fonts by contrast in weight or style, not similarity
- Establish clear hierarchy between heading and body type
- Fewer, well, chosen typefaces beat a crowded font stack
Open
fonts.google.com →
📄 Article
✓ Link checked
Free
Intermediate
Why we picked it
Our answer tells founders to rewrite every button label in their own voice, and this is the research on how to do it well. It shows why specific action verbs beat generic Submit or Yes or No, and how honest labels reduce hesitation. Small copy wins like this are cheap and remove the wizard, filled, it, in feeling instantly.
From
UX Psychology (Dr Maria Panagiotidi)
by Maria Panagiotidi
8 min read
- Label buttons with the specific action, not Submit or OK
- Copy that sets accurate expectations lowers user anxiety
- First, person or plainspoken labels feel human, not templated
Open
uxpsychology.substack.com →
📄 Article
✓ Link checked
Free
Intermediate
Why we picked it
Inconsistent spacing is one of the four template tells, and an 8, point spacing system is the simplest cure. Snapping every margin and padding to multiples of 8 removes the random, eyeballed gaps that make a no, code build feel amateur. Set the values once and your whole app gains a quiet rhythm.
From
Spec.fm
by Spec
6 min read
- Use multiples of 8 for margins, padding, and gaps
- A shared spacing scale removes random, inconsistent gaps
- Rhythm and alignment are what the eye reads as polished
Open
spec.fm →
📄 Article
✓ Link checked
Free
Beginner
Why we picked it
Official guidance on styling and structuring a no, code app so it reads as intentional rather than assembled from blocks. It covers reusable styles, consistent components, and layout, the exact things that separate a custom, feeling app from an obvious template. Even if you use a different tool, the reusable, style, base advice transfers.
From
Bubble Docs
by Bubble
15 min read
- Define styles once and reuse them for visual consistency
- Reusable elements keep navigation and components coherent
- Custom styling is what removes the stacked, blocks look
Open
manual.bubble.io →
📄 Article
✓ Link checked
Free
Beginner
Why we picked it
This is the reference everyone quietly copies when they first try to write down their brand voice, and it is public, free, and readable in one sitting. It separates voice (the part that never changes) from tone (the part that shifts by situation), which is exactly the distinction a marketer, an agency, and a freelancer need to share so their work sounds like one company. Treat it as a starting point for structure, not a template to mimic word for word.
From
Mailchimp Content Style Guide
by Mailchimp
- Write down your voice as a short set of named traits (Mailchimp uses plainspoken, genuine, translator, dry humor) so anyone new can point to what they were aiming for
- Voice stays fixed while tone flexes by context, so document both separately instead of hoping people intuit the difference
- Pair each principle with a rule of thumb (active voice, plain English, positive framing) that a reviewer can actually check against
Open
styleguide.mailchimp.com →
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 →
✍️ Essay
Free
Intermediate
Why we picked it
Facebook's former head of product design on what separates good design from decoration, which reframes polish as clarity and intent rather than prettiness. It backs our point that users forgive a simple product but distrust a sloppy one. A short read that changes how you decide what to polish.
From
The Year of the Looking Glass (Julie Zhuo)
by Julie Zhuo
8 min read
- Good design is intentional and clear, not merely decorated
- Simplicity done well signals competence and care
- Decide what matters most, then make that unmistakably clean
Open
medium.com →
