Closed Bug 1145707 Opened 9 years ago Closed 9 years ago

Swag design (stickers, web banner) for ES6 release

Categories

(Marketing :: Design, task)

Product:
Marketing
Component:
Design
Platform:
All
Other
Type:
task
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED
Due Date:

People

(Reporter: aspivak, Assigned: mternoway)

Details

Attachments

(2 files)

MDN_ES6-release_banner_120x120px.png
8.58 KB, image/png
Details
MDN_ES6-release_sticker.pdf
444.48 KB, application/vnd.pdf
Details 
>>Project/Request Title:
Swag design (stickers, web banner) for ES6 release

>>Project Overview:
ECMAScript6 (JavaScript)  has a target release date of June 2015. JavaScript is the most-trafficked content area, JS developers love MDN, and we currently have by far the best documentation on the new standards & JS as a whole.  

We'd love some help coming up with a "tagline" and creative we can use to promote MDN/Javascript love

>> Creative Help Needed:
Copy:    Yes 
Design:  Yes 
Video:   No 
Other:  No

>>Creative Specs:
1 tagline (short sentence)
1 "logo" design based on the tagline
sticker design (2x2)

>>CTA and Design:
? Something along the lines of
MDN=Javascript
Javascript <3 MDN
etc.

We can get super geeky with this!


background Information: 
https://devengage.etherpad.mozilla.org/MDNcampaign-ES6

https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla



>>Expected Launch Date:
2015-06-15

>>Mozilla Goal:
Firefox Browser

>>Mozilla Creative Collective:
No

>>Points of Contact:
aspivak@mozilla.com
Hi Ali, 

Thanks for submitting this. I'm going to hold on to it for a little bit, as we are finishing up some other projects. 

I have a couple of follow-up questions for now:
- Do you have banner specs? Will the banners go on MDN or some place else? Is the audience JS developers visiting MDN? Or visitors to MDN in general?  
- Are you looking to have items printed and ready to go on 6/15 or would getting design in June work? 

Thanks!
- Do you have banner specs? Will the banners go on MDN or some place else? Is the audience JS developers visiting MDN? Or visitors to MDN in general?  
Banner will go on MDN and on external wbsites, the audience is JS developers in general, and should be 120x120px.


- Are you looking to have items printed and ready to go on 6/15 or would getting design in June work? 
I'd like to have it printed and ready to go by June 15th at the latest. Strech goal would be to have it ready before 8th of June so we could have them at Nodeconf
Thanks, Ali. Setting due date at 5/15. That should give enough time to get anything printed that's needed by 6/8. I'll add a designer soon.
Due Date: 2015-05-15
Assignee: jbalaco → mternoway
Status: NEW → ASSIGNED
Hi Ali, 

I've been working with Troy on creating a graphic and tagline for this. Inspired by your mention of promoting MDN/Javascript love, we've come up with 1 concept with an A and B version. The idea is to show the natural connection between both MDN and ES6. We thought a strong and simple way to display this is to use the '+' sign which implies love and togetherness, summed up by the tagline 'Better together' or 'A match made in developer heaven.' The supporting graphic is play off of a common visual we've used to represent development - gears - the gears form a heart which is a common Mozillian icon.

https://www.dropbox.com/s/potod7qpzgz5ma1/Screenshot%202015-05-15%2010.30.20.png?dl=0

Let us know what you think of this direction.

Thanks,
Matt
Love the graphic. For the messaging, could we do something more inspired by the old promote.js campaign?  
http://promotejs.com/

