WE CREATE BRANDS PEOPLE L♥VE
Share

Iconography Guidelines


Tegra - January 10, 2020 - 0 comments

Iconography Guidelines

Iconography Guidelines 💎

Courtesy of @_ayushjangra_

Icons are designed to be simple, modern, friendly, and sometimes quirky.

Each icon is reduced to its minimal form, expressing essential characteristics.

Let’s discuss the icon anatomy, and layout designed and defined by google material design.

Grid and keyline shapes  System icons are displayed as 24 x 24 dp. Create icons
for viewing at 100% scale for pixel-perfect accuracy

Grid and keyline shapes

System icons are displayed as 24 x 24 dp. Create icons for viewing at 100% scale for pixel-perfect accuracy.

Live and Trim Areas  Live area is the region of the layouot that is unlikely to
be hidden from view (such as when sidebars appear
upon scrolling)
Trim Area is the 2dp of empty space that makes up the
padding surrounding the 20dp x 20dp live area

Live and Trim Areas

Live area is the region of the layouot that is unlikely to be hidden from view (such as when sidebars appear upon scrolling).
Trim Area is the 2dp of empty space that makes up the padding surrounding the 20dp x 20dp live area.

Keyline Shapes  Specihc keylines are present for certain shapes: circle,
square, rectangle, orthogonals, and diagonals. These
basic shapes help unify Google system icons and
regulate their placement on the icon grid

Keyline Shapes

Specihc keylines are present for certain shapes: circle, square, rectangle, orthogonals, and diagonals. These basic shapes help unify Google system icons and regulate their placement on the icon grid

Keyline Shapes - Square & Circle

Keyline Shapes – Square & Circle

Keyline Shapes - Vertical & Horizontal

Keyline Shapes – Vertical & Horizontal

lcon Metrics  1. Stroke terminal
2. Corner
3. Counter area
4. Stroke
5. Counter stroke
6. Bounding area

lcon Metrics

  1. Stroke terminal
  2. Corner
  3. Counter area
  4. Stroke
  5. Counter stroke
  6. Bounding area
Corners  Corner radiuses are 2dp by default. lnterior corners
should be square, not rounded. For shapes 2dp wide or
less, stroke corners shouldn't be rounded

Corners

Corner radiuses are 2dp by default. lnterior corners should be square, not rounded. For shapes 2dp wide or less, stroke corners shouldn’t be rounded.

Stroke  System icons use a consistent stroke width of 2dp,
including curves, angles, and both interior and exterior
strokes

Stroke

System icons use a consistent stroke width of 2dp, including curves, angles, and both interior and exterior strokes.

Bonus — 4 tools that may be useful in your designer way:

Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Related posts

Leave a Reply