dcrdata UX/UI coordination - master issue

[ta-lind]

Assigned @MariaPleshkova and @harlovski as well ref to @buck54321

Please read through all the discussion and supplied materials at: https://github.com/decred/dcrdata/issues/1191 Alpha build w/ recent updates: http://alpha.dcrdata.org Features:https://docs.google.com/document/d/1CTFgBSGBoNQGgCq8kyXq1rtWLeugM6CqHxI7fr754BI/edit?usp=sharing All of these points should be broken down to individual issues for implementation and posted to /dcrdata repo. If any listed point produces a very large chunk, can be broken down to several issues to keep things clear.

Tasks to address: 1. Review and map out all common components from perspective of optical/functional performance and consistency against Decred’s other platforms. Decrediton, stakepools theme being the recent updates to refer to. These should result as a common component sheet alongside with some individual mockups to help illustrate any updates if needed.

1.2. Tables: One of the common elements of dcrdata are the tables (of which there are few variants). Improving these to the absolute top-tier table design should have a pretty big impact as they're kind of a backbone for dcrdata. Root of the problem is the presentation of big blockchain data is efficient and easily comprehendable way. Some points for the tables visual design:

• Design to improve both readability and navigation through the sheer amount of content
• Define a strong baseline grid for horizontal and vertical alignments
• Define a basis for row and header styling; color and type details and differentations
• Each table instance should focus on what's important and form it's hierarchy around that
• Follow common standards around alignment and if needed design additional rules (E.g. right or center alignment for numbers, left for text columns etc).
• Define and consider a common logic around content placement (e.g. on cards vs grey background). This is currently somewhat conflicting across dcrdata as some content is on cards but tables are not. I would house the tables on isolated cards also.
• Considering introducing tag or icon elements if they help with presenting the data
• Though do avoid any unneccesary additions, heavily repeating styling elements or any kind of overloading

Also address the interactivity of the tables:

• Hover actions
• Filtering
• Pagination
• Highlighting relationships

If needed, do research table design a bit and find some benchmarks. @MariaPleshkova / @Harlovski

2. Update all color used values to the identity ones and create a mnemonic names for all color swatches (both light and dark schemes). @MariaPleshkova / @Harlovski

3. Update all icons to the latest icons package (and create appropriate color variants) https://github.com/decred/dcrdesign/issues/133 @MariaPleshkova / @Harlovski

4. Redesign/stylize all chart-elements to consistent visual style. This should be done within reasonable limitations of the charting framework, confirm with buck54321 and ref. Decrediton charting: https://github.com/decred/dcrdesign/issues/11 @MariaPleshkova / @Harlovski

5. Test and map out interaction issues around navigation. 
Propose an updated navigation designs. @MariaPleshkova

5. Dark mode scheme: design dark mode variants for all common components and the layouts. Create key examples and implementation issues based on using the dark mode scheme designed for Decrediton. @MariaPleshkova / @Harlovski

6. Produce concept design iterations to improve the landing page based on the current developments. @linnutee / @MariaPleshkova / @Harlovski

7. Review and design improved no-js fallbacks. @MariaPleshkova / @Harlovski

Open issues to review/address (/dcrdata):

• https://github.com/decred/dcrdata/issues/127 : Need copy text icon on all hashes and addresses
• https://github.com/decred/dcrdata/issues/836 : Show field data and resize width for large screens
• https://github.com/decred/dcrdata/issues/995 & PR https://github.com/decred/dcrdata/pull/1210: Politeia charts
• https://github.com/decred/dcrdata/issues/992: make left and right blocks of same height
• https://github.com/decred/dcrdata/issues/1098: Add Subsidy Stats, Inflation Chart
• https://github.com/decred/dcrdata/issues/1175: Add notice about vote

[chappjc]

Work to resolve https://github.com/decred/dcrdata/issues/1098 (inflation) presently underway in https://github.com/decred/dcrdata/pull/1247

[harlovski]

XD file updated, mobile/tablet views and states included.

DCR Data.zip

https://xd.adobe.com/view/800a9bfa-dcb9-4985-58fb-ae312bfb80d2-f63b/

[xaur]

General design question: is it possible to make data more dense, esp. vertically? I'm a desktop user but I notice that in small steps the elements are getting more and more sparce here and there.

[ta-lind]

I'll close this issue bulk of the scope was addressed by harlovski and there's a new #181 open regarding the dashboard improvements. We can either continue on that one, once there's further feedback from the dev team or recollect any of the smaller issues + feedback into one chunk.