Little Italy

A restaurant brochure

Adobe XD

Basamiq

CSS

Git

HTML

Invision

JavaScript

Photoshop

Sass

Little Italy is a 6-page business brochure website for a fictional restaurant. The website is built with HTML, Sass, and JavaScript and version-controlled with Git. It showcases simple custom logo, clean and user-friendly layout, and beautiful images to tell the restaurant’s story.

Contact form and Google Maps customized to match the theme are built in to serve additional functionalities for the site.

Planning Process

For this project, I started by creating wire frames then made a Photoshop mockup for each page. By using real images, colours, and fonts, the mockup gave me a more realistic idea of what each page was going to look like after the development process. Using these mockup pages, I built a prototype with InVision as well as Adobe XD. The interactive prototype that has hotspots that are clickable and linked to a specific page, an area within a page, or an external page was helpful for understanding the overall experience of the website even before it was built.

Little Italy desktop home page wireframe Little Italy desktop about page wireframe Little Italy desktop food/drink page wireframe Little Italy desktop contact page wireframe Little Italy home page Photoshop mockup Little Italy food page Photoshop mockup Little Italy InVision mockup screenshot

Colour Palette

#5D8462

#453C37

#EC6b6b

#414141

Design

I had a lot of fun during both the designing and developing process in this project. Particularly, I got a chance to play around with Google Maps. I used Google Maps API to output the map on the page and customized the colour theme of the map using Snazzy Map's styles. Utilizing background images and colour contrast between light and dark allowed me to create a simple but visually captivating website that is easy to use.

Little Italy multiple home page slider mockup Little Italy desktop about page screenshot Little Italy desktop food page screenshot Little Italy desktop events page screenshot Little Italy desktop contact page screenshot

Tablet

Little Italy tablet home page screenshot Little Italy tablet about page screenshot Little Italy tablet menu page button screenshot Little Italy tablet events page screenshot

Mobile

Little Italy mobile home page screenshot
Little Italy mobile menu overlay screenshot
Little Italy mobile drink menu section screenshot
Little Italy mobile events page screenshot
Little Italy mobile events page screenshot
Little Italy mobile contact page screenshot