ahandrewh teaches IAT-235information design

P4: Design and Develop (due December 3)

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 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 P1, P2 and P4 we will be working with the Embark Sustainability Society to propose a more usable form for their Sustainable Project Funding Opportunities spreadsheet.

You are welcome to:

You are expected to work within Embark's branding for this project.

Weekly instructions

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

From November 12 to November 19

Please complete the following:

  1. As a group print the team contract. Bring a printed copy to the next lab.
  2. 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.
  3. Review your P2 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 more visual treatments within Embark's branding. There is an Embark Sustainability style guide available for use.
  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 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 November 19 lab

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

From November 19 to November 26

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

From November 26 to December 3

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

Embark members will likely be joining in for an in-lab critique in December 3.

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 (December 3)

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 lab time on December 3.

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.