UI Design Patterns

What Are UI Design Patterns?

UI Patterns are proven design solutions to recurring problems. Instead of inventing a new way to display a navigation menu or a registration form every time, you can use patterns that have proven effective with millions of users.

These patterns are not ready-made templates — they are principles that guide you. Each pattern solves a specific problem and you can adapt it to your project.

Why patterns matter:

• User familiarity: Users expect certain forms. When you use a familiar pattern, the user immediately knows how to interact with your app (Jakob's Law)
• Design speed: You don't need to start from scratch every time
• Informed decisions: Every pattern was built based on real research and data
• Consistency: Using consistent patterns makes the entire product appear cohesive

Navigation Patterns

Navigation is the backbone of any application — if the user can't find the content they want, the rest of the design is pointless.

1. Top Navigation Bar

The most common pattern on the web. A horizontal bar at the top of the page containing the logo and main links.

When to use:

• Websites with 5-7 main links
• When you need the logo to always be visible

Best practices:

• Logo on the right in RTL (left in LTR)
• 7 elements maximum in main navigation
• CTA buttons distinguished by a different color
• Sticky navigation is useful for long pages

2. Sidebar Navigation

A column on the side of the screen with a list of links. Very suitable for:

• Dashboards
• SaaS applications
• Admin systems

Best practices:

• Sidebar width between 240-300px
• Group links into categories with headings
• Icon + text for each link
• Collapsible sidebar for smaller screens
• Clear active state for the current page

3. Bottom Tab Bar

The Tab Bar at the bottom of a mobile screen. The most common pattern in mobile apps.

When to use:

• Mobile apps with 3-5 main sections

Best practices:

• 5 elements maximum
• Icon + text label for each element
• The active element clearly distinguished (different color or larger size)
• Don't put actions in the Tab Bar — navigation only

4. Hamburger Menu

Three horizontal lines that open a hidden menu. Suitable when you have many links and limited space.

Important warning: Studies show that a hidden menu reduces engagement by 20-50% compared to visible navigation. Use it as a last resort, not a first choice.

Form Patterns

Forms are the point where the user transitions from browsing to interacting. Poor form design makes users abandon the page.

1. Label Placement

Three ways to position the label:

• Above the field: Best for most cases — clear, easy to visually scan, and works well on mobile
• Inside the field (Placeholder): Disappears when the user types — don't use this as a label replacement. Can be used as an example alongside the label
• Next to the field: Saves vertical space but uses horizontal space. Suitable for wide forms on desktop

2. Data Validation

• Inline Validation: Validate in real time as the user types or when they leave the field. Best experience
• Error messages: Must be clear and specific — "Invalid email address" is better than "Input error"
• Color isn't enough: Don't rely on red color alone — add an icon and text
• Error message position: Directly below the field, not at the top of the page

3. Smart Segmentation

• Long forms: Break them into steps (Multi-step form) with a clear progress indicator
• Grouping: Group related fields together (first name with last name, city with country)
• Conditional display: Show additional fields only when required (if they choose "Other," show a text field)

4. Form Buttons

• Submit button: Clear and prominent — primary color + text that describes the action ("Create Account" not "Submit")
• Cancel button: Less prominent than submit — text without background or light background
• Order: Submit button on the left in RTL (because the eye ends there)

Card Patterns

The card is the most important component in modern design. It groups related content into a single visual unit.

Anatomy of the Perfect Card

From top to bottom:

1. Image (optional): attracts attention and conveys meaning quickly
2. Category/Badge: a word or two clarifying the type of content
3. Title: short and expressive
4. Description: a line or two clarifying the content
5. Secondary information: date, author, read time
6. Action (optional): button or link

Types of Cards

• Content card: for articles, news, and products. Contains image, title, and description
• Stats card: large number + title + change indicator. Used in Dashboards
• Profile card: profile photo + name + description + links. Used on team pages
• Interactive card: contains buttons and menus. Used in task management apps

Best Practices

• Consistent spacing: same padding on all sides
• Light shadow or border: to distinguish the card from the background
• Hover state: a subtle change when the user hovers over the card
• Fixed or flexible height: cards in a grid should be consistent in height

Modal Patterns

A modal is a window that appears on top of content and demands the user's attention. Use it very carefully because it interrupts the user.

When to Use a Modal?

• Confirming a dangerous action: "Are you sure you want to delete?"
• Information requiring focus: payment form, important settings
• Additional content: item details without leaving the page

When NOT to Use a Modal?

• Simple informational messages — use Toast/Snackbar
• Simple lists — use a Dropdown
• Long content — use a new page

Modal Best Practices

• Dimmed background (Overlay): focuses attention on the window
• Clear close button: X in the corner + ability to click the background to close
• Appropriate width: 400-600px for simple forms, 800px maximum
• Clear title: the user must understand the purpose at first glance
• On mobile: convert the modal to a Bottom Sheet — easier to reach with one hand

Loading and Waiting Patterns

Users hate waiting. But waiting is sometimes unavoidable. What matters is that you manage expectations.

1. Skeleton Screens

Instead of showing an empty screen or a loading spinner, show a gray skeleton matching the shape of the expected content. This is called a Skeleton Screen.

Why better than a Spinner? Because the user feels that content is actually loading — not just waiting.

2. Progress Bar

For operations that take a known amount of time — uploading a file, downloading a large file, processing data. The user needs to know how much is left.

3. Spinner

For quick operations (under 3 seconds). Don't use it for long operations — the user won't know whether there's a problem or it's loading.

4. Optimistic UI

The smartest pattern — show the result before confirming with the server. When the user taps "Like," change the color immediately and send the request in the background. If it fails, revert it.

Notification Patterns

1. Toast / Snackbar

A small message that appears temporarily (3-5 seconds) and disappears on its own. Suitable for:

• "Saved successfully"
• "Copied"
• Any confirmation that doesn't require a user response

Position: bottom center of the screen, or bottom left/right.

2. Alert / Banner

A fixed message at the top of the page or section. Suitable for:

• Important warnings
• System announcements
• General error messages

Types: Success (green), Error (red), Warning (yellow), Info (blue).

3. Badge

A small number on an icon indicating the count of notifications or new items. Suitable for:

• Number of new messages
• Number of items in cart
• Unread notifications

4. Empty State

When there's no content to display — don't leave the page blank. Show:

• An illustration or icon
• A clear message: "No tasks yet"
• An action: "Add your first task" — a button guiding the user

Search & Filter Patterns

Search

• Search placement: at the top of the page or in the Navbar — users expect it there
• Clear placeholder: "Search for a product, article, or category..."
• Instant results: show results while typing (Autocomplete) if possible
• No results state: friendly message + suggestions

Filtering

• Visible filters: Chips or buttons at the top of the list — suitable for 3-5 options
• Sidebar filters: Sidebar with detailed options — suitable for online stores
• Hidden filters: "Filter" button that opens a menu — suitable for mobile
• Show active filters: the user must know which filters are applied and how to remove them

Table Patterns

Tables are very important in admin applications and dashboards.

Best Practices

• Fixed table header: when the user scrolls down, the table header remains visible
• Alternating highlighting: different background color for odd and even rows (Zebra Striping)
• Sorting: the user can click on a column header to sort the data
• Row selection: Checkboxes to select multiple rows
• Row actions: action menu (delete, edit) for each row
• On mobile: the table converts to cards or horizontal scroll is allowed

Onboarding Patterns

A user's first experience with the app determines whether they'll stay or delete it.

1. Product Tour

Tooltips that appear step by step explaining the main features. 3-5 steps maximum — more than that and the user will skip.

2. Onboarding Screens

3-4 screens with images and headlines clarifying the app's value. Suitable for mobile apps. There must be a "Skip" button.

3. Progressive Disclosure

Instead of showing all features at once, show the basics first. As the user progresses, reveal more features.

4. Checklist

A list of tasks the user needs to complete to finish setup — "Complete your profile," "Add your first project," "Invite your team." Creates motivation to complete the setup.

Practical Exercise

Design two screens for a task management app:

First screen — Task list:

1. Sidebar navigation with projects
2. Search bar and filters at the top
3. Task list in card format
4. Empty State if the list is empty
5. Add task button (FAB or regular button)

Second screen — Task details:

1. Modal or full page
2. Form to edit title and description
3. Priority, date, and assignee selectors
4. Comments section
5. Save, cancel, and delete buttons

Focus on the patterns you've learned — every element in the design must follow a proven and established pattern.