1. General design guidelines #3
Description
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.