ODC #16: Form’ elements for an online form-building website using Nostr

ODC #000016 - UX > IMPLEMENT

Designing Form’ elements for an online form-building website using Nostr#

If you miss it, please read our WTF is ODC (Open Design Challenge) intro post from more details.

---

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

---