Add web app manifest

[FluorescentHallucinogen]

@blasten, @arthurevans, @notwaldorf, could you PTAL?

[abdonrd]

About the discussion: https://github.com/Polymer/app-drawer-template/pull/13 Maybe update with this manifest.json format.

{
  "name": "Polymer Element Catalog",
  "short_name": "Polymer Catalog",
  "start_url": "/?homescreen=1",
  "display": "standalone",
  "theme_color": "#1e88e5",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "images/manifest/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/manifest/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

[FluorescentHallucinogen]

@abdonrd

1. Why only 192x192 and 512x512 icons? I haven't Polymer Element Catalog logo in 512x512 resolution. Do you have original Polymer Element Catalog logo in SVG format to export it to raster icons in various resolution?
2. Why https://elements.polymer-project.org uses the Polymer logo instead of Polymer Element Catalog logo in the top left corner of the main page?
3. Looks like the colors of Polymer logo have recently been slightly changed. Please compare https://goo.gl/kL3JuH and https://goo.gl/9PtQUM. Should Polymer Element Catalog logo be also updated to horminize with new changed colors of Polymer logo? If yes, can anyone publish updated Polymer Element Catalog logo in SVG format?
4. What about using vector icon in SVG format in addition to raster icons in various resolutions in manifest.json?

{
    "src": "/images/logo.svg",
    "type": "image/svg+xml"
}

[abdonrd]

@FluorescentHallucinogen

1. https://github.com/Polymer/app-drawer-template/pull/13#issuecomment-222536608 I haven't the logo. :(
2. Good question.
3. +1
4. I'm not sure. 😕

[FluorescentHallucinogen]

@abdonrd

I haven't the logo. :(

Do you know anyone who has the logo and can update the colors of it?

[abdonrd]

@FluorescentHallucinogen maybe @robdodson can help you.

[robdodson]

New logo it at https://elements.polymer-project.org/images/polymer.svg

[abdonrd]

@robdodson I think @FluorescentHallucinogen refers to the new Catalog logo.

Old:

[FluorescentHallucinogen]

@blasten, do you have original Polymer Element Catalog logo in SVG format to export it to raster icons in various resolution?

@addyosmani say that we should use only 192x192 and 512x512 PNG icons (see https://github.com/Polymer/app-drawer-template/pull/13#issuecomment-222536608).

I suggest to use vector icon in SVG format in addition to (not instead of) these raster icons (see https://github.com/Polymer/app-drawer-template/pull/13#issuecomment-238022925).

Anyway, in both cases, I need Polymer Element Catalog logo in SVG format, because the largest logo in PNG format, that I have, has a 460x460 resolution.

[blasten]

do you have original Polymer Element Catalog logo in SVG format to export it to raster icons in various resolution?

cc @tjsavage

[tjsavage]

We do - just added it to the repo:

https://github.com/Polymer/polymer-element-catalog/blob/master/app/images/polymer-catalog.svg

[notwaldorf]

@tjsavage should we...update it with the new colours or nah?

[tjsavage]

@notwaldorf good catch. updated the file with my extraordinarily limited illustrator skillz, how'd I do?

[notwaldorf]

I don't think there should be shadows :/ The previous icon was really flat, and our new logo is super flat too, so I think keeping the original flatness but subbing in the light blues would be the best. I'm sorry! I can take a look at it later on tonight if you want! 💙 On Thu, Aug 11, 2016 at 5:39 PM Taylor Savage notifications@github.com wrote:

@notwaldorf https://github.com/notwaldorf good catch. updated the file https://github.com/Polymer/polymer-element-catalog/blob/master/app/images/polymer-catalog.svg with my extraordinarily limited illustrator skillz, how'd I do?

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/Polymer/polymer-element-catalog/pull/282#issuecomment-239334111, or mute the thread https://github.com/notifications/unsubscribe-auth/ABTkUqKv0Ms8kXd6vdAaGXY3hk90wL4lks5qe8C-gaJpZM4JYS6D .

[tjsavage]

Good catch again. Updated the file to make it super flat. What do you mean by subbing in the light blues?

[FluorescentHallucinogen]

I'm not a designer, but IMHO, flat logo with these new colors looks worse than previous one with old colors. :/

Polymer and Polymer Shop logos are not flat, they are polygonal:

BTW, YouTube Gaming (that uses Polymer) has polygonal logo too:

I think that all Polymer logos should be polygonal. :)

I'll try to polygonize Polymer Element Catalog logo. ;)

[abdonrd]

Maybe we can update the Polymer Starter Kit logo too. :)

[notwaldorf]

@taylor that's perfect; that's what I meant.

@fluorescenthallucinogen I had meant 'flat' as in 'no aggressive elevation shadows', which all the Polymer logos have: each triangle of the polygons is a flat, no-gradient colour.

The YouTube gaming logo was made out of triangles before they started using Polymer, so that's just a coincidence, and I'd rather not use it as an argument it in this conversation. :)

