676065 - [Rapid Release] Mobile: Design Mock-up for Firefox AUrora lightbox promo

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Grace Jimenez :grace]

Hi Jason, 

We are doing a lightbox in product promo to feature Firefox Aurora to current Firefox Beta users. 

This promo is built  in the product. Once the beta user updates to the latest build, the first time the browser is opened, the lightbox will pop up and will act like a first run page (will only be seen once). 

finkle wanted to use CSS, text and images in the design, can you help us do the design mock up to provide to the team to build? 

the specs are between 300px to 480 px.
i picture it to be very similar to About Aurora, dark purple background, aurora logo and wordmark and some room for copy. 

the lightbox is going to be link to the http://www.mozilla.com/en-US/m/firefo/channel/

deadline: we are trying to get this promotion by the next merge august 16. but since this needs to be built in the product, do you think we can review something by end of this week?

thanks!

Comment 1

[Jason Grlicky [:grlicky]]

Hey Grace! I think I can get something to review by the end of the week, but I'm not 100% clear on what needs to be done here. It would be helpful to get a general idea of the copy involved as well. I'll ping you on IM and we can get it sorted out today!

Comment 2

[Grace Jimenez :grace]

hi jason, 

wanted to follow up from our discussion today in irc and make sure you have the info you need to move fwd here. 

copy: 
Get in before Beta. Try Firefox Aurora and Help shape the Future of Firefox. 

in terms of look. i was thinking something similar to the about:aurora look. (see attachment)

the size of the box is 300px 

unfortunately, i dont think we have a screenshot of any previous light box promos. but it would be pretty similar to a first run page in desktop except, a prominent huge box when you first start up your updated browser on your android phone.

Comment 3

[Grace Jimenez :grace]

Attachment: about:aurora

Comment 4

[Jason Grlicky [:grlicky]]

Here's a design for the lightbox, with some implementation details:

http://people.mozilla.com/~jgrlicky/drop/mozcom/mobile_mockups/rapid_release/aurora_lightbox_v1.png

I showed it here at 300px (the optimum width) and 230px to show how it would scale.

Here's a view of it in action, just to help you get a feel for it:

http://people.mozilla.com/~jgrlicky/drop/mozcom/mobile_mockups/rapid_release/aurora_lightbox_demo.png

Let me know what you think!

Comment 5

[Jaclyn Fu]

Hey Jason, 

Those look awesome! Let's go ahead and move forward with them. Thanks!

Comment 6

[Jason Grlicky [:grlicky]]

Thanks Jaclyn! Here's the PSD, then:

http://people.mozilla.com/~jgrlicky/drop/mozcom/mobile_mockups/rapid_release/aurora_lightbox.psd

Comment 7

[Mark Finkle (:mfinkle) (use needinfo?)]

Can we get:
* PNGs for the background and logo 
* CSS colors and font sizes for the text
* CSS color for background and borders of the button

We should be able to create the HTML from that

Comment 8

[Jason Grlicky [:grlicky]]

PNGs: http://people.mozilla.com/~jgrlicky/drop/mozcom/mobile_mockups/rapid_release/aurora-lightbox/

The bevel on the top of the box should be reproducable with a css inset box shadow, and the border on the popup is 1px black.


CSS Colors / Font Sizes:
"Get in before Beta." -> Georgia, white, 24px
"Try Firefox Aurora" -> Georgia, #c0b5b5, 16px

The download button should be able to use the same styles as on http://www.mozilla.com/en-US/m/firefox/channel/

Let me know if you need anything else or if I can clarify anything! Thanks Mark!

Comment 9

[Grace Jimenez :grace]

thanks jason!

Comment 10

[Mark Finkle (:mfinkle) (use needinfo?)]

Madhava, Jason - Can we put the images through an optimizer to reduce the size of the files? Right now, the 3 files combine to over 120KB. Maybe Ian Barlow could use the PSD file to do it. Jason, if you know how to reduce the size without hurting image quality, please take a shot. I am ignorant of the tools to do it.

Comment 11

[Jason Grlicky [:grlicky]]

Mark: I think I can get the files smaller!

Comment 12

[Jason Grlicky [:grlicky]]

Ok, I've uploaded optimized versions in place of the old ones - close.png is now close.gif and background.png is now background.jpg. Saved 74k, not bad!

Comment 13

[Jason Grlicky [:grlicky]]

Oops, looks like the original .png is actually smaller - putting it back!

Comment 14

[Jason Grlicky [:grlicky]]

*close.png, sorry for the bugzilla spam :P

Comment 15

[Sriram Ramasubramanian [:sriram]]

Could you please give me the following details?
1. the gradient start-stop values for the green button
2. the expected opacity of black for the background overlay in http://people.mozilla.com/~jgrlicky/drop/mozcom/mobile_mockups/rapid_release/aurora_lightbox_demo.png
3. the border color of the lightbox
4. the background color of the lightbox (behind the button)

Comment 16

[Jason Grlicky [:grlicky]]

Sriram:

1. The gradient stops are the same for the buttons on mozilla.com. The mozilla version should be: -moz-linear-gradient(center top , #84C63C 0%, #489615 100%) repeat scroll 0 0 transparent; The shadow color for the bottom part of the button should be #3b7b11

2. 40% should be a good starting point.

3. The border color of the lightbox is #000000

4. The background color of the lightbox is also #000000

Hope that helps!