P01: Process


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

All code must be your own.


Before your Week 5 lab (Oct 3).


10% of your final grade.


There are a number of weeks in which to complete this project, please pay attention to what is required from you from week to week.

Sept 12 (Week 2)

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:

This list is not a list of 'pages' required. It provides an overview of the content required in P01/P02.

  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.

Sept 12 (Week 2) deliverables — due in your Sept 19 (Week 3) lab:

One HTML document illustrating:

Sept 19 (Week 3)

  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:

  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.

Sept 19 (Week 3) deliverables — due in your Sept 26 (Week 4) lab:

One HTML document illustrating:

Sept 26 (Week 4)

  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. 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 listing
      • your website grid structure
  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

Final deliverables are due to Canvas before your lab time on Week 5 lab (Oct 3). All items should be clearly labelled with your names and please remember that professionalism in your submission is important. Grades will be deducted for submissions lacking in required information or quality.

Grading Rubric

Your project will be graded and weighed according to the following criteria. A more detailed rubric is available in the course pages.

  1. Process (2pts)
  2. Code (4pts)
  3. Design (4pts)