Bitcoin-Wallet icon indicating copy to clipboard operation
Bitcoin-Wallet copied to clipboard

1. General design guidelines

Open Cobra-Bitcoin opened this issue 3 years ago • 13 comments

These are the general design guidelines that apply for the entire application, I generally prefer if these are stuck too, but modifications that do something better than what is outlined here are welcomed.

Window size The size of the application is the default window size for Electron applications: a width of 800px and a height of 600px.

Colors: The main colors should be based on the current bitcoin.org website design's darker palette with orange as the contrast and possibly some white where appropriate, but generally it should be quite dark:

  • Orange: #FF9500
  • Dark: #090c14

Titlebar Use a custom titlebar for all the pages, but instead of being green like the example below, use #090c14. Don't show a sub-menu in the title bar (so no edit, view, window, etc options), just only two options: minimize and close, nothing else.

Font Same as in the website, use Titillium Web and possibly other new fonts if appropriate. https://fonts.google.com/specimen/Titillium+Web.

Logo Use the standard Bitcoin logo as the main logo of the wallet:

Modals Ideally all modals will be white, for maximum contrast, as is the case on the website with the donation modal, and when a modal appears, the background will be dimmed. Modals should have an "x" icon at the top right to indicate the modal can be closed.

Loading indicator The current loading indicator that appears when the user first opens the wallet is this: https://github.com/bitcoin-dot-org/Bitcoin-Wallet/blob/master/src/assets/ball-triangle.svg.

We need a better loading indicator, perhaps one that incorporates the Bitcoin logo somehow, or something similar.

Tables All tables need to have pagination designed into the table itself in a nice way, to allow for example the user to easily scroll through their transactions.

Animations If the animation makes sense and helps the user, they are welcomed, but animations that are easy to implement in code are preferred. In particular an animation of when a modal is opened would be useful, along with animations to "slide" the user between different phases of the onboarding process.

Cobra-Bitcoin avatar Sep 05 '20 13:09 Cobra-Bitcoin