132 lines
2.7 KiB
Markdown
132 lines
2.7 KiB
Markdown
# UI/UX Keywords Reference
|
|
|
|
Progressive disclosure reference for common UI terminology and adjective
|
|
palettes.
|
|
|
|
## Component Keywords
|
|
|
|
### Navigation
|
|
|
|
- navigation bar, nav menu, header
|
|
- breadcrumbs, tabs, sidebar
|
|
- hamburger menu, dropdown menu
|
|
- back button, close button
|
|
|
|
### Content Containers
|
|
|
|
- hero section, hero banner
|
|
- card, card grid, tile
|
|
- modal, dialog, popup
|
|
- accordion, collapsible section
|
|
- carousel, slider
|
|
|
|
### Forms
|
|
|
|
- input field, text input
|
|
- dropdown, select menu
|
|
- checkbox, radio button
|
|
- toggle switch
|
|
- date picker, time picker
|
|
- search bar, search input
|
|
- submit button, form actions
|
|
|
|
### Calls to Action
|
|
|
|
- primary button, secondary button
|
|
- ghost button, text link
|
|
- floating action button (FAB)
|
|
- icon button
|
|
|
|
### Feedback
|
|
|
|
- toast notification, snackbar
|
|
- alert banner, warning message
|
|
- loading spinner, skeleton loader
|
|
- progress bar, step indicator
|
|
|
|
### Layout
|
|
|
|
- grid layout, flexbox
|
|
- sidebar layout, split view
|
|
- sticky header, fixed footer
|
|
- full-width, contained width
|
|
- centered content, max-width container
|
|
|
|
## Adjective Palettes
|
|
|
|
### Minimal / Clean
|
|
|
|
- minimal, clean, uncluttered
|
|
- generous whitespace, breathing room
|
|
- subtle, understated, refined
|
|
- simple, focused, distraction-free
|
|
|
|
### Professional / Corporate
|
|
|
|
- sophisticated, polished, trustworthy
|
|
- corporate, business-like, formal
|
|
- subtle shadows, clean lines
|
|
- structured, organized, hierarchical
|
|
|
|
### Playful / Fun
|
|
|
|
- vibrant, colorful, energetic
|
|
- rounded corners, soft edges
|
|
- bold, expressive, dynamic
|
|
- friendly, approachable, warm
|
|
|
|
### Premium / Luxury
|
|
|
|
- elegant, luxurious, high-end
|
|
- dramatic, bold contrasts
|
|
- sleek, modern, cutting-edge
|
|
- exclusive, boutique, curated
|
|
|
|
### Dark Mode
|
|
|
|
- dark theme, night mode
|
|
- high-contrast accents
|
|
- soft glows, subtle highlights
|
|
- deep backgrounds, muted surfaces
|
|
|
|
### Organic / Natural
|
|
|
|
- earthy tones, natural colors
|
|
- warm, inviting, cozy
|
|
- textured, tactile, handcrafted
|
|
- flowing, organic shapes
|
|
|
|
## Interaction & Behavior Keywords
|
|
|
|
### Animations
|
|
|
|
- smooth entry animation, slide-in
|
|
- fade transition, cross-fade
|
|
- micro-interaction, bounce effect
|
|
- skeleton loader, shimmer effect
|
|
|
|
### Responsiveness
|
|
|
|
- responsive layout, adaptive grid
|
|
- mobile-first, desktop-first
|
|
- breakpoint, viewport
|
|
- stacked layout, side-by-side
|
|
|
|
### User Flows
|
|
|
|
- progressive disclosure, step indicator
|
|
- expandable section, collapsible panel
|
|
- infinite scroll, pagination
|
|
- drag and drop, swipe gesture
|
|
|
|
## Shape Descriptions
|
|
|
|
| Technical | Natural Language |
|
|
|-----------|------------------|
|
|
| `rounded-none` | sharp, squared-off edges |
|
|
| `rounded-sm` | slightly softened corners |
|
|
| `rounded-md` | gently rounded corners |
|
|
| `rounded-lg` | generously rounded corners |
|
|
| `rounded-xl` | very rounded, pillow-like |
|
|
| `rounded-full` | pill-shaped, circular |
|