<?xml version="1.0" encoding="utf-8"?>
Uxcel
Pro MembershipFor TeamsHelp
Log inSign up

Atomic Design Exercises

Explore hands-on “Atomic Design” exercises to sharpen your skills and level up your craft. Want more? Browse all search results

Organisms
Exercise

Organisms

Atomic Design by Brad Frost
Avoid oversizing the header
Exercise

Avoid oversizing the header

Intro to Headers in UI
Atoms
Exercise

Atoms

Atomic Design by Brad Frost
Pages
Exercise

Pages

Atomic Design by Brad Frost
Use modals for conveying critical information
Exercise

Use modals for conveying critical information

Best Practices for Designing UI Modals
Templates
Exercise

Templates

Atomic Design by Brad Frost
Inputs should be easy to hit
Exercise

Inputs should be easy to hit

Best Practices for Designing Forms
Foresee users' questions and provide helper text
Exercise

Foresee users' questions and provide helper text

Best Practices for Designing Forms
Use placeholders cautiously
Exercise

Use placeholders cautiously

Best Practices for Designing Forms
Provide visible options to close the modal
Exercise

Provide visible options to close the modal

Best Practices for Designing UI Modals
Provide helpful information in the message body
Exercise

Provide helpful information in the message body

Best Practices for Designing UI Modals
Remove unnecessary fields
Exercise

Remove unnecessary fields

Best Practices for Designing Forms
Put the purpose in the title
Exercise

Put the purpose in the title

Best Practices for Designing UI Modals
Position the hamburger menu intuitively
Exercise

Position the hamburger menu intuitively

Best Practices for Designing Headers
Exercise

Reduce the number of user actions

Best Practices for Designing Forms
Indicate required and optional fields
Exercise

Indicate required and optional fields

Best Practices for Designing Forms
Make the entire card clickable
Exercise

Make the entire card clickable

Best Practices for Designing UI Cards
Use keyboard focus on desktop
Exercise

Use keyboard focus on desktop

Best Practices for Designing UI Modals
Choose the right date pickers for users' needs
Exercise

Choose the right date pickers for users' needs

Best Practices for Designing Forms
Application of atomic design theory
Exercise

Application of atomic design theory

Atomic Design by Brad Frost
Exercise

Use visual markers to indicate an active input

Best Practices for Designing Forms
Limit system-initiated modals
Exercise

Limit system-initiated modals

Best Practices for Designing UI Modals
Use success modals sparingly
Exercise

Use success modals sparingly

Best Practices for Designing UI Modals
Snackbars
Exercise

Snackbars

Mobile Information & Container Components
Use contextual keypads to minimize actions
Exercise

Use contextual keypads to minimize actions

Best Practices for Designing Forms
Use visuals to indicate the importance of alert modals
Exercise

Use visuals to indicate the importance of alert modals

Best Practices for Designing UI Modals
Exercise

Allow closing modals by clicking outside

Best Practices for Designing UI Modals
Customer-service chats
Exercise

Customer-service chats

Mobile Information & Container Components
Use separate cards to display items on distinct topics
Exercise

Use separate cards to display items on distinct topics

Best Practices for Designing UI Cards
Use a familiar position for a menu icon
Exercise

Use a familiar position for a menu icon

Best Practices for Designing UI Cards
Use icons for visual guidance
Exercise

Use icons for visual guidance

Best Practices for Designing Forms
Dialogs
Exercise

Dialogs

Mobile Information & Container Components
Use contrasting labels
Exercise

Use contrasting labels

Best Practices for Designing UI Cards
Present information in a progressive way
Exercise

Present information in a progressive way

Best Practices for Designing UI Cards
Push notifications
Exercise

Push notifications

Mobile Information & Container Components
Avoid using more than two action buttons
Exercise

Avoid using more than two action buttons

Best Practices for Designing UI Modals
Make buttons easy to tap
Exercise

Make buttons easy to tap

Best Practices for Designing Forms
Use explicit button labels
Exercise

Use explicit button labels

Best Practices for Designing UI Modals
Exercise

Accordions

Mobile Information & Container Components
Provide enough space within a header
Exercise

Provide enough space within a header

Intro to Headers in UI
Use a descriptive CTA button
Exercise

Use a descriptive CTA button

Best Practices for Designing Headers
Add an email signup
Exercise

Add an email signup

Best Practices for Designing Footers
Product pages
Exercise

Product pages

Mobile Information & Container Components
Carousels
Exercise

Carousels

Mobile Information & Container Components
Include enough padding around the edges
Exercise

Include enough padding around the edges

Intro to Headers in UI
Splash screens
Exercise

Splash screens

Mobile Information & Container Components
Use consistent terms throughout the website
Exercise

Use consistent terms throughout the website

Best Practices for Designing Footers
Exercise

Use a responsive header

Best Practices for Designing Headers
Dividers
Exercise

Dividers

Mobile Information & Container Components
Prioritize information
Exercise

Prioritize information

Best Practices for Designing Footers