Every screen you ship is made of the same handful of decisions: which colours, which type sizes, how much space, which symbols, and what the eye lands on first. Settle them once and each new screen gets cheaper to design and easier to read. Leave them unsettled and you pay on every screen after — arguments about padding, a fifth shade of grey, headings that compete with each other.
These are not aesthetic preferences. They are the machinery that lets someone who has never seen your product glance at a screen and work out where they are and what to do next. Decide them deliberately, write them down, and stop re-deciding them.
- What is UI design? — article
- UI Design — video
- Every UI/UX Concept Explained in Under 10 Minutes — video
Color
Colour does three jobs in an interface: it ranks things, it carries meaning, and it makes the product recognisable. Keep the three separate. A brand colour that also means destructive will eventually delete something important.
Build a small palette — one primary, a neutral ramp of five or six greys, and a semantic set for success, warning, error and information. Define each as a token named for its job (color-danger), not its appearance (red-500).
Then check contrast: 4.5:1 for body text, 3:1 for large text and the edges of controls. Never let colour be the only signal. Around one man in twelve has some form of colour vision deficiency, most often the kind that crowds red and green together, so pair every colour cue with an icon, a word, or a position.
- How To Actually Implement Your UI Color Palette — article
- 100 color combinations to influence your next design — article
- Color Theory — article
Typography
Pick one typeface and learn it properly before adding a second. Most products need one family with a real weight range — regular, medium, bold — and numerals of a fixed width, so a column of figures does not jitter as the digits change. Four fonts is not more choice, it is four places to drift.
Set a scale instead of choosing sizes per screen. Something like 12, 14, 16, 20, 24, 32, 48 gives you enough steps and forbids the stray 15px. Body text at 16px with line height near 1.5; headings tighter, around 1.2. Keep line length between roughly 45 and 75 characters — past that the eye loses its place on the return sweep.
Hierarchy comes from contrast between steps, not from the number of steps. A page with six heading levels has none.
- Guide: How to Define & Use Typography in UX/UI Design — article
- Principles of Typography in UI Design — article
- Typography in UI Design — video
Layout & Grid
A grid is an agreement about where things may go. Twelve columns with a fixed gutter is the usual choice: twelve splits cleanly into halves, thirds, quarters and sixths, so most layouts come out a whole number of columns wide.
A grid earns its keep again when the window narrows. Say how the columns collapse — twelve on a desktop, eight on a tablet, four on a phone — and what each block does at each step: reflow, stack, or drop off the screen. Leave that unwritten and every page breaks differently.
Spacing matters more than columns. Choose a base unit, usually 4 or 8px, and make every margin, padding and gap a multiple of it — that ends most of the drift where one card gets 13px of padding and its neighbour 16.
When a screen feels messy, measure the gaps before you touch the colours.
- Understanding layout — article
- Complete Layout Guide — video
Icons
An icon compresses meaning, and only works when the reader already holds the meaning. A magnifying glass, a house, a bin — learned conventions, not universal truths. Everything else needs a label.
The test: cover the label and ask someone what the icon does. If they hesitate, the label stays. Icon-only toolbars are the usual offender. They save space, cost comprehension, and you find out months later in support tickets.
Use a single set at one stroke weight and one grid size, so a 24px icon never sits beside a 20px one from another family. Any icon that is also a control needs a touch target of at least 44 by 44 points, and a name a screen reader can read out. An icon that merely repeats the label beside it needs neither — hide it from assistive technology, or the reader hears the word twice.
- The basics of iconography in UI design: A comprehensive guide — article
- Design Principles for Perfect Icons: A Complete UI/UX Guide — article
- How to Design Better ICON — video
- Figma Design System: 09 Iconography — video
Visual Hierarchy
Hierarchy answers one question: if someone looks at this screen for a single second, what do they see? If the answer is "depends what they came for", you have arranged a screen rather than designed one.
You have four levers — size, weight, colour and position — and two at a time is usually enough. A primary action that is larger, darker, coloured, boxed and shadowed is shouting over itself.
Every screen gets one primary action, and everything else demotes. Secondary becomes an outline, tertiary becomes plain text. The failure mode is three filled blue buttons of equal weight: the user stops to work out which one you meant, and a choice that should have been automatic now costs a decision.
Squint until the detail disappears. Whatever survives is your real hierarchy.