ODC #000016 - UX > IMPLEMENT
Designing Form’ elements for an online form-building website using Nostr
Scenario
You're a UX designer for an new online form-building open source organization (Formstr.app is the competitor).
The company is doing a complete redesign of their product. It's a small team 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.)
Guides
If you need help with this challenge, check out our hand-picked tutorial recommendations.
-
Form Design on gerireid.com
-
Best Practices For Mobile Form Design on smashingmagazine.com
-
16 Tips that Will Improve Any Online Form on uxplanet.org
-
UX Form Design Basics on piped.video)
Tools
Not sure which tools to use? Try something new, go 💯% FOSS!
PenPot (for everyone) by kaleidos
HTML5 / CSS3 by developer.mozilla.org
Share Your Results
When you finish the challenge, post your work including anonymized collected data and results on this thread! If you also share it on
nostr, be sure to use the hashtag #opendesigner and tag Design_r@iris.to or @Design__r on X! We'll keep an eye out and repost good examples on a regular basis.Check our previous ODC and support this community for creative minds, where you'll be able to get open and constructive feedback on your PoW. Ask anything in the ~Design territory and get some ⚡sats for the value you provide!
#Bitcoin #Design #BitcoinDesign #NostrDesign #Nostr #OpenDesign #DesignChallenge #OpenDesignChallenge #FormDesign #UXDesign #InputControls #FormElements #FormBuilding #UserExperience #DesignThinking #OpenSource