P01: Process

Description

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

All code must be your own.

Due

Before your lab time on Jan 25.

Worth

10% of your final grade.

Instructions

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

Starting Jan 4

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 Jan 11 lab:

Below is a breakdown of deliverable categories which can help you decide what level of deliverable you would like to aim for, and how to achieve it. The categories are exceeding, meeting, or approaching our expectations.

:D (Exceeding expectations) :) (Meeting expectations) :| (Approaching expectations)

In addition to meeting expectations (outlined to the right):

  • Three (of the five) tasks are specific to your company.
  • Brand definition further defines identity of customers (i.e. quick personas) or brand components are exploring relationships between components (i.e. type/colour/imagery combinations).

One HTML document illustrating:

  • 5 tasks including one which is specific to your company.
  • 5 user-flow wireframe sets at a medium fidelity (one set per task, minimum).
  • 1 basic brand definition; answering the required questions.
  • 1 set of brand components; including the required items.

No HTML document provided, with deliverables shown in other mock-up applications.

  • Less than 5 tasks and/or no task specific to your company (i.e. find a product, pick a product are not unique).
  • Less than 5 user-flow wireframe sets and/or wireframes are low fidelity.
  • 1 basic brand definition; answering the required questions.
  • 1 set of brand components; including the required items.

Starting Jan 11

  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 Jan 18 lab:
:D (Exceeding expectations) :) (Meeting expectations) :| (Approaching expectations)

In addition to meeting expectations (outlined to the right) user-flow wireframes demonstrate effective consideration of the different constraints of each device/platform (i.e. scale of display, interaction methods).

One HTML document illustrating:

  • 5 user-flow wireframe sets at medium fidelity (per device).
  • 1 refined brand direction demonstrating the relationships defined in the brief.

No HTML document provided, with deliverables shown in other mock-up applications.

  • Less than 5 user-flow wireframe sets (per device) or wireframes are low fidelity.
  • 1 refined brand direction demonstrating the relationships defined in the brief.

Starting Jan 18

  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 Jan 25 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, branding, user flow, and interaction (4pts)