1. General design guidelines

[Cobra-Bitcoin]

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.

[natiwa]

Icon. Let me know your thoughts. Do you need it in different sizes as well?

[Cobra-Bitcoin]

@natiwa Awesome, it's just what I had in mind. And no, 512x512 is fine, I don't think we'll need it in other sizes.

[alexchorman]

Hey @Cobra-Bitcoin, you mentioned that height of the application window should be 600px. Is that including the titlebar at the top?

[Cobra-Bitcoin]

@alexcherman Yeah it includes the titlebar.

[alexchorman]

Ok, thanks for the info

[Cobra-Bitcoin]

@natiwa @alexcherman Also, let's not forget we still need the custom SVG animated loading indicator designed to replace this horrible looking one: https://github.com/bitcoin-dot-org/Bitcoin-Wallet/blob/master/src/assets/ball-triangle.svg.

[alexchorman]

@Cobra-Bitcoin Yes, sure. It's already done. @natiwa will send it to you as soon as she has time.

[natiwa]

hi,

@Cobra-Bitcoin Loader will be animated like this one (maybe a little bit slower):

But the design will be like this one:

@alexcherman needs to code it.

Let me know what you think.

[Cobra-Bitcoin]

@natiwa Looks really good, I'm happy with it, especially if the animation is smoother.

[alexchorman]

Hi @Cobra-Bitcoin Please check updated loading indicator: https://drive.google.com/file/d/1p_U0xp_-eX5fRnN4SqY7qCRhDxdy-rZK/view?usp=sharing
Let us know what do you think please.

[Cobra-Bitcoin]

@alexcherman Looks awesome, really nice job! 👍

[alexchorman]

Hey @Cobra-Bitcoin. I have question regarding window size. Can users resize the window?

[Cobra-Bitcoin]

@alexcherman Nope, it won't be possible to resize the window.