The 2024 Design Tools Survey is live! Share your tools!

Scenario

You're a UX designer for an online form-building company (competitors are Typeform and Jotform).

The company is doing a complete redesign of their product. It's a small company and you are tasked with designing the individual inputs and controls that clients can add to their forms.

Task

In either a design program or HTML/CSS, design the following for the new forms:

  • Button
  • Text input
  • Textarea
  • Select
  • Checkbox
  • Radio
  • Switch/toggle
  • File input

Annotate your designs with the reasoning behind your decisions.

Extra Credit: Include mockups or guidance for how to use validation, add labels, and build layouts (like spacing, placement, input groups, etc.)

Tutorials

If you need help with this challenge, check out our hand-picked tutorial recommendations.

Form Design

gerireid.com

Best Practices For Mobile Form Design

smashingmagazine.com

16 Tips that Will Improve Any Online Form

uxplanet.org

UX Form Design Basics

youtube.com

Tools

Not sure which tools to use? Try one of these.

Figma

figma.com

HTML / CSS

developer.mozilla.org

Share Your Results

When you finish the challenge, post your work on Twitter! Be sure to use the hashtag #uxtoolschallenges and tag our account @uxtoolsco. We'll keep an eye out and repost good examples on a regular basis.

We're also building a new community for designers where you'll be able to get even more feedback. See more details.

More Challenges

Accessibility
Heuristic Evaluation
Digital Prototype

 All Challenges

Download hi-res versions of the cards

Join 70k+ newsletter subscribers and get a PDF download of all the cards. You'll also stay up to date with weekly lessons and news.

    Email newsletter signup