P02: Company

Description

In groups of two, you will continue designing a company website. This portion of the project has you coding out the site and completing a fully functional responsive version of the site.

Please remember that you are not permitted to work with frameworks, but you are permitted to work with JavaScript libraries for this project. In either case, Any code that is not yours must be cited accordingly.

Due

Before your lab time on Jul 9.

Worth

30% 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 Jun 4

A reminder that your company website must satisfy the following content requirements:

  1. As a group, choose one company to focus on. Going forward, you will be working with only one potential company idea.
  2. As a group consolidate your style guide into one document. This should include all the materials required of P01.
  3. As a group set up your dev environment and sync it through git. It should include your consolidated style guide in your files.
:D (Extra exploration) :) (Keeping up) :| (Tough week)
  • 1 conslidated style guide as a webpage, uploaded to your filespace.
  • Proof of synced git repository, with individual branches for your work.
  • 1 conslidated style guide as a webpage.
  • Proof of synced git repository.
  • 1 conslidated style guide as a webpage.

Starting Jun 11

  1. As a group, build out structures for each set of components you require. Remember to:
  2. Having built out your templates, put together all the pages of your website as a group. Focus on:
Due in your Jun 18 lab:
:D (Extra exploration) :) (Keeping up) :| (Tough week)
  • 1 complete set of mostly responsive website pages with some real content.
  • Proof of work in individual branches which have been merged back into the master branch.
  • 1 complete set of somewhat responsive website pages with only placeholder content.
  • Proof of synced git repository, with individual branches for your work.
  • An incomplete set of non-responsive website pages with little placeholder content.
  • Proof of synced git repository.

Starting Jun 18

  1. As a group, collect or develop all necessary content for your website, and make sure to collect citations for anything that is not yours. This includes:
  2. As a group, integrate all your content into your site. Remember that we are only requiring that two products actually exist in your website, and all other listed products link to those two.
Due in your Jun 25 lab:
:D (Extra exploration) :) (Keeping up) :| (Tough week)
  • 1 complete set of fully responsive website pages with all real content.
  • Continued proof of work in individual branches which have been merged back into the master branch.
  • 1 complete set of mostly responsive website pages with some real content.
  • Proof of work in individual branches which have been merged back into the master branch.
  • 1 complete set of somewhat-responsive website pages with little real content.
  • Proof of synced git repository, with individual branches for your work.

Starting Jun 25

  1. Test and debug your website. This should include testing it on:
  2. Update and publish your style guide along with your website. Make sure it includes the addition of any changes made to the original guide, as well as any layouts or structures created since the beginning of P02.

Final Delivery

Final deliverables are due to Canvas before your Jul 9 lab and make sure to double-check all your submitted files and URLs to ensure they can be opened. Delivered should be one URL for a fully completed website, which includes footer links to:

Grading Rubric

Your project will be graded on the following criteria:

Process/Teamwork (6 points)

Grading Focus: Git activity, deliverables, quantity and quality of exploration.

A: Deliverables demonstrate more exploration than outlined in the brief, and git activity shows work through-out the project timeline and an even (50/50) distribution of coding and asset contributions between group members.
B: Deliverables meet the expected amount of process exploration outlined in the brief, and git activity demonstrates work through-out most of the project timeline and fairly even (45/55) distribution of coding and asset contribution between group members.
C: Some of the required weekly deliverables are missing, and git activity demonstrates a slightly irregular and fairly uneven (40/60) distribution of coding and asset contribution (The contribution by this individual was the lesser half).
D/F: git activity demonstrates the majority of the project was completed in the days leading up to the deadline, and/or little to no contribution by this individual.

Code/Development (8 points)

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

A: 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.
B: 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.
C: 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.
D/F: 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 (8 points)

Grading Focus: Consistency, responsive design, interface and interaction elements.

A: In addition to achieving a 'B', the website leverages modern web-design practices (i.e. flexbox, responsive images) to help the user experience between different devices and browsers.
B: The website presents a consistent aesthetic which responds effectively to different user devices and browsers. Interface elements and their affordances cue to interactions clearly.
C: 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.
D/F: 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/UX (8 points)

Grading Focus: Information architecture, effective content, website accessibility and usability (8pts)

A: 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.
B: 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.
C: 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.
D/F: 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.