ah teaches web design and dev

P1: Process

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

All code must be your own, no frameworks or pre-processing is permitted for this project.

Due

Before your lab time on Sept 28.

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 Sept 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. For P2 you will be designing a website that presents the following information on the company. Keep these in mind as you work on P1:

  • company updates/events
  • about the company
  • how to contact the company
  • a multi-product or multi-service listing
  • one product or service detailed view
  • the entire process of purchasing a product or service
  • appropriate means for the user to provide feedback on a product or service

The list above is not a list of 'pages' required. It provides an overview of the content required in both P1 and P2. 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 the HTML elements for a style guide that will later illustrate your brand direction being applied to your website elements. You can download a sample style guide to get you started. Your style guide for this week must include names for, examples of and code for the following items:
    1. Interactive elements:
      • An in-text link
      • A navigation link
      • A submit and reset button for forms
      • A text input field and a label
      • A radio button input field and a label
      • An image as a link
    2. Text styling:
      • Four levels of headings
      • A paragraph
      • Numbered lists
    3. Combined elements:
      • Your main navigation (i.e. a collection of the 'navigation link' items)
      • A product/service listing (i.e. a product name, image, cost, link to detailed description, etc)
      • A payment form (i.e. a colection of text and radio inputs, with labels, and a submit button)
      • A 'checkout cart' with at least two items (i.e. product names, costs, total amount, etc)
    As odd as it may sound, do not style the style guide this week. Focus on well-structured semantic HTML. Next week we will worry about styling.
  2. Given the company, define the basic branding ideas. These should include:
    • What does the company do, or offer?
    • Who is the company to potential customers? (as a person)
    • Why might this company entice someone to purchase a product or service?
  3. From your branding ideas, assemble brand components including:
    • Fonts
    • Colour palettes
    • Potential imagery, and, or, art direction
  4. Take all of these materials and embed them in one HTML document.
Due in your Sept 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 extra exploration, keeping up, or tough week.

:D (Extra exploration):) (Keeping up):| (Tough week)

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

  • 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:

  • A valid HTML5 collection of all style guide elements
  • 1 basic brand definition; answering the required questions.
  • 1 set of brand components; including the required items.

One HTML document illustrating:

  • A mostly valid HTML5 collection of most style guide elements
  • 1 basic brand definition; answering the required questions.
  • 1 set of brand components; including the required items.

Starting Sept 14

  1. Working with your style guide from last week you will now apply CSS to your style guide to ensure the following:
    • Clear type hierarchies
    • Clear cues to interaction points
    • Clear interaction point response (i.e. when I hover over a link, it changes)
    • Effective structure to clarify relationships of elements
  2. Working with feedback from this week's lab refine, organize, and apply your brand components to your style guide. This refined brand direction should help illustrate:
    • How font combinations will appear on the site (i.e. in headings and paragraphs vs. navigation)
    • Where colours are used, and how they are used to communicate information or interaction.
    • The types of imagery (icons, photos, etc) and their intended applications.
  3. Take all of these materials and embed them in one HTML document.
Due in your Sept 21 lab:
:D (Extra exploration):) (Keeping up):| (Tough week)

In addition to keeping up (outlined to the right):

  • Style guide demonstrates a strong brand direction that already shows how the website will stand out uniquely in comparison to other similar company websites.

One HTML document illustrating:

  • A valid HTML5 and CSS3 collection of all style guide elements demonstrating clear type hierarchies, interaction cues, and relationships between elements.
  • Brand direction as applied to the style guide shows a somewhat unique visual approach in comparison to other similar company websites.

One HTML document illustrating:

  • A mostly valid HTML5 and CSS3 collection of most style guide elements demonstrating type hierarchies, interaction cues, and relationships between elements with some concerns in clarity.
  • Brand direction as applied to the style guide shows a common visual approach in comparison to other similar company websites.

Starting Sept 21

  1. Working with the existing elements within your style guide and the means of layout covered in lecture and lab this week, build a collection of responsive structures to add to your style guide as templates. Please make sure to create the following:
    • A product or service listing web-page; including navigation, and multiple product listing
    • The checkout web-page; including navigation, cart, and payment form
  2. Add citations that provide 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.
  3. Link all web-pages together from the styleguide; make sure this navigation is clearly visible and usable.

Final Delivery

Final deliverables are due to Canvas before your Sept 28 lab and make sure to double-check all your submitted files and URLs to ensure they can be opened so that no late or problematic submission penalties are assigned.

The submission is a style guide web-page including citations and links to templates, submitted as a URL to Canvas.

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.
  • 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.
  • 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.
  • 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.