Resources

The following is a list of resources that may come in handy for nostr designers and developers.

Nostr Icons

The following icons were created by the community. Since Nostr doesn't have a logo that everyone can agree on, it is up to the app developer to decide which icon they wish to use. See the Figma file for production-ready icons. You can also download the zip file containing PNG and SVG versions of light and dark icons.

Books

Refactoring UI- Practical UI tips for developers, by Adam Wathan and Steve Schoger
Don't Make Me Think by Steve Krug - a classic on web usability dos and don'ts.
Hooked - How to Build Habit-Forming Products by Nir Eyal and Ryan Hoover. An excellent, must-read for any product manager or developer. This book helps understand the various mechanics behind successful products and why some products fail.
Make- The Indie Maker Handbook by Pieter Levels - a practical way of building startups as an independent maker (no VC funding). This book covers every step of the startup journey from ideation, building, launching to growing, monetizing and automating and exiting your business. Great for anyone who would rather work on their own terms without involving any VCs.
The Mom Test by Rob Fitzpatrick - learn how to uncover product ideas that people will actually pay for. This book talks about how to conduct interviews to uncover product ideas. Most people make the mistakes mentioned so it's a must read for anyone building their first startup.

UX / Growth Design

Growth.Design - case studies for good UX, onboarding and overall growth design.
Laws of UX - a visual guide to various laws of UX app designers and developers should keep in mind.
NNGroup - a comprehensive UX resource with articles, videos and user studies.

Accessibility

Apple Accessibility Guidelines - a comprehensive set of accessibility considerations by Apple.
Android Accessibility Guidelines - some basic guidelines for development on Android
Accessibility Checker - a free tool to check for accessibility in web-based clients.
Contrast checker Figma plugin - helps you check to see if your colors have sufficient contrast to meet the WCAG (Web Content Access Guidelines) standards.
Accessibility Scanner from Android App Store - scans your app UI and provides recommendations.
Accessible Colors - a web based version to check if your text is sufficiently contrasted

Development Courses & Videos

Build your first Nostr App by Super Testnet - a free video course that guides you in building your first nostr app.
Reddit Clone Part 1 | Part 2
NostrDevs: Build a Social Network from Scratch (Udemy Course) by Pleb Lab - comprehensive guide to mastering the Nostr protocol, providing an end-to-end understanding, design principles, and hands-on building experience on the nostr protocol.

Pre-built components

Tailwind UI - Beautifully designed, expertly crafted components and templates, built by the makers of Tailwind CSS. A quick and easy way to spin up functional and well-designed apps.
Chakra UI - a popular React component system

Frameworks and Helpers

Tailwind CSS - utility-first CSS framework to build UI directly from markup.
Untitled UI - a well-designed, comprehensive Figma UI Kit (paid resource)]
Open Design Systems - a collection of design systems by various companies. Use for inspiration.

Color

Vivid Gradient Generator - create beautiful gradients, unlike the typically faded ones

Typography

GRT (Golden Ratio Typography) Calculator - Font size, line height and content width calculator
Typescale - tired of guessing font size? Typescale generates all of this for you with one click.

Presentation

Xnapper - your marketing website is as good as your screenshots. Take better screenshots with Xnapper!
Mockuuups Studio - generate nice mockups of your app or features for your marketing website

Figma Plugins

Typescales - generate the proper type scales

Icon Sets

Phosphor icons - an incredible set of 7,488 icons!
Iconoir - 1,368 icons and growing. Free to use.
Streamline (Core - Free) - a set of 4000 icons in different styles. Streamline also had paid icon sets and other interesting resources such as illustrations and elements.
Untitled UI Icons - a great icon set resource for designers (paid full product). The Outline version (Figma File) is free!
Feather Icons - 287 free icons
Majesticons - Free for Open Source projects
Unicons - free line icons, and paid full set with solid and monochrome versions
Heroicons - 292 free icon (outlined, solid and mini) by the makers of Tailwind CSS and Tailwind UI
css.gg - 704 free icons

Logo

The Noun Project - although this is an icon search website (for paid icons), many of the icons can make excellent starter logos for when you want your project to look nice without breaking bank for a custom logo. Can be used as a logo for $2.99

Font Choices (Free)

We've put tother some popular font choices for UI in this Figma File. See the Fonts page.

Popular font choices for UI Design:

Inspiration

Mobbin - Stuck? Not sure what's the best way your app should handle a certain feature or interaction? Get inspired by real mobile apps!
Good UX - case studies and videos about good onboarding and other product experiences

Development

nips.be - easy overview of existing nips and their functions.

Illustrations

Charco Illustrations - a set of 16 free illustrations, pencil style