Hey everyone! I’ve been diving into Web3 stuff for two years, and guess what? I’ve got some cool things to share about it. I was also inspired by this guy Jon Crabb. So, let’s chat about these adventures and some easy-peasy tips for making Web3 things look awesome! 🚀

Generated with MidJourney

Before diving into the nuances of Web3 design, let’s lay the groundwork with timeless principles applicable to any design endeavor.

Accessibility for All

Designing for accessibility isn’t just about accommodating users with disabilities, it’s about creating a user-friendly environment for everyone. By focusing on the extremes, we naturally enhance the experience for the average user.

Design Accessibility from this website

Easy wins — follow these rules

Here are some quick wins that significantly elevate design quality:

Font Size:

  • Aim for a minimum font size of 16px for body text. Consider going for 18 or 20px for enhanced readability.


  • Ensure a contrast ratio of at least 4.5:1 for normal text and 3:1 for larger text. Tools like Colour Contrast can validate your choices.


  • Opt for easy-to-read fonts like Roboto, Inter, or Open Sans. Inter, in particular, stands out as an excellent choice.


  • Choose a color scheme with eye-friendly contrast. Avoid pairing red and green due to potential visibility issues.


  • Implement appropriate heading levels (h1, h2, h3) for content structure and better navigation.

Labels and Icons:

  • Provide clear labels for form fields and interactive elements. Use icons judiciously and combine them with other cues to cater to users with color blindness or low vision.

Clear Instructions:

  • Offer concise instructions for tasks, benefiting users with cognitive and learning disabilities while enhancing the overall user experience.

While these guidelines are aimed at aiding users with disabilities, they form a robust foundation for elevating the user experience for all.

You can use a Usability Checklist:

Accessibility Checklist from Web3 UX Design Handbook
Accessibility Checklist from Web3 UX Design Handbook
Accessibility Checklist from Web3 UX Design Handbook

Crafting Compelling Copy for Web3: Insights from Jakob Nielsen

How users read on the web

Jakob Nielsen, a luminary in web usability, provides essential guidelines for impactful web writing:

  • Highlighted Keywords: Make keywords stand out.
  • Meaningful Subheadings: Structure content with clear subheadings.
  • Bulleted Lists: Enhance readability with bulleted lists.
  • One Idea per Paragraph: Keep paragraphs focused on a single idea.
  • Inverted Pyramid Style: Start with the conclusion.
  • Conciseness: Aim for half the word count or less compared to conventional writing.

Understanding user behavior on the web is crucial. Nielsen’s research reveals that users rarely read word by word; instead, they scan pages. Scannable text with strategic formatting is key.

Mastering Typography for Web3 Brilliance

This is a picture from one Typeface Designer

If you’re unsure where to start, consider these six fonts:

  • Roboto
  • Helvetica / Helvetica Neue
  • Open Sans
  • Lato
  • Inter
  • IBM Plex

Font Size and Grid Alignment:

  • Body copy should be a minimum of 16px, but experimenting with 20px is recommended.
  • Try to use multiples of 4 for all your other styles.

Line Height Strategy:

  • For headings, maintain a line height of 1–1.2 times the font size.
  • For body copy, set the line height to 1.3–1.6 times the font size.

Takeaways for Typography

  • Prioritize readability with a highly readable font.
  • Establish base sizes and line heights.
  • Align line heights with multiples of 4 for consistency.

Web3 design guidelines to keep coming back to

You can find insights here

Aesthetic-Usability Effect:
Beautiful designs are perceived as more usable. Prioritize aesthetics, excellent typography, and good contrast for an enhanced user experience.

Doherty Threshold:
Feedback within 400ms enhances productivity. Minimize system response times, incorporating progress bars and animations to make waits tolerable.

Cognitive Load:
Avoid overwhelming users with excessive information. Focus on presenting only essential metrics, and maintaining a clean hierarchy.

Leverage the first piece of information users encounter, ensuring it aligns with their primary decision-making criteria.

Mental Mapping:
Bridge the gap between users’ mental models and the conceptual models of your product. Simplify and standardize terms, educate users, and conduct ongoing research to refine user understanding.

A couple of examples:

Users don’t know the real value of every transaction they make.

  • The mental model: I am exchanging money.
  • The conceptual model: I am exchanging tokens in a new web3 economy.

Users don’t know what an Automated Market Maker is.

  • The mental model: Is this a bit like a bank?
  • The conceptual model: Decentralized trading using algorithms to price assets in liquidity pools

Users want to save money.

  • The mental model: Can I deposit coins and earn?
  • The conceptual model: Mining, farming, staking, CRV emissions, bribes, vaults, lockers, veTokens, vesting.


In the rapidly evolving landscape of Web3, these principles serve as a compass, guiding designers to create not just functional but delightful and universally accessible experiences. By blending design finesse with an understanding of user behavior, we pave the way for a new era of exceptional web experiences.

Thank you for reading me =)

If you liked my article, follow me on Medium.
And if you want to talk about design or just meet for coffee, then write to me on LinkedIn.

Date format is configured to the user’s location

I can change language

Elevating Web3 Design Experiences was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.