ahandrewh teaches IAT-235information design

P4: Design and Develop (due Dec. 2)

This document is a draft

Until Nov. 4As a result it may still change up until Nov. 4.

Introduction

In this project you will build a full mockup or a coded version of the fictional pet therapy site you designed as part of P4. For this project you can either pursue a design or development focus.

Design focus

If you are pursuing a design focus — interested in pursuing UI in more depth — you will spend more time focusing on:

  • Visual branding — including fonts, colours, imagery and interactions — of the site
  • Structure and flow through different sections of the site

Development focus

If you are pursuing a development focus — interested in pursuing front-end development in more depth — you will spend more time focusing on:

  • Building the site from P4 in HTML and CSS
  • Ensuring the code you generate is human readable, semantic and free of errors

Your decision to pursue a design or development focus must be decided by Nov. 18. For each focus in the project there are a unique set of deliverables. The rubric also has one category that is unique to each focus. Regardless of the focus you are still working with the original P4 text content.

This project is completed individually or in teams of two.

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

Weekly instructions

This project spans multiple weeks. Please read the weekly instructions carefully. There are distinct instructions for design and development focused projects.

From Nov. 4 to Nov. 18

Depending on your focus, please complete the following:

Design focus
  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. Add a styleguide to P4 in Figma that illustrates the visual direction for the current project. This styleguide will include:
    • A colour palette and how it will be applied
    • Treatment of typography, including fonts and hierarchy
    • Photo and icons to be used
    • Different states of button interactions
  3. Review the structure of P4 and labelling used to navigate the site. Revise the structure and labelling of navigation to ensure that:
    • The structure of the site can be easily understood
    • Labels clearly tell us what the button does, or where it will take us
  4. Revise your P4 wireframes to update the structure and labelling.
Development focus
  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. Decide how to divide the HTML and CSS work. Build out all of the sections proposed in P4 in HTML and CSS.
  3. To set up FTP, email Andrew. This will be important for being able to upload your site and test it.
  4. 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

Depending on your focus, please bring:

Design focus

A URL to your Figma wireframes and styleguide for review in the labs.

Development focus

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

From Nov. 18 to Nov. 25

Depending on your focus, please complete the following:

Design focus
  1. Integrate your styleguide into your wireframes to make a full mockup. The mockup must still be designed for both mobile (320px) and desktop (1280px) sizes. A full mockup means:
    • All interactive elements work (i.e. buttons, scrolling, swiping, etc)
    • All content is included, and any added content is real (not placeholder)
  2. Test your mobile and desktop wireframes. Make sure that:
    • All buttons/interactions work
    • Navigation through the site makes sense
    • Labels for buttons indicate what they do or where they take us
Development focus
  1. 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

Depending on your focus, please bring:

Design focus

A URL to your Figma mockup for review in the labs.

Development focus

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

From Nov. 25 to Dec. 2

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

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 (10 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.
  • 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.
  • 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.
  • 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.

Consistency (5 points):

Visual treatment of elements — headings, links, buttons, images (if applicable) — is consistent across all desktop and mobile wireframes.

Visual treatment of elements — headings, links, buttons, images (if applicable) — is mostly consistent across all desktop and mobile wireframes.

Visual treatment of elements — headings, links, buttons, images (if applicable) — is inconsistent across some desktop and mobile wireframes.

Visual treatment of elements — headings, links, buttons, images (if applicable) — is inconsistent across all desktop and mobile wireframes.

Responsive design (4 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.

Design-focus (10 points):

This category only applies to design-focused projects.

  • There are clear and effective connections built between different sections of the site through use of well structured content and effective interface elements.
  • The website demonstrates a unique and consistent visual brand including fonts, colours, imagery and interactions.
  • Labels for buttons clearly indicate the action being performed or where the button leads.
  • There is a reasonable connection made between different sections of the site through use of well structured content and effective interface elements.
  • The website demonstrates a consistent visual brand including fonts, colours, imagery and interactions.
  • Labels for buttons indicate the action being performed or where the button leads the majority of the time.
  • There is a somewhat problematic connection made between different sections of the site due to the use of confusing content structures or ineffective interface elements.
  • The website demonstrates a somewhat consistent visual brand including fonts, colours, imagery and interactions.
  • Labels for buttons indicate the action being performed or where the button leads the some of the time.
  • There is a problematic connection made between different sections of the site due to the use of confusing content structures or ineffective interface elements.
  • The website demonstrates little visual branding including fonts, colours, imagery and interactions.
  • Labels for buttons do not clearly indicate the action being performed or where the button leads.

Development-focus (10 points):

This category only applies to development-focused projects.

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

Final submission requirements (Dec. 2)

The final submission for P4 is as follows:

Your project submission is due to Canvas before Dec. 2 at 1pm (PST) for lab D201 and 3pm (PST) for lab D202.

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.