Guide icon indicating copy to clipboard operation
Guide copied to clipboard

Create a banner image for the `How it works` section

Open Bosch-0 opened this issue 2 years ago • 1 comments

Request the visual

Hello, I would like to request a visual for the how it works section of the guide.

Link to the page

https://bitcoin.design/guide/how-it-works/

Visual Type

Header banner image.

Extra context

Jeff on Slack made a suggestion about making the visuals for this sections pages have a level of consistent aesthetic / visual harmony applied throughout to communicate a flow of the ideas. We did something similar with the onboarding section where the banner images are connected.

Illustration guidelines

If you're a contributor looking to tackle the issue, you can preview our illustration guidelines.

Bosch-0 avatar Apr 01 '22 07:04 Bosch-0

Just want to add that these types of tasks should start by proposing an idea or concept, and not by posting a final image. It's usually a bit more collaborative when starting this way, which ends up in a better result.

GBKS avatar Apr 05 '22 08:04 GBKS

Hey guys, is this issue still to be done? I'd be happy to give it crack. An initial thought was to show something along the lines of an instruction manual or book. Conveying that this area contains comprehensive, structured sections for a user to gain new knowledge.

jakey-ads avatar Apr 05 '23 21:04 jakey-ads

Ignore the last comment, I've seen the mention of moving to a mini-project approach 👍 . I'll keep a tab and hopefully can help contribute :)

jakey-ads avatar Apr 09 '23 18:04 jakey-ads

You're welcome to work on this if you'd like. The mini-project approach is for the "regulars" to bundle their efforts, but anyone is welcome to work on other tasks as well.

GBKS avatar Apr 10 '23 07:04 GBKS

Thanks @GBKS. Ok great I'll take a look.

jakey-ads avatar Apr 10 '23 18:04 jakey-ads

@GBKS @Bosch-0

I've had another thought on concept which I believe is a bit stronger, and taken the liberty of putting something together to see what you guys think. I appreciate this isn't in line with ideal process, so am more than happy to go back to the drawing board! But to explain this one:

A set of cogs to convey how Bitcoin (as the central piece) consists of many interconnected things. Each being a cog that is part of the greater whole. Having gone with flat/simple/subtle styling in the hopes of making this section feel accessible (particularly for those new to BTC), reducing the risk of making it feel too technical/daunting.

how-it-works-v1

jakey-ads avatar Apr 12 '23 22:04 jakey-ads

Sorry, never got back to you on this one. I think it works. Gears are a very mechanical metaphor for high-tech crypto money, but it communicates clearly.

GBKS avatar May 03 '23 07:05 GBKS

No worries @GBKS. Ok great! I'll take a look at the image guideline resources and get this into the necessary shape.

jakey-ads avatar May 03 '23 13:05 jakey-ads

@GBKS I've sized and optimised as required. And the link to Figma here

Just having a bit of trouble on the 'testing locally' steps as haven't done that before. So in the meantime here is the folder of images: how-it-works.zip

You might have thoughts on the bg pixelation. It gives some texture but I can't quite tell if it works.

Anyway, I'll try to look at testing locally over the coming days.

jakey-ads avatar May 11 '23 19:05 jakey-ads

Awesome, looks good. Let me know how local testing and creating a pull request works out. I know it can be tricky if you haven't done it before.

GBKS avatar May 12 '23 05:05 GBKS

Looks like we forgot to close this issue. The task is complete, closing it.

GBKS avatar Nov 02 '23 13:11 GBKS