Web Design/New Structure

This is a temporary page for brainstorming the idea for an improved course structure. If people think it's a worthwhile restructure, then we can eventually make each level a separate page.

Web Design New Structure
This page is part of the Web Design project.

The idea is to restructure the course into Levels rather than topics, where each level is achievable within a 2-3 week timeframe, builds on the previous level and includes a variety of technical, communication and multimedia skills. Hopefully this will provide more definite timeframes for progressing through the course, while at the same time allowing flexible learners to negotiate their own pace.

Please feel free to add/delete/restructure ideas here or on the blog post so we can build a better course!

Level 1

edit

Summary: Creating your first HTML and CSS web page and get some help uploading it!

Timeframe: 5-7 working days.

Overview of Learning: Basic HTML tags (<h1>, <p>, Headings, paragraphs,) as well as start using divs. Interviewing the client, cropping photos, reviewing a design.

Technical Activities:

Communication Activities:

  • Create your own blog and introduce yourself!
  • Research and explain what you think are the 3 most important questions to ask a client when designing a site (rephrase).
  • Interviewing Sarah for Sarah's notecards site.
  • Activity on creating specific goals for Sarah's Notecards website
  • Creating your first TODO list! (Get used to them!)

Design Activities:

Level 2

edit

Summary: Build on HTML skills with DOCTYPES and validation, tables, forms.

Timeframe: 10-12 working days

Technical Activities:

  • Adding DOCTYPEs to your web pages! Read the w3schools XHTML HowTo and then apply this to Sarah's notecards)
  • Validating Sarah's Notecards.
  • Installing Firefox toolbar and using validation tools
  • HTML/CSS Challenges 3, 4 and 5 - Basic Tables, forms and Image maps.
  • Integrate a Listomatic menu list into a page of yours
  • CSS Challenge 3 - A 2 column layout
  • Create a blog post explaining the difference between a block-level and inline element, using examples.
  • FTP permission and transmission modes
  • Sarahs Notecards Redesign This project will pull together lots of the learning to date and provide an opportunity to demonstrate what we've learned so far.

Communication Activities:

  • Write 2 user scenarios for your small website project.
  • Create very simple style guide for your small website project.
  • Write review on your blog of one HTML/CSS intro tutorial that you have really liked so far explaining why. Remember that your target audience who will read your review might not even know what CSS stands for!
  • Analyse a variety of client surveys and start collating your own.
  • Using your small website project in retrospect, setup a project and work schedule using Basecamp or MS Project that reflects the work that you did for the site.

Design Activities:

Level 3

edit

Summary: Build on CSS skills working towards layout with CSS. Begin learning more specifically about Accessibility and Usability. Introduce Javascript events.

Timeframe: 10-12 working days.

Technical activities:


Communication Activities:

  • Create competitive analysis as part of Design Proposal 2.
  • Create a bloglines account and start reading each day!
  • Start setting milestones in Basecamp/Ms Project
  • Start learning about website accessibility. Create a checklist of Accessibility issues using the WC3 guidelines.

Design activities:

  • Start learning multimedia techniques for making web sites accessible- list software appropriate in creating an accessible web site.

Level 4

edit

Summary: Continue learning more javascript events, introduction to XML, more CSS challenges, time management plans, working toward client interviews, testing for accessibility.

Timeframe: 10-12 working days

Design Activities:

Technical activities:

  • Continue learning javascript events [getting to know your window]
  • CSS Challenge 3
  • Introduction to XML with SVG activities (XML Challenges 1, 2 and 3)

Communication Activities:

  • Develop a client survey
  • Learn and practice client interview 1: Obtaining client specifications
  • Conduct accessibility testing for 3 popular websites and document the results
  • Make a time management plan [using Basecamp/MS Project]
  • Begin documentation for client interviews/client projects

Level 5

edit

Summary: Creating RSS feeds, more javascript events, ethics and copyright, documentation

Timeframe: 10-12 working days

Design Activities:

Technical activities:

Communication Activities:

  • Research copyright issues to participate in Copyright trivia
  • Ethics of web development- Develop a code of ethics for yourself as a web developer
  • Make a checklist of documents needed for the client project report
  • Conduct a client interview2- Presenting a prototype: learning and practicing interviewing techniques

Level 6

edit

Summary: Getting sign-off for your prototype, a first look at useability and continuing development of some technical skills in the background.

Timeframe: 10 working days

Design Activities:

Technical activities:

Communication Activities:

  • Setting up a project plan using Application Software (such as MS Project)
  • Successfully present a prototype design to a client (can be role-play)
  • Document prototype meeting in client project report (including sign-off sheets)
  • Develop a useability test (based on a template) and test against an existing web site

Level 7

edit

Summary: Creating your own tutorial site: a web-programming intro, running your own usability test for your site and continuing to develop some technical skills in the background.

Timeframe: 10 working days

Design Activities:

Technical activities:

Communication Activities:

  • Prepare, execute and document your own sites useability test.

Level 8

edit

Summary: Compiling your final client report

Timeframe: 8 working days

Design Activities:

Technical activities:


Communication Activities:

  • Compile your final client project report (this should include: ? Site overview, Goals, Target user Scenarios, Competitive Analysis,... )

Level 9

edit

Summary: More on Dynamic sites

Timeframe: 10 working days

Design Activities:

Technical activities:

Communication Activities:

  • Working through Adobe's excellent series stepping you through the information design process, and applying to a client site:
  1. Information Design - From Interview to Content
  2. Site Design - Site structure, navigation and usability.
  3. Page Design - Layout grids through to prototype.

Note: You may find that you have already done many of the tasks outlined in these tutorials in your client documentation. Use the tutorials to pull together your knowledge of IA and identify the gaps where your documentation needs to be updated.

Level 10

edit

Summary: More on Dynamic sites

Timeframe: 10 working days

Design Activities:

Technical activities:



Level 11

edit

Technical activities: