Costa Coffee is a well established brand, and so it was no surprise that they had strict brand guidelines to adhere to. I meticulously followed their brand guides, ensuring the app adhered to the form and consistency of the Costa Coffee aesthetic.
Although the client had brand guidelines, it was predominantly focused towards print, and so it lacked certain digital principles such as grid systems, typography and iconography. And so, my first challenge was to develop a flexible and responsive grid system that could be used on a variety of devices, but also translated for other platforms such as Android at a later stage.
I opted to use Lato as the main typeface for the app, it was specifically designed for mobile devices as it maintains legibility at even the smallest of sizes, thus been incredibly flexible.
The colour palette of the app needed to be on brand and so the guidelines for this were followed. The client had no consistent iconography, and so I decided to create a small icon set based on 1px outline and 20px grid system.
Once I had finalised the grid system, typeface, colour and iconography I then moved on to build the 200+ component library which consisted of variations to navigation bars, menu bars, button states and smaller elements such as drop down menus, selectors and input fields.