ahandrewh teaches IAT-235information design

P4: Design and Develop (due Dec. 2)

This is old content

Andrew is not currently teaching IAT-235. This material is left online for reference only.

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 images, colour and other visual treatments as you see appropriate to.

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 City of Vancouver to propose an alternative to the School Active Travel website. This alternative website should update the School Active Travel Program webpage to improve school/student/teacher/parent awareness of program offerings.

As part of this project you are provided with:

You are welcome to:

You are not expected to work within the City of Vancouver's branding, and are requested not to use their logos as part of your site. There is a City of Vancouver content style guide available if of use.

Weekly instructions

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

From Nov. 4 to Nov. 18

Please complete the following:

  1. Fill in the team contract. There is a quiz on Canvas for filling out the contract. It must be submitted by each individual, but we expect you will submit the same answers to the questions between team members.
  2. Review your P3 submission(s). As a team discuss what you may keep or need to revise while working on P4.
  3. Determine the visual treatment of elements. You are now permitted to work with colour, different type, images and more visual treatments. Try to come up with a set of patterns you want to follow as a group when styling your pages.
  4. Decide how to divide the HTML and CSS work. Build out all of the sections proposed in P3 in HTML and CSS.
  5. To set up FTP, email Andrew or message over course chat with each team member cc'd. Using your SFU email addresses, Andrew can create you a server space for uploading your files to. This will be important for being able to upload your site and test it.
  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 Nov. 18 lab

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

From Nov. 18 to Nov. 25

Please complete the following:

  1. Clarify who you are designing for. As part of the last project reviews, the City wanted a clearer understanding of who your website's intended users are. Create an introductory document (for use in critiques) that:
    • Is separate from the website (i.e. a separate URL, or a PDF)
    • Identifies an intended audience
    • Showcases some research on designs or approaches for designing for that audience
    • Highlights three design features that are important as a result
  2. 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.
  3. 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.
  4. Test the responsiveness of your website. Use device mode in Chrome Developer Tools to test the following resolutions:
    • 320 pixels wide
    • 1280 pixels wide
    • 1280 pixels wide by 320 pixels tall
Bring to your Nov. 25 lab
  • A URL or PDF of your audience introduction.
  • A URL to your uploaded website for review in the labs.

CityStudio and members of the city will likely be joining in for this week's in-lab critiques.

From Nov. 25 to Dec. 2

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

CityStudio and members of the city will likely be joining in for the last week's in-lab critiques.

Grading rubric

Grading for this project focuses on process and the presentation of process. Please email Andrew with any questions about the rubric.

A B C D/F

Team contract (1 point):

Team contract has been completed.

Team contract has not been completed.

Design (9 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 (9 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 (3 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 (Dec. 2)

The final submission for P4 is a responsive mockup of the website in HTML and CSS and an audience introduction document (as a seperate URL or PDF). Please make sure:

Your project submission is due to Canvas before your lab time on Dec. 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.