Open Bug 1039835 Opened 6 years ago Updated 6 years ago

Missing Affiliate Banners and Previews

Categories

(Marketing :: Design, task)

All
Other
task
Not set

Tracking

(Not tracked)

ASSIGNED
Due Date:

People

(Reporter: ekariv, Assigned: Elio)

Details

Attachments

(5 files, 2 obsolete files)

>>Project/Request Title:
Missing Affiliate Banners and Previews

>>Project Overview:
Affiliates is Mozilla’s repository of banners and graphics that Mozillians can use to spread the Mozilla mission.

In order for Affiliates Banners to have a preview on the affiliates site, there must be a 125 x 125px version of that banner. While most banners have this version, many are missing 125 x 125px versions and thus have no preview.

This is a high priority bug because when users (or employees) look at the site with missing banner previews, it looks broken and unusable. This has caught the attention of some senior executives at Mozilla who would really like this fixed ASAP.

Thank you!


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

>>Creative Specs:
The graphics we need are listed below:

Upgrade Banner (125 x 125px)
3.6 Upgrade Banner (125 x 125px)
Student Ambassadors Banner (125 x 125px)
Download Aurora Banner (125 x 125px)
Firefox Marketplace Banner (125 x 125px)
Plugin Checker Banner (125 x 125px)

>>CTA and Design:
If you log in to affiliates using persona, you can see all of the banners here: https://affiliates.mozilla.org/en-US/generator/categories/

When you click a category you’ll see if any banners from that category are missing (all the missing ones are also listed above).

For example, if you click “Firefox for Desktop” then you’ll see that Upgrade, 3.6 Upgrade, and Student Ambassadors are missing previews. If you click on each one you can “create” a banner and see what the current version of the banner looks like and then modify that version to become 125 x 125 px.

>>Creative Due Date:
2014-08-01

>>Launch Date:
2014-08-08

>>Mozilla Goal:
Million Mozillians

>>Points of Contact:
josorio@mozilla.com, mkelly@mozilla.com, mbrandt@mozilla.com
Reassigning this bug to the awesome community member, Elio Qoshi.
Assignee: jbalaco → helios
Thanks Eli! Will report back on the progress by Thursday (24th July)
Attached file FSA & 3.6 Upgrades Banners (obsolete) —
So, I finished the FSA and 3.6 upgrades banners. Latters had the old logo so I updated that too. I also included the 300x300 versions if needed.
I was looking at the Upgrades Banners and they were either very wide or very tall, so it wouldn't make sense creating 125x125 versions of them, however I could add blank space on them to the sides, which would make them unusable for usage as actuall banners I guess (i.e. they would be only used for previews)

Tell me if they are okay.
Flags: needinfo?(ekariv)
Attached image Marketplace.png (obsolete) —
Marketplace 125x125 banner.
Again only suggested for preview usage. 
I only added white space to the sides here, as it's not supposed to be squareish
Thanks Elio - I really appreciate your jumping in on this!

My concern is that the elements on the 125x125 banners look *really* small. The info on the FSA one, for example, is basically unreadable.

Eli, could you suggest a way to boil down the content to only the most essential elements so we can focus on those? We'll need to do some pruning for the smaller sizes. The FSA one could just be the logo shield, for example.
Good call John. I'll go through each one and pick out the most essential elements.
Flags: needinfo?(ekariv)
Status: NEW → ASSIGNED
Upgrade 
Mandatory "Upgrade to Firefox Here” + logo
Good, but not mandatory: put the web on fast forward)

Upgrade 3.6 (I like the version already made and posted above) -
Mandatory: Different by design and the logo
Good, but not mandatory: Mozilla Firefox (writing)

Firefox Student Ambassadors:
Mandatory: FSA and the logo
Good, but not mandatory: Download Firefox and Search. Study. Surf.
Not mandatory: Mozilla Logo can be much, much smaller

Download Aurora
Mandatory: Get Firefox Aurora for Android + logo
Good, but not mandatory: Shape the future of firefox 

Firefox Market Place
Mandatory: Logo and get it in the firefox marketplace

Plugins
Mandatory: Add plugins to your routine
Good, but not mandatory: The above text (definitely would like to keep this if possible)
Nice, thanks Eli.
Thank you John and Eli!
This actually gives me way more freedom creating the banners than recreating them, saves me some time also.
I will see how to remove unreadable elements without making the banner unusable ( so it doesn't just serve as previews)
Here are the new banners for Marketplace,FSA and 3.6 Upgrades.
They include all proper 125x125 banners, also useable as actually banners. I included also 300x300 versions for 3.6 Upgrades and FSA if needed.
Marketplace comes also in black and orange variations.
3.6 Upgrades has its logo also updated.

Working on the others now
Attachment #8461096 - Attachment is obsolete: true
Attachment #8461105 - Attachment is obsolete: true
Flags: needinfo?(ekariv)
Here are the remaining banners.
Plugins Checker, Aurora ( I only updated it with the new logo, anything else wrong with it?)
Upgrade Firefox

Let me know if they work!
Edits discussed with Elio:

1) Aurora has to be for Android (not desktop)

