Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Decrediton: UI dark color scheme #105

Closed
ta-lind opened this issue Jan 21, 2019 · 1 comment
Closed

Decrediton: UI dark color scheme #105

ta-lind opened this issue Jan 21, 2019 · 1 comment

Comments

@ta-lind
Copy link
Member

ta-lind commented Jan 21, 2019

decrediton - darkmode - teaser

Preview: https://xd.adobe.com/view/bbbdae21-5e1b-41f3-66a9-25ac2ebdf859-cd8c/

There’s a few important changes to keep in mind regarding the dark mode.

Bit of background info. I’ve introduced a color scheme addition of dark-mode blues. This scheme is initially only aimed for Decreditons dark mode and not to be applied globally in DCR identity. I’ve also tested out a dark mode variant with the greys, however it’s not as visually pleasing and not so familiar, as i’ve already created some initial Decrediton designs in the past with a blueish dark mode. The dark scheme was generated by adding a percentage of black to clam down the blue tonalities. The default blues would simply too intense and produce a neon-mode rather than a functional dark mode.

@MariaPleshkova scope and things to keep in mind:

  • I’ve created an initial example of Send view in order to define the direction. This should be used as a main reference for all following views.
  • Listed in the .xd only the key views and their variants with notable differences. Should only cover the desktop views. In-app views come first, then these can be posted for implementation. Launcher views as follow-up.
  • The structural elements as well most of the icons use new color scheme additions.
  • Color coded interactions and some elements can keep their default colors (e.g. key blue, orange, yellow, green etc), unless they visually conflict with anything.
  • Aim for all views should be finding a solution that has optically similar contrasts and color hierarchies as defined in the light mode. Underlining optically, as simply picking a close negative value won’t be always right, thus need a keen eye to find the right balance.
  • No elements shouldn’t be with too hard or too low contrast. Keeping in mind on worse monitors lower contrasts can dissapear and higher ones hurt the eye.
  • All icons that are recolored and imported for implementation can be listed in the icons artboard and made to symbols.
  • Once the views proceed further, i’ll make another issue to start compiling an updated common compnent library. We’ll need to include both dark and light mode variants there.

Source files: decrediton - v017 - dark mode.xd 2.zip

@MariaPleshkova
Copy link
Collaborator

xd file for both launcher and in-app views: decrediton_dark mode_21.05.19.zip

Icons SVG: Dark mode icons_21.05.19.zip

Connected issues decred/decrediton#2122 and decred/decrediton#2123

@ta-lind ta-lind closed this as completed May 22, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants