1027690 - Design Snippet Icons for Mozilla Webmaker & Maker Party

Status: RESOLVED FIXED

(Webmaker Graveyard :: Maker Party, defect)

Description

[Andrea Wood [:andreawood]]

It's a requirement that all icons, animated gifs, etc. need to be under 100KB for ultimate performance on the about:home page. 

I dug up a resolved bug that has example files for the finished snippet icon files:
https://bugzilla.mozilla.org/show_bug.cgi?id=1001525

Basically animated or not, it has to be <100K. I would design 2 static icons, and then 2 .svg versions for testing during the week of June 23rd. The icon should amplify the snippet copy samples in 1009779.

The animation simply needs to have a moving element to draw the eye, it doesn’t have to be substantial. 

We could use the “m” sewing icon and possibly animate the needle, for example. 

We also have an existing “lock” animation from EOY that we could tweak for this:
Care about privacy on the web? Step one to protect yourself is learning how the web works. You can see that animation and others for EOY here: http://fundraising.mozilla.org/the-winning-snippet-is/

Comment 1

[Erika Drushka]

What is the deadline for delivering these graphic assets?

Comment 2

[Andrea Wood [:andreawood]]

Tuesday June 24 if possible

Comment 3

[Cassie McDaniel [:cassiemc]]

I would recommend animating the logo simply with css, is that possible Andrea, for whoever is doing the implementation? Seems like at this point animating the webmaker logo in any more detail than that will take too much time/effort.

I'd suggest something simple like a wiggle or bounce or the logo falling in, kinda like the text does on the homepage banner now on webmaker.org. And whoever is implementing could do that, vs. Sabrina (maybe Mavis has a code snippet she could point to, if not, maybe Kate could weigh in on what she used on webmaker.org, if needed).

Comment 4

[Andrea Wood [:andreawood]]

Hi Cassie, the snippet has very specific requirements (not exactly like a typical web page). Please see this resolved bug for file / code examples for the snippet icon (from my description):
https://bugzilla.mozilla.org/show_bug.cgi?id=1001525

They have to be in the same formats as that bug.

Comment 5

[Andrea Wood [:andreawood]]

hey there, just check on status of icon designs? Sabrina I know you're super busy, but do you have an ETA on drafts for us to review?

Comment 6

[Sabrina Ng [:sabrina]]

Attachment: webmaker_static_flat_icon.svg

webmaker static logo icon .svg

Comment 7

[Sabrina Ng [:sabrina]]

Attachment: webmaker_animation_flat_icon_wthread.gif

webmaker animated logo icon .gif

Comment 8

[Sabrina Ng [:sabrina]]

Attachment: makerparty_static_flat_icon.svg

maker party static logo icon (.svg)

Comment 9

[Sabrina Ng [:sabrina]]

Attachment: makerparty_animation_flat_icon.gif

maker party animated logo icon (.gif)

Comment 10

[Andrea Wood [:andreawood]]

hey Sabrina, these look great, but they have to be 40x50px. Please see this bug for reference examples: https://bugzilla.mozilla.org/show_bug.cgi?id=1001525.

Comment 11

[Sabrina Ng [:sabrina]]

Attachment: webmaker_static_40x50px.png

webmaker logo 40x50px (.png)

Comment 12

[Sabrina Ng [:sabrina]]

Attachment: makerparty_static_40x50px.png

maker party logo 40x50px (.png)

Comment 13

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

exported for retina

Comment 14

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

exported for retina

Comment 15

[Sabrina Ng [:sabrina]]

Attachment: webmaker_animation_40x50px.gif

Comment 16

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

Comment 17

[Sabrina Ng [:sabrina]]

Attachment: makerparty_animation_40x50px.gif

Comment 18

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

Comment 19

[Sabrina Ng [:sabrina]]

static and animated logos exported at 40x50px and @2x (retina versions) - please review various exports

Comment 20

[Andrea Wood [:andreawood]]

(In reply to Sabrina Ng [:sabrina] from comment #17)
> Created attachment 8444648 [details]
> makerparty_animation_40x50px.gif

Sabrina can you make "MAKER PARTY" text a little larger on this one? I think it would be more readable. I understand it might slightly violate the best design standard but hopefully we can make it more readable at size with increased font size.

Comment 21

[Andrea Wood [:andreawood]]

(In reply to Sabrina Ng [:sabrina] from comment #15)
> Created attachment 8444646 [details]
> webmaker_animation_40x50px.gif

This one is adorable -- at size the edge of the circle is a little hard to discern. Think a slightly darker outline for it and the needle might make it easier to see?

Comment 22

[Andrea Wood [:andreawood]]

Hi Sabrina! Thanks so much for all this work, these are really nice! I think there are two pieces of snippet copy that we could really get creative with. Would you have time to create 2 animated 40x50 icons for these two pieces of snippet copy by Friday June 27?:

TEXT A: Think the internet is just a series of tubes? Think again. Teach and learn about the web with Mozilla Webmaker and our global Maker Party [cool pumping tubes?]

TEXT C: Cat videos are universal forms of communication. What else can the web give us? Learn more with Mozilla Webmaker and our global Maker Party [could we use the animated kitty from the Webmaker homepage?]

Comment 23

[Sabrina Ng [:sabrina]]

Attachment: makerparty_animation_larger_40x50px.gif

cropped so hexagon to be full width of .gif (wordmark margins not to be changed, this is the largest text can get)

Comment 24

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

retina export

Comment 25

[Andrea Wood [:andreawood]]

(In reply to Sabrina Ng [:sabrina] from comment #23)
> Created attachment 8445396 [details]
> makerparty_animation_larger_40x50px.gif
> 
> cropped so hexagon to be full width of .gif (wordmark margins not to be
> changed, this is the largest text can get)

This looks really good Sabrina! Thanks so much!

Comment 26

[Sabrina Ng [:sabrina]]

Attachment: webmaker_animated_cat_40x50px.gif

Comment 27

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]

Comment 28

[Andrea Wood [:andreawood]]

(In reply to Sabrina Ng [:sabrina] from comment #26)
> Created attachment 8445512 [details]
> webmaker_animated_cat_40x50px.gif

HE IS SO CUTE!!!

Comment 29

[Sabrina Ng [:sabrina]]

Attachment: snippet_tubes_40x50px.gif

Comment 30

[Sabrina Ng [:sabrina]]

Attachment: [e-mail]