P01: Process


This project has you practicing a web development process which leads into P02: Company. You will step through sketching, wireframing and coding to develop a style guide for P02.

All code must be your own.


Before your lab time on Sept 29.


10% of your final grade.


There are a number of weeks in which to complete this project, so please make sure to read the instructions below carefully.

Starting Sept 8

This week in the labs you will either receive a type of company or have brought one with you that you will be working on building a website for. You will be designing a website that presents the following information on the company:

The list above is not a list of 'pages' required. It provides an overview of the content required in both P01 and P02. Please also keep in mind that this content should be integrated as appropriate for your product or service. Having a user be able to provide feedback will look very different for a specific product as opposed to a service.

  1. Create a list of five tasks that users would come to the site to accomplish.
  2. For each of the tasks, generate a series of sketched wireframes illustrating how the user may complete the task (a user-flow). Sketches must be of sufficient fidelity that we can understand their content, hierarchy and organization. These sketches should also consider:
  3. Given the company, define the basic branding ideas. These should include:
  4. From your branding ideas, assemble brand components including:
  5. Take all of these materials and embed them in one HTML document.
Due in your Sept 15 lab:

One HTML document illustrating:

Starting Sept 15

  1. For each of your user-flows from last week, create a set of refined user-flow wireframes clearly illustrating what the website structure and key content would look like as the user steps through the task on a:
  2. Working with feedback from this week's lab refine and organize your brand components into a complete direction for the brand. This refined brand direction should illustrate:
  3. Take all of these materials and embed them in one HTML document.
Due in your Sept 22 lab:

One HTML document illustrating:

Starting Sept 22

  1. Create 1 set of sketches illustrating one of your key user-flows for all three devices (smartwatch, smartphone, gaming console). You may use wireframing (i.e. Axure) software should you prefer to, but you are not permitted to use Illustrator, Photoshop, or other 'static' programs that cannot demonstrate interactions. Your screens must include:
  2. Create a style guide that illustrates your brand direction being applied to your website elements. You can download a sample style guide to get you started. Your style guide must include names for, examples of and code for the following items:
    1. Interactive elements:
      • An in-text link
      • The navigation button style
      • A submit and reset button for forms
      • A text input field and a label
    2. Text styling:
      • Three levels of headings
      • A paragraph
      • Bulletted list
      • Numbered lists
    3. Combined elements:
      • Your main navigation
      • A product/service listing
      • Your website grid structure
      • Website colour swatches
  3. Create a citation page that provides links and citations for any materials used in the website that are not of your own creation — for example fonts, images, icons, etc. — using a proper citation format. The citation format is of your choosing, but should be consistent.
  4. Link all three pages together from the styleguide; make sure this navigation is clearly visible.

Final Delivery

deliverables are due to Canvas before your Sept 29 lab and make sure to double-check all your submitted files and URLs to ensure they can be opened. Final submission includes:

Grading Rubric

Your project will be graded on the following criteria, a more detailed rubric is available on the course pages.

  1. Process — Deliverables, weekly checks, quantity and quality of exploration (2pts)
  2. Code — Code validity, code readability, cleanliness of folder structure (4pts)
  3. Design — Consistency, interface and interaction elements (4pts)