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.

You're a UX designer for an new online form-building open source organization (

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.

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

Annotate your designs with the reasoning behind your decisions.

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

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

Not sure which tools to use? Try something new, go 💯% FOSS!

When you finish the challenge, post your work including anonymized collected data and results on this thread! If you also share it on 

 on X! We'll keep an eye out and repost good examples on a regular basis.

 for creative minds, where you'll be able to get open and constructive feedback on your PoW. Ask anything in the 

Design

#Bitcoin #Design #BitcoinDesign #NostrDesign #Nostr #OpenDesign #DesignChallenge #OpenDesignChallenge #FormDesign #UXDesign #InputControls #FormElements #FormBuilding #UserExperience #DesignThinking #OpenSource

```
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._](https://stacker.news/items/393580/r/Design_r)

- - - 
## Scenario
You're a UX designer for an new online form-building open source organization ([Formstr.app](https://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](https://gerireid.com/forms.html)

- **Best Practices For Mobile Form Design**
on [smashingmagazine.com](https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)

- **16 Tips that Will Improve Any Online Form**
on [uxplanet.org](https://uxplanet.org/the-18-must-do-principles-in-the-form-design-fe89d0127c92)

- **UX Form Design Basics**
on [piped.video)](https://piped.video/watch?v=GH1WR1IT_c0?v=25RqpGJ4tJ8)
- - - 

## Tools
Not sure which tools to use? Try something new, go 💯% FOSS!

> **PenPot** _(for everyone)_
> by [kaleidos](https://penpot.app/) 
 
> **HTML5 / CSS3** 
> by [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form)



- - - 

## 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](https://iris.to/Design_r) or [@Design__r](https://x.com/Design__r) on X! We'll keep an eye out and repost good examples on a regular basis.
- - - 

Check our [previous ODC](https://stacker.news/Design_r#odc--open-design-challenges) and support this [community](https://stacker.news/~Design/r/Design_r) 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](https://value4value.info) you provide!

- - - 
- - - 
- - - 
```
#Bitcoin #Design #BitcoinDesign #NostrDesign #Nostr #OpenDesign #DesignChallenge #OpenDesignChallenge #FormDesign #UXDesign #InputControls #FormElements #FormBuilding #UserExperience #DesignThinking #OpenSource
```
- - - 


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

ScenarioScenario

TaskTask

GuidesGuides

ToolsTools

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

ScenarioScenario

TaskTask

GuidesGuides

ToolsTools

Share Your ResultsShare Your Results

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