ODC #000019 - UX > IMPLEMENT
Design 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.
Scenario#
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.
Task#
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.
Guides#
If you need help with this challenge, check out our hand-picked tutorial recommendations.
Design Systems 101 on nngroup.com
List of analyzed design systems on open-ui.org
Starting a Design System in a Start-up on uxdesign.cc
Design Systems Handbook on designbetter.co
Design Systems: What are They and How to Get Started on piped.video
Tools#
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 supernova.io
ZeroHeight (freemium) by zeroheight.com
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
Comments
No comments yet. Start the conversation.