Demo
A webapp for a family of restaurants and the branding for the three restaurants, Ceviche, Five Vines and Hearth & Stone Bistro.
Overview
The objective of this project was to create branding (logo, fonts, colors) for 3 restaurants, Ceviche, Five Vines and Hearth & Stone Bistro and the subsequent creation of a web app for the family of eateries.
The web app is catered towards being used on smartphones, due to the majority of users preferring reserving seats in restaurants through their smartphones.
Roles
- User Interface Designer
- Front End Developer
- GSAP Animator
Deliverables
- Branding for the 3 restaurants and the app
- Completely designed webapp
- Completely developed front end for the app
- GSAP animations
Project Specifications
- Create logos for the three restaurants based on the brief given.
- Come up with colors that suit each of the restaurants.
- Create a prototype of the web app, such that 3 restaurants have 3 pages, home, specials and reservation.
- Create visually appealing assets for each of the restaurant and use them to design the pages for each of the restaurants.
- Adhere to the created branding to keep all the pages consistent with the restaurant and the app overall.
- Develop an error free and complete webapp.
Process
The process began with finding what the core of each of the restaurants and what they offer and stand for from the brief.
Using these information, I came up with various types of logos and narrowed it down to one that best fit each restaurant. Care was taken to make sure each of the logo were consistent in type, even though they are for different restaurants, it was important to have a commonality between all the logos as they are part of a restaurant.
Once the logos were finalized, I started sketching out the design for the web app. I made sketches for one user-flow and marked the parts that linked to different pages. This was done to make sure the flow is maintained throughout the design and development process and to ensure none of the requirements are missed.
Once the prototype was finalized, I moved on to digitizing the logos and creating brand colors for each restaurant. I also decided the font that would be used in the app. Using these, I started creating the assets for the app.
Once the assets were ready, I started working on putting the design together. Each page was designed with the pre created branding, ensuring consistency.
The assets created, really helped and made the design process much more streamlined and easy. It also helped avoid issues with inconsistency among different parts/components on pages.
Once the design was completed, I moved on to development. The development of this web app was done using HTML, CSS, JavaScript, JQuery and GSAP for animations.
The development of this web app interesting, as I got to work with functions a lot, making it easy to replicate transitions, animations and making the code more clean and streamlined.
Takeaways
The biggest takeaway from this project is the importance of creating assets and components. It showed me how much time I can save if I put in some time in the beginning to create the assets needed.
Moreover, this project showed me the power of animations and how it improves the user experience. Even subtle animations can go a long way in improving the way an user feels about the app/website.
Tools Used
