iris
Post
deSign_r

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
    • -
0
0
0