From 72a86edbfc426323895817c41efd4294ba194e38 Mon Sep 17 00:00:00 2001 From: Daniel Nordh <3393669+danielnordh@users.noreply.github.com> Date: Mon, 6 Nov 2023 11:50:34 +0000 Subject: [PATCH 1/4] Add code resources page (#1027) * Add draft code resources page * Add links to ui kit packages * WIP add draft list of projects * Update project links and references * Remove header image * Tweaks * Update guide/resources/code-resources.md Co-authored-by: Christoph Ono * Update guide/resources/code-resources.md Co-authored-by: Christoph Ono * Update guide/resources/code-resources.md Co-authored-by: Christoph Ono * Fix flutter link * Add to Resources intro page, next page * Add Bitcoin Icons * Add Guides, and links to bdk ldk * Cross link from Daily Wallet reference design page --------- Co-authored-by: Christoph Ono --- guide/daily-spending-wallet/landing-page.md | 4 +- guide/resources/code-resources.md | 70 +++++++++++++++++++++ guide/resources/design-challenges.md | 6 +- guide/resources/introduction.md | 8 ++- 4 files changed, 83 insertions(+), 5 deletions(-) create mode 100644 guide/resources/code-resources.md diff --git a/guide/daily-spending-wallet/landing-page.md b/guide/daily-spending-wallet/landing-page.md index b6f8fe154..4c80b17f7 100644 --- a/guide/daily-spending-wallet/landing-page.md +++ b/guide/daily-spending-wallet/landing-page.md @@ -129,6 +129,7 @@ The daily spending wallet is an app designed to quickly and easily send small am A reference design is a complete design for a bitcoin product. It goes beyond just demonstrating individual user flows -- rather, it shows you how all of the user flows fit together and serve a purpose in the user’s life. You can use this open-source reference design to help you build your own similar bitcoin product! ## What we are building + Imagine a product that tries to solve the problem of quickly and easily [sending smaller amounts of bitcoin]({{'/guide/designing-products/personal-finance/#day-to-day-spending' | relative_url}}) to friends and family or paying for small purchases. Ease and speed of use will be important as usage will likely be on mobile devices and on the go. Users are not expected to be well-versed in bitcoin technology or advanced [private key management]({{'/guide/how-it-works/private-key-management/introduction/' | relative_url}}), making it reasonable to worry more about self-inflicted loss than theft. Since it’s designed for ease, this wallet abstracts away channel management for the user. It can do this by integrating with a [lightning service provider (LSP)]({{'/guide/how-it-works/lightning-services/' | relative_url}}). This way, the user never has to consider their [lightning channels.]({{'/guide/how-it-works/liquidity/' |relative_url}}) @@ -150,9 +151,10 @@ Below is a prototype of the daily spending wallet, which outlines a few of the p height = 500 %} -You can find the prototype source files on [Figma community](https://www.figma.com/community/file/1186631213810803207), and a direct link to the design file [here](https://www.figma.com/file/lf2Xyw2I2OXPsHiFQVQdiG/Daily-spending-wallet-prototype?node-id=4167%3A92515). +You can find the prototype source files on [Figma community](https://www.figma.com/community/file/1186631213810803207), and a direct link to the design file [here](https://www.figma.com/file/lf2Xyw2I2OXPsHiFQVQdiG/Daily-spending-wallet-prototype?node-id=4167%3A92515). There are also some [code resources]({{ '/guide/resources/code-resources/' | relative_url }}) available, such as UI libraries and example wallet builds. ### Alternate Options + The chapters below will walk you through the different sections of this example product and help you understand the design considerations for why this product is built this way. In the interest of being a fully realized product, this reference design makes assumptions about technologies, specifications, and the kind of person we’re building this for. As you build your own bitcoin product, you may decide that you need to build things differently. diff --git a/guide/resources/code-resources.md b/guide/resources/code-resources.md new file mode 100644 index 000000000..bbfe2cb3f --- /dev/null +++ b/guide/resources/code-resources.md @@ -0,0 +1,70 @@ +--- +layout: guide +title: Code resources +description: Code implementations of reference designs and other resources from the Bitcoin Design Guide, created by the community. +nav_order: 4 +parent: Resources +permalink: /guide/resources/code-resources/ +main_classes: -no-top-padding +--- + + + +# Code resources + +Although mostly focused on design, some members of the community also have their hands in various code resources that are based on, or influenced by the Bitcoin Design Guide. They are all open source and free to use, modify and contribute to. + +## Bitcoin UI Kit + +The [Bitcoin UI Kit](https://www.bitcoinuikit.com) is a great resource for designing bitcoin products. While the main effort is on the design components and design source files, there are a couple of code implementations by community members that make adopting the designs in the guide much easier. + +- Bitcoin UI for [Swift](https://github.com/reez/WalletUI) +- Bitcoin UI for [Flutter](https://github.com/bdgwallet/bitcoinui-flutter) +- Bitcoin UI for [React Native](https://github.com/EttaWallet/etta-ui) (Etta UI) + +## Bitcoin Icons + +The [Bitcoin Icons](https://bitcoinicons.com) project is a handy way to include commonly needed icons for bitcoin products. There are a number of code implementations for Node, React and Vue over on the [Github page](https://github.com/BitcoinDesign/Bitcoin-Icons). + +## Wallet implementations + +Several different projects are building on the reference designs from the guide. They all have slightly different goals and are at different stages, but are all fantastic learning resources for other people wanting to build a wallet. + +### Etta wallet + +[Etta Wallet](https://github.com/EttaWallet/EttaWallet) is a resource for experimenting with non-custodial lightning with a strong bias towards usability, accessibility and good UX. Built with React Native. +The project is strongly inspired by the [daily spending wallet]({{ '/guide/daily-spending-wallet/' | relative_url }}). + +### Monday wallet + +The [Monday wallet](https://github.com/reez/Monday) is an example iOS app using [LDK Node](https://lightningdevkit.org), an easy to use implementation of the Lightning Dev Kit. + +### BDK Swift example wallet + +The [BDK Swift example wallet](https://github.com/reez/BDKSwiftExampleWallet) is an iOS app using [BDK](https://bitcoindevkit.org), the Bitcoin Dev Kit. + +### BDG (Bitcoin Design Guide) wallet + +The [BDG Wallet](https://github.com/bdgwallet) is a work in process project for implementing the reference designs from the guide in Swift and Flutter. It is also built using [LDK Node](https://lightningdevkit.org). + +## Guides and blog posts + +Various guides on how to build bitcoin wallets that are related to the Bitcoin Design Community. + +- [Build a bitcoin wallet with SwiftUI - Part 1, BDK](https://bdgwallet.notion.site/Build-a-bitcoin-wallet-with-SwiftUI-a9b09fef617143948babf0641086c353?pvs=4) +- [Build a bitcoin wallet with SwiftUI - Part 2, UI Styling](https://bdgwallet.notion.site/Build-a-bitcoin-wallet-with-SwiftUI-Part-2-UI-Styling-905e4db372ca48a4ad9d926449bcbc78?pvs=4) + +--- + +{% include next-previous.html + previousUrl = "/guide/resources/design-challenges/" + previousName = "Design challenges" + nextUrl = "/guide/contribute/" + nextName = "Contribute to guide" +%} diff --git a/guide/resources/design-challenges.md b/guide/resources/design-challenges.md index 835b0bd53..237434e3e 100644 --- a/guide/resources/design-challenges.md +++ b/guide/resources/design-challenges.md @@ -72,7 +72,7 @@ It is completely up to you to decide how you want to go about each challenge. If - What requirements and assumptions do you have in mind for your design? What are the design tradeoffs you’re making, and why? - Communicate the design and thought process. The methodology and workflow is as important as the finished product. - Bring in your own personal touch. Find a way to make your challenge unique. -If you’d like, share your challenge with the community, we’re always curious to see new approaches. + If you’d like, share your challenge with the community, we’re always curious to see new approaches. ## General resources @@ -89,6 +89,6 @@ Now let's look at how to [contribute to the guide]({{ '/guide/contribute/' | rel {% include next-previous.html previousUrl = "/guide/resources/design-research/" previousName = "Design research" - nextUrl = "/guide/contribute/" - nextName = "Contribute to guide" + nextUrl = "/guide/resources/code-resources/" + nextName = "Code resources" %} diff --git a/guide/resources/introduction.md b/guide/resources/introduction.md index 92f501646..a7387765b 100644 --- a/guide/resources/introduction.md +++ b/guide/resources/introduction.md @@ -22,7 +22,7 @@ This section of the guide is a collection of design resources to that can help y --- -### [Design files]({{ '/guide/resources/design-files/' | relative_url }}) +### [Design files]({{ '/guide/resources/design-files/' | relative_url }}) Shared design source files and a suggested process for collaborating on creative work. @@ -40,6 +40,12 @@ Get hands-on with these take-home bitcoin design challenges to practice and play --- +### [Code resources]({{ '/guide/resources/code-resources/' | relative_url }}) + +Code resources that are based on, or influenced by the Bitcoin Design Guide and the Bitcoin UI Kit. + +--- + {% include next-previous.html previousUrl = "/guide/case-studies/payjoin/" previousName = "The Payjoin Experience" From b03338c5d9cf35e6b73484bd4d769b0e8569be7b Mon Sep 17 00:00:00 2001 From: Christoph Ono Date: Thu, 9 Nov 2023 13:22:17 +0100 Subject: [PATCH 2/4] Minor copy tweaks to visual language & user research (#1046) Addressing an issue brought up on Twitter on the Visual language page, described in #1044. Removing an incomplete and unnecessary sentence on the User research page, and adding a link to the Bitcoin UX Research Kit. --- guide/designing-products/user-research.md | 4 +--- guide/getting-started/visual-language.md | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/guide/designing-products/user-research.md b/guide/designing-products/user-research.md index 2a8ee5c13..7ca5ba96d 100644 --- a/guide/designing-products/user-research.md +++ b/guide/designing-products/user-research.md @@ -206,7 +206,7 @@ Links to: --- -Join the discussion in the [#research channel](https://discord.com/channels/903125802726596648/903126614236360764) on the Bitcoin Design Discord. +For practical guidance, use the [Bitcoin UX Research Toolkit](https://bitcoinresearch.xyz) and join the discussion in the [#research channel](https://discord.com/channels/903125802726596648/903126614236360764) on the Bitcoin Design Discord.