999042 - new mozilla.org homepage banner for webmaker

Status: RESOLVED INCOMPLETE

(Webmaker Graveyard :: Events, defect)

Description

[Jennifer Bertsch [:jbertsch]]

Hi Erika D, Sabrina, and Mavis-

I was talking with Erica S last week and she suggested that maybe Sabrina could design a new webmaker homepage promo tile for mozilla.org with copy from Erica D.

What do you think?

What sort of timeline do you need?

I'll paste the "specs" we have into the next comment.

Thanks,
Jen

Comment 1

[Jennifer Bertsch [:jbertsch]]

Ahoy there! Just offering some guidance and specs on the layout as you head into the design phase.

The new home page has a set of sliding accordion panels rather than a carousel of static banners, so designing each panel is more than just a single background image. Each one comprises a few layers that can move and animate somewhat independently as the panel expands and contracts.

In wide viewports (desktop screens and larger tablets) it's a horizontal accordion, but for narrow viewports (mobile phones and smaller tablets) it switches to a vertical accordion, and each panel layout changes for the new orientation. Visit https://www.mozilla.org/en-US/?v=2 and resize your browser window to see how it shifts and changes for different sized devices.

The panels have three basic states: "resting", "expanded", and "contracted". We can shift elements around for each of these states but we also need to plan for the animation in intermediate states, moving smoothly from contracted to expanded. Overall the design needs to be fluid enough to work when the exact dimensions are unknown, so avoid anything in that demands precise alignment of separate elements.

In the horizontal accordion, resting panels are each 25% of the total width, and expanded panel is about 64% of the total width, and the remaining contracted panels are each about 12% of the total width. At full size (in viewports wide enough) that total width is about 970px, but slightly smaller viewports (aimed mainly at tablets and netbooks) the total width is about 725px.

In the vertical accordion, each resting panel is about 65px tall, the expanded panel is about 350px tall, and contracted panels are about 40px tall. The width switches between 420px and 300px, to accommodate both landscape and portrait orientations of mobile devices. The vertical panels feature smaller images, and they move vertically as the panel expands/contracts.

The general motif we've established so far is for each panel to be dominated by a single primary image that shifts position as the panel opens or closes. The block of text fades into view as the panel reaches its full width, and that text block may have its own background (as seen on the current mozfest panel). Some panels feature a secondary logo as a heading above the text, but that's optional (the current MDN panel doesn't have a second logo).

Of course, my best advice is to just tinker with the page and see how all the panels move through the different sizes and states. When we've got the final design ready I'll need it in a layered Photoshop format so I can separate individual elements (with transparency) to layer onto the final web page. I don't necessarily need exact designs for all the different states, I'll mostly need the individual graphic components and a general sense of what you want it to look like in each state.

Hope this helps!

Comment 2

[Jennifer Bertsch [:jbertsch]]

PS Maybe Mavis could do the coding? :)  If not, the mozilla.org team can do it.

Comment 3

[John Slater]

Am coping Lee Tom, who has designed most of the mozilla.org homepage banners so far. Please feel free to ping him with any questions that come up along the way.

Also, Lee, please keep an eye on this bug to review the work as it's posted.

Thanks all-

Comment 4

[Erika Drushka]

Thanks, Jen.

Is there a deadline for this? When were you hoping to have it done by?

Comment 5

[Jennifer Bertsch [:jbertsch]]

Hi Erika-

Whenever you guys can fit it in, or if Erica S has a strong preference for a deadline, I'm good either way.

We have the existing webmaker banner up now, so a creative refresh is really just a "nice to have" from my POV.

If you can't get it done before we put up the Maker Party banner in early July, maybe we could have it done for September when Maker Parties are over?  Again, unless Erica S has another deadline in mind.

Thx,
Jen

Comment 6

[Erika Drushka]

We'd love to have a Maker Party banner up by early July. And it makes sense for Mavis to do the coding, as that will allow us to change images as necessary on our end. Excited about this!

Lee: Are there any best practices or testing results we should keep in mind as we approach the design and copywriting?

Thanks,
Erika

Comment 7

[Lee Tom]

Hi Erika, these banners can be a little bit tricky the first time around but they're really not too bad once you go through it once or twice! Jen broke it all out well in Comment 1. 

There are basically 3 components to supply (Jen refers to this PSD the last paragraph in Comment 1): 

1. background image or #hex-color
- 750x380px should give the devs enough room to work with when the mask is expanded
2. main graphic (logo, icon etc) 
- if possible, supply the vector art so the graphic can scale without losing it's fidelity
3. copy
- refer to the live site for general word-count when the banner is resting, contracted and expanded

