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 Jun 4.

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 May 7

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 May 14 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 (Extra exploration) :) (Keeping up) :| (Tough week)

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 (i.e. track your pizza delivery, client can 'try' the furniture in their space...).
  • 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 May 14

  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 May 28 lab:
:D (Extra exploration) :) (Keeping up) :| (Tough week)

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).
  • Brand direction is demonstrating how the product website will stand out uniquely in comparison to other similar company websites.

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 May 28

  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

Final deliverables are due to Canvas before your Jun 4 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:

Process (2 points)

Grading Focus: Weekly deliverable checks, quantity and quality of exploration, final deliverable quality.

A: Deliverables demonstrate more exploration both in quantity and quality than outlined in the brief.
B: Deliverables meet the expected amount of process exploration outlined in the brief.
C: Some of the required weekly deliverables are missing.
D/F: Numerous weekly deliverables are missing.

Code (4 points)

Grading Focus: Code semantics, validity, readability, and cleanliness of folder structure.

A: The submission's coding (and code presented in the style guide) is human readable, semantic and valid HTML5 and CSS3 with absolutely no errors. CSS uses a meaningful naming convention, and file/folder structure is clean.
B: The submission's coding (and code presented in the style guide) is human readable, semantic and valid HTML5 and CSS3 with up to 4 minor errors (things we have not taught you). File and folder structure is clean.
C: The submission's coding (and code presented in the style guide) is human readable valid HTML5 and CSS3 with 1 major error (things we have taught you directly) and up to 4 minor errors. There are some minor concerns with the cleanliness of the file and folder structure.
D/F: The submission's coding (and code presented in the style guide) is not human readable, nor valid HTML5 and CSS3 with up to 4 major errors (things we have taught you directly) and up to 8 minor errors. There are major concerns with the cleanliness of the file and folder structure.

Design (4 points)

Grading Focus: Consistency, responsiveness, branding, user flow, and clarity of interaction.

A: The style guide effectively leverages principles of 'atomic design' to construct combinations of elements (i.e. navigation, product/service listing) that effectively respond to different devices. Style guide looks uniquely branded; entirely unlike the template provided. The final sketches/wireframes demonstrate an understandable model of the site's navigation and structure.
B: The style guide presents a consistent aesthetic with clear interface and interaction elements that effectively respond to user interactions. Style guide creates uniquely branded elements but follows a similar structure to the template provided. The final sketches/wireframes demonstrate an understandable model of the site's navigation flow and structure.
C: The style guide presents a consistent aesthetic with some unclear interface and interaction cues that respond somewhat effectively to user interactions. Style guide looks somewhat similar to template provided. The final sketches/wireframes show how navigation will occur, though the structure of the site and navigation flow is unclear at times.
D/F: The style guide presents an inconsistent aesthetic with unclear interface and interaction cues that respond poorly to user interactions. Style guide shows little to no development from the template. Little to no connections are built in the final sketches/wireframes, hindering our understanding of navigation flow significantly.