GrubHub Food Delivery Website
Create a fully responsive modern single page website
The first steps of preproduction I drew up a mind map to brainstorm ideas and crucial elements needed to produce the mood and feel of GrubHub’s brand identity.
I then gathered up all my ideas and began getting creative by drawing up sketches, laying out the information architecture to show where each UI elements should be placed for user friendly experience.
Finally, before developing the website I used Adobe XD to create low fidelity wireframes to confirm the design model of the project.
- Sticky navigation menu that appears again as you reach the second section of the page
- Navigation menu has links that smooth scroll to targeted sections of site
- Smooth parallax effect as you scroll down header section
- To make the website more dynamic I used animations from animate.css library and also some jQuery animation
- High definition images
- Smooth scrolling effect on navigation and buttons
- Zoom effect on images for image gallery
- Contact form you can enter your name, email and message
- Ion icons for high quality styling
- Creating fully responsive website design across multiple devices by applying Media Queries
Young professionals in their 20-30s that live busy lives and are looking for a convenient way to eat healthy meals while being able to maintain their busy schedules.
Elderly couples looking for a quick, safe and contactless way to do their food shopping. As we are in this pandemic, elderly people are most likely to stay at home as they are at more risk.
For simplicity I decided to build a single page website to make it easier for users to navigate. I used a monochromatic color scheme with different shades of green & black being the most dominant colors as I really wanted to make the user feel balance and harmony as well as fun scrolling through the website.
The biggest challenge I faced in this project was using jQuery on the sticky navigation menu. I was having problems with the navigation links disappearing after resizing the screen but after doing some research, I was able to make a quick fix after inserting some conditional statements.