UI and visual design

UI design takes the structure and behaviour an interaction designer has settled and gives it form. The work is less decoration than signalling. Every visual choice either helps a person read the screen in the right order or gets in their way. Nielsen Norman Group reduces the core to a handful of principles, and the Interaction Design Foundation supplies the perceptual science underneath, colour theory and the Gestalt laws of grouping above all.

Principles that carry the weight

• Hierarchy and scale. Size, weight and position rank elements, so the most important thing on a screen should also be the most prominent, and only one thing can hold that place.
• Contrast. Elements that behave differently should look different, and elements that are the same should not vary by accident. Text contrast also has a published minimum, covered under accessibility.
• Balance and alignment. A consistent grid and shared edges make a screen read as deliberate, even when the layout is asymmetric.
• Proximity and similarity. Gestalt perception explains why items placed close together, or styled alike, are read as a group. Spacing is therefore a grouping tool, not filler.
• Typography. A readable body size, a restrained type scale and a comfortable line length do more for an interface than any illustration.
• Colour with a job. A small palette where each colour means something, such as action, status or brand, beats a large one chosen for variety.

These principles compete. A button can be large, coloured and centred and still lose to a heading that is heavier and higher on the page. Visual design is the discipline of settling those contests on purpose.

Why early screens look amateur

The typical first portfolio has too many typefaces, too many colours and too little space. Each addition feels expressive; together they flatten the hierarchy, because when everything is emphasised nothing is. The cure is subtraction: one or two families, a spacing scale applied without exceptions, and colour kept for meaning. Another trap is designing at a single screen width. Real interfaces reflow, so type, spacing and components need rules for narrow and wide layouts, which is where web design and front-end code take over. Commercial typefaces also bring questions about where they may be used, set out under font licensing. A quick check is to blur the screen or squint at it: if the order in which blocks jump out differs from the order in which people ought to read them, the hierarchy needs work before any colour is touched.

Visual decisions that repeat across a product belong in a design system, where a colour or a type size is defined once as a token and reused. Designers who enjoy that rigour often move from UI into systems work; those drawn towards image and brand tend to move into graphic design and illustration. Either way, the portfolio evidence looks alike: screens shown beside the reasoning for their spacing, type and colour.