Outcome: Create your own storefront that sells your custom designs!
Requirements: Figma Account, Internet Access
Language used: n/a
Customization opportunity: Jammers can design their own products and figure out a layout that sells their product the best. In the end, Jammers will have the opportunity to pitch their store to the workshop hosts ("shark-tank style?").
Platform Limitations: Computer with a modern browser (Chromebooks work as well)
Time estimation: 50-60 minutes
- Set up: Create a Figma account and create an empty design file.
- Part 1: Lecture on Figma tools (Element Customization, Frames, ...) while creating an example store.
- Part 2: Give jammers their own time to develop their own, unique storefront! Hosts will provide support with Figma's tools when needed.
- Part 3: Give an example presentation - show how the design adapts to different devices and how it's accessible, etc.
- Jammers will pitch their design to the host and get a chance to win the title of ("Most Popular Storefront")! (p.s. random thought, but if the hosts had some prize like a box of cookies, it would be pretty fun to give it out to the winners)
Make sure your proposal (similar to the one above) answer these questions about your Jam idea:
- How will you ensure that every outcome of the workshop varies (i.e. how will you give jammers a sense of ownership over their project)?
Jammers get full control over the way their website looks on different devices and can choose whatever they want to sell. Jammers can also experiment with making design mockups for their products (potential extension if they have extra time).
- Why should Hack Clubbers care about this project?
- Exposes them to real-world design workflows
- Jammers are encouraged to make teams and work on their storefronts together (nothing better than peer-pressure!!)
- Seeing a finished prototype is really inspiring on getting to make it into a reality. Shows Jammers what the things they make can look like!
-
General outline of a club meet doing the Jam
-
5m: Setup, get everyone a Figma account and on a blank file
-
10-15m: Lecture on Figma's tools and features while making a storefront
-
20m: Jammers group up and make their own storefront, adapting it for accessibility and appeal
-
15m: Jammers pitch their store to workshop hosts and others.
-
5m: Workshop hosts choose a winner, say what's good about it, and give them an (optional) prize 🎄
-
What Club Members will walk away with (both in terms of knowledge and in terms of product)
They'll get skills in Figma that they can use to make future designs/mockups and also their own very finished design that's accessible and interactive!
- What makes this workshop fun or interesting for Club Members?
It's always fun working on projects with your friends and earning prizes (maybe a certificate if the hosts don't have anything). Even more fun, jammers walk away with a vision of things you can create with code and get inspired to try it themselves.
Designing something is usually the first step in making something amazing because you see what it might become! Jammers will walk away with their skills in Figma and use them to make other cool designs! The goal is to make them excited enough about a design to make them code it into a reality!
- What platforms will be supported (i.e. MacOS, Windows, Chromebook, Mobile, Browser, etc)?
All. They can view their designs on a phone, but will likely need some sort of computer in order to actually make it.
- How will you allow Club Leaders to add their own project to the Jam presentation (giving them a sense of ownership over the meeting)?
During the lectures, the Club leaders will also make an example storefront with the tools mentioned. Essentially, they're being pushed into the workshop too! They can add on any places they had trouble with and add their own personal twist on the finished product. If they think some feature that wasn't thoroughly explained in the lesson (like a collapsible navbar) is really great, they can add it and also teach everyone else how to add it too.