ahandrewh teaches IAT-339web design & development

P2: Company (due July 8)

Introduction

Continuing from P1: Process, this project has you coding and designing a functional, responsive version of the microsite.

All code must be your own. No frameworks or pre-processing is permitted for this project. You are permitted to work with JavaScript libraries (i.e. jQuery, Anime.js, etc). If unsure if permitted, please contact your instructor.

P2: Company is worth 30% of your final grade.

Microsite content requirements

The microsite will require the following content:

The list above is not a list of 'pages' required. As we will discuss all this content could appear in one URL or multiple URLs across a website.

Weekly instructions

This project spans multiple weeks. Please read the weekly instructions carefully.

From June 3 to June 10

This week is about getting set up with git and practicing using it.

  1. On June 3 you should receive an email to set up an account on our course Gitlab instance at https://toolbox.iat.sfu.ca/. If you do not receive the email, please email Andrew so he can send you the email again.
  2. Complete the Git exercise and push all your changes to the new git repository you have created.
  3. Add your P1 styleguide to the repository files. Make sure to push your styleguide to the repository as well.
Bring to your June 10 lab

A URL to one git repository containing:

  • The completed exercise.
  • The P1 styleguide.

We will chat about your deliverables in-lab.

From June 10 to June 17

This week is about building out larger templates — putting together the pieces from your styleguide — for the microsite.

  1. Build out templates for the microsite. These are collections of the individual components from your styleguide that will define the structure and aesthetic of the microsite. Remember to:
    • Build responsively from the start. Design and code as if the browser size will change.
    • Use a consistent and understandable naming convention for your CSS.
    • Consider how the content will be structured. You are not required to include actual content yet, but do consider what content you intend to include.
  2. Having built out the templates, build all the necessary HTML files for your microsite. Focus on:
    • If using one HTML file for the majority of the microsite, why will someone want to continue scrolling down? What about the design or content suggests they should?
    • If using multiple HTML files for the microsite, link the files together and consider what is the most usable means of moving between HTML files?
  3. Please push your changes to your git repository.
  4. Please upload your microsite to your SFU filespace.
Bring to your June 17 lab

A URL to your updated style guide. We will chat about your deliverables in-lab.

From June 17 to June 24

This week is for integrating content into your microsite and continuing to ensure your site is responsive.

  1. Collect or generate all content for your site. This includes any images and text you may be using. Keep track of anything that you did not make using citations.
  2. Integrate all the content into your site.
  3. Test responsiveness. Make sure to test the responsiveness of your site once the content has been integrated. At minimum test between 320 to 1280 pixels in width to ensure the site still renders and functions correctly.
  4. Please push your changes to your git repository.
  5. Please upload your microsite to your SFU filespace.
Bring to your June 24 lab

A URL to your updated site. We will chat about your deliverables in-lab.

From July 8 to July 8

This week is all about testing and debugging your website.

  1. Test on multiple browsers:
  2. Test on Multiple devices:
    • Laptop,
    • desktop,
    • tablet,
    • smartphone,
    • TV,
    • gaming console,
    • etc. (use whatever is available to you)
  3. Test at multiple resolutions:
    • 320 pixels wide
    • 1280 pixels wide
    • 1280 pixels wide by 320 pixels tall
    • etc. (use any resolutions you can)
  4. Please push your changes to your git repository.
  5. Please upload your microsite to your SFU filespace.

Grading rubric

Your project will be graded on the following criteria:

A B C D/F

Code (10 points): Code semantics, validity, readability, and cleanliness of folder structure.

Code is human readable and uses a sensible naming convention (i.e. for files, classes or id's). Semantic and valid HTML5, CSS3 and JS (if applicable) with absolutely no errors. File and folder structure is clean.

Code is human readable and uses a sensible naming convention (i.e. for files, classes or id's). Semantic and valid HTML5, CSS3 and JS (if applicable) with up to 4 minor errors (things we have not taught you). File and folder structure is clean.

Code is human readable and uses a somewhat problematic naming convention (i.e. for files, classes or id's). Valid HTML5, CSS3 and JS (if applicable) 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.

Code is not human readable, nor valid HTML5, CSS3 and JS (if applicable) with 4+ major errors or more. There are numerous concerns with the cleanliness of the file and folder structure.

Design (10 points): Consistency, responsiveness, branding, and clarity of interaction.

In addition to achieving a 'B', the website leverages modern web-design practices (i.e. grid layout, responsive images) to help the user experience between different devices and browsers.

The website presents a consistent aesthetic which responds effectively to different user devices and browsers. Interface elements and their affordances cue to interactions clearly.

The website presents a somewhat consistent aesthetic which responds effectively to different user devices and browsers. Interface elements and their affordances cue to interactions somewhat clearly.

A lack of clear or consistent aesthetic direction which responds somewhat effectively to different user devices and browsers. Interface elements and their affordances do not clearly cue interaction points.

Content and experience (10 points): Information architecture, effective content, website accessibility, and usability.

In addition to accomplishing 'B', the website makes use of purposeful collections of content (i.e. image, text, calls-to-action, etc) to help the user drive deeper into the website. The website makes effective use of semantic markup and ARIA landmarks (if needed) to create an accessible experience for assistive devices.

There are clear and effective connections built between different sections through use of well structured and effective content and interface elements. The website demonstrates a fairly unified and accessible experience (ie. aesthetics, interactions) that would instill a sense of trust in the intended user. All content required by the brief is included.

Some of the connections between sections are somewhat unclear, or interface elements and content lead to potential user confusion. The website demonstrates a somewhat unified and accessible experience (ie. aesthetics, interactions) that supports the user sufficiently to complete a purchase. Slightly less content than required of the brief is included.

The content and interface elements confuse or entirely misdirect the user. The website demonstrates a non-unified experience that has little support for accessibility (ie. aesthetics, interactions). Significantly less content than required of the brief is included.

Final submission requirements (July 8)

The final submission for P2 is:

All are submitted as a URL (or set of URLs) to Canvas.

Your project submission is due to Canvas before your July 8 lab.

Please make sure double-check all your submitted files and URLs to ensure they can be opened. We want to avoid late or problematic submission penalties whenever possible.