In this project, I want to design an illustrated collection of cocktail using Google Material Design language, because I find mixing drinks, a very emotional event, can also be viewed in a formulistic way. In this point of view, the MD design language is a perfect match for the concept, for they are both a combination of exciting art and orderly rules.


Mixing drinks is often seen as an art by many people, while I find it can also be viewed in a formulistic way. All the cocktails can be interpreted into a formula. First we choose a vessel, then we pour into base liquer, then modifying liquerers. The mixed drink is then catalyzed by some kind of mixing techniques. Finally, it is added with certain kind of ice and garnishes. I find it interesting to create a stylized system, on which any cocktail can be accurately and excitingly visualized.

App Icon 

I would like to do the work in a Google Material Design style, for that I think the MD visual system shares some common factors with this concept. They are both a combination of exciting art and orderly rules.


I designed a series of icons for all the elements you will meet when creating cocktails, including 12 vessels, 3 kinds of ice, and tens of edible and inedible garnishes. Most of the classic cocktails and whatever drinks you create can be visualized with these elements.

Explore the Classification

Explore the world of cocktails by different categories, including base liquer, color, taste, strength, mood, and place of origin.

Cocktail Specs

A special page for each type of cocktail contains the drink's image, ABV(alcohol by volume), ingredients, mixing processes, and origin.

Search & Filter

Search the keyword among the name, ingredients, and origin of all drinks in the library. You can also filter the search results by all kinds of factors.

Create New Drink

You can create a customized page for any new drinks you created. All the items needed are arranged in a considerate order, and integrated in an assembly-lined page.