Milk and Saucer Cat Cafe

Branding + Design + Front End Development

Problem

Brand, design and build a website for a new cat cafe. Patrons can pay a fee to spend time with the cats, and have a cup of coffee. The cats are also available for adoption.

View Website

Branding and Identity

While the cafe itself is ficticious, there are cat cafes popping up in a few places. The hardest part of this project was coming up with a name that wasn’t already in use. Initially, I had decided on The Cat Bistro, but after thinking about the name and polling a few people, I went with the Milk and Saucer Cat Cafe. I thought it was a much better fit. The space is a relaxed
atmostphere and I wanted to convey that through the name as well as the rest of the design.

Design

Since this website was just a one page site, the design was pretty simple. I created low fidelity wireframes in Balsamiq, then brought the design into Illustrator and fleshed out the design and content. The final mockups were created in Photoshop.

Front End Development

Once the mockups were complete, it was time to build a responsive website. The site was built with HTML and CSS and some JavaScript. I was able to use smoothscroll.js to create a smooth scrolling between each section and I used slicknav.js to create a responsive menu.

Conclusion and Reflection

This project was created during my apprenticeship at Bloc. We were to create a product and build the site from beginning to end. Since the project could be anything we wanted,
I decided to take my love of cats to create Milk and Saucer. While there were some frustrations during this build, this was the first project that I coded on my own and I was very excited to see the end product.