Add 'Prototype Guidelines' page to Contribute chapter

[Bosch-0]

Currently there isn't any guidelines about how to style prototypes. It's important to have this for several reasons:

1. Keep prototype styling consistent across the guide for a cleaner look and feel.
2. Helps onboard contributors to the guide by giving them direction about how to make this kind of contribution.

This page should also cover posting still prototypes images, not just the interactive Figma prototypes.

My suggestion would be to use the Wallet UI Kit for styling. This is what most submissions already do but specifying guidelines in a 'Prototype guidelines' page in the contributing chapter would be very helpful.

The wallet UI kit is a really great resource, big props to @GBKS for this!

What to include

• Discuss how we use the Wallet UI Kit styling for prototypes
• Specify how to duplicate and publish prototypes as a remix of the Wallet UI Kit master file. Having remixes published would keep a catalogue of the various prototypes contributors create using the kit under the wallet UI Kit master file.
• Include an example interactive prototype.
• Include an example still prototype.
• Discuss details about making changes to the master file.

Extra

• Move the Wallet UI Kit to dedicated Bitcoin Design Community community profile. I know this is a WIP but thought I'd just add this.

[GBKS]

Good discussion. Reposting this image below from the wallet UI kit, I would like to encourage prototypes to not all be the same, but to be appropriate to their use case. A wallet designs for kids should be different than one for super-serious, mega-rich investors. I also hope to get the UI kit to a point where creating these different themes gets really easy.

Maybe it's more of a matter of setting a baseline. Daniels prototypes uses a wireframe style, which can be the right choice when you don't want to draw attention to visual details, but more on the overall architecture. So maybe we have two baseline styles - UI kit or wire frames - and then people can go beyond those if they want to?

I am currently working through the case studies to add the prototype screens (here and here). Will probably get that done next week.

As far as creating a how-to, my assumption has been that we can just make the case study pages look really good and then people can use those as references. But maybe it is helpful to create a how-to to capture these details.

I cannot see how we can move the Figma file to a Bitcoin Design Community profile right now. Free Figma teams limit files to 3 pages, and the UI kit has 20 or so. If we pay, one of us will have to pay $15 for each team member. There's more detail to it, but Figmas current options are just not accommodating for us (I've sent this feedback to Figma). Maybe we need to dig up this page design from October with an outline on how to collaborate on Figma files. Alexa also asked yesterday about how to get more people to collaborate on Figma files. I still don't see a clear solution available to this.