Sandwich Web Page

Launch Project Project Image

Interactive Story Website

Project Overview

This project involved coding a website that is completely dedicated to a sandwich. This web page should be functional without any errors, and be responsive with a tasty style video embedded in the website. Not to forget, google maps should also be coded into the website where the viewer can find the restaurant alongside a sandwich vector that would come together as the mouse hovers over.

The tasty style video is intended to be around one minute and thirty seconds likewise anyother tasty style video we could find. Furthermore, the video had to be well put together with clear shots of making the sandwich.

About The Project

I chose ’Aamchi Mumbai sandwich. Aamchi is a Marathi word that means our and Mumbai is one of the most popular cities in India.
Mumbai sandwich is a deliciously wholesome sandwich with generous amounts of lip-smacking fresh cilantro-mint chutney and thinly sliced veggies layered between slices of soft bread. This Indian vegetarian sandwich is a hassle-free, all-season snack loaded with the goodness of fresh veggies, making for an immensely gratifying bite.

Colors

One of the challenges I came across was to get the perfect colors for this webpage. At first, I was at a lost for what I could do with these colors because I felt like they were bland but then, I did some research and experimented with several color combinations. And came up with shades of purple, orange, and pale yellow.

Typography

The main typeface family used in the project is “Raleway”, an elegant sans-serif typeface that helps Sandwich Factory convey its values to the consumers. The font face is also efficient with a clean-cut look which makes it easy to read. Beautiful curves and well-rounded corners are suitable for both traditional, as well as modern websites. To create hierarchy and attraction, I have used regular, medium, and bold.

Interactive

One of the main focus of this webpage was interactivity. I’ve used greensock’s gsap plug-in for interaction. When the user enters the page they can hover on the ingredients of a sandwich, and hover function will reveal its nutrition values of it. There is one problem is that you can't have interactivity, such as hover, on the mobile viewport. So I design another graphic for the information.

Tool used:

Launch Project