Foodhacks

HTML-Attributes

Illustrator

jQuery

Foodhacks is a school assignment for which I have made a digital cooking book for tablets. In my experience, cooking books / tutorials are not always as straightforward. In order to solve that, I have added stepped navigation, a checklist, guiding illustrations, tips, and a timer. This was also the first project in which I used jQuery.

Each day, there is a new recipe.

Checklists

Users can mark ingredients and tools as checked. The amount of ingredients required can be viewed in the user's desired measuring system.

Steppers

Each step contains just a few lines of text and a big illustration illustrating the action. Users can check their remaining timers from anywhere by clicking the timer button. This button stores the remaining time as an HTML-attribute. When the timer has finished, an alert will appear.

Illustrations

Numerous illustrations have been made in order to visualize the process. Flat colors have been used to make sure the illustrations fit in perfectly with the design of the website.

Logo Design

I have experimented with various logo designs ranging from computer styled logo's to image ones. In the end, I chose a simple circle with the website's name. I found this logo to be very effective and fun.