YCN Student Awards 2013

1

Ella’s Kitchen Greg Ball

YCN Student Awards 2013

2

Ella’s Kitchen Greg Ball

Ella’s Kitchen

Nathan and I chose the Ella’s Kitchen brief as our collaborative creative partners brief.

I decided that i would take on all the digital aspects of the brief and design and build a website to go along with the publication Nathan was working on.

The main thing i had to do in this brief was to actually code the site, but before i could do that i needed to decide on a layout. I thought that engagement was the key thing to design to so i decided that the site would be single pages using the characters Nathan drew.

The main focus would be a page where you could engage with the characters and then it would link to products related to the character. This is good for parents to show children and a good way for children to interact with the brand.

Coding

On this page you can see some of the screenshots from where i have coded the site. These show the code for various elements within the site.

YCN Student Awards 2013

3

Ella’s Kitchen Greg Ball

Edge Animate

Within the brief i experimented with Adobe Edge Animate as i was trying to code some interactive elements into the website.

Edge Animate allows you to create animation and export them in HTML code, i thought intiailly that it would be perfect but it turned out that you couldnt make any of the elements selectable links so it wasnt suitable for what i wanted to do.Nevertheless it was a valuable experience using and learning how to use the software.

YCN Student Awards 2013

4

Ella’s Kitchen Greg Ball

Coding & Using Modals for Interactivity

After not being able to do what i wanted to do in Edge Animate, i decided the next best thing would be to use javascript modals to provide the interactivity.

This meant that the user could click the character and then something would pop down the screen with information and links to products on.

YCN Student Awards 2013

5

Ella’s Kitchen Greg Ball

Website

This page shows the whole finished website.The website can also be viewed in browser by going onto this disk, opening the Ella’s Kitchen Website folder and double clicking the index.html file.

YCN Student Awards 2013

6

Ella’s Kitchen Greg Ball

Website for Mobile Devices

I also mocked up how the websitewould work on mobile devices, this is particularly useful with how many people use these deviced within there homes; it also enables the interactivity to flourish as the clicking is donw by physically touching.