Closed Bug 1027690 Opened 10 years ago Closed 10 years ago

Design Snippet Icons for Mozilla Webmaker & Maker Party

Categories

(Webmaker Graveyard :: Maker Party, defect)

x86
macOS
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: andrea, Assigned: sabrina, Mentored)

References

Details

(Whiteboard: [Webmaker] [Maker Party 2014] [Tier 1] [June] [june27] [snippet][engagement] [studiomofo])

Attachments

(16 files, 2 obsolete files)

27.41 KB, image/svg+xml
andrea
: review+
Details
87.25 KB, image/gif
andrea
: review+
Details
3.99 KB, image/svg+xml
andrea
: review+
Details
84.21 KB, image/gif
andrea
: review+
Details
1.78 KB, image/png
Details
1.29 KB, image/png
Details
4.62 KB, image/png
Details
2.41 KB, image/png
Details
15.62 KB, image/gif
Details
32.27 KB, image/gif
Details
17.93 KB, image/gif
Details
40.12 KB, image/gif
Details
4.83 KB, image/gif
Details
8.79 KB, image/gif
Details
21.05 KB, image/gif
Details
17.59 KB, image/gif
Details
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/
What is the deadline for delivering these graphic assets?
Flags: needinfo?(andrea)
Tuesday June 24 if possible
Flags: needinfo?(andrea)
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).
Flags: needinfo?(andrea)
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.
Flags: needinfo?(andrea)
No longer depends on: 1027724
Whiteboard: [Webmaker] [Maker Party 2014] [Tier 1] [June] [snippet][engagement] [studiomofo] → [Webmaker] [Maker Party 2014] [Tier 1] [June] [june27] [snippet][engagement] [studiomofo]
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?
Flags: needinfo?(sabrina)
Status: NEW → ASSIGNED
webmaker static logo icon .svg
Flags: needinfo?(sabrina)
webmaker animated logo icon .gif
maker party static logo icon (.svg)
maker party animated logo icon (.gif)
Attachment #8444623 - Flags: review?(andrea)
Attachment #8444601 - Flags: review?(andrea)
Attachment #8444600 - Flags: review?(andrea)
Attachment #8444622 - Flags: review?(andrea)
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.
webmaker logo 40x50px (.png)
maker party logo 40x50px (.png)
Attached image webmaker_static_@2x.png
exported for retina
exported for retina
Attached image makerparty_animation_40x50px.gif (obsolete) —
Attached image makerparty_animation_@2x.gif (obsolete) —
static and animated logos exported at 40x50px and @2x (retina versions) - please review various exports
Flags: needinfo?(andrea)
Status: ASSIGNED → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
(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.
(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?
Flags: needinfo?(andrea)
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?]
cropped so hexagon to be full width of .gif (wordmark margins not to be changed, this is the largest text can get)
Attachment #8444648 - Attachment is obsolete: true
retina export
Attachment #8444649 - Attachment is obsolete: true
(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!
(In reply to Sabrina Ng [:sabrina] from comment #26)
> Created attachment 8445512 [details]
> webmaker_animated_cat_40x50px.gif

HE IS SO CUTE!!!
Attached image snippet_tubes_@2x.gif
Attachment #8444622 - Flags: review?(andrea) → review+
Attachment #8444600 - Flags: review?(andrea) → review+
Attachment #8444601 - Flags: review?(andrea) → review+
Attachment #8444623 - Flags: review?(andrea) → review+
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: