8.3 Design principles that stop UI looking amateur

The distance between “obviously AI-generated” and “looks like a designer touched it” is not talent — it’s about six principles you can run as a checklist over any screen. You don’t need taste; you need to know what to look for and what to tell the AI to fix. This chapter is that checklist.

Key vocabulary

Visual hierarchy: The order your eye travels a screen, controlled by size, weight, colour, and position. Good hierarchy has one obvious starting point; flat hierarchy makes everything shout at once.
8-pt grid: A spacing system where every gap and size is a multiple of 8 (4 for fine adjustments): 4, 8, 16, 24, 32, 48… Consistent multiples are what make a layout feel deliberate instead of random.
Measure (line length): The width of a line of text. ~50–75 characters is comfortable; full-width paragraphs on a wide screen are tiring to read and a classic “undesigned” tell.
Semantic colour: Colour that carries meaning: green = success, amber = warning, red = error/destructive, blue = info. Reserve saturated colour for these; use neutrals everywhere else.
Gestalt grouping: We perceive things that are close together, alike, or inside a shared boundary as a group. Spacing and containers communicate structure without drawing a single line.

Hierarchy: give the eye one place to land

A professional screen answers “where do I look first?” instantly. You create that with contrast in size, weight, colour, and position — the title is big and bold, the primary action stands out, supporting text recedes. When everything is the same size and weight, the eye has nowhere to land and the screen feels flat and amateur. The fix you ask for is almost always more contrast between the important thing and everything else, not less.

FIG 1 · flat vs ranked Same content, two hierarchies. On the right, size + weight + a single accent tell the eye exactly where to go.

Spacing: pick one scale and never leave it

The single fastest upgrade to any UI is consistent spacing. Pick a scale — the 8-point grid (4, 8, 16, 24, 32, 48) is the industry default — and make every margin and padding a value on it. Random spacing (13px here, 7px there) is what your eye reads as “amateur” even when it can’t say why. When the AI’s output looks “off,” nine times out of ten the gaps are inconsistent; telling it to “use an 8-pt spacing scale” fixes it.

FIG 2 · random vs on-grid spacing The right column uses 8-pt multiples between every block. The left uses arbitrary gaps — the difference reads instantly as “sloppy vs designed.”

Type, colour, alignment: the other three

Typography gets out of hand fast. Use a small set of sizes (a type scale), lean on weight rather than many fonts for emphasis, set body line-height around 1.5, and keep line length to 50–75 characters. Colour: let neutrals (greys) carry ~90% of the surface, choose one accent for primary actions, and reserve saturated colour for semantic status — green/amber/red. A rainbow of equally-bright colours is the fastest way to look unprofessional. Alignment and consistency are the quiet finishers: share left edges, align to a grid, and keep corner radius, button height, and icon size uniform. Inconsistency — three different button heights, four corner radii — is the most common AI tell of all.

Amateur signal	What's wrong	Tell the AI
Everything same size/weight	no hierarchy — eye has nowhere to land	“increase contrast on the heading and primary action”
Uneven, random gaps	no spacing system	“use an 8-pt spacing scale consistently”
Many fonts / many sizes	type chaos	“one font, a 4–5 step type scale, weight for emphasis”
Lots of bright colours	no semantic meaning	“neutrals + one accent; reserve colour for status”
Misaligned edges, mixed radii	looks unfinished	“align to a grid; consistent radius and button height”

Run this list over any AI-built screen — each row is a one-line fix.

01 Learning objectives

0 / 6 done

02 Curated reading

Refactoring UI — 7 Practical Tips for Cheating at Design
essential 15m — The fastest “look designed without being a designer” wins.
NN/g — Visual Hierarchy (research-based guidelines)
optional 12m — Why the eye lands where it lands, and how to control it.
Material Design 3 — Typography
optional 10m — Type scale, weight, and reading comfort done systematically.

03 Knowledge check

knowledge check3 questions · pass ≥ 70%

01easy
Designing on an “8-pt grid” means…
02easy
Using more bright, saturated colours generally makes a UI look more professional.
03medium
A comfortable line length (measure) for body text is about…

04 Interview questions

browse all ↗

What gets asked on this topic — tap a card for how to approach it, the follow-ups, and the trap. Company tags are best-effort & sourced.

Commonly asked mid concept common What most reliably makes a UI look amateur, and how do you fix each?
A few repeat offenders: flat hierarchy (everything the same size, so the eye has nowhere to land — fix with contrast in size/weight/colour), inconsistent spacing (random gaps — fix by committing to an 8-pt scale), too many fonts and bright colours (fix with one font + a type scale, neutrals + one accent, colour reserved for status), and misalignment (fix by sharing edges and keeping radius/height uniform). None of these need taste — they're a checklist.
What a strong answer covers
- Flat hierarchy → add contrast; give the screen one focal point.
- Random spacing → snap everything to an 8-pt grid.
- Font/colour chaos → one font + type scale; neutrals + one accent.
- Misalignment → shared edges, consistent radius and control height.
Follow-ups they push on
- Why does consistent spacing read as 'designed'?
- How much of 'good design' can a non-designer get from rules alone?
Red flag Trying to fix an amateur look by adding decoration (borders, gradients) instead of fixing spacing, hierarchy, and alignment.
source: Refactoring UI — 7 Practical Tips for Cheating at Design ↗