Design and UX in web3

Are you new to designing with Ethereum? This is the right place for you. The Ethereum community has written resources to introduce you to web3 design and research basics. You'll learn about core concepts that may differ from other app designs you're familiar with.

Need a more basic understanding of web3 first? Check out Learn hub.

Start with user research

Effective design goes beyond creating visually appealing user interfaces. It involves gaining a deep understanding of the user's needs, objectives, and driving factors. Therefore, we highly recommend that all designers adopt a design process, such as the double diamond process(opens in a new tab), to ensure that their work is deliberate and intentional.

• Web3 needs more UX Researchers and Designers(opens in a new tab) - An overview of current design maturity
• A simple guide to UX Research in web3(opens in a new tab) - Simple guide how to do research
• How to Approach UX Decisions in Web3(opens in a new tab) - A brief overview of quantitative and qualitative research and the differences between the two (video, 6 min)
• Being a ux researcher in web3(opens in a new tab) - A personal view on what it is like being a UX researcher in web3

Research studies in web3

This is a curated list of user research done in web3 that may help with design and product decisions or work as an inspiration to conduct own study.

Design for web3

• Web3 UX Design Handbook(opens in a new tab) - Practical guide to designing Web3 apps
• Web3 Design Principles(opens in a new tab) - A framework of UX rules for blockchain based dapps
• Blockchain Design Principles(opens in a new tab) - Lessons learned by the blockchain design team at IBM
• Web3 Design Patterns(opens in a new tab)- A curated library of design patterns from real Web3 products
• W3design.io(opens in a new tab) - A curated library of UI flows of different projects in the ecosystem
• Neueux.com(opens in a new tab) - UI library of user flows with diverse filtering options
• Web3's Usability Crisis: What You NEED to Know!(opens in a new tab) - A panel discussion on pitfalls of developer focused project building (video, 34 min)

Getting Started

• Heuristics for Web3 - 7 heuristics for Web3 interface design
• DEX Design Best Practices - A guide to designing Decentralized Exchanges

Web3 Design Case Studies

• Deep Work Studio(opens in a new tab)
• Crypto UX Handbook(opens in a new tab)
• Selling an NFT on OpenSea(opens in a new tab)
• Wallet UX teardown how wallets need to change(opens in a new tab) (video, 20 min)

Design Bounties

• Dework(opens in a new tab)
• Buildbox hackathons(opens in a new tab)
• ETHGlobal hackathons(opens in a new tab)

Design DAOs and communities

Get involved in professional community-driven organizations or join design groups to discuss design and research related topics and trends with other members.

• Vectordao.com(opens in a new tab)
• Deepwork.studio(opens in a new tab)
• Designer-dao.xyz(opens in a new tab)
• We3.co(opens in a new tab)
• Openux.xyz(opens in a new tab)
• Open Source Web3Design(opens in a new tab)

Design Systems

• Optimism Design(opens in a new tab) (Figma)
• Ethereum.org Design system(opens in a new tab) (Figma)
• Finity, a design system by Polygon(opens in a new tab) (Figma)
• Kleros Design System(opens in a new tab) (Figma)
• Safe Design System(opens in a new tab) (Figma)
• ENS Design system(opens in a new tab)
• Mirror Design System(opens in a new tab)

Articles and projects listed on this page are not official endorsements, and are provided for informational purposes only. We add links to this page based on criteria in our listing policy. If you'd like us to add a project/article, edit this page on GitHub(opens in a new tab).