1076019 - EOY 2014: Design default snippet icons

Status: RESOLVED FIXED

(Mozilla Foundation Communications :: Graphic Design, task)

Description

[Erika Drushka]

Need 12 varying designs.

Comment 1

[Erika Drushka]

Andrea, can some of these be the same as last year's, or do you need 12 original designs?

Comment 2

[Erika Drushka]

Can you paste last year's designs or any creative brief with more context? We need some sort of starting point.

Comment 3

[Andrea Wood [:andreawood]]

Here is a screenshot of every snippet from 2013:
https://docs.google.com/a/mozillafoundation.org/document/d/1NoSXGxzKdNzNF4lWH2Ztt1pNbQ1xEqhDCKZlMcmcs1M/edit

Unfortunately the animations don't work in that doc.

I'll attach a couple of examples as animated gif or SVG.

Comment 4

[Andrea Wood [:andreawood]]

Attachment: red 3 coin -- Animated Snippet from 2013 EOY

Comment 5

[Andrea Wood [:andreawood]]

Attachment: Locking snippet animation for privacy-focused EOY snippet 2013

Comment 6

[Erika Drushka]

Super helpful! Can we re-use some of these (and do you have the files) or do you want 12 new icons?

Comment 7

[Andrea Wood [:andreawood]]

