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. More

Initial Stages – App Website

This slideshow requires JavaScript.


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:


Web Design – Lesson 1

In the first session of Creative Web Design we completed an exercise, in which we had to remember what we had learnt in the first year. This included remembering tags, how to set out information in HTML, highlighting the different purposes of HTML and CSS (content and presentation). We then had an introduction of HtML5, in which we looked at five semantic elements for structure:

  • header
  • nav – main navigation e.g about, homepage etc
  • section – the main content of the page
  • aside – sidebar: general information, sub-content
  • article – information that can be transferable ( makes sense by itself)
  • footer