Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

Google Design — Medium | Lia Garvin www.pexels.com
You roll up your sleeves, crack your knuckles, and sit down at your laptop to finally design that thing you’ve been thinking about. But as you stare at Sketch or Figma or Illustrator or Photoshop or Maya… you realize you have no idea where to start. Because the thing you are designing doesn’t exist.
Designing a v1 product is a huge challenge, but if you think of it in the same terms as breaking down any problem, you will find that you have the all tools you need in your arsenal to solve it.
Design is a discipline of patterns. Things feel intuitive when they feel familiar to us or make sense in relationship to how we use or see objects in the world. When designing for the unchartered waters of augmented reality, my teams leaned heavily on the principles outlined by Don Norman in the “Design of Everyday Things” — grounding the patterns of interacting with AR objects to how we interact with physical objects, using affordances, signifiers, and symbols to make something new feel familiar.
Designing for augmented reality relies on a deep understanding of the physicality of objects, and it is important for digital objects to feel grounded in your environment and behave in ways you’d expect physical objects to behave. Everything ties back to how people interact with objects in the real world. The goal of AR is to make interactions feel as comfortable and expected as possible, like the desire to pick up and move an object from one place to another. Follow the logic of expected patterns, and use this to push your platform as far as you can.
User interacting with augmented reality objects on a tabletop — https://www.youtube.com/watch?v=ttdPqly4OF8
Prototyping is fundamental to design. It is hard to find a design project that would not benefit from prototyping, even if only for a designer independently to narrow down their ideas. I would argue that any kind of visual comp where you show your design in the context of a product or device, is a visual prototype.
When designing a v1, prototyping is even more critical, and is an area where physical prototypes can really come in handy. Say you are designing something that requires a new interaction pattern — create a paper mock or build it out of cardboard and give it to a participant and observe. Watching people interact with the solution you are proposing will immediately tell you how easy it is to use. Headless UI presents new and unique challenges to prototyping, but it can be done. If your design is about voice interaction, write out what your voice assistant might say and run through scenarios with a user to gauge their comfort level interacting with the system.
Wireframes can be great ways to prototype user flows — www.pexels.com
If you are designing for a new product within a company with an established design language or visual system, lean on the existing system to 1) understand if similar things have been solved for already, and 2) leverage elements from the visual system to tie what you are working on back to the mothership. There is a very important distinction between using color, iconography, and shape language to tie your design back to the established visual system and create cohesion across the design endpoints, and doing a paint-by-numbers design exercise.
Whenever I hear arguments against developing a design language, I always point out that not only do they take care of the simple things so that designers can focus their time solving the complex problems, but they reduce the burden on the user having to learn how to complete the same task different ways.
Excerpt from Material Design, Color — https://material.io/guidelines/style/color.html#color-usability
If you were asked to design a pair of roller skates that turns into a rocket ship and flies around the moon — you may not know what that looks like, but you sure as heck know what process you would do to get started. You would start like you do with any problem — whether it is collecting reference or researching other things that have been done in similar areas, writing up potential user scenarios, sketching, etc. The act of getting started will always unfold into the next necessary step, and doing one of these familiar steps will give you an artifact to share with your peers or team and build a conversation around.
When designing our first 3D characters for an app my team recently launched, we didn’t know all of the steps that would be required to get a character fully functional in the engine at the onset of the project — but we knew what it took to design a character, build it out in 3D, texture/rig/animate it, and troubleshoot in a game engine — and the sum of those parts of the process led us to solve a problem we hadn’t previously solved for.
3D character creation process I’ve used in past projects
Research is a critical piece of the design process; and whether you have the luxury of working with a user research team or are doing research on your own, this step is non negotiable when designing a v1. Research includes anything from reading articles and studies, to running focus groups, to observing people interacting with a prototype, to asking people hypothetical questions about your product, and more.
We often have the tendency to make the false assumption that we know exactly what our users will want — but we are not our users, we are the experts, and the users and the experts see the product very differently. Research opens your eyes to how people potentially really will experience your product, and gives you a whole new set of questions to answer.
A/B test user flows and get quick insights — https://www.pickfu.com/
Every organization — and every person’s career — operates on three levels, as shown in the illustration on the next page: What we do, how we do it, and why we do it. We all know what we do: the products we sell, the services we ofer or the jobs we do. Some of us know how we do it: the things that we think make us diferent or stand out from the crowd. But very few of us can clearly articulate why we do what we do. — Start with Why, by Simon Sinek
Find your Why — Simon Sinek
Whenever you take the plunge to design something totally brand new, think first about what is the problem you are actually trying to solve. Technology is moving so quickly these days, that it is easy to get caught up in designing something just because it is possible.
Try to find your why in two ways — for your user and for yourself. For your user, consider why they would change an existing behavior or pattern to use your new product or service. What are you creating for them that they can’t get somewhere else? Make sure the reasons are compelling enough to actually create a new habit, and then validate your assumptions with friends or colleagues.
For yourself, your why is even more important. What is your inner motivator, your inner why driving you to dive into unchartered waters? Designing a v1 is hard, you will likely uncover more problems that you have solutions for, and everything will take three times longer than planned. That is the fun of it. Make something new because there is a clear user need for it, don’t just make something new for the hell of it. When there is a clear why, the how will become clear.
Start with Why by Simon Sinek — the legend around finding your why in product design and organizational strategy
Rapid A/B Testing — quickly test and prototype ideas
Figma — collaborative design software
Material Design Guidelines — example of robust design guideline/documentation
Origami — prototyping software
The Design of Everyday Things — foundational reading for any designer
How to design v1 products and live to talk about it was originally published in Google Design on Medium, where people are continuing the conversation by highlighting and responding to this story.
AI-driven updates, curated by humans and hand-edited for the Prototypr community