(4) It's also helpful to mock up how the promo looks on the homepage when resting, expanded and contracted, so the devs have sizing and placement reference (see: http://cl.ly/052I0c041z3x) so you can send flattened JPGs along with the layered PSD

Hope this helps! Lee

Comment 8

[Erika Drushka]

Thanks, Lee. I was actually wondering more about whether or not you've tested banner variations to see which graphics/text combinations result in the most clicks. I.e. are there certain colours that work best? 1 line vs 2 lines of text on the default state, etc.

I've pinged Andrea Wood who did some testing on the snippet last year and she has a couple takeaways that might apply here as well.

Comment 9

[Lee Tom]

Hi Erika, sorry I can't help in that area. 

(In reply to Erika Drushka from comment #8)
> Thanks, Lee. I was actually wondering more about whether or not you've
> tested banner variations to see which graphics/text combinations result in
> the most clicks. I.e. are there certain colours that work best? 1 line vs 2
> lines of text on the default state, etc.
> 
> I've pinged Andrea Wood who did some testing on the snippet last year and
> she has a couple takeaways that might apply here as well.

Comment 10

[Sabrina Ng [:sabrina]]

1. Background Colour: Maker Party Yellow #FFE600
   Background Repeatable Tile Image: https://www.dropbox.com/sh/edf2xptjs41xe6t/AADXvZudWuTMM_0uEk7q3t6fa
2. Main Graphic Logo(.png,.eps &.ai files included): https://www.dropbox.com/sh/vvf665uourqde8b/AACCan2Os0dNQOvRhb6gjNawa
3. Copy - will be provided by ErikaD
4. Mockup for resting, expanded and contracted states for dev reference: https://www.dropbox.com/s/beg5gjrglrdpl6u/makerparty_mozbannermockups.jpg
5. Layered PSDs: https://www.dropbox.com/sh/v2bhkl59qcu7k7z/AADnznYAcV-WnTBYZGOUVpYTa

Comment 11

[Sabrina Ng [:sabrina]]

Attachment: makerparty_mozbannermockups.jpg moved to Bug 999044

Lee, can I get your feedback/design review on these banner mockups? In particular for the collapsed banner state (white or dark green gradient).

Comment 12

[Sabrina Ng [:sabrina]]

Copy request for collapsed and expanded banner states.

Comment 13

[Lee Tom]

These look great! I think the version with the white gradient feels more cheerful. 

(In reply to Sabrina Ng [:sabrina] from comment #11)
> Created attachment 8422049 [details]
> makerparty_mozbannermockups.jpg
> 
> Lee, can I get your feedback/design review on these banner mockups? In
> particular for the collapsed banner state (white or dark green gradient).

Comment 14

[Jennifer Bertsch [:jbertsch]]

(In reply to Lee Tom from comment #13)
> These look great! I think the version with the white gradient feels more
> cheerful. 
> 
> (In reply to Sabrina Ng [:sabrina] from comment #11)
> > Created attachment 8422049 [details]
> > makerparty_mozbannermockups.jpg
> > 
> > Lee, can I get your feedback/design review on these banner mockups? In
> > particular for the collapsed banner state (white or dark green gradient).

These do look great, Sabrina!  And I agree with Lee about the white gradient.  Thanks!

Comment 15

[Erika Drushka]

Meeting tomorrow to work on CTAs and copy. Will update soon. Self-imposed deadline May 23rd. Let me know if you need it sooner.

Comment 16

[Sabrina Ng [:sabrina]]

Cassie, I was wondering would there be a new graphic you'd like to use for this mozilla.org homepage banner since your updating webmaker.org too and that there may be new preferred visuals for webmaker now? 

Currently, the banner uses the webmaker logo and I'm considering to keep it since it represents webmaker and is recognizable. Do you have any feedback on how to approach designing this banner?

Comment 17

[Cassie McDaniel [:cassiemc]]

Sabrina, keeping logo sounds good – I might adjust the colors of the type to be more inline with the current webmaker interface. So, red headline is fine but would use grey text and green links. #4d4e53 = grey and #3fb58e = green (as documented in makerstrap http://mozilla.github.io/makerstrap/demo/#/)

Comment 18

[Erika Drushka]

Jen, now that the Maker Party banner is up, do we need to wait until Maker Party is over (September 15) before this updated Webmaker banner goes up?

Comment 19

[Jennifer Bertsch [:jbertsch]]

Yes - let's wait on this.  We are also redesigning the homepage for mid-October and I'm guessing the creative promo sizes will change.  I'll close this one for now.