Background: Body and Container

I decided that I wanted to have paper and card textured backgrounds to the pages as I thought it would give it more of a sketchbook feel.

Responsive Elements: Rollover Images

For the home page I realised that the paint palette was not suitable on smaller screens as you wouldn’t be able to see the information on the artists. Therefore I decided to use three different images, which I think work well on each screen size. I tried to make sure that each image would be clear to read on each different sizes.

Quiz Page: Interactive Quiz

Resources

I found it difficult to find the exact script which I wanted to use. But I did find this and I thought that it worked simply and effectively for what I needed:

Sketchpad Page: Interactive Canvas

HTML 5 Canvas Tag

For my second page I wanted to incorporate this sketchpad as I thought it would tie in effectively with both the hand drawn theme and child friendly interactive qualities I wanted to produce in the website.

Home Page: Interactive Elements

Paint Palette

For my first page I have designed this paint palette image to use as a background for the rollover images:

Initial Stages: Header and Navigation

Header Designs

I have created header designs for each page. I decided to make the images in Adobe Illustrator, in which I wanted to create this sketch/hand drawn feel.

Content Ideas

Planning

In beginning this project I thought it would be a good idea to have a clear idea about what I wanted to achieve on the website. I decided to construct a plan, in which I have done some rough sketches to show what content I want to include on each page:

Initial Stages – App Website

This slideshow requires JavaScript.

Initial Ideas

Here are some rough sketches for my website, in which I have included, heading, logo, nav, icons/characters and layout ideas. I also did a quick sketch of a Van Gogh self portrait, in which I thought it could be an interesting idea to have an educational element to the website about artists etc. which I thought could tie in well with the interactive drawing and colouring, on the website.

Sketchpads – HTML 5 Canvas Tag

I was interested in exploring this idea of creating an interactive sketchpad to incorporate within my website. However on the websites which I had these functions, they used Adobe Flash, (however as I didn’t know how to use Flash and I had been told that it was becoming out of date ) I decided to look into new functions which HTML 5 could offer and found the Canvas tag, which could perform what I wanted. For my initial research I looked at the following: