The Objective
Food and meal preparation are universally appealing subject matter. Laying out text that includes ingredient lists, cooking instructions and nutrition facts offers a designer the opportunity to create engaging visuals and to tackle typical print-design typesetting issues using HTML and CSS.
The dynamics of food and meal preparation can also offer an interactive designer the opportunity to show off basic video capture and editing skills.
Web sites such as realsimple.com, canadianliving.com, as well as the nationalpost.com and globeandmail.com (in their life / eating and drinking or food and wine sections) are regularly updated to include single Web pages that display the required ingredients and how to make a variety of recipes. These pages also sometimes include videos showing how the food is made.
Project Requirements
- A single Web page that includes three short food-making videos and the text provided.
- Main headline, a sub-headline, multiple sub-headings, body copy, lists and nutrition information.
- Artfully position visuals of raw ingredients and food in the layout.
- It was expected to actually buy the necessary ingredients, follow the recipes and then photograph the food you make for your single Web page layout.
- The project offers the opportunity to art-direct and plan a photoshoot of raw ingredients and prepared food. Think about the setting and all the visual details you can show in the photos.
- Needed to create and include three “Tasty” style videos focused on the making of all recipes.
The Process
Anything that we do from start to finish, and a series of steps take place to complete the task called process, that might be a small or long. To perform the process, we need planning to run that process smoothly in a particular or given time. Like this project, it contains many steps to complete. It contains coding-html, CSS, JavaScript, layout of the website, photography, video shooting and editing etc. Let us see the process step-by-step below.
The Idea
The main idea behind this project was to show the basic skills of coding such as html, CSS and JavaScript with the photography and video editing. It is a project that defines Interactive Media designer.
The Layout
As it is a single page website, so the idea was to make it simple and easy to access by the user. It has fixed nav bar on the top that always stay there for the user to go from one section to another, just by clicking on the name of the section. It is basically divider into 5 sections – Home page, About section and other 3 for each of the Recipes.
The 3 Sections of the website which includes the recipes are also designed in a very symmetric way. Each section describes the cooking and preparing time at first place to let the viewer know how long the recipe will take to cook and how many people can eat it. With a small description of the dish, it has a picture showing the ingredients used with a list of those and a picture that shows a prepared and final dish with a small list of its nutritional value. This layout is done purposely to show the viewer what is used and what it benefits you. After these when viewer make up the mind to prepare it, there are small instruction with a small tip and a video showing all the cooking/preparation process.
The Logo
EASY COOK is the name which is saying everyone to cook food. After thinking a lot, a name was decided to attract and tell people that how easy it is to cook food. Illustrator is the best tool to design the logos and other illustrations, used in the website. Many sketches were made but at the last, the logo with that is a white text written on the pan is finalized. Frying pan is a very common thing used in cooking, so that was a good idea to put it with the text.
The Color Scheme
The colors play most important part in terms of pleasing to the eyes. Red, Green and Brown are the three main colors used in the website.
RED Color is taken from the Salad recipe.
GREEN Color is chosen from Frittatas
BROWN Color is stolen from Brownies
The Photography
Photography was the one of the major parts of this website. If the pictures are not good, people will not like the website and even to cook or try the given recipe. Therefore, Good pictures are one of the main attractions point of the recipe websites.
For this website, it was a tuff task to do photography as you are cooking too. Although it was done in a group of 2 people but still it was a hard task. One was not just photographing the food or ingredients, also putting everything on place in a decorative way in order to looks good to the viewers. For this kind of photography, lightning plays a major role. Without good lightning, the pictures look dull and unattractive even if those are great shots and good platting.
The Videography
Video shooting is almost the same as photoshoot. The only different is you need to put your camera on tripod, so that the video can shoot with the same angle all the way without any shakiness. In this case, while cooking, you must shoot only important and essential part of the video so that view will get bored or even miss any important part of the cooking.
Video Editing is a tricky part of these kind of video as you must be particular about the steps, show everything in an interesting way so that viewer should watch it all the way till the end. Many shots were taken, and few were selected for the final editing.
Tools Used
Illustrator - which is used in drawing logo and other graphic elements.
Photoshop - which is a perfect tool to edit and adjust the quality of the pictures.
After Effects - which make video editing very easy and effective with many other advantages.
Final Outcome
The final version came out very good. The pictures, videos, color scheme, typography, etc. are when put together looks awesome.
Click on the button below to view the real project.
Contact Me
ramands.rd@gmail.com