UI/UX Design Tutorial: Signifiers, Hierarchy, and Interaction

Design interfaces that signal how they work. Use visual cues such as container outlines, grayed‑out text for disabled elements, and distinct button states. Highlights, hover effects, and tooltips act as signifiers that reveal affordance without extra instruction.

Layout and Hierarchy

Create visual hierarchy by varying size, position, and color. Place the most important items at the top, make them larger, and give them richer colors. Contrast between big and small, colorful and neutral directs the eye. Images add color and aid scanning, while icons can replace text to illustrate movement or relationships.

Typography and Spacing

Adopt a four‑point grid system where every dimension is a multiple of four. Use generous whitespace; it often outweighs strict grid adherence. One sans‑serif font usually suffices. Tighten letter spacing by –2 % to –3 % and set line height to 110 %–120 % for professional‑looking headers. Limit font sizes: a maximum of six distinct sizes for landing pages and fewer for high‑density dashboards.

Color Theory

Start with a single primary brand color. Lighten it for backgrounds and darken it for text. Apply semantic colors—blue for trust, red for danger, yellow for warning, green for success—to convey purpose rather than decorative flair.

Dark Mode and Depth

In dark mode, use lighter cards than the background to generate depth because shadows lose impact. Reduce saturation and brightness for UI elements. In light mode, lower shadow opacity and increase blur; cards need subtle shadows while popovers benefit from stronger ones.

Interaction and Feedback

Design buttons with four core states: default, hovered, active/pressed, and disabled, adding an optional loading state when needed. Inputs require focus, error, and warning states. Micro‑interactions such as sliding confirmation chips provide feedback beyond basic state changes. For overlays, apply a linear gradient or progressive blur to keep text readable over images.