App Metadata

[bradley-holt]

Create and identify app metadata, such as iconography.

[vabarbosa]

for simplicity and to avoid introducing additional dependencies, where possible, the typography and iconography should adhere to the stack's style guide.

Icons should be consist with those of the design guide:

• Material icons
• iOS System Icons

Typography should be consist with those of the design guide:

• Material Typography
  • Roboto
  • Noto
• iOS Typography
  • San Francisco

[vabarbosa]

@bradley-holt @mmcelaney @glynnbird @markwatsonatx @rajrsingh
i am by no means a designer or an artist but here is a sample idea for an logo/icon.

feel free to suggest improvements or create something completely different.

[glynnbird]

I ended up using some online thing to put a blue background on the Material Design "add to cart" icon:

[isc-rsingh]

Nice except the red X, and the bars suggest a graph, which suggests to me some kind of analytics tie-in. How about simply having squares in the cart?

[bradley-holt]

This is great! My comments/thoughts:

• Does a shopping cart icon imply that this is some sort of eCommerce thing? I think this can be mitigated in the design of the iconography while still using a shopping cart (e.g. with the use of checkmark or other indicator of checking off items).
• Would a checkmark (✔️) rather than an "x" make more sense given the context of checking items off of your shopping list?

[isc-rsingh]

checkmark makes sense to me too

[vabarbosa]

take two:

[vabarbosa]

sample HTML metadata:

<meta name="apple-mobile-web-app-title" content="Shopping List">
<meta name="application-name" content="Shopping List">
<meta name="theme-color" content="#283b4f">
<meta name="description" content="An Offline First demo of a shopping list using vanilla JavaScript and PouchDB">
<meta name="keywords" content="Offline First,HTML,CSS,XML,JavaScript,PouchDB">

[bradley-holt]

This work needs to be documented in a way that can be easily referenced. We also need to audit implementations to ensure that they are using this guide.