888251 - Create Style guide for webmaker.org

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Cassie McDaniel [:cassiemc]]

Next week we will create a thorough style guide for anyone creating any kind of content (thumbnails, guides, copy) for webmaker.org under the Mozilla umbrella. Naturally, this will need to evolve as we make front-end improvements, but we wanted to make a good start, cleaning up some of our previous design work and clarifying/disseminating our thoughts around the vision for the new site.

Some first thoughts and initial requirements are outlined here:
https://etherpad.mozilla.org/webmakerstyleguide

Comment 2

[Cassie McDaniel [:cassiemc]]

Attachment: Style guide v1

This is a first pass, with a lot of "for-position-only" and lorem ipsum content still, but the overall structure is settling into place. Part 1: what is webmaker; Part 2: how to use specific design guidelines.

May need to remove sections due to time - we want to present this at the webmaker call tomorrow.

Comment 3

[Cassie McDaniel [:cassiemc]]

Matt, I'm cc'ing you here as I'd love your feedback on the content (see attachment). We really want to include a "voice and tone" section (see page 8), is that something you or someone from comms could help with? We probably won't be able to finish that section for inclusion by tomorrow, but if we had some examples of good copywriting vs. inappropriate examples, that would be helpful! A much more minimal version of Mailchimp's voiceandtone.com is a good example of what I'm looking for. 

We will plan to release future versions of this style guide later, so our thoughts can evolve with this. Let us know what you think.

Comment 4

[Cassie McDaniel [:cassiemc]]

Here is a more up-to-date version:
https://docs.google.com/file/d/0BzfN9sXlOXt1RTVPVVpNQ29pR0U/edit?usp=sharing

Comment 5

[Cassie McDaniel [:cassiemc]]

Attachment: Style guide v3

Truly almost done! Here's v1 as presented at the webmaker call.

Now would be a good time for a design review. I should probably change this so it works better with one page at a time, as opposed to spreads. I also want to vectorize the sketches of our users, but that's mostly it design-wise.

It was also mentioned this would be great to live as a webpage instead of a pdf (next phase, perhaps). PDF is up on the wiki now: http://mzl.la/style_guide_draft

Comment 6

[Cassie McDaniel [:cassiemc]]

Attachment: Style guide v4

Have updated the guide to individual pages instead of spreads, which makes more sense for web, and a little bit of copy. Last to do is to fill in the user type illustrations, which are on their way.

Comment 7

[Matt Thompson (@OpenMatt :OpenMatt)]

@ Cassie: once this is 100% complete, can you paste all links here so I can refer this bug to Comms Team for more promotion and sharing?

Comment 8

[inactivate account for kate]

Comment on attachment 776692 [details]
Style guide v4

Sooooo this is freaking awesome and beautiful. Styleguide FTW.

The only blockers here are the typo on page 23 and improving image quality, particularly for the typography and icon pages.

A few type nits!


General :
- Page numbers/section title on even pages is omitted, even though it's no longer a spread layout
- I do think hanging punctuation would look better on lists, e.g. http://dl.dropbox.com/u/29163874/Screenshots/jk.png
- Image quality is quite low in general - maybe some of the links broken? If not, I know it's unavoidable for screen-shots, but if you could try to bump up the DPI to at least 200 where possible it would look way better

pg. 8
- "open white spaces" sounds a bit awkward, use collective open white space?

pg. 10
- On other pages the subheading (i.e. Flat User Experience) is separated by the rest of the text with a space, here it is a dash

pg. 11
- in "Quick to produce", maybe "No need to rely on Photoshop" instead of designers

pg. 12
- Em dashes are used here whereas the rest of the file uses en dashes, probably good to be consistent

pg. 14
- should be en dash not a hyphen on 14–15

pg. 20
- This looks like it should really include a vector not raster image if possible

pg. 23
- The link is wrong: should be fortawesome.github.io/Font-Awesome/, note the r in fortawesome

