Foundation Site: Iconography

[sabrinang]

Description

Audit our icons and examine where we can align styles. Mockup ideas and recommendations and collect feedback. After successful review, we can prepare to clean up our icons or make new ones for implementation and document them.

Icon system may include:

• in-line icons glyphs for text and buttons (before, after)
• small icons for image text mini component
• large icons for image text component
• mozilla festival spaces/experience icons / internet health icons
• UI functionalities (form validation, favs etc.)
• animation? motion?
• hover states, interactive state

Design

• size (small, medium, large)
• icon grid
• shape
• fill style vs outline style
• stroke cap (round, square)
• stroke angle and curves
• corner radius
• margin and depth
• colors (dark theme)
• visual density, detail and fidelity
• emojis???

Application

• document design tips/template and usage best practices

Links to audit and reference

https://design.firefox.com/photon/visuals/iconography.html
https://mozilla.github.io/foundation-icons/

http://foundation.mozilla.org/
https://foundation.mozilla.org/en/privacynotincluded/
https://internethealthreport.org/
http://mozillafestival.org/
https://www.mozillapulse.org
https://www.mozilla.org

cc: @kristinashu @sabrinang @natalieworth @beccaklam @mmmavis

[sabrinang]

Iconography audit in google slides (slide 63-70)

[sabrinang]

@natalieworth I think in some of your new pulse and donation footer UI work you are experimenting with some iconography? let's coordinate

[sabrinang]

I've made an update to abstract with updated icon progress so far.
I created an icon grid for:

• X-Small (12px)
• Small (24px)
• Medium (48px)
• Large (96px)

Icon Style
Border: center

Width: 2
 (0.5 for x-small icons)
Ends: round cap
Joins: round
Corner radius: 2 or 0

Next step to mockup icons in-line with text should be iterated upon next so I can see how the corners and caps look with Zilla Slab or Nunito Sans in context.

@kristinashu @natalieworth @beccaklam Please share any feedback on style, visual metaphor and upcoming icons that would be needed. It'd be great if you can test these out in mockups as well if they apply.

@mmmavis I'll also be reaching out again how to prepare this for implementation and any feedback is appreciated at this point.

[sabrinang]

Reference: Some small icons were adapted from https://feathericons.com/

[natalieworth]

Hey @sabrinang I used your icons for the Pulse page here https://redpen.io/p/pwa30a89c875d0d841

I think it looks nice!!

Just making a note too that we may need 'small' sizes for the social icons within the footer in order to streamline and make sure everything is the same size. I think currently they only exist in extra small, but I can update when I get time. :)

[natalieworth]

added our footer icons as 'small' size in the iconography section (style guide)

[natalieworth]

@sabrinang I think you covered all the icons that we need and they look great! I think the sizing seems to be working to. I think we can close this ticket and open a dev/implementation tic when we get time over the next few weeks?

[sabrinang]

For sizing, I've been testing them in MozFest mockups before and after buttons:

and have been scaling down the 24px small to 16px to fit

In my branch I also added some x-smalls for youtube, medium and mail and white versions for them:

but I also ended up scaling them up to 24px instead of 12px cause they were too small. So I'll need to remake them as small icons

[sabrinang]

Organized the sketch file a bit more and we can continue to refine and test icons, for example for external links:

Documented the bulk of what we have on https://foundation.mozilla.org/en/docs/brand/design/iconography/

@natalieworth I think we can close this ticket too and continue to add colour variants and refine as we need or use them.