Design web & mobile

Cocoa Casa, chocolated website

logo-big

CocoaCasa is a shopping website that I worked on throughout the past year. Focusing on a fictional chocolate seller’s strategy and products, I imagined the company’s identity and made a website out of it. You can check the result here.

Concept

For this project I had a precise planning and followed three main steps: prototyping, designing and coding. The main content was provided and it was my job to present it to help the service stand out. In order to do that, I was free to create a visual identity (colors, logos, typos) and had to imagine a series of logos to illustrate the production steps.

concept

From wireframes…

The first phase of this exercice was to define a purpose. Beeing a shopping website, it seemed logic to me the purpose was to sell products, and get people to subscribe so they come back again. To accomplish this, I wireframed each pages to arrange the elements together and iterated a few times to find the right setup.

wireframe-home@2x

wireframe-products@2x

…to design and code

As a second step, I had to imagine the company’s visual identity to be able to present it in a website. The first step I took was to create a logo for Cocoa Casa because it allowed me to start defining colors, fonts and a general feeling. Of course that same feeling would have to be persistent throughout the website.

logo-process@2x

Next, I applied what I felt was the continuation of the logo to my wireframes. This allowed me to get a first look at the website as a whole and see what was right or wrong to make quick changes.

I also created a series of icons to present the company’s production processes and made variations to use throughout the website.

browser-home@2x

If you haven’t done so already, you can check out Cocoa Casa live.

     Projet au hasard