I think making the catalog logo out of polygons will look pretty messy, because it's already got the other back 2 pages, but that's just my 2c.

[blasten]

@tjsavage @notwaldorf we should also update the logo of the PolymerElements org!

@FluorescentHallucinogen would you mind updating your PR to use the logo added recently?

[FluorescentHallucinogen]

@notwaldorf

I think making the catalog logo out of polygons will look pretty messy, because it's already got the other back 2 pages, but that's just my 2c.

I've experimented a bit with polygons in the logo, and you are right, it look pretty messy.

@blasten

would you mind updating your PR to use the logo added recently?

Yes, I plan to update my pull request. But:

1. I don't much like the current updated logo. The colors of the first and second pages looks almost identical. I'll think how to fix it. ;)
2. What about my suggestions for manifest.json (see https://github.com/Polymer/app-drawer-template/pull/13#issuecomment-238022925)?

@abdonrd

Maybe we can update the Polymer Starter Kit logo too. :)

To update Polymer Starter Kit logo we need it in SVG format. Anybody have it in SVG?

[FluorescentHallucinogen]

BTW, why the colors of Polymer logo have been changed (if it is not a secret)?

[notwaldorf]

@FluorescentHallucinogen It was just a colour refresh, to use some of the official Material Design colours, and make the logo symmetric (which it wasn't before).

Please don't try to update the logo for now -- @tjsavage is our PM, and he used the official colours from the new colour scheme. If it needs more work, we can go back to the designers, but I think it's fine for now 😊

[FluorescentHallucinogen]

@notwaldorf, I know where you got the old colors. :stuck_out_tongue_winking_eye:

[FluorescentHallucinogen]

I delete­d my fork and don't know how to update this pull request. (Is it possible at all?) I've created a new PR, see #285.

[FluorescentHallucinogen]

I have some ideas about logo for the new element catalog. ;)

I'm very impressed by idea of hexagonal logos introduced by Node.js.

There are also unofficial hexagon logos:

The idea of hexagons is very simple: hexagons are ideal for gather them like constructor.

Hexagons = NPM modules. Apps = hexagonal grid.

From bees' honeycombs to the Giant's Causeway, hexagonal patterns are prevalent in nature due to their efficiency. In a hexagonal grid each line is as short as it can possibly be if a large area is to be filled with the fewest number of hexagons. This means that honeycombs require less wax to construct and gain lots of strength under compression.

BTW, many custom elements published on NPM. :)

Did you heard anything about HexBin? (http://hexb.in)?

I'm very impressed by idea of hexagonal stickers.

Hexagon stickers tesselate cleanly, as can be seen on the following laptop photo:

There is also an official hexagon sticker specification: https://terinjokes.github.io/StickerConstructorSpec

See also community curated list of hexagon logos: https://github.com/maxogden/hexbin

There is also a Japanese based hexagon-only sticker company called Hexipics (https://hexi.pics), who was started partly due to inspiration by hexb.in. They ship internationally.

Related to the logo:

I imagine it as a cube that consist of smaller cubics. Something like:

Each small cubic is an element (web component), a building block. The whole big cube is an app.

Isometric cube is compatible with hexagonal logo idea. :)

I love polygonal design used in Polymer branding. It's real cool!

Here some my ideas of polygonal cubes. Sorry for bad quality.

Hint: "C" letter means Catalog, "E" letter means Element.

I'm not sure about the size of cube: 3x3 or 2x2. Seems 3x3 with triangle polygons looks pretty messy.

I think it would be more cool if one or more cubics in cube missing:

I think it would be nice to use Polymer branding colors for triangle polygons.

The logo may be not a cube:

[FluorescentHallucinogen]

One great idea just came to my mind!

A 3D tetris block can be used as idea for logo. ;)

I think the following element is the best option.

Something like:

Please note, this is not final version that should be fixed. :stuck_out_tongue_winking_eye:

[notwaldorf]

@FluorescentHallucinogen Thanks for all the suggestions! They're awesome! We're not ready to think about new logos right now, but we'll point our designers to this thread when they're ready to take a look.

[FluorescentHallucinogen]

@tjsavage, could you please publish Polymer Starter Kit and Polymer Shop logos in SVG format?

[FluorescentHallucinogen]

@notwaldorf, https://beta.webcomponents.org is live! What about the logo that I suggested? ;-)