Master UI Design: Proven Tips for Fonts, Colors, Shadows, and Whitespace
This guide shares practical UI design techniques—including font and size selection, color ratios, effective shadow usage, and strategic whitespace—to help designers create more refined, consistent, and visually appealing interfaces while avoiding common pitfalls.
Using Font and Size
UI designers commonly use fonts such as PingFang, Source Han Sans, LanTing Black, and HuaWen Black. Choose fonts based on platform: PingFang for iOS, Source Han Sans for Android, and avoid LanTing Black because its large size creates mismatched mockups.
Common font sizes for iOS retina screens are 10pt, 12pt, 14pt, 15pt, 16pt, and 18pt. When designing complex hierarchies, ensure different text levels are not too close in size, use standard font weights, keep size consistency across the same hierarchy, and establish design guidelines early.
Color Usage
Design systems usually provide a brand color, several accent colors, and a grayscale palette. Avoid pure black; use off‑black tones for a more natural look, and apply different shades of gray to create text hierarchy.
Apply the 6:3:1 principle (primary : secondary : accent) for color distribution, a rule originally from interior design. Keep brand color under 30% of the page to prevent visual chaos. For gradients, pick a base color, then adjust the neighboring colors' brightness slightly up and down for a comfortable transition.
Shadow Usage
Shadows add depth and help users relate 2D interfaces to the real world. Use vertical offset (light source slightly above) for natural shadows, and prefer shadows over borders for subtle division that keeps user focus.
Shadows need not be black; consider the environment color when choosing shadow hue. Diffuse shadows differ from regular shadows by simulating a larger light source, giving a delicate, gem‑like feel—ideal for icons or small controls.
Whitespace Usage
Whitespace (empty space) is not just white; it refers to any unfilled area. Proper whitespace creates rhythm, clarifies hierarchy, and makes reading more comfortable, resulting in a more polished interface.
Use a line height of 1.5× for text, and apply the “intimacy relationship” rule: place smaller gaps between closely related large elements and larger gaps between less related small elements. Keep element sizes moderate so the layout can “breathe.”
There are many more subtle tricks in UI design; this article offers a starting point for you to explore further.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.