Iconography of Fashion App

Process of icon making from sketch to vector

Posted on 2016-10-23

Iconography is a very crucial component of app/web design, but they seem to be having lesser importance outside the design community. Icons are the conceptual models which can simplify product functionality. The folder icon is a good example, which indicates the user whether it is empty or it has something in it.

I am going to talk about my experience of designing iconography for one the well know E-Commerce website of India. This was while I was working as a UX Lead at Razorfish, Bangalore.

Conceptualization

In an E-commerce application FAVOURITE icon is the most used icon after the CART icon. Being simplest of all other icons, I started conceptualising this icon first.

The Fashion E-commerce application which I was working for, was well known for their trendy clothing section and hence we all thought of building icons similar to their theme and their logo. I started with the 3 icons which was going to be used in multiple screens - FAVOURITE, BAG and SEARCH.

Icons can be represented as four different types - Similar, Example, Symbolic and Arbitrary.Favourite icon mention in this article is an Arbitrary icon, these types of icons are used when there is an industrial standard representation. Similar example for this type of icons are logout and save. For more details refer Symbol Sourcebook by Henry Dreyfuss and Van Nostrand Reinhold.

 

Vectorization   

Taking their logo structure as a reference, icons were made with a proportion of 1/4th at the upper part and 3/4th at the lower part. Hence, these icons have elongated appearance with rounded corners.

 

After finishing the sketches, it was time for me to vectorise them in illustration. Since all of these icons have the proportionality of 3/4th, Illustrator’s centre alignment was causing improper visual/optical alignment. So we had to manually align icons to improve Area Alignment with respect to the created grid lines.

 

Obviously we couldn't create pixel perfect icons at first instance, it took multiple iterations to  perfecting them. 

Like I said at the begining of this article, Icons can simplify lots of functionality and they play a vital role in an application.