Frontend Design Language Basics
1. Tabs vs Headings: Structure vs Interaction
In web design, Tabs and Headings are often confused, but they represent two completely different concepts:
| Type | Analogy | Features |
|---|---|---|
| Tabs | Like the “section dividers” at the top of a magazine | No fixed HTML semantics; require JavaScript for state control; used to switch content blocks. |
| Headings | Like section titles in an article | Structural elements (<h1> ~ <h6>) that define content hierarchy. |
👉 In one sentence: Tabs focus on interaction switching, while Headings focus on document structure.
2. Icon vs Badge: Visual Expression of Function vs Status
🔹 Icon
Icons represent functions or objects. For example:
| Icon | Name | Meaning |
|---|---|---|
| 🔍 | Search Icon | Search function |
| ⚙️ | Settings Icon | Settings function |
| 🔔 | Notification Icon | Notification center |
Icons emphasize recognition of an action or object — they’re entry points for operations.
🔸 Badge
A badge is a visual indicator of state or quantity. There are four common types:
| Type | Example | Meaning |
|---|---|---|
| 🔢 Count Badge | 99+ | Shows quantity, such as messages or notifications |
| 🟢 Status Badge | Online / New | Indicates current state |
| 🔴 Dot Badge | Red dot | Signals new content, no number |
| 🏷️ Label Badge | Beta / Pro | Displays version or label |
👉 In one sentence: An Icon shows what it is, while a Badge shows what state it’s in.
3. Sidebar Navigation vs Vertical Navigation
Both are vertical (column-based) navigation structures, but they differ in position and purpose:
| Type | Definition | Use Case |
|---|---|---|
| Sidebar Navigation | Fixed navigation area on the page edge (left or right) | Admin dashboards, app main interfaces |
| Vertical Navigation | A vertical list of navigation links appearing anywhere | Inside content areas or card sections |
👉 You can think of it this way: Every Sidebar is a Vertical Navigation, but not every Vertical Navigation is a Sidebar.
4. Command Palette vs Action Panel
| Type | Core Logic | User Intent |
|---|---|---|
| ✅ Command Palette | User actively types a command to perform an action (e.g. VS Code’s ⌘+Shift+P) | “I know what I want—just let me do it.” |
| ✅ Action Panel | Displays all possible actions related to the current object | “I’m looking at something—what can I do with it?” |
5. Alert, Modal Dialog, and Notification: Key Differences
| Type | Purpose | User Action |
|---|---|---|
| ✅ Alert | Provides information | Read-only, no interaction needed |
| ✅ Modal Dialog | Requires immediate decision | Must interact, e.g. “Confirm Delete” |
| ✅ Notification | Informs user of background events | Can ignore, doesn’t interrupt workflow |
6. Pill Badge Style Comparison
| Type | Feature | Visual Style |
|---|---|---|
| Small Flat Pill Badge | Small, solid background, rounded edges | Lightweight but noticeable |
| Pill with Border | Hollow, outlined, no background | Clean and minimal look |
7. Button Types: Primary / Secondary / Soft
| Type | Background Style | Use Case |
|---|---|---|
| Primary Button | Solid background | Main actions like “Submit” or “Save” |
| Secondary Button | Bordered + transparent background | Supporting actions like “Cancel” or “Back” |
| Soft (Ghost) Button | Almost transparent or lightly shaded | Non-critical, unobtrusive actions |
👉 In one sentence: The primary button executes the main action, the secondary offers alternatives, and the soft button handles minor functions.
8. Container and Layout Control
A Container defines the maximum content width and centers it on the page.
| Type | Feature | Purpose |
|---|---|---|
| Full-width | Stretches across the entire viewport | Dashboards, showcase pages |
| Constrained | Max width limited (e.g. 1280px) and centered | Article or blog content |
| Breakpoint | Adjusts width based on device | Responsive layouts |
| Padded Content | Adds inner spacing (padding) | Improves readability |
| Narrow | Specially narrow container | Long-form reading or blog text |
9. Card and Responsive Behavior
“Well, edge-to-edge on mobile”
A Card is a backgrounded information block.
- On mobile (📱): usually full-width (edge-to-edge) for immersion and space efficiency.
- On desktop (💻): typically centered (constrained) for readability and visual balance.
10. Media Object Layout Pattern
A Media Object is a classic UI layout pattern:
Media (avatar, image, or icon) on the left or right, with text (title, description, actions) beside it.
Common use cases include:
- Comment lists (avatar + text)
- News cards (thumbnail + content)
- Chat messages (avatar + speech bubble)
Conclusion
Understanding these basic UI components and layout principles is like mastering the grammar of web interfaces. Once you can clearly distinguish Tabs vs Headings, Icons vs Badges, and Primary vs Soft Buttons, your design and code will become more consistent, readable, and semantically meaningful.
🧩 “Design language” isn’t just about style—it’s about the semantic logic behind every element in the interface.