Nostr Design

A comprehensive resource for designers and developers to build successful nostr products.

The ultimate goal is to provide practical tips, reference designs and product know-how, so that developers start thinking about clients in ways that position them for success.

Throughout the resource, we will look at challenges around designing for nostr and try to provide some workable solutions. This resource is by no means definitive and will not have a solution for every nostr client (as there are so many use cases), but it will provide general guidance and offer some examples.

Nostr design is open source, which means anyone can contribute to it. Please keep in mind we are just getting started and the contribution functionality is not yet up and running. Check back often to find out how you can help!

Getting Started

In this section we will explore the various challenges around nostr design. We will ask more questions than providing answers just to get your mind thinking about the various issues new users are going through as they use your client.

We'll cover the differences between a website and a progressive web app, how to think about your users's initial experience and how to start developing your first client.

Product Design Considerations

Shipping fun side projects is great, but serious businesses require a bit more work. Nostr Design will explore a few things developers and designers may want to consider when designing their clients.

We will delve a little into topics such as the Jobs to be Done framework, product growth loops, collecting product feedback, programattic SEO, handling of translations and last but not least, product-led marketing. We will explore how we can make our clients work smarter for our marketing, acquiring users and retaining them.

Design Principles

Here we will explore various principles of good design to help you create the best user experiences and the best visual UIs possible.

We'll cover topics such as:

Reference Designs

A design guide wouldn't be very useful if it didn't contain actual designed examples. The Reference Designs section may include:

Actual Figma files for existing open source projects
Color palette ideas
Commonly used components (desktop and mobile)
Onboarding components
Use case-specific components (social, audio, video, long-form content)
Navigation componets
Relays
Settings
App Shells
Profile
Media handling
Search
Zaps
Threads
Streaming
and more if time permits.

We will also touch a bit on guiding principles that every developer and designer should be thinking about as they create the ideal user experience.

Resources

The resources section will contain various links to useful resources that will make your design and development process easier, smarter and faster. Resources may contain:

FAQs

While nostr is constantly evolving, we will do our best to provide some frequently asked answers and questions. You can extract answers from the FAQ to include in your client as tips, tooltips or in-client FAQs.