Family
of Eateries

March 2023

Figma / HTML / CSS / JavaScript

The aim of this project was to create an app for a Family of Eateries that hosts 3 restaurants. The app could be used to look at the menu, daily specials and make a reservation. This app is a prototype that can be built upon to introduce functionality.

Live Project

Project
Overview

The project enhances a web app design with interactive features using jQuery and TweenMax. It animates the splash screen, smooths transitions to the landing page, and enables seamless navigation between restaurant sections.

Clicking logos dynamically loads related sections, while sub-navigation icons ease transitions. Reservation submission triggers a confirmation modal, and a hamburger menu in the header reveals options like selecting a new restaurant or learning about eateries. Experimentation with transitions adds uniqueness, ensuring an engaging user journey.

The
Process

The process involved developing prototypes and designs for a single restaurant before moving on to the other two. The app was designed and prototyped in Figma and then coded with HTML, CSS and JavaScript. Below is the design for one app.

The
Final Product

The final demo app was successfully created with animations using the Greensock 3 Animation Library. It features 5 distinct screens - The home page, menu page, specials page, reservations page and reservation confirmation page.

To view the project click on the link below.

Live Project