Pancakey is a website I designed and coded in response to a university project brief for a web media class. The task was to plan and build a multiple page website for an existing piece of text.
I chose to design and build a website for a pancake recipe that would eventuate in an interactive step-by-step guide to making pancakes: Pancakey - Pancakes made easy!
Homepage with a pancake icon dropdown menu in the top right
Nutrition page with colourful pie (pancake!) chart
Equipment page showing a visual list of equipment needed, with each item on its own slide in a slider
Ingredients page with individual ingredients listed in a slider;
measuring cup icon in the bottom left corner displays conversion information when the user hovers over the icon
Method page takes the user through the procedure in a step-by-step manner using a slider
Et voilà!
With Pancakey, I aimed to evoke fun and playfulness through illustrated visual imagery, bright colours and quirky text, hence inviting and encouraging potential users to follow the recipe for a lighthearted and fun cooking experience. By visualising and breaking down the recipe into simple and straightforward steps, the website would help guide the user in making pancakes and enjoy the process.
The target audience for this website would be anyone interested in or wanting to make pancakes – regardless of age, gender, occupation, or even skill level. The step-by-step guide will be helpful for amateur cooks, or those who have never cooked or baked before. Even experienced cooks can follow the interactive recipe to remind them of ingredient quantities or certain steps in the recipe. The website would also be useful in cooking with children and getting them interested in cooking with the fun and bright visuals.
Follow this link to my behance page for a video demonstrating how a user would navigate and use the website.
Pancakey was built using only HTML and CSS. Code for the CSS only slider was adapted from a pen by Nick Moreton from CodePen (https://codepen.io/nickmoreton/pen/AsboI).