ahandrewh teaches IAT-235information design

P4: Design and Develop (due December 2)

On this page:

Introduction

In this project you will build a mockup of the site you designed as part of P2 in HTML and CSS with you now being permitted to make use of other visual treatments and your own branding.

This project is completed in groups of two to four.

P4: Design and Develop is worth 25% of your final grade.

This term's context

For P2 and P4 we will be working with the to propose a more usable form for the information.

You are welcome to:

Weekly instructions

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

From November 4 to November 18

Please complete the following:

  1. As a group print the team contract. Bring a printed copy to the next class.
  2. Set up your GitHub repo. Including:
  3. Review your P2/P3 submission(s). As a team discuss what you may keep or need to revise while working on P4.
  4. Determine the visual treatment of elements. You are now permitted to work with your own choice of branding for the project.
  5. Decide how to divide the HTML and CSS work. Build out all of the sections proposed in P2 as HTML files. Do not start this work from exported Figma code, it will be more difficult to build your websites this way.
  6. Once GitHub pages have been set up, push and validate your code. We recommend using the HTML and CSS validator we have set up as it will allow you to do multiple pages at the same time.
Bring to your November 18 class

A URL to your GitHub pages for review in the class.

From November 18 to November 25

Please complete the following:

  1. Ensure you have completed building out all the necessary pages and styling. Aim to have your mockup as close to finished as possible to allow for the best testing and critique in next week's labs.
  2. Validate your HTML and CSS code using our course validator. We have set up as it will allow you to do multiple pages at the same time, though only if they are uploaded to a server.
  3. Test the responsiveness of your website. Use our course responsiveness tester to test your website at a variety of resolutions.
Bring to your November 25 class

A URL to your GitHub pages for review in the class.

From November 25 to December 2

Working with the feedback you receive in the labs, revise your final designs.

Grading rubric

Grading for this project focuses on the final website and code. Please email Andrew with any questions about the rubric.

A B C D/F

Teamwork (4 points):

Team contract has been completed and all weekly teamwork reflections completed (graded individually).

Team contract has been completed and one weekly teamwork reflections missing (graded individually).

Team contract has been completed and two weekly teamwork reflections missing (graded individually).

Team contract is missing and two weekly teamwork reflections missing (graded individually).

Design (8 points):

  • The layout builds a clear relationship between text, image, and interactive elements; we can see clear clusters of content.
  • Interactive elements — such as buttons or links — are always distinguishable from other content as interactive.
  • There is an effective visual unity to the different elements of the design — i.e. text, image, colour, frames, shapes, etc.
  • The layout builds a clear relationship between text, image, and interactive elements; we can see clear clusters of content.
  • Interactive elements — such as buttons or links — are often distinguishable from other content as interactive.
  • There is a somewhat effective visual unity to the different elements of the design — i.e. text, image, colour, frames, shapes, etc.
  • The layout builds an unclear relationships between text, image, and interactive elements, as divisions between clusters of content are unclear.
  • Interactive elements — such as buttons or links — are sometimes distinguishable from other content as interactive.
  • There is an lacking visual unity to the different elements of the design — i.e. text, image, colour, frames, shapes, etc.
  • The layout builds a confusing relationships between text, image, and interactive elements.
  • Interactive elements — such as buttons or links — are rarely distinguishable from other content as interactive.
  • There is little-to-no visual unity to the different elements of the design — i.e. text, image, colour, frames, shapes, etc.

Code (8 points):

The code is human readable, semantic and valid HTML5 and CSS3 with absolutely no errors.

The code is human readable, semantic and valid HTML5 and CSS3 with 1 major error (things we have taught you directly) and up to 4 minor errors (things we have not taught you).

The code is human readable, valid HTML5 and CSS3 with up to 2 major errors (things we have taught you directly) and up to 6 minor errors (things we have not taught you).

The code is not human readable and/or is not valid HTML5 and CSS3 with up to 4 major errors (things we have taught you directly) and up to 8 minor errors (things we have not taught you).

Responsive design (3 points):

  • Content effectively reorganizes between mobile and desktop.
  • Text sizing is always appropriate for mobile and desktop.
  • Content mostly reorganizes between mobile and desktop.
  • Text sizing is mostly appropriate for mobile and desktop.
  • Content reorganizes somewhat between mobile and desktop.
  • Text sizing is mostly not appropriate for mobile and desktop.
  • Content does not reorganize, or reorganizes very poorly between mobile and desktop.
  • Text sizing is not appropriate for mobile and desktop.

Use of git (2 points):

  • Git has been used throughout?
  • The project is accessible through git pages?
  • Git has been used since its introduction in class
  • The project is visible as a published git page (i.e. pages.github.sfu.ca/...)
  • Git has been used since its introduction in class
  • The project is visible as a published git page (i.e. pages.github.sfu.ca/...)
  • There has been use of git starting from the two days before the project was due.
  • The project is visible as a published git page (i.e. pages.github.sfu.ca/...)
  • There has been little to no use of git in the project; i.e. the repository was created within the day before submission.
  • There is no published git page for the project.

Final submission requirements (December 2)

The final submission for P4 is a URL to a responsive mockup of the website in HTML and CSS. Please make sure:

Your project submission is due to Canvas before your class time on December 2.

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.