2) Checking on if FSA is ok without the 'Firefox Student Ambassadors' text

3) Anybody have thoughts on the 'Upgrade Firefox' banner?
Flags: needinfo?(ekariv)
Thanks Elio!

Quick thoughts from me, in addition to Eli's above:
- for the marketplace one, let's use the same font for FIREFOX that we do for MARKETPLACE (not the wordmark, in other words)
- I don't think either of the upgrade ones is quite there yet. For general Upgrade Firefox one, it's problematic that we're lacking both the Firefox logo and Firefox colors, and the 3.6 one still feels busy to me. Would recommend that we combine both of these into a single asset...could we go with something simple like the Firefox logo on a blue, rounded corners square background and a bit of copy on it? Eli, can you advise as to what that copy should be?
Attached file Aurora Android.zip
Here are the updated 125x125 and 300x250 Aurora for Android banners with updated logo
John thanks for the input!

- The original banner which I based it on uses the "Meta" typeface for Firefox, instead of Open Sans like you suggest, I just kept it this way, how should we decide?
https://affiliates.mozilla.org/en-US/generator/image_banners/15/customize/

- I agree with thaz. It's a bit difficult having no source files at all and fiddling around with Pixels in Photoshop :)
I'm looking into that now!
Re: Copy on that banner - I think it should be "Upgrade -your- Firefox".
Attached file New Upgrade.zip
I did those 4 banners and merged both banners as John suggested.
These are probably not consistent, however there is not much I can do without the source files.
What do you think?
Flags: needinfo?(jslater)
Those look nice...great work!

Thought: what if you put 'Firefox' in the little banner instead of 'your'? That's the word to emphasize.
Flags: needinfo?(jslater)
Thanks!
I wanted to keep the text consistent, as the other banners had the same copy and "your" was highlighted with the banner. I can easily do that change though if you think that's justified :)

