Digital Design: Foundations of Web Design

17 10 2012

I am coming to the conclusion of teaching my high school elective course entitled ‘Digital Design: Foundations of Web Design‘. The title is borrowed from Adobe’s year long curriculum of the same name. Adobe’s curriculum is comprehensive to say the least, so for my quarter course with these Grade 9 students I cherry picked parts of it to create a suitable and relevant course.

Course Overview

As a quarter course we meet 5 x 45 mins a week. The course begins in the PC lab using Notepad and then moves to the Mac Lab to work in Photoshop, Illustrator and Dreamweaver.


I once had a sub comment on my lesson plan and say ‘Why are you teaching them HTML in Notepad, I did web design in college and we didn’t need to know any of that’.

Maybe so.

1) As an experiential learner myself I know how much a working knowledge of HTML/CSS coding has helped in my web endeavors. Many analogies can be made, the bricks that build the house, the parts that make up the machine…to me, it makes no sense to learn a piece of software without knowing what the code it is writing means. Often, we need to edit that code to tweak what we want. How can we do that if it is a foreign language to us?

2) I LIKE pure HTML/CSS design

3) These days there are many easy ways to start a website, with WordPress, Google Sites, Blogger and the like. However, they are all built on templates that use HTML/CSS, so having a working knowledge is great for understanding how to edit your templates even if you do use CMS.

Course Structure

Weeks 1-4 (Web Design Basics)

  • Use notepad to create basic HTML pages
  • Use notepad to add images to a webpage, create multiple pages and link them together
  • Use notepad to create a CSS file
  • Layout a page using the <div> element
  • Use a page wrapper to center the page
  • Create a navigation bar using a list


  • HTML/CSS quiz after week three (electronic)
  • 1 website designed in week 1/2 using HTML and CSS
  • 1 website designed using <div> tags and with a list used as a navigation bar with appropriate styling in CSS.

Weeks 5-7 (Graphic Design/Intro to Dreamweaver)

  • Research and write about the basic elements and principals of graphic design
  • Use Photoshop/Illustrator to create a nameplate (simply a way to have students begin to use the basic tools in a graphic design package)
  • Have students create a logo (based on a fictional company or one that represents themselves)
  • Have students create a page banner for a website that incorporates the aforementioned logo.
  • Set up a root folder for a site in Dreamweaver, begin to explore the software by adding images, text, CSS rules etc.


  • Written assignment on ‘What I understand about the basic elements and principles of graphic design’
  • A nameplate (png)
  • A logo storyboard outlining plans for design and how it incorporates basic elements and principals of graphic design
  • A logo (png/jpg)
  • A page banner storyboard outlining plans for design and how it incorporates basic elements and principals of graphic design.
  • A page banner (png/jpg)

Weeks 7-9 (Final Project)

The final project is to create a website from scratch using Dreamweaver. Students are expected to be web designers, graphic designers and copywriters. The website is based on a fictional NGO company called Aid for Children. I give them a site map but all page content is created by students.

During the project students will:

  • Follow a tutorial in how to set up their homepage using the <div> element in Dreamweaver.
  • (Some) will design a ‘wireframe’ outlining their preferred layout and implement it in Dreamweaver.
  • Use the CSS panel in Dreamweaver to style their sites.
  • Create a logo and page banner for the NGO (including a storyboard)
  • Use Creative Commons search sites or free stock photography to populate their site
  • Learn how to create a template with editable regions that can be applied to other pages in the site
  • Write all content for the site.


  • Project Diary (completed at the end of each class, shared with teacher via Google Docs)
  • Website hand in (assessment based on Rubric)

Friday is hand in day!

5 good points

Some great things have come out of the course

1) The obvious eye for graphic design that many of these kids have

2) A good proportion of the kids just ‘got’ the HTML/CSS thing and made some really great looking sites with drop-down menus (pure CSS!)

3) This project is easy to differentiate. Students who struggle with the coding can be provided templates, given a code to edit. Others who are advanced can be given additional coding task to complete like drop down CSS menus, advanced layout, embedding widgets, forms, etc.

4) Design transcends the language barrier. I have one student who speaks and understands very little English. However, in her 1:1 ESL sessions the instructor worked on producing the ‘copy’ for the site, which she saved in a Google Doc and then simply copied and pasted into her site once the pages were ready. For the web design, I was there to guide her through the layout and CSS design, and she was able to visually follow tutorials in the graphic design packages to produce in the end a very nice looking site!

5) Students have been introduced to web design and graphic design fundamentals and a range of new software.

Points to improve

  • Including HTML5 !
  • iMacs required an admin password for some of the Dreamweaver extensions for widgets (image gallery etc) that students wanted to use, which slowed down their design process
  • The two week final project is explicitly independent work. Some students lingered too long on the graphic design (which they were comfortable with) I think in fear of approaching Dreamweaver. Perhaps a little more structure and internal deadlines to help the progress of the project.
  • Small groups make this project infinitely more viable from a teaching perspective.

Check out this example of a page banner incorporating a logo, all themed to represent this particular student:

Here’s an example of one of those student projects:



Leave a comment

You can use these tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>