There is an entire world of great design tools out there. Here, again, we aim to provide you with a highly curated list of tools that we use ourselves regularly and which have made a profound impact on the way in which we work and the quality of what we are able to produce.
Case Studies & User Testing¶Instead of linking you to Figma - which is the design tool we use ourselves - we have two things which are infinitely more useful, both given as gifts to us by Andrej from Deepwork Studios, to whom we are eternally grateful.
Case Studies
User Testing Guide
A genuinely useful, highly detailed, step-by-step guide for running fast, effective, and insightful user testing. There is no need to interview thousands of people - just find five incentivized people, listen to their feedback (especially the critical parts), and integrate it into your workflow through numerous iterations.
We can't provide as much alpha here, but below are the six best tools we know and use for quick sketching and wireframes, especially useful in conversation with other team members to illustrate your ideas visually and collaborate in a medium which does not privilege words.
Excalidraw
Open-source, collaborative, e2e encrypted sketching app. Need we say more?
H/T Adrian le Bas
Machinations
A tool intended for game designers, useful for mechanism design and token economics.
H/T James Young
Whimsical
A visual workspace. You can build more beautiful flow charts more easily in here than in Diagrams.net, though perhaps not quite as extensive or complicated.
H/T Nazzareno Massari
Building the one design system for all web3 components has been a long-time dream for many different people in web3. After all, if everything is modular and interoperable, shouldn't we just be able to build a best practices/standard library for critical components - connecting your wallet, signing transactions, displaying transaction statuses etc. - that everyone can reuse?
This sounds eminently reasonable, and like many similarly reasonable ideas has been more difficult to realise in practice - see the now-deprecated Lorikeet (Aragon) and Rimble (Consensys) for proof. However, we present the design system used by this site as one live example of an approach which may be more long-lived.
MakerDAO built it in order to maintain a coherent visual language across the Maker Foundation's assets and community-run sites, while enabling key differences that (i) made it clear which sites and documents were run by whom and (ii) to keep from running afoul of legal regulations to which the Foundation had to adhere. It therefore has a great reason for being, is well thought-out and very well engineered.
All our resources are intended to reveal the interdisciplinary nature of work in web3. Therefore, before you actually begin coding, we think you should explore the full design space by thinking very carefully about the deep why. Why are you building this particular product as opposed to any other thing? When you find what you think is an answer, ask yourself the question again and keep pushing for ever deeper insights into your actual motivations and intentions. We promise that this will help you write much less code, and it will be much more awesome.
Hypersprint
Design Tools for Developers
Now that you have thought through your deep why, you'll need some easy prototyping tools iterating over any user feedback you may have gathered. This list of tools is as complete as any we know and will lead you to many interesting resources. The list is limited to free tools you can use right away.
We have included a recording of Andrej describing the Hypersprint process in case you find the Miro template linked above a bit confusing at first. The main point is to keep moving, play great music, and have fun.