Closed Bug 1041717 Opened 10 years ago Closed 10 years ago

Snippet Cute Animals Series for Maker Party

Categories

(Webmaker Graveyard :: Design & UX, defect)

Product:
Webmaker Graveyard
Component:
Design & UX
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: andrea, Assigned: andrea)

References

Details

(Whiteboard: [snippet][aug8]) 

To support Maker Party, Zach is going to create 6 variations of the animated kitty gif (originally on Webmaker.org) for snippet promotions.

Deadline: 3 completed by Friday 7/25; 3 by Friday August 1. (does this work Zack?)

Background:
Snippet Click Thrus decrease rapidly (they grow "stale"), so we must cycle variations in and out during our July - September snippet promotion for Maker Party on about:home. An average snippet would be up about 5 days before we would see a significant decline in CTR, that's when we want to cycle in a new variation.

See "What is the snippet?" for an overview: https://fundraising.mozilla.org/what-is-the-snippet/

Snippet icon + text example 1:
icon: https://bug1027690.bugzilla.mozilla.org/attachment.cgi?id=8445971
text: 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.

Snippet icon + text example 2:
icon: https://bug1027690.bugzilla.mozilla.org/attachment.cgi?id=8445512
text: Cat videos are universal forms of communication. What else can the web give us? Learn more with Mozilla Webmaker and our global Maker Party

Ideas for these icons:
-- There should be movement, though it can be subtle (a tail twitch or anything to catch the eye). Movement can also be bigger, but it shouldn't be on a constant loop (should only happen once, or not be jarring if it's on a loop)

-- It would be great to vary the color of the cat to add more visual variety;

Some ideas for what the cat could be doing:
- sleeping
- playing
- stalking
- licking a paw
- meowing

what else do cats do?
Whiteboard: [snippet][aug8]
Blocks: 1041721
Zack would really like something where the cats appear to be learning together, ie huddling around a laptop :)

fun!
I'll mess around with that idea. The only concern is density and readability.

Are there any size constraints I should know about? I noticed that the "series of tubes" snippet image linked is double the size it appears at on the Firefox start page (appears to be 40x50 pixels; I'll aim for that unless I hear otherwise). I'd rather draw it knowing the target size--pixel art gets a little finicky if you resize it later. (I also still have my workfiles for the original if you want that one resized--it's looking a little blurry where it's linked here.)

Also, they don't all have to be cats, if you can think of some copy for other cute animals. :)
GOOD POINT on other animals... other internet meme animals: sloths, hedgehogs, red pandas (wink), mini pigs, rabbits, baby elephants, corgis, otters, pugs.... other ideas welcome! 
If you make the icons, I'll make copy to accompany them. :)

Target size info: 40x50px

The 2x size was a retina version, but for this purpose we don't need retina version. This is desktop snippet only. If we do need a different size, I'll let you know. (But I doubt it.)
Summary: Snippet Kitty Series for Maker Party → Snippet Cute Animals Series for Maker Party
I took a crack at that laptop idea. If the animation is too eye-catching for your liking, maybe tomorrow I can try it without the tail wag.
http://www.ownicon.com/sa/1-laptop-40x50.gif

I also uploaded a "retina" version, since that only took a second, and I think of it as closer to the way I would've liked it, if there hadn't been size constraints:
http://www.ownicon.com/sa/1-laptop-80x100.gif
Hi Zack - these are so great!

Two quick pieces of feedback: I'm thinking the 2 cats + laptop is a lot to fit into 40x50px. It's a little hard to make out what's happening there. I don't know if you should spend time fixing it, it might just be a little too much given the space constraints. Maybe just some variations on one kitty is the best we can do given the tinyness?

I love the red panda! I was slightly confused and thought the ball was his front paws at first, but when i looked at the 2x size figured it out. Maybe if the ball were green or a more contrasting color to his fur?

Really excited by these!
Yes, it's definitely best to stick to simpler shapes and silhouettes at this size--on modern screens, pixel art is best magnified a couple times, and there's not a lot of room for that here. These have been challenging, but interesting! I'm hoping the laptop image is still clear enough to be acceptable, but I'll definitely stick to single animals for the rest of the set. If I can get them within a width of 20 pixels and double up, I'll do that (the original cat was 24 wide, so it might be possible to do it that way, but only with animals recognizable from very simple shapes--unlike a red panda).

I've tried one more quick thing for the laptop image: I've cropped it to provide room to zoom in, and I changed a couple colors to try and compensate for the whole shapes no longer being in frame. I think it may have been more readable in the original version with the cats fully in frame, but you have this as an option if you prefer:
http://www.ownicon.com/sa/1b-laptop-40x50.gif
http://www.ownicon.com/sa/1b-laptop-80x100.gif

Good point about the ball on the second one. Green was already taken by the background, so here's a version with blue. (The green background exists to keep some of the lighter fur colors from blending into the light background of the Firefox start page.)
http://www.ownicon.com/sa/2b-rpball-40x50.gif
http://www.ownicon.com/sa/2b-rpball-80x100.gif
Zack these are great -- i noticed you added a background green circle around the Red Panda, but the original cat has no circle, just a matched background. Just keeping the animal on a matched background might simplify the image a little more. I like the sassiness of the cat "walking right on the page" if you will.
Right--that was because I was afraid the face fur color would be too hard to see against a transparent BG. Here's a version with no background and fur on the face that's a bit more colored:
http://www.ownicon.com/sa/2c-rpball-nobg-40x50.gif
http://www.ownicon.com/sa/2c-rpball-nobg-80x100.gif

Also, here's my third for the week. It's more portrait-oriented, so I was able to fit it into 20x25 and zoom in. I think you'll like the result:
http://www.ownicon.com/sa/3-catfront-40x50.gif
http://www.ownicon.com/sa/3-catfront-80x100.gif
Happy Monday Zach! These are great -- i'm not sure if you're already working on the final three, but I think a pug, sloth, and another cat, perhaps peaking out of a box (a-la Maru) or playing would be ones to focus on. The reason I'd choose those: We saw an increased conversion with the cat, I think because it sends a signal to people already interested in internet memes, and those people seem to be "our people"... make sense? Let me know if you have questions are want to chat. These are so great!
As it turns out, I did a cat playing earlier this morning, batting at a string:
http://www.ownicon.com/sa/4-swing-40x50.gif
http://www.ownicon.com/sa/4-swing-80x100.gif

That is probably enough for cats; I'll give the other two a shot later. Sloths are a bit weird looking. They also don't move all that much. I'll do some sketches to see how well their shapes are communicated at tiny sizes. Either way I'll keep memes and meme animals in mind!
the movement can actually be pretty subtle -- we just need to catch an eye. like a gentle swing on a branch. Sloths are a popular meme animal but I defer to your artistic sensibilities. :)
Hi Zack! These are great!

FYI this one is live right now:
https://snippets.mozilla.com/show/4499/

It'll get about 10 million views a day for the next few days.
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Just wanted to say, these are _fantastic_. Kudos.
These are so good. I love the sloth!
Kate pointed out a twitter search to me yesterday. No one search can find them all, it seems. It's been very flattering. Thank you all.
You need to log in before you can comment on or make changes to this bug.