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

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.

Web Case Study: The Wild Iris

Web Case Study:
The Wild Iris

Responsive website for a Minneapolis-based custom frame shop, hand-coded using HTML, CSS, Javascript, jQuery, and Vue. Eventually this would have been turned into a WordPress theme, which is a more sensible format for a site with inventory and owner updates.

The main goals of the website are to answer FAQs, provide visual examples of the shop’s offered services and previous work, and inform customers about the most commonly ordered moulding.

when

July 2019

Tools

Adobe Illustrator, Photoshop, InDesign, HTML/CSS, Javascript, jQuery, Vue.js

deliverables

keywords

watercolor, friendly, quality, scalable, iris image, elegant

I used a combination of flexbox and CSS grid for the responsive layout. The homepage contains a short intro section as well as descriptions and photos of the provided services.

There are three templates for the inner pages. The material category and the the moulding collection/profile page templates are similar, and there is one very different inner page for each individual moulding.

Wild Iris inner pages on tablet and mobile

I used the Javascript framework Vue.js to create the accordion FAQ menu. Vue was chosen to make it easy to add or edit questions and answers in the future.

Custom Javascript was used to toggle the dropdown menu, flip the arrow on the button, and enhance accessibility.

By checking for a spacebar or enter keypress during keyboard navigation, those would be the only keys that could toggle the menu.

Custom Javascript was used to toggle the dropdown menu, flip the arrow on the button, and enhance accessibility.

By checking for a spacebar or enter keypress during keyboard navigation, those would be the only keys that could toggle the menu.

I also created a couple of items for the shop to print and use. These included a design for the carbon copy invoice and receipt as well as stickers for the back of finished pieces.