Other notes from 2013:
-- We also had a silver color version of the coin that rolled, instead of dropped into a slot
-- we also used the mozilla "heart"  as one of the animations, it appeared and beat for a moment I think (can't find that one)

Ideas for 2014 (let's brainstorm!):
-- recycle the coin (different colors? Different font? flipping, rolling or dropping?)
-- recycle the heart (make it flip, dance, glow?)
-- cute meme animals again? Shall we sic the spinning pug on the masses?? ;)
-- A little gift that unwraps?
-- an animated 'bow' untying
-- a gift box with a bow
-- bright colored candies wrapped or gumdrops?
-- snow flakes or snow men
-- what else??

we should avoid religious symbolism or things that are heavily US-centric. Anything related to generosity, giving, winter, etc.

Comment 8

[Sabrina Ng [:sabrina]]

Priority: P1
Existing dimensions: 40 x 50px
File export: .png (static), .gif (animated) + export @2x for retina screens

Creating snippet icon designs. Will create static first and animate (most or all of) them after.

Here is my plan for approaching the 12 icon snippets:

1 Coin (recycle - Andrea's pick)
2 Coin (create new version)
3 Heart (recycle - Andrea's pick)
4 Heart (create new version)
5 Animal 1 (recycle - use Zachary Wilkins icons - Andrea's pick)
6 Animal 2 (recycle - use Zachary Wilkins icons - Andrea's pick)
    or if he is interested to make new ones? 
7 Gift box / bow
8 Snowman / snow
9 Hot chocolate (idea is to use it with language like what wikipedia .."price of buying a hot coco etc." - example: https://www.evernote.com/shard/s202/sh/59493164-f95e-4a9d-8c4a-825e3e5d03c6/5d9c84124a04b05ddcd7fa3f70817ab2/deep/0/The-Birth-of-Venus-%28Botticelli%29---Wikipedia,-the-free-encyclopedia.png)
10 Holiday bell
11 Assorted candy
12 Person celebrating

Not sure what copy each icon would accommodate but if there is specific generosity, giving, winter copy already please share it on the bug so I can coordinate these icons with it.

Comment 9

[Sabrina Ng [:sabrina]]

sketches of snippet icon designs: https://redpen.io/gh07abf30c2b0ac26a

Feedback is appreciated to see if I'm on the right track with aligning to your snippet copy?

What I'd like feedback on: 
- for the heart icon, do you want the mozilla "m" on it or have the heart blank? etc.
- for the coin icon, do you want the number 3 on it or have it blank? etc.
- I'm unsure if a snowman is north American centric

Comment 10

[Erika Drushka]

These are awesome. Feel like you're on the right track with almost all of them. The 3 that don't work for me are:

Snowman (too North American)
Bell (too random)
Candy (too random -- could be a candy cane, I guess, but that still doesn't say "donate" to me).

Suggested alternatives:
- Fox doing something cute e.g. tail has a bow on it, sitting up and begging like a dog (too much?), subtly tilting head (since spinning dog freaked some people out)
- Mozilla 'M' strung with (gently) blinking lights
- just a plain old donate button, or a rectangular present that rotates and is a donate button on the back side

Comment 11

[Sabrina Ng [:sabrina]]

how did we get Zachary on board to do the cute animals? it'd be great if we can have him execute the fox idea to match his style (also, that animation may be complex for me to do with the rest of the ideas but could try)

Comment 12

[Sabrina Ng [:sabrina]]

I think the blinking mozilla lights would work well: https://redpen.io/bfa6f2c735fa597ab6

The donate button on a present box would be to small to legible and we shouldn't have text on an image for localization purposes - it should just be a image.

Comment 13

[Erika Drushka]

Confirming that the default icons will not be pair with any interactive feature (poll, thermometer etc.) They will be paired with text only.

Comment 14

[Andrea Wood [:andreawood]]

This is looking good! Couple of points:

-- These designs will act as backup "default" snippets in case the interactive snippet fails or bombs / we need them to stand in for any reason;
-- These will not be paired with the interactive snippet -- that snippet is going to be designed separately;
-- the animations can be subtle, just to catch the eye;
-- I am working on copy this week for all EOY assets.

Comment 15

[Erika Drushka]

Sabrina and I got a start on pairing icons and copy. Feel free to suggest new copy in the Redpen.https://redpen.io/uy966263c2beefb51d

Comment 16

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_PlainCoin.png

Comment 17

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

(@2x) for retina screens

Comment 18

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_3Coin.png

Comment 19

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

(@2x) for retina screens

Comment 20

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_5Coin.png

Comment 21

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

(@2x) for retina screens

Comment 22

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_MHeart.png

Comment 23

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

(@2x) for retina screens

Comment 24

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_Gift.png

Comment 25

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

(@2x) for retina screens

Comment 26

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_FoxinaBox.png

Comment 27

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

(@2x) for retina screens

Comment 28

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_HotCoco.png

Comment 29

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

(@2x) for retina screens

Comment 30

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_MGingerbreadMan.png

Comment 31

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

(@2x) for retina screens

Comment 32

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_MSnowAngel.png

Comment 33

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

(@2x) for retina screens

Comment 34

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_MLights.png

Comment 35

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

(@2x) for retina screens

Comment 36

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_Snowman.png

Comment 37

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

(@2x) for retina screens

Comment 38

[Sabrina Ng [:sabrina]]

revised static icons: https://redpen.io/caf9d52bc60af7f87b

Comment 39

[Erika Drushka]

We're going ahead will all these icons. Sabrina will animate. Andrea to provide final copy.

Comment 40

[hannah:hkane]

Andrea, do you have final copy?

Comment 41

[hannah:hkane]

This one hasn't moved in over a week. I know it's not a top priority, but let me know if you could use some help with this, Andrea.

Comment 42

[hannah:hkane]

Oh, I see. The actual next step is here: https://bugzilla.mozilla.org/show_bug.cgi?id=1091411. Then we can come back to this one.

Comment 43

[Andrea Wood [:andreawood]]

Shouldn't these be gif files instead of .png? They're not animating for me.

Comment 44

[Sabrina Ng [:sabrina]]

Hey Andrea, these are the static versions of the deliverable and they are in .png - I'll be working on animating them this week so they will be ready for Nov 15.

Comment 45

[Sabrina Ng [:sabrina]]

NOTE: Please use retina (files labelled with @2x) versions since my previous snippet designs I’ve seen has been pixelated on homepage most likely due to using the original size for non-retina screens

Comment 46

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_PlainCoin_Animated.gif

Comment 47

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

Comment 48

[Andrea Wood [:andreawood]]

(In reply to Sabrina Ng [:sabrina] from comment #44)
> Hey Andrea, these are the static versions of the deliverable and they are in
> .png - I'll be working on animating them this week so they will be ready for
> Nov 15.

sounds great! SO GLAD YOU'RE BACK!!

Comment 49

[Andrea Wood [:andreawood]]

Also I am currently working on copy in this Google Doc:
https://docs.google.com/a/mozillafoundation.org/document/d/1EfHDEGPWIsvqaC3N1TJ0UgnLnBsY_9JzT84bqBiAjvg/edit

Comment 50

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_3Coin_Animated.gif

Comment 51

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

Comment 52

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_5Coin_Animated.gif

Comment 53

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

Comment 54

[Andrea Wood [:andreawood]]

I have drafted copy for all the icons:
https://docs.google.com/a/mozillafoundation.org/document/d/1EfHDEGPWIsvqaC3N1TJ0UgnLnBsY_9JzT84bqBiAjvg/edit

Erika do you want to give them a final edit?

Comment 55

[hannah:hkane]

Moving the copy conversation back over to https://bugzilla.mozilla.org/show_bug.cgi?id=1091411, so this ticket can be limited to design.

Comment 56

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_MHeart_Animated.gif

Comment 57

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

Comment 58

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_Gift_Animated

Comment 59

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_Gift_Animated@2x

Comment 60

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_HotCoco_Animated

Comment 61

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_HotCoco_Animated@2x

Comment 62

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_FoxinaBox_Animated

Comment 63

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_FoxinaBox_Animated@2x

Comment 64

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_MGingerbreadMan_Animated

Comment 65

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_MGingerbreadMan_Animated@2x

Comment 66

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_MSnowAngel

Comment 67

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_MSnowAngel@2x

Comment 68

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_Snowman

Comment 69

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_Snowman@2x

Comment 70

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_MLights

Comment 71

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_MLights@2x

Comment 72

[hannah:hkane]

Sabrina, can we close this ticket?

Comment 73

[Sabrina Ng [:sabrina]]

Designs are complete. Andrea can you please review before we close.

Comment 74

[Andrea Wood [:andreawood]]

This all looks great! I think i mentioned this in one of the redpens -- but can we get a version of the snowangel with a dark-haired child? I want to have some diversity on hand. This is low priority!

Comment 75

[Andrea Wood [:andreawood]]

hi there, Sabrina -- would you be able to do an alternate with darker hair?

Comment 76

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_MSnowAngel2.png

Comment 77

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

Comment 78

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_MSnowAngel2

Comment 79

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_MSnowAngel2@2x

Comment 80

[Sabrina Ng [:sabrina]]

Andrea please review the dark hair snow angel alternative. 
(static & animated / regular & retina versions)

Comment 81

[Andrea Wood [:andreawood]]

YESSS! OK closing this bug now. Thanks Sabrina!!

Comment 82

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_MHeart_AnimatedLoop

corrected shadow animation and animations loops

Comment 83

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

Comment 84

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_FoxinaBox_Animated_wBG

Comment 85

[Sabrina Ng [:sabrina]]

Attachment: EOY_Snippet_FoxinaBox_Animated_wBG@2x