Decrediton: Tutorials layout + Staking tutorials update (2)

[ta-lind]

As there's a newer set of illustrations available for the tickets lifecycle, should get an iteration of those added to Decrediton. https://github.com/decred/dcrdesign/issues/51

Additional @marcelolustosa can create in similar style a set of image slides for the staking tutorial. This currently has only a warrior stakey image.

Current Staking tutorial copy (if anyone wishes to improve this, please sync with lustosa):

Decred holders can participate in the Staking (Proof-of Stake) process by purchasing tickets. These tickets are used to vote on miners’ Proof-of-Work in order to validate changes to the Decred blockchain, or on governance proposals within the Politeia system.

Staking to verify PoW is rewarding, as each cast vote receives part of the Decred Block Reward. Typically, five tickets are included in each block, meaning each ticket holder receives 6% of the total block reward.

When a ticket is purchased, the cost of the ticket is locked in your wallet until the ticket is used to vote, or is revoked. Tickets enter the mempool, then the ticketpool where they are drawn at random to vote. There is a 99.5% probability that a ticket will vote. The average ticket will vote in 28 days, but tickets still in the pool that have not been drawn after 142 days will be revoked. The DCR used to purchase the ticket is released from lockup when it votes or when the ticket is revoked.

When a proposal is set for a vote in Politeia, a snapshot of the ticket pool will be taken at the time of voting. All tickets will have the right to vote on the proposal in an off chain process.

As block validation is immutable, decisions made on all voted tickets can be publicly tracked. Active participation in staking helps secure Decred network’s, network, ensure quality Proof-of-Work, and determine the future direction of Decred.

Most important difference to keep in mind is that the image slides shouldn't have any text on them by default. The text later overlayed in the UI needs to be limited only to titles and 75 characters. All additional bodycopy can be added in the UI outside of the image. (e.g. ticket lifecycle I would add "Know Your Ticket: Etc" on top of the image and rest of the copy into the bodycopy area.).

Considering this, any image that has text on it (keep in mind if there is no good reason, then don't need to add the text overlay), should have an optically safe placeholder area for it, as the text will be added in the UI. Reason being for this is localization.
Preview: https://xd.adobe.com/view/13e61de2-51ac-4ea7-4105-3a73f0668a03-65d7/

Technicals: The image placeholders in UI are done at twitter ratio for practicality. Specs for renders:

• Originals as 2048x1024px pngs (optimized).
• Mobile variants at 750x750px.

@MariaPleshkova, once the visuals are ready, you can create an example layout with those and also further define the title overlay rules (e.g. possibility to change between a fixed amount of colors in case of dark and light images as well both regular + semibold typeface).

Once one full example of slides is ready (only desktop view), post these as three separate issues to decrediton repo with description for implementation. (1) UI layout updates 2) Staking tutorial content update 3) Ticket lifecycle content update)

decrediton - v017 - responsive views - tutorial.xd.zip

[RichardRed0x]

Here's some draft copy for the tutorial. Happy to work directly with @marcelolustosa on pairing it up with new visuals.

Decred holders can participate in Proof of Stake governance of the blockchain and project by time-locking DCR to buy tickets. Every block calls five tickets to vote, and a block cannot be added unless it includes at least three votes. Tickets vote in two ways when they are called.

Consensus rules voting: If there is an open consensus rules change proposal, each ticket votes to approve or reject that proposed change (or abstains). For a rule change proposal to be adopted it requires approval from at least 75% of voting tickets.

Block voting: Tickets vote to approve or reject the way the Proof of Work miner has constructed the block. If the tickets vote to reject the block then the regular transactions are stripped out (including PoW miner reward). This gives PoS ticket voters power to punish miner misbehavior.

When PoS tickets vote in a block they receive a reward, regardless of whether the regular transactions are approved or not.  30% of the block reward goes to PoS voters, so each ticket that votes receives 6% of the block reward.

When a ticket is purchased, the cost of the ticket is locked in your wallet until the ticket is used to vote. After a maturation period, the ticket enters the live ticket pool, from which tickets are selected to vote following a random process. On average, 50% of tickets will be called to vote within 28 days. After 142 days in the ticket pool, the ticket will expire and can be revoked - this unlocks the DCR used to buy the ticket but does not return a reward. There is a 99.5% probability that a ticket will be called to vote before it expires. Tickets can _only_ be revoked after they have expired, or if they were called to vote and failed to respond (missed tickets). 

While tickets are live, they are eligible to vote on every Politeia proposal which starts voting. When voting for a proposal opens, every ticket in the live pool at that point in time is eligible to vote on it, until the voting period closes. Votes on Politeia proposals are cast off-chain, but must be signed by the wallet that owns the tickets. 

Active participation in Proof of Stake voting contributes to securing the Decred chain and setting the future direction of Decred.

[marcelolustosa]

I've asked @RichardRed0x to take a look at tutorial's copy; tyvm Richard!

Also, i was looking at the current decrediton tutorials and noticed it uses 1:1 ratio images. I would like to suggest to keep that aspect ratio. Otherwise it's gonna be hard to adequate the original 2048x1024px images (2:1) to mobile version (1:1). The 'know your ticket' graphics are squares already.

Would be possible to keep 1:1 ratio?

[ta-lind]

Nice work on copy, can do the same with the other tutorial actually also.

Re: @marcelolustosa, I am leaning towards use of both the wider and 1:1 ratio. Reason being decrediton will be a desktop-first for the time being, and a 1:1 square (even in huge size) isn't the best fit for the desktop layout. These 2:1 can probably be re-used elsewhere quite easily also?

Can propose that @MariaPleshkova to have a shot at playing around with the layout, to see if an option that's as optimal with 1:1 could be worked out for desktop views.

If not, the approach should 2:1 variant as always the main image, which has a dedicated header/title copy area. This also gives more space to play with the illustration/visual design. 1:1 render would be fallback used for small viewport size.

[ta-lind]

The UI component and view updates for these are found here: https://www.figma.com/file/EanUbqJmPs8EMqY26j9zwo/decred---piui---master?node-id=12%3A0

Posting implementation issues when we're further along with the new tutorials.