831063 - [Flicks] moz.org banner design

Status: RESOLVED FIXED

(Marketing :: Design, task)

Comment 1

[Tara (musingt)]

This is a banner that will live on mozilla.org homepage.  Quick mockup, here: https://bug810830.bugzilla.mozilla.org/attachment.cgi?id=701879 

Matt, we'd like to create a banner with the above specs but inline with this year's visual style for Flicks.  The video block is FPO - we'll slide in the video when it's ready. 

Final copy:

>>You're the director. Mobile is the star.
>>Enter Firefox Flicks, a global video contest about the power of mobile.
>>Watch the video »

Comment 2

[Tara (musingt)]

Matt, lets shoot to have this knocked out by end of week if possible.

Comment 3

[MT]

Attachment: Flicks_mozBanner

Comment 4

[Chelsea Novak [:chelsea]]

Fab! Thank you Matt.

Comment 5

[MT]

Attachment: Flicks_mozBanner

Comment 6

[Tobias Leingruber (@tbx)]

Thanks Matt, looking good to me.

Question: Will the copy next to the logo + the logo be set in HTML or as grahpic?

Comment 7

[Steven Garrity [:sgarrity]]

Is the font used here Meta Serif? This will require another font include on the home page (not really a blocker). The CSS transform feature required to display real HTML text on an angle like that doesn't work in IE7/8.

Could use an image for the text, but this isn't ideal and complicates the responsive layout.

Matt, did you have anything in mind for this?

Comment 8

[Tobias Leingruber (@tbx)]

Steven -
I just realized there won't be any l10n necessary, as mozilla.org is EN-US only. That's good news: Having the text as part of the graphic should be totally fine then.

I'll be posting final approval on this graphic (hopefully) later today.

Comment 9

[MT]

Attachment: Flicks_mozbanner_v2

Hi guys, sorry to chime in late....seems as though you may have the issue solved. However, I have attached a second version that could work in case of any localization issues.

Comment 10

[Matej Novak [:matej]]

(In reply to Steven Garrity from comment #7)
> Is the font used here Meta Serif? This will require another font include on
> the home page (not really a blocker).

It's actually Vollkorn, the font we're using on the Flicks site and in the other campaign materials. Will that be a problem to add? Will it affect load times or anything like that?

I really like the new version in comment 9, but I'm wondering if there's a way to include the logo as well. I don't think it's a deal-breaker, just curious.

Comment 11

[MT]

Attachment: Flicks_mozBanner_v3

Here is an example of using a smaller logo similar to the first version.

Comment 12

[Steven Garrity [:sgarrity]]

(In reply to MT from comment #11)
> Here is an example of using a smaller logo similar to the first version.

Thanks - can you post the PSD version of this file?

Comment 13

[MT]

Hi guys, here is a link to the PSD. 
https://www.dropbox.com/s/u4pw03pzfo0b9a0/Flicks_mozOrg.psd

Comment 14

[Steven Garrity [:sgarrity]]

This latest version is implemented on the demo server: https://www-demo1.allizom.org/en-US/

We can probably close this bug.

Comment 15

[Matej Novak [:matej]]

(In reply to Steven Garrity from comment #14)
> This latest version is implemented on the demo server:
> https://www-demo1.allizom.org/en-US/
> 
> We can probably close this bug.

Thanks Steven. Just two questions:

The font in the headline and copy looks heavier than in Matt's mockup, almost like there's a stroke on it or something. Is there anything you can do about that?

Did we decide not to use the version with the Flicks logo in it from comment 11?

Comment 16

[Tobias Leingruber (@tbx)]

So what about that IE7 issue? Is that resolved, do we have a workaround? Thanks.

Comment 17

[Steven Garrity [:sgarrity]]

(In reply to Matej Novak [:matej] from comment #15)
> The font in the headline and copy looks heavier than in Matt's mockup,
> almost like there's a stroke on it or something. Is there anything you can
> do about that?
I think this may just come down to how the browser/OS render fonts. If it's still a problem, please post a screenshot.

> Did we decide not to use the version with the Flicks logo in it from comment
> 11?

I actually forgot to include that - should I add it? I actually prefer it as is, but can update if preferred.

Comment 18

[Steven Garrity [:sgarrity]]

(In reply to Tobias Leingruber (@tbx) from comment #16)
> So what about that IE7 issue? Is that resolved, do we have a workaround?
> Thanks.

Yeah, since we went with the non-angled design, we're fine in IE.

Comment 19

[MT]

Attachment: Flicks_mozOrg_FINAL.jpg