Visual Styleguide

[monarchwadia]

This is a page on mintbean.io.

Please place this view at /style-guide.

The goal is to make it easy for collaborators to create marketing materials for joint events (for example, for Twitter branding, we can just send a link to our collab partners)

• Primary colors
• Fonts
• Logos

Keep it simple for now.

Please see #15

[srsexton94]

I can take this on if you like!

[shohei-shibata]

I'm no design person but happy to help on this stuff. I've done some basic style guide and wireframes on Figma... possible tool suggestion :)

[oscarnava]

I could also help by creating an SVG version of the logo, and several resolution PNG's.

[oscarnava]

I've already created the SVG version and 300, 150, 96 & 72 dpi PNG's. I won't submit them yet until these issues get assigned, but I just wanted to let you know I have them ready if/when needed. 😁

https://oscarnava.me/mintbean/mintbean-logo.svg

[srsexton94]

@shohei-shibata yes! Figma is a great tool - I've stuck with Balsamiq as low-res style always served my purposes well - but I think for a big collab the higher res would be useful! (plus apparently I was on a free trial for Balsamiq and just lost access lol)

And @oscarnava that sounds great! Thanks so much for doing that!

I could fork/branch and create a markdown file to compile this stuff as we build it if that's helpful - ah yes but waiting for assignment seems smart, I'll do the same and try and check back soon

[srsexton94]

For future use (checklist?) I posit we include:

• A general branding statement (speaks to mission/values/vision - helps align the design to visually represent the org)
• Typography (h1--h5, p, and a elements; include font-weight, family, and color)
• Color Palate (primary, secondary, [tertiary], and neutrals)
• Spacing (how much "whitespace"? any layout grids we use? maybe point to BootstrapVue?)
• Voice considerations (is text content meant to be funny? formal? welcoming? professional? etc.)
• Icons (including logo - TY @oscarnava! - as well as any visual indicator icons, external link markers, etc.. any specific icon library?)
• Imagery (give stylistic description as well as examples - update with image files of images used as the project develops)
• Buttons (here would be good to point to BootstrapVue!)
• If we have any Forms it'd be good to also specify hierarchy, feedback, validation, etc..

[shohei-shibata]

@srsexton94 I have just worked on another markdown-based page ("For Educators") so it should be pretty quick for me to add a similar one for this, with just a placeholder content for now.

As for assignment - Looks like issues aren't being assigned to anyone. I wasn't "assigned" on the other issue I just finished :)

Maybe eventually that'll happen but probably not until the whole project workflow settles down more. I'd say let's just get started?

[srsexton94]

Oh goodness I'm sorry I missed this - yes absolutely lets. @shohei-shibata have you already done so? I'm not seeing anything in the repo but I imagine it might not have been merged in? What kind of workflow do you think would work well?

[shohei-shibata]

@srsexton94 I have a placeholder page done, but didn't submit a PR yet. I'll go ahead and do that now.

As for where to go from there... did you want to take on creating the style guide content like typography, colors, etc?

[srsexton94]

Yes absolutely! I'll tackle that tomorrow morning - if the PR isn't accepted by then is there a way I could best edit style-guide/index.md?

[shohei-shibata]

Awesome! Yeah the PR isn't merged yet... I'm thinking you could either fork my fork or, edit the markdown file somewhere else and paste into the code after the PR is merged?

[srsexton94]

Hey so I ended up just copy/pasting to my own fork of the main repo and pushed, but left a note in the PR that it should be merged after #30

[shohei-shibata]

@srsexton94 sounds good to me!

[monarchwadia]

Hi guys, I've left comments on the PR, this looks really amazing. Please take a look :-)