Brandon WatkinsFounder, Flowlabz
On this page7 chapters
Every few years the design industry declares a new visual language the future of interfaces. Some of it sticks. Most of it doesn't. But the reason the good work endures and the trend-chasing ages badly isn't luck. It's that enduring design is built on principles that predate digital interfaces entirely.
These aren't rules. Rules can be broken with good reason. These are principles, structural ideas about how humans perceive and make sense of visual information. Ignore them and your design will feel off without anyone being able to say exactly why. Apply them and your work will hold up years after the trend that inspired it has been forgotten.
Hierarchy: Tell People Where to Look
Visual hierarchy is the most foundational principle in interface design. It answers a single question: when someone looks at this screen, what do they see first?
Hierarchy is established through size, weight, colour, contrast, and position. A headline is larger than body copy. A primary button has more visual weight than a secondary one. The most important information sits higher on the page and commands more space.
The failure mode is hierarchy collapse. Every element competing equally for attention, leaving users to read the entire screen to find what they need. You see this most in dashboards where twelve metrics share identical visual weight, and in forms where required and optional fields look the same.
A practical test: Screenshot any screen you're designing and reduce it to 20% opacity. The shapes that remain visible are your hierarchy. If everything is equally faint, you don't have one.
Contrast: Make Distinctions Legible
Contrast does two jobs simultaneously: it creates hierarchy and it ensures legibility. Text on a background needs sufficient contrast to be readable. Interactive elements need to look different from static ones. Active states need to look different from inactive ones.
WCAG AA requires a 4.5:1 contrast ratio for body text. This isn't a bureaucratic requirement. It's a threshold below which a meaningful percentage of your users will struggle to read your content. Use a contrast checker. Make it a non-negotiable step in your design process.
Beyond legibility, contrast communicates meaning. High contrast draws attention. Low contrast recedes. Use this deliberately, not just for accessibility, but as a compositional tool.
Proximity: Group What Belongs Together
The principle of proximity comes from Gestalt psychology: elements that are physically close to each other are perceived as related. This sounds obvious, but it's violated constantly in interface design.
A label that sits equidistant between two form fields belongs to neither. A button spaced too far from the content it acts on feels disconnected. A heading with the same gap above and below it doesn't signal which section it belongs to.
Good use of proximity means: labels sit close to their inputs, headings sit closer to the content below them than the content above, and related actions are grouped together with clear separation from unrelated ones. Spacing is communication, use it intentionally.
Consistency: Build a Visual Language and Keep It
Consistency is how interfaces become learnable. When every primary button looks the same, users learn once and apply everywhere. When the same action looks different in different parts of the product, users have to re-learn on every screen.
This extends to interaction patterns, not just visual style. If clicking a card opens a modal in one part of the app and navigates to a new page in another, you've broken the user's mental model. Consistent behaviour builds confidence. Inconsistent behaviour creates anxiety.
The practical implication: design systems aren't a luxury for large teams. Even on a solo project, a small set of defined components and documented interaction patterns will produce more consistent, more learnable interfaces than designing from scratch each time.
White Space: The Design of Nothing
White space (empty space, breathing room, negative space) is not wasted space. It is an active design element. It separates elements, creates focus, and signals quality. Cramped interfaces feel anxious. Generous spacing feels considered.
The instinct to fill space is natural, especially when a client says "there's too much empty space." The right response is to explain that the space is doing work: it's directing attention toward the content that matters, and away from visual noise.
Apply more white space than feels comfortable in your first draft. Then reduce it by 10%. You'll almost always land somewhere better than where you started.
Alignment: Invisible Structure, Visible Order
Nothing on a screen should be placed arbitrarily. Every element should align to something. A grid column, the edge of another element, a baseline. Alignment creates the invisible structure that makes a layout feel organised even when users can't articulate why.
Misalignment (elements that are almost but not quite aligned) is one of the most common signs of a junior designer. The eye is extremely sensitive to near-alignment. A 4px offset that looks close enough in isolation reads as careless in context.
Use a grid. Use consistent spacing increments (4px or 8px base units work well). Snap to the grid ruthlessly. The constraints are a feature, not a limitation.
Why These Principles Outlast Trends
These principles work because they're based on human perception, not cultural preference. Humans have processed visual information the same way for thousands of years. The screen is new. The eye is not.
Trends signal cultural context. They say "this is made now." Principles signal craft. They say "this was made carefully." The most durable work in design is usually the work where the principles are applied so well that the trend they were made in becomes irrelevant.
These principles sit underneath every interface we design. See how they come together in our UX and UI design work, or browse the work.
