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
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 - Square & Circle
Keyline Shapes - Vertical & Horizontal
lcon Metrics
1. Stroke terminal
2. Corner
3. Counter area
4. Stroke
5. Counter stroke
6. Bounding area
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
System icons use a consistent stroke width of 2dp,
including curves, angles, and both interior and exterior
Thanks for
I hope you enjoyed and learned
something from this post

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 me any feedback by reply or reach me in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *