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

Placeholder Exercises

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

Image placeholder
Exercise

Image placeholder

Image Terminology
Provide concise but meaningful helper text
Exercise

Provide concise but meaningful helper text

Inputs Usage in UI
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
Placeholders
Exercise

Placeholders

Anatomy of UI Components
Ensure labels are easier to read
Exercise

Ensure labels are easier to read

Inputs Usage in UI
Avoid clutter and add enough spacing between elements
Exercise

Avoid clutter and add enough spacing between elements

Inputs Usage in UI
Foresee users' questions and provide helper text
Exercise

Foresee users' questions and provide helper text

Best Practices for Designing Forms
Prototype
Exercise

Prototype

UX Design Deliverables
Use standard input styling for faster recognition
Exercise

Use standard input styling for faster recognition

Inputs Usage in UI
Keep the input text legible
Exercise

Keep the input text legible

Inputs Usage in UI
Use placeholders cautiously
Exercise

Use placeholders cautiously

Best Practices for Designing Forms
Mockups
Exercise

Mockups

UI Design Deliverables
Remove unnecessary fields
Exercise

Remove unnecessary fields

Best Practices for Designing Forms
Placeholder
Exercise

Placeholder

Intro to UI Inputs
Provide informative placeholders
Exercise

Provide informative placeholders

Inputs Usage in UI
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
Select a label case that's easier to read
Exercise

Select a label case that's easier to read

Inputs Usage in UI
Image fill
Exercise

Image fill

Image Properties
Choose the right date pickers for users' needs
Exercise

Choose the right date pickers for users' needs

Best Practices for Designing Forms
Exercise

Use visual markers to indicate an active input

Best Practices for Designing Forms
Keep the search process simple
Exercise

Keep the search process simple

Booking Pages
"Lorem ipsum" placeholder text
Exercise

"Lorem ipsum" placeholder text

Elements of Typography
Add enough space between inputs
Exercise

Add enough space between inputs

Inputs Usage in UI
Microcopy patterns for labels
Exercise

Microcopy patterns for labels

Patterns in UX Writing
Use contextual keypads to minimize actions
Exercise

Use contextual keypads to minimize actions

Best Practices for Designing Forms
Utilize visual assets to aid users in scanning search results
Exercise

Utilize visual assets to aid users in scanning search results

Booking Pages
Show hover states when selecting the date range
Exercise

Show hover states when selecting the date range

Booking Pages
Microcopy patterns for placeholders
Exercise

Microcopy patterns for placeholders

Patterns in UX Writing
Microcopy patterns for tooltips
Exercise

Microcopy patterns for tooltips

Patterns in UX Writing
Use icons for visual guidance
Exercise

Use icons for visual guidance

Best Practices for Designing Forms
Microcopy patterns for errors and alerts
Exercise

Microcopy patterns for errors and alerts

Patterns in UX Writing
Provide enough input padding for scannability
Exercise

Provide enough input padding for scannability

Inputs Usage in UI
Use clear placeholders
Exercise

Use clear placeholders

Booking Pages
Allow bookmarking search results
Exercise

Allow bookmarking search results

Booking Pages
Make buttons easy to tap
Exercise

Make buttons easy to tap

Best Practices for Designing Forms
Exercise

What are patterns?

Patterns in UX Writing
Make the search bar noticeable
Exercise

Make the search bar noticeable

Booking Pages
Make the search query easy to access
Exercise

Make the search query easy to access

Booking Pages
Microcopy patterns for forms
Exercise

Microcopy patterns for forms

Patterns in UX Writing
Allow changing directions
Exercise

Allow changing directions

Booking Pages
Microcopy patterns for buttons
Exercise

Microcopy patterns for buttons

Patterns in UX Writing
Provide helpful labels
Exercise

Provide helpful labels

Inputs Usage in UI
Microcopy patterns for notifications
Exercise

Microcopy patterns for notifications

Patterns in UX Writing
Prototypes
Exercise

Prototypes

Design Processes
Maintain natural input hierarchy
Exercise

Maintain natural input hierarchy

Booking Pages
Microcopy patterns for push notifications
Exercise

Microcopy patterns for push notifications

Patterns in UX Writing
Place the error message near the erroneous input
Exercise

Place the error message near the erroneous input

Best Practices for Designing Forms
The <legend> tag
Exercise

The <legend> tag

HTML Forms