New graphics for "Promote MDN"

RESOLVED FIXED

Status

Marketing
Design
RESOLVED FIXED
4 years ago
4 years ago

People

(Reporter: ali spivak, Assigned: MT)

Tracking

Details

(URL)

Attachments

(9 attachments, 3 obsolete attachments)

(Reporter)

Description

4 years ago
In line with the new design/logo for MDN, we would like to revamp the "Promote MDN" graphics to replace the ones currently on https://developer.mozilla.org/en-US/promote

Comment 1

4 years ago
Hi Ali, 

Can you provide a bit more about this project? Specifically, I'm hoping you can provide some details around:
- how many different graphics are needed?
- what should the CTAs for these graphics be?
- what are the specs for the graphics?
- ideal timing (so we can make sure it fits within our other projects)

I look forward to getting this information so that I can get this assigned out. 

Thanks!
Jennifer
(Reporter)

Comment 2

4 years ago
We need 3 graphics for developers to place on their websites to promote MDN

Image size:  width=120px height=240px

CTA: 

Get Buttons: Use our simple form below to create a custom button and source code to promote MDN on your website or blog.
Post Buttons: Copy the source code and paste it anywhere on your website or blog to help people click through to MDN.
Feel Good: Take pride in knowing you're making developers lives just a little bit better by sharing MDN with the world.

We're working on new slogans for each of the buttons, right now they are 

*Better <foo> docs for a better web (where <foo> can be HTML, CSS, JS or Web - we also can leave the <foo> out and just have it be "Better docs for a better web")
* Developer Powered Docs
* <foo> docs by developers, for developers
* Your Web Developer toolbox 

We want to keep the Developer Powered Docs image (red robotic dinosaur) but update it with the new logo, and then have 3 new ones - I've asked for ideas for new slogans and we ought to have a decision on them by next Wednesday.

Timing - we'd like them by December 6th, so we can make the changes before the redesigned site goes live, but that isn't a deal-breaker if it takes longer.

Comment 3

4 years ago
Thanks for this information, Ali. It's helpful in getting this sourced. I think that the timing should work. I'll let you know tomorrow who will be assigned.

Comment 4

4 years ago
Assigning this over to Matt for design work.
Assignee: jbalaco → mternoway
Status: NEW → ASSIGNED
Due Date: 2013-12-06
(Reporter)

Comment 5

4 years ago
Hi Matt,

any thoughts on this?

We decided on 
* Better docs for a better web
* Developer Powered Docs
* Docs by developers, for developers
* Open Docs, Open Web


We want to keep the Developer Powered Docs image (red robotic dinosaur) but update it with the new logo, and then have 3 new ones
(Assignee)

Comment 6

4 years ago
Hi Ali, 

Thanks for the update.  I am currently working on these and was about to ask about the final headlines. Headlines sounds great...I will work them into a few layouts. Hope to have them towards end of day.

Thanks,
Matt
(Assignee)

Comment 7

4 years ago
Created attachment 8346538 [details]
MDN_Dinobot_banners_2013.png

Hi Ali, I've attached an example of what the 'Developer Powered' dinobot banners look like with the new MDN logo.  I've used the all white version of the logo to keep things neutral. If you're ok with this I can pass along the .ai files.
(Assignee)

Comment 8

4 years ago
Created attachment 8346542 [details]
MDN_promoBanner_120x240px.jpg
(Assignee)

Comment 9

4 years ago
Created attachment 8346543 [details]
MDN_promoBanner_120x240px_v2.jpg
(Assignee)

Comment 10

4 years ago
Created attachment 8346545 [details]
MDN_promoBanner_120x240px_v3.jpg

I've attached a few examples of what the various headlines look like with the new MDN look! Let me know what you think.

Comment 11

4 years ago
Just so I'm clear, we're phasing out the dinobot ones, right? The new ones look great to me...we shouldn't use the dinobot anymore though.
(Reporter)

Comment 12

4 years ago
Sorry for the lag, was at an offsite and then had the holiday break. 

We were thinking of having the dinobot one for nostalgia sake, but it isn't required. 
I really like the blue banners! One small nit- on MDN_promoBanner_120x240px_v3.jpg (Ppen Docs, Open Web) the text looks a little small compared to the rest of the banner.

Comment 13

4 years ago
I'm fine with the general direction of the designs. I'd like it if the layout emphasized the parallelism of the text a bit more:

Better docs / for a / better web

Docs / by developers / for developers

Open docs / (for an) / open web (OK as is)
(Assignee)

Comment 14

4 years ago
Created attachment 8356830 [details]
MDN_promoBanner_120x240px.jpg

Thanks for the feedback. I've worked out some of the suggestions into this round. The main changes being, the copy breaks flowing closer to how it would read with the greatest impact.  In some cases, due to the vertical nature of the banners, its tricky to find that perfect balance, since the physical size of the words start to lose impact.  Let me know how you feel about these.

Thanks!
Matt
Attachment #8346542 - Attachment is obsolete: true
(Assignee)

Comment 15

4 years ago
Created attachment 8356831 [details]
MDN_promoBanner_120x240px_v2.jpg
Attachment #8346543 - Attachment is obsolete: true
(Assignee)

Comment 16

4 years ago
Created attachment 8356833 [details]
MDN_promoBanner_120x240px_v3.jpg
Attachment #8346545 - Attachment is obsolete: true

Comment 17

4 years ago
Looks good, thanks!
(Reporter)

Comment 18

4 years ago
Would it be possible for the "open Docs" one with less text to be converted to square graphic instead of a rectangle? That allows for us to lose some of the "blank" space and also gives developers an option to use a smaller graphic (was a suggestion from the community, I like it).
(Assignee)

Comment 19

4 years ago
Hi Ali, I don't see that being a problem, are there specific dimensions you would like to see? Here is an example of what it would look like at 240x240px 

http://cl.ly/image/0D0V2T3x0i1Q
(Reporter)

Comment 20

4 years ago
Love the 240x240px! I think these are in great shape - let's finalize them! I think we just need the .ai filesfor reference (maybe in the assets area) and the .png for the site.
(Assignee)

Comment 21

4 years ago
Created attachment 8366294 [details]
MDN_promoBanner_120x120px.png
(Assignee)

Comment 22

4 years ago
Created attachment 8366295 [details]
MDN_promoBanner_120x240px_v1.png
(Assignee)

Comment 23

4 years ago
Created attachment 8366296 [details]
MDN_promoBanner_120x240px_v2.png
(Assignee)

Comment 24

4 years ago
Created attachment 8366301 [details]
MDN_promoBanner_120x240px_v3.png

Thanks Ali. I've attached the various sizes in png format. Let me know if you need any other sizes or formats.  One thing to note is, I've created each banner at twice the size of the original ask to accommodate retina displays.  I can also create at actual size if needed.  

Thanks,
Matt
(Assignee)

Comment 25

4 years ago
Created attachment 8366302 [details]
MDN_banners_2013.ai

Comment 26

4 years ago
Hi Ali, 

Do you have everything you need for this request? If so, please go ahead and resolve the bug. 

Thanks!
Flags: needinfo?(aspivak)
(Reporter)

Updated

4 years ago
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago
Flags: needinfo?(aspivak)
Resolution: --- → FIXED
(Reporter)

Updated

4 years ago
Blocks: 969075
These images are now available through MDN's "Promote MDN" page: https://developer.mozilla.org/en-US/docs/Project:MDN/Promote
You need to log in before you can comment on or make changes to this bug.