decred / dcrdesign Goto Github PK

Decred Design System

dcrdesign's Introduction

/dcrdesign helps with practices, coordination, maintaince, accessibility and scaling of Decred projects design outputs. DCR design domain consists of ux/ui, identity, and visual communications sub-domains. This repo's functions are following:

Communicating DCR design contributors current tasks and forming high level overviews (using Gh’s built-in pm features).
Coordinating work and syncing up with designers, developers and other contributors.
Posting deliverables and reports for archiving.
Providing a central location for cross-referencing design related issues or questions through-out the ecosystem.
Accepting and reviewing requests.

Identity / Visual Comms.

Identity and visual comms guidelines

Decred Logo Assets (All formats via Figma Export

Politeia Logo Assets (All formats via Figma Export)

DCRDEX Logo Assets (All formats via Figma Export)

Icon Library

Animation Library

UI/UX

Decrediton - pi-ui - figma master file

Politeia - pi-ui - figma master file

CMS - pi-ui - figma master file

Dcrweb - figma master file - v013

Dcrmaterial: Components Icons Colors

Godcr - (dcrmaterial) - figma master file, Drafts

Dcrmobile - (dcrmaterial) - Dcrancroid (Sketch Export) Dcrios (Sketch Export) Send Totals Stakeshuffle Launch

Detailed list of assets can be found in Latest Releases

Use Practice:

Use Matrix #design and projects ops channels for quick and temporary communications and general discussions around work. (#design /#_ops)
Individual contributors also often use other means like telegram for regular comms.
Post tasks and projects for coordination on the relevant project boards
New items should be started by posting Issue (or Note on relevant project board if this is used).
When doing confidential work, post the published result into the Completed board and document it within an issue (e.g. short delivery report, preview, links, work files or assets).
Post delivery reports, assets and other references as comments within issues.
Use labels to improve organisation between issues.

If you are working on visual, motion design or illustration tasks for general visual communication (e.g. promotion, marketing, instructions…) – using only /dcrdesign repo and Matrix will cover most of the productivity needs.

If you are working on UI/UX side of different Decred products and platforms – the relevant products repositories and /dcrdesign should be regularily used and cross-referenced to keep all parties in sync. While different product repos have various use practices, levels organisation and activity, the /dcrdesign's is to bridge gaps between design practices and progress, and it's appliances across the products and development.

Typically issues to product repos, ie. new implementations, should be kept short and concise, and broken up into well mangable parts if needed - the issues in /dcrdesign should be for tracking progress, covering extensive details and archiving, thus can be larger in size. As a rule of thumb, needless double posting should be avoided though.

dcrdesign's People

Contributors

Stargazers

Watchers

Forkers

marciopocebon francov99 stanlv insaf01 kylefirethought

dcrdesign's Issues

Privacy symbols

Create three symbols to represent privacy settings. Can be based around the eye or hat motif and need to work as a series.

Twitter images Jun 2018

Tweet images for Okex, Huobi and Dragonex additions; Blue Yard investment thesis.

Onboarding slides

Twitter images cheatsheet

A Base formula to standardize and streamline Twitter images which include main post categories with logic, composition, prototype and examples.

decred - twitter images - cheatsheet.pdf

Transactions updates: 0618

Twitter images: July - August

Drop released ones here for archiving.

Contributors subpage 160518

VD: Add filtering for corporate contractors
Front-end implementation
Add content

dcrweb - contractors - v010.zip

Raw 3d renders

Part of identity update, first wave.
Decred - 3d assets for social media, first wave.zip

Can be seen living in Twitter, Youtube, Facebook, Medium, LinkedIn.

Preview:

Technical:
color: sRGB
width: 3072px
Height: 1536px
Aspect ratio: 2:1
Format: PNG

DCR identity update release 1st wave

Politeia - logo and symbol assets

Package composed of Politeia logo plus symbol in various formats and sizes.

Preview:

Assets:
Politeia - Logo Package.zip

// color version follow up: #83

Table cloth design 90"x132"

Request for tablecloth design from @BAB in Marketing ops for Portland Street fairs event.

Finished size: 90" x 132"
Top panel 72" x 30"
Front area 72" x 30"

G4M-90X132-TABLETHROW4SIDED.pdf

Stakepool theme: responsive and mobile views

DCR Animated Iconset (Reprise)

Using the EETER's updated Decred Identity iconset I'm currently undertaking a short-term exercise of animating these for use across DCR platforms and materials. These will be collated for general use and available in a myriad of formats for use/integration in Decred working products.

PNG (with & without Alpha)
GIF
JSON (using Lottie's libraries - compatible with all renderers unless stated otherwise)

As well as educational materials the iconset could serve well on social media platforms as well as give the project the upper hand on new developments, for example, if Blockfolio were to allow for GIF integration in Signals.

Over the coming weeks, I'll be uploading some of the pieces most icons are formed in two flavours:

Open: pieces that are merely introductory (not looped)
Looped: Self-explanatory.

I will post my progress here. Any constructive input welcome.

Blockchain Pattern: Perspective variant for print

Created this perspective, vector and cmyk variant of pattern for print use. This is slightly thicker than the default version to function well in large and small scale. To be added to the assets package.

Use with care: dcr - pattern - skewed - vector.ai.zip

Stakepools theme

Tasklist @MariaPleshkova
UI views: https://www.figma.com/file/dzjw34JZ40sxEJVqhekmhZBP/Decred

Notes: 07.01.19
- Closing down this issue, as all design and front-end work besides the GDPR content is done.

Notes 02.07.18: 
- renamed address page to Connect page,
- added GDPR modal
- added mobile and tablet drafts (only for key views, to be decided later) 
- took home page to the end of the list to give time for considering better onboarding

Definition
dcrstakepool is a web application developed by the DCR project enabling hosting stakepools.
It coordinates generating 1-of-2 multisig addresses on a pool of dcrwallet servers so users can purchase proof-of-stake tickets on the Decred network and have the pool of wallet servers vote on their behalf when the ticket is selecte. Stakepool hosts can get the software from Decred's gh; application also comes with a default web-ui theme, recommended to be used by all stakepool host.
All views and comments: https://www.notion.so/eeter/Stakepool-Theme-Overhaul-0518-491c02c8989f4af18d1bcf3525e87162

Goal
The goal of the work is to update the visual design; making it more consistent with the current Decreditons UI as well improve general usability where possible. Although anyone can customise their stakepool's UI, ideally provided theme should be a good enough default solution to take away need for edits.

Primary use case
From a users perspective, a stakepool's UI is interacted with during the setup process of connecting a wallet to a stakepool. During this process, the user needs to:

Select a relevant stakepool from Decrediton (or decred.org/stakepools)
Register an account on the selected Stakepool
Login, find and copy the API key and paste it to Decrediton.
Other use cases as secondary, the stakepool theme gives

Secondary use cases (lower priority)

Stakepool admins can add ignored tickets (due to low fees attached) to stakepool
Stakepool admins can see statuses of daemons/voting wallets/stakepooldaemons
Users can update their voting preferences (also in Decrediton)
Users can edit their basic settings: password, email
Users can view the stakepool statistics (also in Decrediton)
Users can see their ticket information (also in Decrediton)
Users can connect to stakepool via commandline wallet

Scope

Re-design the stakepool theme in a consistent style referred from Decreditons UI
Structure wise, the big picture can remain the same, any suggestions for changes should discuss tradeoffs involved
Structure and flow updates:
- Login and Register should be simplified; I propose using a tab or accordion pattern approach, to locate them closely rather than in two different pages as now.
- Finding and copying the API token should be simplified.
  This module can be re-located from the Settings.
- Address page can be thought-over if needed. Since it's the command-line option to connect to a stakepool, hence a secondary use case. Currently the potential problem with is confusion with finding the API key; since that's currently located under Settings. Would consider having them on the same page instead and with a clearer hierarchy.
Home/Landing views:
- The stakepool fees and stats can be highlighted clearly as statistical info.
- The descriptive and onboarding content can be updated, can use the Stakey illustrations / animations from @lustosa and @kyle or create a new relevant pieces that would assist with the onboarding. (Stakey illustrations are used in context of pos)
Tickets in "Add Low Fee Tickets" view can be visualized in graphical or any better manner
The visual design should be based on a default latest bootstrap grid. https://medium.com/@petehouston/setup-twitter-bootstrap-grid-in-sketch-f6e69eab95c2

Workflow

UI design in Adobe XD, Sketch or Figma
Normal / temporary communications via Slack; Calls via eeter.co slack; Documentation, tasklists and archiving Github.

Content

Gh: https://github.com/decred/dcrstakepool
https://teststakepool.decred.org
Examples of stakepool theme in use: http://decred.org/stakepools/

Decrediton UI references and supplied assets:
Staking setup: https://xd.adobe.com/spec/45ac2e7a-426e-488f-9a41-590e64c63563/
All key views: https://xd.adobe.com/view/da48d1a5-e1b9-4392-68ac-2fbb8d15e2f8-ac79/
Launcher views: https://xd.adobe.com/spec/f3d26fc1-dbc2-4a3a-9870-c0ac2ae59a8a/
decrediton ui v015 - Masters.zip
stakey-illustrations.ai.zip
decred-colors-rgb.ai.zip
Decred - Logo Package.zip

Decred Color Palette For Sketch

Decred Color Palette (Sketch)

An organized Decred color palette for Sketch users.

(HEX number source: The visual toolkit pdf provided by @linnutee)

How to use

Download the palette file here

Then use the plugin below to one-click import the palette file into Document Colors (or Global Colors if you want).

Install Sketch Palettes Plugin
Open Sketch -> Plugins -> Sketch Palettes -> Load Palette...
Choose the Decred_2018_ColorPalette.sketchpalette file
Done

TX Bitcoin conference: swag

Been asked to make some swag (t-shirt and stickers) for TX bitcoin conference.

Marco suggested Stakey riding a bucking bronco; thought of make it riding a bull instead, but some people consider rodeos to be cruel to animals.

So I'm working on Stakey riding a mechanical bull :)

Decrediton: microanimations and motion design fixes

Microanimations @kyleFirethought:
Preview: https://xd.adobe.com/view/ff2e58a0-530f-4015-6c11-24421ef384e5-891f/
Assets: decrediton - loader icons.ai.zip

As discussed in the call, different loader messages currently using the generic diamond will be integrated into the loader. Microanimations of should be minimal loops, with optimal duration between 210 - 340 ms.

Export bodymovin/json and @3x-png sequence as fallback (60x60px).

Fixes and assets @linnutee:

Pending tx microanimation re-implementation
Generic loader re-size, color fix, positions fix
Stakey re-size

Roadmap Subpage

Structural design
Visual design
New icons/symbols
Front-end implementation

Booth Design: WS18 - Keyline - 2x2

Slightly evolved iteration of the backsplash applied to a two panel booth.

Includes a new and bolder slogan for the first use run, and Placeholder.vc quote to communicate the focus on blockchain governance. Both can act as conversation openers.

dcr - WS18 - Keyline - 2x2.zip

News subpage

Structural design
Visual design
Category icons

Contributors page portrait photo guidelines

Here's a how-to-guide on taking photos for the contributors page. It helps me to make more accurate illustrations. Ask if any questions.

DCR architectonic elements

Concept draft
Element set
Grouping examples

Animated Iconset: Decred

PNG (with & without Alpha)
GIF
JSON (using Lottie's libraries - compatible with all renderers unless stated otherwise)

Over the coming weeks, I'll be uploading some of the pieces most icons are formed in two flavours:

Open: pieces that are merely introductory (not looped)
Looped: Self-explanatory.

I will post my progress here. Any constructive input welcome.

UI/UX - 1.2.1 fixes and updates

Update headers motion design

Brief for @30000kfps

Phasing out current js headers and replacing with abstract looping .gif's.
Use abstract geometry (potential for use or further iterations of architectonics studies) to build relation with the subject matter of each page.

The pages and keywords reference for kick-off:
https://decred.org/exchanges/
sine/square/tri pattern movements, trading charts/candles, measurement, value comparison, noise pattern on a timescale, liquidity growth

https://decred.org/contributors/
growth/expansion, uniqueness, beehive, one goal, engagement, superoganism, global ant-colony, filling up empty space/gaps

https://decred.org/community/
discovery, growth/expansion, different layers of communication, ecosystem, interconnected movements

https://decred.org/stakepools/
transformation (this becomes that), algorithmic cornerstone, time; timelocking, flocks of tickets, option variables, vaults of growth, surplus

https://decred.org/downloads/
importing/receiving, emission, mesh of point a to point b movement, progressive flow, downward movement

https://decred.org/press/ (later on known as news page)
accredit, formal visibility, subjectivity vs objectivity, layers of interpretation, approved hype or
generalization

Out of all, Press/News needs to be the calmest and most subtle, not to interfere with reading larger textual content.

Details:
Background color: #091440
Size: up to 3mb (3.5mb the most if worth it).
Dimensions: 1366 x 345px by default/master.

Discuss further about optimization:
A) Can be smaller dimensions in case of functional seamless patterns are worked out
B) Can be number of renders with same height and different width (575, 768, 991, 1199px) based on the sites breaking points (this way only loads the relevant size)

One static fallback for each gif.
Semi-transparent overlay with same dark blue not included in gif, will be added in html.

Primary element colors: #2970FF ; #2ED8A3
Secondary colors can be picked from the color scheme if needed:

#1490 Watch-only views

Addressed in: decred/decrediton#1490

Prototype: https://xd.adobe.com/view/f62cab0f-de1d-4385-665c-cdea96b80679-801d/
Specs: https://xd.adobe.com/spec/563119f3-5bbf-43bd-5c65-6b002287f541-2000/
decrediton - ui v016 - watch-only instances.zip

StatX: Twitter Image

Facebook video header: August

Archive of MP4 video with text overlay and uncompressed looping animation

Preview:

Technical:
Width: 820px
Height: 462px
Aspect ratio: custom
Format: MP4 + MOV ProRes

DCR Dex Proposal Images

A set of images for the articles and media use.

dcr - dex set.zip

New guidelines and packages

The Splitting video

dcrdocs design improvements

@MariaPleshkova

https://github.com/decred/dcrdocs/issues
https://docs.decred.org
This is based on a material-design mkdocs theme https://squidfunk.github.io/mkdocs-material/getting-started/

Scope of this task is fine tuning the material-design theme on low level (css and content changes) to further align with Decreds visual identity.

Tasks:

Map out instances for fixes and styling refinements
Create bite-sized issues to github for implementation
Limited to a single or few related elements
Describe the problem and the suggested solution
If needed provide mockup with specs for solving

Theme-related:

Primarily focus on typography colours and smaller details, adding up to the identity and providing a good visual experience, appropriate contrasts, alignments, etc
Create templates for both screenshots and instructional schematics

Content:

Add/create missing icons
Create new screenshots and schematics based on templates

Example implementation issues:
decred/decrediton#1423
decred/decrediton#1424
decred/decrediton#1422
decred/decrediton#1413

Notifications overhaul

Currently Decrediton uses basic error and success messages and an undefined snackbar pattern for larger actions/events. Goal is to create a notifications baseplate, that houses all of the different notification types and builds foundation for further organising the notifications feed.

M1:

Notification messages baseplate template (3-5 concept examples).
Includes: Icon, textual content, additional content (transaction details or error log), close button
Consider optimal positioning (e.g. hovers somewhere in top/header area)
Consider scalability, accordingly to amount of content
Consider semantics making sense and having appropriate nuance and hierarchy. (E.g. Data copied to clipboard not as important as succesfully Buying Tickets)
Minimal use of color; rather rely on icons (and icon color if sensible). This is to avoid logic conflicts such as positive negatives (e.g. succesfully removed xyz)

Current types and examples:

Actions and Events (regardless of user action)

Republished unmined transactions to the decred network.
New transaction received {tx details}

Success (currently any kind of succesful user action)

Ticket buyer is now running.
You bought 2 tickets.
Ticket buyer is now stopped.
Seed copied to clipboard!
Successfully set vote choices.
Successfully added stakepool {host}
Successfully removed StakePool config

Failure (currently any kind of failure from user action)

Error syncing SPV wallet: {originalError}
Error trying to add custom stakepool: {originalError}
Unspecified system errors {originalError}

All message strings reference: https://github.com/decred/decrediton/blob/master/app/reducers/snackbar.js#L52

M2:

Further define the specific messages, content and functionale (specified icons, interpolations etc) and prepare for implementation.

Decrediton - notifications preview.zip
decrediton - master - v016.xd.zip

News subpage

Structural design
Visual design
New icons
Front-end implementation

Visual Style For Educational Videos

Hello everyone. I'm opening this issue to foster discussion about the visual design of educational materials.
Some preliminary discussion has taken place here.

Based on @linnutee's suggestion of 'schematic-like' I've come up with a basic icon-based visual 'scaffold' which is minimal but allows for detailed representations of technical information:

All that's left in my mind is to build up a visual design around this scaffold that is undeniably part of the Decred Identity but also set apart from other visual materials.

I understand we are still waiting for the release of the new visual guidelines and icon set, but I figured we could at least start the discussion in the meantime.

We currently have 2 scripts ready for production so once there is consensus on a design for these and the new assets are released @kyleFirethought can start animating and we can get a pipeline going to enable the regular release of this type of content.

@behindtext @raedah @saender @denyszayets @marcelolustosa @koosake

Decrediton Help view updates

Implementation reference: decred/decrediton#1650
Source files: decrediton - v016 - help.zip

Downloads subpage

Update card styles
Re-work header animation
Front-end implementation

Dcrweb – Politeia additions

With the launch of Politeia mainnet:

Add Pi to landing navigation.
Add communication about Pi to landing page.
- Visual Design
- Front end

Update Politeia challenge YT thumbnails

The logo on these is broken, so all 9 episode thumbnails should be replaced. Iterate a series visual reference from the Pi challenge hero image

Size: 1920x1080px

Elements to include:

latest Pi logo
title
talker name

politeia - logo.zip

Android App

Design Specs: https://xd.adobe.com/view/336d6bf4-d220-4388-a795-4012bab46cee
Revision 2.0 2018

Conference Booth Concepts & Ideas

@saender @marcelolustosa @kyleFirethought @koosake @linnutee @justinsantoro
This item has been on our agenda for quite some time, and I have some great concepts and ideas I'm eager to share with you all. I'm wrapping up with few changes and will share them here asap.

Stakey Sticker set for Telegram

Isaac, who manages our telegram channel, came to me and asked for Stakey images for Telegram. I know that platform has amazing support to transparent png's, so I decides to make an 'official' sticker set for it.

I think it worth some effort because the stickers can potentially be used in other CC-related groups. Also Telegram provides statistics about the stickers usage, which I'm going to track.

At first I'll recycle some old drawings as stickers; if that go well I can make new ones. Those could also work as printed custom cut stickers to compose our visual toolkit

Statistics

UI minor updates: 0518

Developers subpage

Concept and structural design
Visual design
Front-end implementation

Search filters optimizations

The search filters is getting an additional feature added, which is filtering by amount. As this view will likely get some more fundamental updates in the future, should aim to fit solution in the current context. At the moment there’s three filtering options – by address field and two context menus containing: sort by newest, oldest; display specific tx types.

Ideally the amounts can be displayed with a single bar and an option to clear/reset it. I recon this can be fitted under the “sort by” context menu (first icon, containing newest/oldest atm) by making the dropdown slightly larger and giving it separation.

Update Press Subpage

Visual design update; house releases and coverage
Front-end implementation
Add content

https://xd.adobe.com/view/12feeac9-0e74-4e24-6433-d4732b0c3f34-64cf/
dcrweb - press - v010.zip

Decred - Keynotes

Attached the blank master Decred keynote theme and Source Sans Pro font, which should be installed before using. Although this is not super up to date in all visual aspects, should provide a good starting ground.

decred - keynote template - 100317.key.zip
Source Sans Pro.zip

There's been a number of presentations created based on that, some included here for reference.

lukepb – Decentralized Governance – 210518
jy-p – Decred for Business, NY – 220318
jy-p – Politeia, St Clara - 111117
marco - Decred For Business, Frisco - 012718
jy-p - Decred: An Introduction - 080717

Additional Roadmap Animations

Outstanding animations': Security and Airdrop - to be added to roadmap18.-.motion.-.pack