What do you think about the Marketplace banner also? You told me to write "Firefox" in Open Sans, however the original existing banners used the original Firefox Wordmark in Meta.
If I change it to Open Sans, I guess the older ones should be change too. ( I can do that of course)
Flags: needinfo?(jslater)
(In reply to Elio Qoshi  [:Elio] from comment #19)
> What do you think about the Marketplace banner also? You told me to write
> "Firefox" in Open Sans, however the original existing banners used the
> original Firefox Wordmark in Meta.
> If I change it to Open Sans, I guess the older ones should be change too. (
> I can do that of course)

Yes, let's try it in Open Sans and see how that looks. Thanks!
Flags: needinfo?(jslater)
Attached file Marketplace
Thanks John!

Here are the new Marketplace Banners.
I didn't make any 129x45 version as 116x40 is too similar.
I used Open Sans for "FIREFOX" and wrote it in uppercase.
Black and Orange versions included.

Let me know if they are okay!
Flags: needinfo?(jslater)
Thanks Elio. These are looking good.

That said, one thing that's been nagging me about this a bit is that we're mainly updating 2011-era graphics here and our visual styles have evolved a bit since then. Nothing you've done is wrong - far from it, in fact - but I want to make sure we take this opportunity to bring these assets into the modern era.

Eli & Elio, if this works for your schedule I propose looping in Ty Flanagan from my team to help advise on some of this in greater detail than I'm able to get to. Ty is on vacation until Tuesday, 8/5 but should be able to weigh in after that. His feedback will be helpful, and he may be able to provide some working files or other assets you can use as well.

How does that sound?
Flags: needinfo?(jslater) → needinfo?(tyronflanagan)
(In reply to John Slater from comment #22)
> Thanks Elio. These are looking good.
> 
> That said, one thing that's been nagging me about this a bit is that we're
> mainly updating 2011-era graphics here and our visual styles have evolved a
> bit since then. Nothing you've done is wrong - far from it, in fact - but I
> want to make sure we take this opportunity to bring these assets into the
> modern era.

That's a great idea! It's also not mutually exclusive to calling these done, resolving this bug, putting the new variations up, and including "visual style refresh" in the next brief for Affiliates.

We've received feedback that our site looks broken with missing previews, and we need these variations to provide previews for the banners. If you approve what Elio's done (which it sounds like you do), then I propose we put these up on the site so that the previews are no longer empty. Updating the visual style for these banners is great, but I don't want to delay making the site look un-broken for that.

(Just my two cents, Eli/Jess Osorio have the final say here.)
And I told Eli that we will need to overhaul all this at some point. :)
I basically was fixing waterleakings, but the watertubes are still rusty themself, so we need new watertubes (sorry for the absurd comparison).

From what I understood is that John agrees to get these uploaded, yet in the longer run, these all need to get remaked from scratch, not only visually, but also the copy,sizes and similar ( heck we use the Georgia Font still?! I have only seen it on the Thunderbird website lately)

So I guess we should make a list with all the product banners we needed, which (standartized) banner sizes are fitting for them and write the needed copy for them in a neatly organized way, and once we agree on this, I (or anyone else if they want to) can start creating the actual banners.
In that way I don't need to go back to fixing leaking tubes :)
That plan sounds great - I agree with what mkelly and Elio said in comment #24 and #25.

Just so I know, who will be making the list of new designs that are needed and filing that new bug?
Ok - all banners uploaded (woohoo!)

Should we wait for Ty's feedback before making any decisions about which new designs are needed?
(In reply to ekariv from comment #26)
> Ok - all banners uploaded (woohoo!)

Nice!
 
> Should we wait for Ty's feedback before making any decisions about which new
> designs are needed?

You could go ahead and file the bug (copy Ty), and the first task could be to evaluate which banners need new designs.
Hi all,


A few things:

1. Thanks Elio for your time and work on getting the banners done.

2. All these banners really do need some new love. I think its a perfect time to start looking at a redesign of them.

3. For now though, since we only need the 125x125 banners, I'm only going to review those. 

There are some banners I feel still need some additional work due to the copy not being legible enough (e.g. Marketplace, New upgrade), and some banners needing some more attention to detail (e.g. 3.6 Upgrade, Upgrade)

----------

Marketplace 125x125 - (1) The copy treatment is really tough on the eyes, especially "Get it in the". Consider creating a second  layer of copy to place on top to help "thicken" it up to make it more readable. Try not to rely only on the anti-aliasing methods within Photoshop. (2) The first line of copy "Get it on the Firefox" should not be longer than the word "MARKETPLACE". Please make sure it stays aligned with both the beginning and end of "MARKETPLACE". (3) Lastly, please double-check that both the orange 125x125 and black 125x125 background boxes are pixel perfect to avoid getting blurred edges.

----------

New upgrade 125x125 - (1) Same issue as above. Best to play with 2 layers of copy to achieve the right look versus relying on the "sharp" anti-aliasing method in Photoshop. Also, please ensure that the drop shadow on the text is set at 90º, with a distance and size of "1" to better match with the Firefox Logo. The Opacity will need to be played with considering its on a dark blue background. (2) The "Ribbon" element just doesnt feel right on this banner either. I'd consider looking for a different approach with the copy instead of including the ribbon to highlight "your". (3) The drop shadow on the blue rounded-corner box is missing. It needs a black dropshadow (20% opacity, distance 1, size 0). (4) Also needs an inner shadow - black, 30% opacity, distance of 2-4 depending on banner size, size 0. Lastly, please double-check that the blue background box is pixel perfect to avoid any blurred edges.

-----------

3.6 Upgrade 125x125 - (1) "Get up" & "upgrade your Firefox" need some more readability love :). I understand you didnt have the PSDs to work from, fortunately they can be found on the assets repo here: https://assets.mozilla.org/Graphics/Affiliates/3.6%20Upgrade/  (2) The added spacing you created below the raised tag is fine, but have the raised tag shifted down 10 or so pixels to give more space/breathing room between the "Get up to Speed" copy and the raised tag. 

------------

Upgrade 125x125 - (1) IMPORTANT - We need look at a different option other than just the raised tag ESPECIALLY if its being offered as one of the banners within the affiliates. It's probably fine to use as a preview, but not as a banner option for affiliates. Theres no supportive copy or Firefox Logo here at all. (2) The raised tag now looks like a clip. It also looks like the edges are not as clean as they should be. Was this cut out from a larger sized banner? Either way it needs to be changed. We can provide a PSD for this design if need be.

------------

Aurora 125x125 - Is this preview definitely using the latest Firefox Aurora logo?

------------

I think that about covers it for these.

Thanks

Ty
Flags: needinfo?(tyronflanagan)
Flags: needinfo?(helios)
I still need more guidelines and rules to make this work, so lets keep the discussions going until we can decide on what banners need doing, how, what copy, what colors, what categories; and so on.
(regarding the needinfo flag)
Flags: needinfo?(helios)
I think the general sentiment is that we're doing just the 125 x 125 banners (in English) for now (easiest task to do immediately) and that we need them modified with Ty's specific instructions.
Okay, bookmarking this then, will have a look this week and see what I can do
(very busy week indeed)
(In reply to ekariv from comment #30)
> I think the general sentiment is that we're doing just the 125 x 125 banners
> (in English) for now (easiest task to do immediately) and that we need them
> modified with Ty's specific instructions.

+1 — let's just finish what's already in progress (and that looks broken on the site) for now.

Thanks.
You need to log in before you can comment on or make changes to this bug.