search

mozilla-mobile / android-components

⚠️ This project moved to a new repository. It is now developed and maintained at: https://github.com/mozilla-mobile/firefox-android
https://github.com/mozilla-mobile/firefox-android
Mozilla Public License 2.0
2.02k stars 472 forks source link

Android Components Sticker Research #1231

Closed jonalmeida closed 5 years ago

jonalmeida commented 6 years ago

We want to make a sticker for a-c that shows describes what we do in a single simple visual design.

Ideas

  1. Use Material Design launcher icon guidelines.
  2. Abstract design - something with a small colour palette.
  3. Include the Android logo in there some.

Investigation

┆Issue is synchronized with this Jira Task

jonalmeida commented 6 years ago

Setting myself as assignee to make sure we get one made, but help/ideas are always appreciated!

pocmo commented 6 years ago

Random ideas:

Even more obscure things:

pocmo commented 6 years ago

Oh and: Quantum had this Firefox Quantum Suit. Components are the pieces of the suit? (I used that for some slides in the past).

pocmo commented 6 years ago

frankenstein's monster (a bunch of things sewed together... IT'S ALIVE!)

@antlam once created this Zombie sticker :)

img_20181030_182721

jonalmeida commented 6 years ago

Oh and: Quantum had this Firefox Quantum Suit. Components are the pieces of the suit? (I used that for some slides in the past).

Higher res image

I like this idea too! Replace tiny foxes with Androids?

pocmo commented 6 years ago

Some cheesy things from my slides (re-drawn from the Firefox comic 😅):

screenshot_2018-10-30 suits and other things

screenshot_2018-10-30 suits and other things 1

pocmo commented 6 years ago

Layer cake: https://www.google.com/search?q=layer+cake&tbm=isch

jonalmeida commented 6 years ago

@gabrielluong had a nice idea: use a burst view of different components (quantum suit limbs) layering on top. A similar concept to the 3D view we had in desktop.

@dnarcese said we should try making transparent stickers of individual pieces so that you could layer them on top of each other.

pocmo commented 6 years ago

@dnarcese said we should try making transparent stickers of individual pieces so that you could layer them on top of each other.

I like that. How about taking the UI of a browser an separating it into pieces (toolbar, engine view, awesomebar) and you can build your own browser with the stickers. That's the closest you can get to what the components are :D

jonalmeida commented 6 years ago

Alternative to layers, it could also be pieces like these British coins: https://www.reddit.com/r/DesignPorn/comments/92p8i1/all_the_british_coins_put_together_make_a_crest/

brampitoyo commented 6 years ago

Maybe what we want to print is a single sheet containing multiple little stickers of “parts”, that you can use to build your own browser chrome?

https://images-na.ssl-images-amazon.com/images/I/91kBeJaJe1L._SL1500_.jpg

A 3D look can easily be achieved by layering one element slightly offset from the other.

jrconlin commented 6 years ago

Hi all! From what I've been able to tell, various sticker sites have very different turn around speeds, so that might impact what designs you do. I'm pretty sure that more complicated sheets might also mean longer processing time, like doing a "kiss cut" for the multi-sticker sheets, or giving a sticker an unusual size. It might be good to have a couple of alternates that you can pick in case you have to adjust for schedule.

My order with StickerMule (100 3"x2" rectangle) took a very impressive 4 days. Ordered on Friday, shipped from Syracuse and supposed to be delivered today. I'll post images of the quality if you all like. I've also used StickerRobot in the past. They take a good deal longer, but I've been Super Impressed by their work. (The "Danger" stickers I have are from them). If you use StickerRobot, it might be cutting things a bit too close to make it for MozLando.

jonalmeida commented 6 years ago

Hi all! From what I've been able to tell, various sticker sites have very different turn around speeds, so that might impact what designs you do. I'm pretty sure that more complicated sheets might also mean longer processing time, like doing a "kiss cut" for the multi-sticker sheets, or giving a sticker an unusual size. It might be good to have a couple of alternates that you can pick in case you have to adjust for schedule.

That's a good point. We should finalize these designs asap.

jonalmeida commented 6 years ago

Maybe what we want to print is a single sheet containing multiple little stickers of “parts”, that you can use to build your own browser chrome?

A list of components to draw out:

  1. Empty browser window for the base (in the shape of a mobile window)
  2. Toolbar / Search icon
  3. Awesomebar
  4. Menu (fennec/focus styled)
  5. Tabs tray? 🤔

Alternatively, @jrconlin has given us a neat sticker design already!

android-components2

jrconlin commented 6 years ago

(The "weight" is adjustable if possibly a tad aspirational.) Likewise happy to replace "Use Hooks" with whatever pithier statement you'd like.

jrconlin commented 6 years ago

A slightly altered version using a number I got from Dr. Brown.

ac_box2

aminalhazwani commented 6 years ago

Hello everyone, sorry for the late reply! I would suggest to put as little text as possible, and play more with metaphors rather than a descriptive approach.

For inspiration you can have a look at this Instagram account curated by @bwinton https://www.instagram.com/mozsticker/?hl=en.

Regarding delivery we usually print with Sticker Mule and it has been very reliable and quick (same week delivery).

pocmo commented 5 years ago

Another idea (that is quick to hack together) is to create a random insider-joke sticker with the emojis from our milestones :)

jonalmeida commented 5 years ago

I'm sticking with a base crate icon based off of @jrconlin 's idea because it's quicker for now. but I like the emoji idea too. Maybe we can have those stuck to the outside of the crate? Hopefully that translates well to print.

@Amejia481 also suggested we keep it simple with an "AC" on the box as well so that works well in the same vein.

I meant to spend this weekend drawing it out, but got distracted, expect something early this week for review!

Amejia481 commented 5 years ago

Maybe android of one side of the box and AC in the other side img_20181113_104344

jrconlin commented 5 years ago

One other lesson learned from doing my own stickers: When sending the art in to print, you want to use "printer palate" colors rather than screen colors. (IOW: make sure the colors are brighter than you probably want.) If you've got access to an inkjet or color laser, Do a test print! and refine the colors appropriately.

(Mine came out a bit darker than I would prefer. They're fine, because I wanted an "art deco" look to them, but I'd have preferred a bit brighter.)

jonalmeida commented 5 years ago

@jrconlin or @aminalhazwani , how detailed can the image be? We wanted to add emojis on to the crate but I'm not sure if they'll get printed out clearly.

Recommended image resolution/size?

jrconlin commented 5 years ago

I'm really impressed by the print quality. I gave them an SVG, and from what I can tell, it's printed at at least 600dpi. my 2x3" sticker: https://photos.app.goo.gl/Sek5PSMFpmvJrbkG8 detail on the ship name: https://photos.app.goo.gl/xk5FTMCba8uLxYPz8

jonalmeida commented 5 years ago

I took @jrconlin 's idea of a crate and slapped on a few things:

I also made two simple options for a "reference" browser. *& is more of a "de-reference" though.

Thoughts? We'd like to put these into print this week.

crate-2 reference-002 reference-005

jrconlin commented 5 years ago

The Crate is cool, the "&" browser is hilarious.

jonalmeida commented 5 years ago

img_20181126_130915

Stickers received thanks to @ekager . 🎉 I'll try and make sure everyone involved gets one!