pg. 27
- In the paragraph under "Please don't Add text", the antecedent of "this" is kind of unclear. Maybe it could be reworded to:
"Adding text to thumbnail images makes localizing makes into other languages much more difficult."

Comment 9

[Cassie McDaniel [:cassiemc]]

@Matt - definitely.
@Kate - you rock, thanks so much! will work on incorporating this feedback asap.

Comment 10

[Chris Appleton]

Hey Cassie,

This is looking great! 
Nice to see the thinking all collected and presented so well!

I think Kate caught most of the details I was going to mention (and then some!)

One suggestion: maybe add a section intro page, or something to signal where Part 2 starts? Right now it feels like one continuous section. Or maybe it doesn't need to be divided into 2 parts?

Also, right now the 'please do' and 'please don't' headings look larger than the section titles -- maybe considering reducing them  a bit so they don't compete?



-Chris

Comment 11

[Cassie McDaniel [:cassiemc]]

More great advice, thanks Chris :)
Will try to squeeze these into the next update.

Comment 12

[Cassie McDaniel [:cassiemc]]

(In reply to Kate Hudson (:k88hudson) from comment #8)
> Comment on attachment 776692 [details]
> Style guide v4
> - Page numbers/section title on even pages is omitted, even though it's no
> longer a spread layout

Added (I thought the title and the section next to the page # was redundant, but I think this is better)

> - I do think hanging punctuation would look better on lists, e.g.
> http://dl.dropbox.com/u/29163874/Screenshots/jk.png

Fixed all these.

> - Image quality is quite low in general - maybe some of the links broken? If
> not, I know it's unavoidable for screen-shots, but if you could try to bump
> up the DPI to at least 200 where possible it would look way better
>

Have done this where possible.

> pg. 8
> - "open white spaces" sounds a bit awkward, use collective open white space?

Changed

> pg. 10
> - On other pages the subheading (i.e. Flat User Experience) is separated by
> the rest of the text with a space, here it is a dash

Good catch! Fixed.

> pg. 11
> - in "Quick to produce", maybe "No need to rely on Photoshop" instead of
> designers

Nice suggestion, changed.

> pg. 12
> - Em dashes are used here whereas the rest of the file uses en dashes,
> probably good to be consistent

Have changed all to em dashes.

> pg. 14
> - should be en dash not a hyphen on 14–15

Fixed.

> pg. 20
> - This looks like it should really include a vector not raster image if
> possible

This was a pain but I vectorized it. Also updated the code text to Monaco. :)

> pg. 23
> - The link is wrong: should be fortawesome.github.io/Font-Awesome/, note the
> r in fortawesome

Fixed.

> pg. 27
> - In the paragraph under "Please don't Add text", the antecedent of "this"
> is kind of unclear. Maybe it could be reworded to:
> "Adding text to thumbnail images makes localizing makes into other languages
> much more difficult."

Reworded.

In reply to Chris Appleton in Comment 10:

> One suggestion: maybe add a section intro page, or something to signal where Part 
> 2 starts? Right now it feels like one continuous section. Or maybe it doesn't 
> need to be divided into 2 parts?

Have added grey divider pages.

> Also, right now the 'please do' and 'please don't' headings look larger than the 
> section titles -- maybe considering reducing them  a bit so they don't compete?

Have reduced these a smidge and worked with kate to hang bullets/icons where possible and reasonable. :)

Thanks guys for the feedback, am confident this is a tight document now.

Comment 13

[Cassie McDaniel [:cassiemc]]

Attachment: Style guide v5

Especially check out page 15 (new illustrations!), otherwise just responding to Kate's & Chris's feedback.

If this is all good, will update the wiki with it tomorrow.

Comment 14

[Cassie McDaniel [:cassiemc]]

v1 is complete and is uploaded to https://wiki.mozilla.org/Webmaker/styleguide.