Marguerite Simone
/ HTML & CSS, InDesign, jQuery / By
Logo for Aretusa Mediterranean Grill
Logo for Aretusa Mediterranean Grill

Aretusa: Restaurant Identity+Website

Aretusa: Restaurant Identity + Website

A restaurant concept developed from the ground up, including:

  • Visual identity, branding, content, and a printed menu
  • Responsive multi-page website
  • Hand-coded HTML, CSS, JavaScript and jQuery
  • Custom layouts, interactive elements and embedded maps

My current web workflow uses modern platforms and development tools, but building this from scratch created a strong foundation in front-end development and in translating design into code.

Working beyond the limitations of templates and page builders, editing existing code can streamline the process when a project needs something more customized.

when

September 2019

Tools

Adobe Illustrator, Photoshop, InDesign, HTML, CSS, Javascript, jQuery

deliverables

keywords

bold, clean, Greek/Mediterranean pattern, friendly, scalable

Design and Branding

The neutral color scheme was chosen to let the vibrant colors in the photos stand out. Type decisions were somewhat limited due to the need for multiple language subsets.

The key-style border was created to be used on its own as another branding element.

Branding elements for Aretusa

Website Layout

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.

Homepage displayed on laptop
Homepage displayed on tablet
Homepage and navigation overlay displayed on mobile

Website Layout

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.

Homepage displayed on laptop
Homepage displayed on tablet
Homepage and navigation overlay displayed on mobile

Logo Change

jQuery was used to make the logo switch to its more compact variant when the user scrolled down the page.

Screenshot of the jQuery code to switch the logo
Moving GIF image showing the logo switching to a smaller one when the user scrolls down in the browser

The Menu

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.

Menu page on multiple devices
Soups & Salads portion of the menu displayed on mobile
Entrees portion of the menu displayed on mobile
Sides portion of the menu displayed on mobile
Desserts portion of the menu displayed on mobile
Menu page in a desktop browser
Menu shown on a tablet, oriented both landscape and portrait
Mobile Menu pt. 1 & 2
Menu pages on mobile

Reservations Modal

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.

Responsive pop-up reservation form shown on multiple devices

Printed Menu

Finally, I included a printed menu in the style of the website; see screenshot below for the InDesign file setup.