Published on | Prototyping: From UX to Front End — Medium Shivani Chakrachhattri

How many times have you been to a user experience/ app development discussion and hear everyone talking about material design? It is in these meetings, you came across contrasting views and eventually you end up at https://material.io/ wondering how best your clients can savour your application. It was exactly one of those moments when I decided to actually re-create the design approach which led to material design concepts. This resulted in the construction of a few examples. The analog alpha-icon range.

Watch Making material design, this video contains behind-the-scenes look while building this Google’s visual framework.

Material design approach towards icon design is inspired by the tactile and physical quality of material. Each icon is cut, folded, and lit as paper would be, but represented by simple graphic elements. The quality of the material is sturdy, with clean folds and crisp edges. The matte-like finish interacts with light through subtle highlights and consistent shadows. — guidelines, material.io

Before we start, here is how each component is positioned.

It will also help educate your eye to recognise the underlying structure of logo designs pertaining to finish, material background, material foreground, color and shadow. Image taken from material.io.

Here on, you will see all 26 alphabets in the physical prototype form with lighting study. Product icon grid has been used for proper positioning/standardising and clear understanding.

Above will give you multiple ideas of approaching typo-icon creation and a sense of how it really evolved from tangible.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Alphabet Analog Icon MaterialDesign was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Alphabet Analog Icon MaterialDesign

Cool stuff, every week

More Articles