1112305 - EOY Snippet Dev: Build snippet with a BIG visual impact

Status: RESOLVED FIXED

(Mozilla Foundation Communications :: Graphic Design, task)

Description

[Adam Lofting (:adamlofting)]

Build for Bug 1108710

Comment 1

[Scott [:thecount] Downe]

Attachment: https://github.com/ScottDowne/eoy-snippets/pull/3

Comment 2

[Sabrina Ng [:sabrina]]

Attachment: MozillaCrowd_EOYVersion.png

Comment 3

[Scott [:thecount] Downe]

Attachment: grey version

An example for the grey background version.

You can just open the html file in your browser, it's a standalone file.

Comment 4

[Scott [:thecount] Downe]

Attachment: yellow version

An example for the yellow background version.

You can just open the html file in your browser, it's a standalone file.

Comment 5

[Scott [:thecount] Downe]

I added two disruptive snippets.

These are in a form that can be sent to moco once they are approved by us.

They are fairly customizable, and the repo is here: https://github.com/ScottDowne/eoy-snippets/pull/3

The paypal snippet didn't perform as well as the simple one so I didn't build on the paypal snippet for either of these.

Things we can easily modify: highlightColor, backgroundColor, fontColor, backgroundImg and the button animate.

The button could animate with a yellow border pulse (I built in the option) but it doesn't show on the yellow background, but it looks OK on the grey background so we can try that.

Comment 6

[Scott [:thecount] Downe]

The yellow border pulse needs a new colour for the yellow snippet page.

The background pulse might be too subtle.

Can we pick another border pulse colour for the yellow page, and/pr make the background pulse more prominent?

Comment 7

[Sabrina Ng [:sabrina]]

Yes - if it is too subtle an option is to add more contrast with a deeper shade (perhaps we can try firefox light orange: #FF9500) and increasing the border width to increase the area it covers may help along with this too

Comment 8

[Scott [:thecount] Downe]

Attachment: yellow version with border animation

Comment 9

[Scott [:thecount] Downe]

Attachment: grey version with border animation

Comment 10

[Sabrina Ng [:sabrina]]

grey version: looks like yellow would be effective here (even if it overlaps the $3 button a bit - it grabs your attention)

yellow version: overall it looks very busy with the graphic so close to the buttons. 

Can we show more of the yellow bg below the buttons by shrinking the graphic a bit and/or moving the text up just slightly? I don't think the outline-colour animation would be as effective here can we try (http://leaverou.github.io/animatable/#outline-offset) outline-offset animation in the same red as the donate button?

Comment 11

[Andrea Wood [:andreawood]]

Quick feedback:

Both versions: Glow on the button is too subtle. Could there be one brighter glow on load, then it settles into the more subtle pulse?

Dark background: 
Love this one. I don't have big feedback here.

EOY yellow:
The buttons are lost in the crowd background, can we shrink the crowd or lift the buttons higher?

That's all! These are great!

Comment 12

[Scott [:thecount] Downe]

Attachment: yellow version new animation and smaller image

Comment 13

[Scott [:thecount] Downe]

Attachment: yellow version no background image with animation

Comment 14

[Scott [:thecount] Downe]

I'm actually liking yellow with no image: https://bug1112305.bugzilla.mozilla.org/attachment.cgi?id=8540268

Comment 15

[Andrea Wood [:andreawood]]

+1 for yellow with no image.

The animation to me is a little bit.... online popup-coupon - ey. It does grab attention, but it's repetitive and maybe crosses the "annoying" line. I think the user should see two quick phases: 1. Attention grabbing animation, then 2. a softer "glow" or much less annoying repeating behavior. I liked the "pulse" a lot, but it can serve as the 2nd phase of the experience.

Let's nix the dotted line, could it be just one big obvious glow/pulse that then reverts to the lighter pulse that's rhythmic/repeated?

Comment 16

[Sabrina Ng [:sabrina]]

smaller image on yellow still looks busy i'd go with yellow with no image too

the dotted line doesn't look very refined in application, i prefer the original glows

Comment 17

[Scott [:thecount] Downe]

Attachment: new animation

Comment 18

[Scott [:thecount] Downe]

Attachment: new animation without intro animation

Comment 19

[Scott [:thecount] Downe]

Attachment: grey new animate without intro

Comment 20

[Scott [:thecount] Downe]

Attachment: new grey with intro

Comment 21

[Scott [:thecount] Downe]

Attachment: border glow grey

Comment 22

[Scott [:thecount] Downe]

Attachment: border glow yellow