Specifically, using something like "for us, by us". ES6 is very much a community thing.
A modernized version of that would be awesome.
(In reply to ali spivak from comment #5)
> Love the graphic. For the messaging, could we do something more inspired by
> the old promote.js campaign?  
> http://promotejs.com/
> 
> Specifically, using something like "for us, by us". ES6 is very much a
> community thing.
> A modernized version of that would be awesome.

I worry that it may not be so easy to separate the graphic from the messaging. The "better together" and "match made in heaven" lines speak directly to the heart visual. Changing it to something using "for us" or "by us" wouldn't make the same sense with this image.

We're happy to explore something else, but it will likely involve a new graphic as well as copy.

Thanks.
Flags: needinfo?(aspivak)
How about something like:

JS devs <3 MDN

The heart of ES6 explained on MDN

Sharing is caring, devs write JS docs on MDN

JavaScript docs for us, by us!
Flags: needinfo?(aspivak)
Hey Matej, 

What do you think about the suggestions Ali added in comment 7?
Flags: needinfo?(matej)
(In reply to ali spivak from comment #7)
> How about something like:
> 
> JS devs <3 MDN
> 
> The heart of ES6 explained on MDN
> 
> Sharing is caring, devs write JS docs on MDN
> 
> JavaScript docs for us, by us!

My favourite is the first one, but I worry about having both "<3" and the heart graphic together.

Matt, do you think you could use the graphic you created as part of the line, e.g. "JS devs [GRAPHIC] MDN"
Flags: needinfo?(matej) → needinfo?(mternoway)
Thanks Ali for the suggestions. I do like the simplicity of 'JS Devs <3 MDN'. Visually it will alter what I currently have for the graphic. Unfortunately I think the graphic will get lost as the connecting piece for 'JS DEVS' and 'MDN'. Here is a quick mockup of what I mean:

https://www.dropbox.com/s/qnvdba4g3y6pkz8/Screenshot%202015-06-04%2016.37.07.png?dl=0
Flags: needinfo?(mternoway)
(In reply to mternoway from comment #10)
> Thanks Ali for the suggestions. I do like the simplicity of 'JS Devs <3
> MDN'. Visually it will alter what I currently have for the graphic.
> Unfortunately I think the graphic will get lost as the connecting piece for
> 'JS DEVS' and 'MDN'. Here is a quick mockup of what I mean:
> 
> https://www.dropbox.com/s/qnvdba4g3y6pkz8/Screenshot%202015-06-04%2016.37.07.
> png?dl=0

Maybe I'm trying to get too cute, but what if you made the heart graphic bigger and then put "JS devs + MDN" inside it?
Hey Matej, I've tried an idea close to your suggestion. I felt that the copy across the graphic was looking too busy and made it hard to read. Let me know what you think of this idea.

https://www.dropbox.com/s/n0enxakeh4p6l8z/Screenshot%202015-06-04%2020.30.02.png?dl=0
I think we need a space between JS and Devs. There is no such thing as "JSDEVS"

We will need to add an URL too for sticker so that people who discovers us via this swag will be able to find us (that's the ultimate goal: more visitors)
Oh I missed it! The rule is "For the menu to appear, its h2 must be Subnav (do not translate)".

Fixed. It appears on subpages too.
(In reply to mternoway from comment #12)
> Hey Matej, I've tried an idea close to your suggestion. I felt that the copy
> across the graphic was looking too busy and made it hard to read. Let me
> know what you think of this idea.
> 
> https://www.dropbox.com/s/n0enxakeh4p6l8z/Screenshot%202015-06-04%2020.30.02.
> png?dl=0

Looks great! Have a look at comment 12. Should be easy enough to edit based on that feedback.

Jean-Yves, is it just the main MDN URL we should use?
Flags: needinfo?(jypenator)
As it for JavaScript, I would prefer a direct link to our JS docs:

http://mzl.la/JavaScript

With this bit.ly link we can also track the success of the campaign and it is much shorter (Full URL: https://developer.mozilla.org/en-US/docs/Web/JavaScript).
I'm ni/ Ali to make the call.
Flags: needinfo?(jypenator) → needinfo?(aspivak)
(In reply to Jean-Yves Perrier [:teoli] from comment #16)
> As it for JavaScript, I would prefer a direct link to our JS docs:
> 
> http://mzl.la/JavaScript

If we do end up using this, let's make sure we shorten it to "mzl.la/JavaScript" on the sticker.

Thanks.
Thanks all, I've tweaked the Web banner to separate the JS from DEVS. Here is where we are at with it >
https://www.dropbox.com/s/fs8hods1rj9csry/Screenshot%202015-06-09%2011.55.44.png?dl=0 

If all is good I can post the final version here.  

MT
Looks great to me. Thanks.
I am sorry to jump late into this, but the messaging here is not really compelling to me.

It is more like that ES6 levels up current JavaScript (ES5) like HTML5 levelled up HTML4 some years ago. A major milestone for a core web technology (JS this time). So, maybe play with the "level up" (more features, better programming language) instead of "love"? Personally, I don't really know what the "togetherness" messaging would tell me in the end.

For me the goals of the message are:
- Mozilla (and others) are working hard on implementing ES6 into browsers and Firefox is also very far on this front.
- MDN continues to be a good JavaScript language documentation site with a lot of documentation updates for ES6 driven by and for the JS community.
- ES6 is fun to use, it is out there now, and also soon officially a final published web standard.

I think getting geeky here is definitely a good idea. Playing with ES6 syntax might be an option. Credits to wbamberg for:

import {es6} from "mdn";

Which is a short code line (can't imagine something similar short atm) and says that MDN imports/understands ES6. Developer see the new code syntax, see that we (Mozilla/MDN) understand it, and are excited to use it and read about it.

I don't know if this could be the text, I wish I would be even more creative and could help with an ideal/geeky/funny text, but I at least wanted to step in to say in which direction this should go (imho).

Another site note: It will be officially named "ECMAScript 2015", but most of the time devs refer to "ES6". There were some discussions/joking around this naming in the community.

As far as colors go: The unofficial "JavaScript" branding is "JS" in yellow: http://de.wikipedia.org/wiki/JavaScript#/media/File:Unofficial_JavaScript_logo_2.svg, for ES6 the same simple logo is often used but just with "ES6" (or "ES2015") instead of "JS".

And yes, "mzl.la/JavaScript" is a good target url.

Thank you all very much for working on this.
Flags: needinfo?(aspivak)
Given the feedback in comment 20, I think we need to pause this until we get some clearer, more direct feedback. We're not developers, so it's hard for us to know what will and won't resonate with this audience.

If the line of code you suggested works (import {es6} from "mdn";), I recommend we go with that so we're not just spending more cycles on designs that may not be right.

Can someone confirm if we should use the above? Or is there something else that's better?

I also want to make sure that the final direction we get is consolidated. Who is the owner and ultimate decision maker on this project?

As for the colours, we should stick to Mozilla brand colours here, rather than introducing the JS branding.

Thanks.
Matej, I'll make the final call. I'm taking this off bug with my team and will get back to you with a final direction & text/copy by Friday. Sorry for the ongoing changes.
(In reply to ali spivak from comment #22)
> Matej, I'll make the final call. I'm taking this off bug with my team and
> will get back to you with a final direction & text/copy by Friday. Sorry for
> the ongoing changes.

Thanks, Ali. One note is that Matt is on PTO next week, but he's not coming to Whistler, so he'll be able to work on it then.
ok, decision made. We are going with:

import {es6} from "mdn";
Flags: needinfo?(matej)
(In reply to ali spivak from comment #24)
> ok, decision made. We are going with:
> 
> import {es6} from "mdn";

Great, thanks.

Matt, back over to you.
Flags: needinfo?(matej) → needinfo?(mternoway)
We just talked about this, and came up with some extra guidance. I hope it helps:

It's a line of code, so it should look like a line of code. This would mean:
* lower case
* monospaced font
* syntax-highlighted. This most likely means that there are four contrasting colors used:
  * one for `import` and `from`
  * one for the brackets `{` `}` and the semicolon `;`
  * one for `es6`
  * one for `"mdn"`
For example, here's a screenshot of that line in the code editor built into Firefox: https://i.imgur.com/fcyOOx3.png. The actual colors used don't matter.

Additionally: "import...from" is new ES6 syntax that lets you use some JavaScript objects that are defined in a separate module. So in this case, the idea is that the ES6 docs are inside MDN, and the developer can import them into their brains, so they can start using the new ES6 syntax in their code.
Hi all, I've posted an example of what the 120x120px banner would look like with the latest copy string. One thing to note, and will be tricky to alter at this scale is, the breaking of the copy line into two stacked lines. One line of code would not be readable at this scale. Let me know how you feel about this. For the sticker it shouldn't be a problem since I can make it horizontal in shape. 

Thanks,
Matt
Flags: needinfo?(mternoway)
I was thinking a simple layout like this could work for the sticker. Let me know what you think.

MT
We like the creative direction on this!

A few notes: 
The right edge looks a bit chopped off in the pdf - is this intentional? 
Can we make the MDN logo larger, on the actual sticker it would be impossible to read
Can we add the URL: mzl.la/JavaScript
(In reply to ali spivak from comment #29)
> We like the creative direction on this!
> 
> A few notes: 
> The right edge looks a bit chopped off in the pdf - is this intentional? 
> Can we make the MDN logo larger, on the actual sticker it would be
> impossible to read
> Can we add the URL: mzl.la/JavaScript

Thanks for the feedback, Ali. The crop was intentional, it gives the space a bit more breathing room instead of framing it rigidly with in the canvas area. Since this graphic is not a logo, it doesn't have to be front and centre and can be used in this manor from time to time as an option. Having said that, it's not a deal breaker for me if you would prefer it completely within the frame..this would just cause the graphic to become smaller in size. With the addition of a URL to the sticker, it may require me to rearrange things to accommodate this. Not a big deal, just want to give you the heads up that the layout will change a bit.

MT
Ali, we could also layout the sticker like this, where we recess the heart graphic into the background, allowing the line of code to appear front and centre.

https://www.dropbox.com/s/nu8qbh2o5e6zm2j/Screenshot%202015-07-08%2015.34.16.png?dl=0
YES! Love the heart in the background. Let's go with that and close this!!!
woot! Thanks Ali. Here is a link to the print ready files. Included in the zip are a PDF with bleed, as well as the .eps file:

https://www.dropbox.com/s/0bvn97x2zfa7ihi/MDN_ES6-release_sticker.zip?dl=0

MT
Status: ASSIGNED → RESOLVED
Closed: 9 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: