1051018 - Design Mozilla Gear ad for Tabzilla

Status: RESOLVED WORKSFORME

(Websites :: Other, defect)

Description

[hannah:hkane]

300px x 210px

Copy: Wear the open web

Use approved logo and wordmark from https://bugzilla.mozilla.org/show_bug.cgi?id=998340

Comment 1

[hannah:hkane]

Let's go with "Wear the Open Web" instead (note capitalization)

Comment 2

[hannah:hkane]

Wait...no. Sorry. Sheesh.

"The Open Web You Can Wear"

Comment 3

[Sabrina Ng [:sabrina]]

Do you know if there are any other requirements and/or restrictions for Tabzilla ads (other than dimension)?

(i.e - if we need CTA text with » symbol on the ad (like the one that is currently live) or if photography is allowed etc.)

Comment 4

[Jennifer Bertsch [:jbertsch]]

(In reply to Sabrina Ng [:sabrina] from comment #3)
> Do you know if there are any other requirements and/or restrictions for
> Tabzilla ads (other than dimension)?
> 
> (i.e - if we need CTA text with » symbol on the ad (like the one that is
> currently live) or if photography is allowed etc.)

Not that I know of, but +Matej and Craig

Comment 5

[Matej Novak [:matej]]

(In reply to Jennifer Bertsch [:jbertsch] from comment #4)
> (In reply to Sabrina Ng [:sabrina] from comment #3)
> > Do you know if there are any other requirements and/or restrictions for
> > Tabzilla ads (other than dimension)?
> > 
> > (i.e - if we need CTA text with » symbol on the ad (like the one that is
> > currently live) or if photography is allowed etc.)
> 
> Not that I know of, but +Matej and Craig

There's no specific requirement for a CTA, but I think it's a good idea to include one. I'd also recommend including the name of the site, so people know where they're going. You can use the same CTA you have on the larger promo.

Comment 6

[Craig Cook (:craigcook)]

I don't think we have any specific design guidelines for tabzilla promos but I can offer some recommendations and best practices:

* Don't include text in an image, unless it's a brand name/wordmark that won't be translated. The promo will be localized so any text should be live HTML text overlaying a background.

* Speaking of l10n, make sure there's plenty of room for text to reflow and change size. What fits on two lines in English might be three lines in French and one line in Japanese. A three letter English word might translate to a German word that's three times as long. We can do some fine tuning for specific locales as needed but allowing some space in the design is always best.

* Try to avoid fancy fonts. We can add a new webfont if we need to but that increases the load time. If you can, stick to Open Sans (regular, bold, or italic) and Open Sans Light (regular or italic) or else a common system font.

* We're moving towards using Fira Sans as our universal Mozilla font instead of Open Sans. Since this promo may run for a while, if you do use Open Sans we might switch it to Fira Sans in the near future. Or we could use Fira Sans for this promo from the start (again, with considerations for load time).

* If you do want to use a new webfont that's neither Open Sans nor Fira Sans, choose one with a broad character set that will support lots of languages.

That's about all I can think of at the moment.

Comment 7

[Sabrina Ng [:sabrina]]

Attachment: mozillagear_tabzillaad_ideas.jpg

Various ideas using placeholder photography (photos from photoshoot coming soon), texture and patterns.

Comment 8

[Matej Novak [:matej]]

Hi Sabrina,

These are looking good. On the whole, I'd say you don't need the wordmark since it's a small space and the name of the store is already in the CTA.

I like the idea of using a photo from the shoot, since we'll have those available, and I'm excited to see how they turn out.

I also like how clean and graphic option 4 is, but again, I'd consider losing the wordmark and just keeping the logo (which you could then maybe make a little bigger).

Did you explore any options that use the shopping bag logo as the main visual element? That may be something to look at as well.

Thanks for sharing these. Hope the comments above help.

Comment 9

[Andrea Wood [:andreawood]]

Sabrina these are great. 

Sounds like we may need to produce some versions including a real model to help John Slater and others decide if they will or will not allow photographic images on the homepage (which is not usual).

I believe it would be good to produce 2 versions of Tabzilla design promo, one with a model photo, one flat.

I have put out a request to the photo shoot art director for some of the "flat" merch images they took (no models wearing them). I'll keep you updated.

Until we receive those images, here is feedback on #1:

#1: Let's use the male model image to finalize the #1 approach: https://www.dropbox.com/sh/cdbhvezmm0hf98e/AACn6p_CZyd-jFOxxj16Hmv5a. Use the gray t-shirt with vertical white wordmark. And let's update the copy with Matej's feedback in mind: a) no wordmark; b) The Open Web You Can Wear (keep as-is); c) Change ">> Visit Mozilla Gear" to ">> NEW Mozilla Gear". I think highlighting we have brand new gear is going to be important (most of these designs are brand new).

Hopefully with this feedback you can update design #1, and when I get flat merch images we can potentially update #4.

Comment 10

[Andrea Wood [:andreawood]]

Here are the merchandise lay down images: https://www.dropbox.com/sh/ws33hvazz28tr3o/AAAvup1rFa7IXgio5y8YlnDsa

Comment 11

[Andrea Wood [:andreawood]]

Here is merch on-model with white background:
https://www.dropbox.com/sh/wh643z3jx5znhp0/AAAis8jfbo1d7SViPdWKex_Ya

Comment 12

[Andrea Wood [:andreawood]]

Here is merch on-model with white background:
https://www.dropbox.com/sh/wh643z3jx5znhp0/AAAis8jfbo1d7SViPdWKex_Ya

Comment 13

[Erika Drushka]

Andrea, please confirm that the final copy for this is: 
"The Open Web You Can Wear"

Also, please let us know if you want a CTA (recommended).

Comment 14

[Andrea Wood [:andreawood]]

The Tile is done and live in Tabzilla, so I'm closing this bug. (Moco finished it):
http://note.io/1sbnSwC