Web Case Study: Aretusa Grill
Web Case Study:
Aretusa Grill
Responsive website for a restaurant concept hand-coded with HTML, CSS, and Javascript.
The main goals for this project were to create a responsive menu that’s easy to read, provide some background information on the dishes, highlight the photography and vibrancy of the food, and allow for easier reservation-making on the customers’ end.
when
September 2019
Tools
Adobe Illustrator, Photoshop, InDesign, HTML, CSS, Javascript, jQuery
deliverables
- Logo & brand identity
- Printed menu design
- Website
keywords
bold, clean, Greek/Mediterranean pattern, friendly, scalable
The neutral color scheme ensures the vibrant colors in the photos will stand out; the fonts chosen need to have the necessary language subsets.
The key-style border could be used on its own as another branding element.
Each device’s layout allowed plenty of space for the photos to stand out. The desktop layout was inspired by a magazine spread, and the two columns became one for tablet and mobile formats.
Each device’s layout allowed plenty of space for the photography to stand out. The desktop layout was inspired by a magazine spread, and the two columns became one for tablet and mobile formats.
jQuery was used to make the logo switch to its more compact variant when the user scrolled down the page.
A responsive menu with a clear hierarchy was a primary need. The two-column layouts (entrees and desserts) switch to single column for landscape-oriented tablets. Everything becomes one column for portrait-oriented tablets and mobile devices.
To prioritize reservations, the pop-up modal can be accessed from anywhere on the site. The button in the header on the desktop layout becomes a fixed button at the bottom of the window for smaller screens.
Finally, I included a printed menu in the style of the website; see screenshot below for the InDesign file setup.
