ahandrewh teaches IAT-235information design

P4: Design and Develop (due April 8)

Introduction

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

This project is completed in groups of two or three.

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

This term's context

For both P3 and P4 we will be working with the Embark Sustainability Society to propose an alternative to their Find Your Climate Community flowchart. This alternative should clarify the information provided through an interactive website.

You are welcome to:

You are expected to work within Embark's branding for this project. There is an Embark Sustainability style guide available for use.

Weekly instructions

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

From March 11 to March 18

Please complete the following:

  1. As a group complete the team contract. Bring a printed copy to the next lab.
  2. As a group join a P4 Group on Canvas.
  3. To set up FTP, email Andrew or message over course chat with each team member cc'd. Andrew can create you a server space for your team to upload your files to. This will be important for being able to test your websites.
  4. Review your P3 submission(s). As a team discuss what you may keep or need to revise while working on P4.
  5. Determine the visual treatment of elements. You are now permitted to work with more visual treatments within Embark's branding. There is an Embark Sustainability style guide available for use.
  6. Decide how to divide the HTML and CSS work. Build out all of the sections proposed in P3 as HTML files.
  7. Once FTP has been set up, upload 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 March 18 lab

A URL to your uploaded website for review in the labs.

From March 18 to March 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 March 25 lab
  • A URL to your uploaded website for review in the labs.

From March 25 to April 8

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

Embark members will likely be joining in for an in-lecture critique in April 8.

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 (7 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 (7 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).

Consistency (4 points):

Visual treatment of elements — headings, links, buttons, images (if applicable) — is consistent across the website.

Visual treatment of elements — headings, links, buttons, images (if applicable) — is mostly across the website.

Visual treatment of elements — headings, links, buttons, images (if applicable) — is inconsistent across the website.

Visual treatment of elements — headings, links, buttons, images (if applicable) — is inconsistent across the website.

Responsive design (3 points):

  • Content effectively reorganizes between mobile and desktop.
  • Text sizing is always appropriate for mobile and desktop.
  • Content effectively 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.

Final submission requirements (April 8)

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

Your project submission is due to Canvas before your lab time on April 8.

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.