ODC #000019 - UX > IMPLEMENT

Design System for a recipies website using LightningDesign System for a recipies website using Lightning

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

ScenarioScenario

You work at an agency that was hired by a Culinary Design company (competitors are Allrecipes and Yummly) to redesign their web portal that enable aloe to share recipes and get rewarded with bitcoin.

One of the main tasks is to build out a new design system and you've been put in charge of starting that process.

TaskTask

Design specific elements (below) of a style guide for this fictional recipes website using your favorite design tool (using your tool's design system features) or HTML/CSS. Make sure all elements are responsive. Document and organize the design system and include a summary at the beginning with the overall goals.
Elements:

• Colors
• Typography (headings, body, links)
• Forms (text input, buttons, checkboxes, radios)
• Icons
• Grid
• Recipe card

Extra Credit: Design more elements for the style guide, or add variants of the elements you've already created. Make a few mockups using the design system in practice to show how it all works together.

GuidesGuides

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

• Design Systems 101
  on https://www.nngroup.com/articles/design-systems-101/
• List of analyzed design systems
  on open-ui.org
• Starting a Design System in a Start-up
  on uxdesign.cc
• Design Systems Handbook
  on https://www.designbetter.co/design-systems-handbook
• Design Systems: What are They and How to Get Started
  on piped.video

ToolsTools

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

For you

PenPot
by kaleidos

Bootstrap

by twitter


Catalog.Style
by Interactive Things

StoryBook
by chromatic

VueDS
by Ariel Salminen

For professional gurus

Supernova (freemium)
by https://www.supernova.io/

ZeroHeight (freemium)
by zeroheight.com

Share Your ResultsShare 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