DOCSEARCHbyAlgolia
Submit Docs

Nostr Design Documentation

website·Indexed 32 days ago

https://nostrdesign.org

Design guidelines, reference designs, and product considerations for building Nostr clients. Includes resources on onboarding, private key safeguarding, zaps, and UI patterns, with reference designs available via Figma.

Tokens
16.3K
Snippets
39
Records
142
Agent score
66%

What's inside Nostr Design

  1. Overview of Nostr Design resources for client development

    Nostr Design is an open-source resource providing practical tips, reference designs, and product know-how for developers building Nostr clients. It focuses on solving common challenges associated with the Nostr protocol to help developers create successful user experiences. The resource is organized into several key areas:

    • Getting Started: Guidance on the initial user experience and the differences between websites and progressive web apps (PWAs).
    • Product Design Considerations: Strategies for business growth, including the 'Jobs to be Done' framework, product growth loops, programmatic SEO, translation handling, and product-led marketing.
    • Design Principles: Best practices for user-centered design, accessibility, UX laws, and UI tips.
    • Reference Designs: Concrete examples including Figma files, color palettes, and specific UI components for onboarding, relays, settings, app shells, media handling, zaps, and threads.
    • Resources: Toolkits including Nostr icons, buttons, recommended books, frameworks, and font options.
    • FAQs: Common questions and answers that can be integrated into clients as tooltips or in-app help.

  3. Understand Zaps in Nostr

    Zaps are Lightning Network payments sent over the Nostr protocol. While not a core part of the Nostr protocol itself, they are widely integrated into the ecosystem to allow users to send small amounts of value (Bitcoin) to content creators. Integrating Zaps can provide incentives for creators, encourage user retention, and serve as an introduction to Bitcoin and the Lightning Network for new users.

  4. Access Nostr Feed Reference Designs

    The reference designs for Nostr feeds—including layouts for full-width large images, long-form note previews, media notes, standard notes, responsive audio previews, mobile layouts, full-screen media scrolling, and filtering selectors—are available as an open-source Figma file. Developers can copy and use these designs without limitations.
    Figma File: https://www.figma.com/file/C2ztFLDxihrfturW7Q6kbj/Reference-Components?type=design&node-id=213%3A11495&mode=design&t=qbn9PiAj1v6RWRwM-1

  5. Understand the Nostr protocol architecture

    Nostr (Notes and Other Stuff Transmitted by Relays) is an open, permission-less protocol designed for censorship-resistance and interoperability. Unlike traditional apps that use a single central database, Nostr relies on a distributed network of relays.

    Core components include:

    • Events: Actions taken by a user (e.g., posting a note or a reaction).
    • Relays: Servers that store events. Users broadcast events to relays, and other users request these events from the relays to view content.
    • Clients: The applications (apps) used to interact with the protocol by fetching and sending data to relays.

  6. Design relay selection for user onboarding

    To minimize friction during onboarding, avoid forcing users to learn about relays immediately. Use progressive disclosure to ease users into the concept. For most social clients, pre-selecting a handful of relays allows the app to 'just work' immediately. If the client uses relays as topic-based servers, present specific topics/relays for the user to follow instead of a generic list.

  7. Design only absolute necessities to prevent developer derailment

    Design the minimal number of functions required to make a feature functional. Avoid adding 'small' design elements that require significant technical effort. For example, adding an Emoji or Gif picker may take a designer seconds to mock up but could take a developer weeks to implement, potentially delaying the shipment of a sustainable product.

  9. Manage borders to reduce visual noise

    Modern UI design aims to minimize the number of lines on screen to reduce eye strain. While some lists (like note feeds) require borders for readability and scanning, avoid wrapping every element in its own border, as this makes the UI look busy and tiring. Keep border colors and widths consistent throughout the application.

  10. Implement Simple Search for Nostr clients

    Simple search is designed for basic lookups of hashtags and usernames. When a user enters text, the client should return results for notes containing that specific word. An advanced implementation of simple search may also return 'Topics'.

  11. Design a specific feature instead of a full client to avoid bloat

    When starting a client from scratch, avoid the temptation to design the entire application and all its supporting features at once, as this often leads to overcomplication and unnecessary work. Instead, identify the core problem your product solves and design specifically around the core features that address that problem.

  12. Design relay discovery on profile pages

    To help users discover new relays via other users' profiles, indicate which relays are shared between the current user and the profile owner. Ideally, the UI should signal if the user can see the other person's notes based on shared relays, indexing relays, or NIP65 connectivity.