Do's & Don'ts
Practical rules for Apple-inspired interface design. Each comparison shows the visual difference — not just the rule.
The navigation bar sits above scrollable content. Blur clarifies the separation, adds depth, and is used precisely once per view layer.
When everything is blurred, nothing reads as elevated. Glass becomes visual noise, and the material system loses all communicative value.
Three distinct sizes create immediate visual hierarchy. Users scan the largest text first, read body second, and note metadata last.
When everything is bold or the same size, nothing stands out. The user has no visual anchor and must read everything to find what matters.
Accent color signals the single most important action. Secondary and tertiary actions use tint or neutral styles, preserving the accent's signal value.
Three identical blue buttons give no indication of priority. The accent color has lost its meaning — users don't know which action to take.
Generous Padding
Content has room to breathe. Eyes can rest between elements. Reading is effortless.
Comfortable20–24px internal padding lets each element stand alone. White space is not wasted — it's structural. It signals organization and premium quality.
Insufficient padding makes content feel anxious and low-quality. Tap targets become dangerously small, and users lose their reading position easily.
A gentle shadow with low opacity creates the illusion of elevation without feeling heavy. The card floats; it doesn't punch through the page.
Thick black drop shadows look like they belong in a 2010 UI. They draw more attention than the content itself and suggest physical impossibility.
Small button = 8px radius. Medium card = 12px. Large sheet = 20px+. The ratio of radius to size stays consistent, feeling natural at every scale.
Inconsistent radii feel haphazard and break visual rhythm. Fully circular corners on non-square shapes create unintended oval shapes that look accidental.
Three levels of button weight communicate action importance at a glance. Users immediately know which action is primary without reading labels.
When all actions look equally important, users experience decision paralysis. "Cancel" has the same visual weight as "Continue" — which one do you tap?
The navigation bar is transparent to the content beneath it. It provides orientation without demanding visual attention. Content is the hero.
A heavy navigation bar competes with the content beneath it. The app's brand chrome becomes a distraction rather than an orientation aid.
A brief, physical spring response tells the user their tap was registered. The 200ms duration is fast enough to feel responsive, not sluggish.
Animations that run without user input are distracting and exhausting. They also drain battery, cause nausea in sensitive users, and communicate nothing useful.
All icons share the same visual language — 2px stroke, same optical size, same color. Labels prevent ambiguity. The set feels designed as one cohesive system.
These four icons look like they came from four different design kits. Different colors, sizes, and stroke weights make the UI feel assembled, not designed.
Glass works because there's something to blur and refract. Placed over colorful content, it captures light and creates genuine depth that feels material.
Blur on a white background blurs nothing. You get a white card with a faint border — no depth, no materiality, just the appearance of glass without the substance.
An onboarding screen needs space to focus attention. A dashboard needs density to show many metrics at once. Context determines the right density — not preference.
Treating an onboarding flow and a settings panel with identical density ignores user context and goals. Dense onboarding overwhelms first-time users; spacious dashboards waste expert time.