A large view of the homepage as the hero for the case study

UI Design

Plates

2017

CLIENT

Self Initiated Project

Designing the UI/UX for a sleek yet traditional website that provides seven unique recipes each week.

The initial concept of Plates was inspired by what Unsplash used to be — a select few photos uploaded each week of the highest quality. As Unsplash grew in popularity (and quality) the new photos added became more frequent, ultimately becoming what it is today; the go-to for designers like myself who are looking for some high quality, royalty free images to use in their designs.

Following in that same vein, Plates provides a few recipes per week across set categories for people, anybody, to cook. There’s also an added emphasis on nutrition to demonstrate how recipes aren’t just randomly selected, but carefully curated to ensure they’re optimally healthy.

I’m really interested in healthy food & meal prep so I often scroll through Instagram liking pictures of the amazing food that the rest of the world captures. But what was super interesting to me was how good food looked when it’s presented on a plate. Why is that so beautiful to the eye? Is it because it’s encompassed in a circle? Is it the unity of colours and shapes working in harmony to create an “offering” of sorts? Perhaps it taps into our ancestry when food was much harder to come by, so having it “offered” to us is a privilege deep within our subconscious. I wanted to design something that paid homage to this concept, so Plates was born.

Introduction

While designing the Plates website I wanted this to explore how the visual impact of circles combined with the clever composition of a plate of food can be one of the most aesthetically pleasing sights to the human eye. We have always found contoured lines far more eye-catching than straight, angular lines and it’s never really understood why this is a preference.

There are a variety of possibilities such as it’s dominant presence within nature driving it’s meaning within culture, specifically money, art, architecture and religion. If we look at the psychology of how food is presented to us it’s not just about what’s on the plate, it’s about how the plate is presented to us. Food can be it’s own expression, from the colour, texture & shape of food, to the composition & visual hierarchy; in many ways, a plate can become it’s own art-form.

A table of delicious looking breakfast food

A healthy dish of rice, tomatoes & beans

choose a plate

There are 7 meal categories spanning 7 days - that’s one meal per day. This was inspired by Unsplash at a time where they’d carefully curate their photographs and release a small batch per week. To immediately grab the attention of the visitor, the site presents them with a random plate of the week from one of the seven categories. Clicking on the left and right plates will move them along their respective directions, while clicking one of the categories below the plate will present that week’s recipe from that category.
Additionally, visitors can randomise a plate which selects any type of plate — including past plates — for those who want to mix it up a bit.

Due to the importance of displaying the entire plate, the style of the photographs became a strong part of the brand, placing an emphasis on the top-down, full plate photos. It wasn’t just enough to mask an image inside a circle, I wanted each plate to have presence in a way that the visitor could almost touch and smell the food through the screen.

styling

I wanted to reflect the concept of Plates within the typography; user created, carefully curated & beautifully displayed. Both typefaces help represent the origin of each recipe in that it comes from an individual who’s created it themselves — it’s completely original with it’s own heritage.

Kaushan Script was used primarily for the recipe title because it’s organic enough to feel hand-written, yet sleek enough to avoid falling into the hipster/ shabby chic type of vibe that’s so popular. Recipes essentially have their own heritage and to compliment the traditional vibe I found Bitter — a traditional serif typeface that has sleek lines and curves on it’s harsher angles. Bitter consists of three weights: regular, bold & italic versions — perfect for the indecisive designer!

I decided to keep colour to a minimum and really just have one dark and one light colour that ran throughout each page, whilst the two brighter colours I used are primarily for decorative(orange) or affirmative (green) purposes.

A stylesheet for the various styles used throughout the design

Choose your plate

Once the user has selected a recipe, they can either click on the plate in the middle or scroll down and the associated imagery will move towards the top of the screen.

I wanted to create a seamless transition between the homepage and the recipe page in that scrolling down or selecting the plate will expand the page. The transitions away from the recipe page is significantly different in that it feels like you’re moving to a different part of the site

The view of the recipe information pages

Ingredients, Directions & Nutrition

The first is the ingredients list as this is the first thing people will want to know prior to deciding whether or not to make this recipe. Depending on the amount of effort it takes to acquire them, this is often the deciding factor for many people when choosing a recipe.

The second tab contains the directions and are split into two columns to maximise space and minimise the need to scroll. These can be individually interacted with to tick them off as they user progresses through the recipe.
Finally, the nutritional information contains the amount of calories for that recipe along with a detailed representation of the macronutrients — protein, carbohydrates & fat. By clicking the information symbol the user can see a more detailed view of the macronutrient breakdowns, for instance, the ratio of added sugar in the carbohydrate section or the amount of mono or poly unsaturated fat in relation to the saturated and trans fats. The pie chart is also accessible for users who are colourblind.

About & Past Plates

There are only two other pages on the Plates website which are the About & Past Plates pages. The about page speaks for itself and is a page that’s fixed to the height of the viewport, therefore doesn’t allow a scroll interaction unless the height is changed.

The Past Plates page allows the user to visit the full list of plates from previous weeks and can be sorted using the categories below the header. These categories are toggle buttons to allow the user to select more than one food type which will be displayed in real-time as the buttons are toggled.