ahandrewh teaches IAT-339web design & development

P1: Process (due June 3)

Introduction

This project has you practicing HTML, CSS and design to develop a style guide for a product microsite.

All code must be your own. No frameworks or pre-processing is permitted for this project.

P1: Process is worth 10% of your final grade.

Project 1/2 overlap

P1: Process builds into P2: Company. P1 will define a look and feel for what will become the actual microsite in P2.

The microsite for P2 will require the following content:

The list above is not a list of 'pages' required. As we will discuss all this content could appear in one URL or multiple URLs across a website.

Weekly instructions

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

From May 13 to May 20

The first week is about defining what product or service you are building the site for and building the HTML of the style guide.

  1. Create the unstyled HTML elements for a style guide. You can download a sample style guide to get you started. Please build the following HTML elements:
    Interactive elements
    • An in-text link
    • A menu or navigation link
    • A text input field with a label
    • An image as a link
    Text styling
    • Four levels of headings
    • A paragraph
    • A numbered list
    Combined elements
    • What your main navigation will be (this is likely a combination of 'menu or navigation links')
    • A product/service listing (this is likely a combination of at least the name, image, and cost of the item)
  2. Prepare a description of your product or service. Please include:
    • A written description of the product or service
    • Colour palettes and fonts that you feel will best describe the service
    • Potential imagery and/or art direction that will best describe the service
  3. Please place all the materials above in one HTML document and upload it to your SFU filespace.
Bring to your May 20 lab

A URL to one HTML document containing:

  • The unstyled HTML elements requested earlier
  • A written description of the product or service
  • Colour palettes and fonts that you feel will best describe the service
  • Potential imagery and/or art direction that will best describe the service

We will chat about your deliverables in-lab.

From May 20 to May 27

This week is about applying your branding and CSS styling to the style guide.

  1. Based on the feedback from the last lab, refine you product or service description and branding. This branding should then be used in the next step for refining your style guide.
  2. Apply CSS to the style guide. The styling applied should:
    • Make use of your product or service brand direction
    • Create clear hierarchies in the text
    • Create clear visual cues to what is interactive and not
    • Create clear visual cues to when something is being interacted with, both by keyboard and mouse
  3. Please upload your updated style guide to your SFU filespace.
Bring to your May 27 lab

A URL to your updated style guide. We will chat about your deliverables in-lab.

From May 27 to June 3

This week you will be making your style guide responsive.

  1. Working with the tutorial from this week's lecture we are expecting you to make your style guide responsive. This means:
    • The 'combined elements' — the main navigation and product listing — should adjust to better make use of the space between mobile sizes (320px) and desktop sizes (1920px).
    • The style guide itself does not need to adjust, but should not expand in width beyond the browser window between mobile (320px) and desktop (1920px) sizes.
  2. Add citations that provide links and citations for any materials used in the website that are not of your own creation; such as fonts, images, icons, etc. Please use a proper citation format. The citation format is of your choosing, but should be consistent.
  3. If you have created multiple HTML files for your styleguide link them all together so we can navigate from one to another.

Grading rubric

Your project will be graded on the following criteria:

A B C D/F

Code (5 points): Code semantics, validity, readability, and cleanliness of folder structure.

The submission's coding (and code presented in the style guide) is human readable, semantic and valid HTML5 and CSS3 with absolutely no errors. CSS uses a meaningful naming convention, and file/folder structure is clean.

The submission's coding (and code presented in the style guide) is human readable, semantic and valid HTML5 and CSS3 with up to 4 minor errors (things we have not taught you). File and folder structure is clean.

The submission's coding (and code presented in the style guide) is human readable valid HTML5 and CSS3 with 1 major error (things we have taught you directly) and up to 4 minor errors. There are some minor concerns with the cleanliness of the file and folder structure.

The submission's coding (and code presented in the style guide) is not human readable, nor valid HTML5 and CSS3 with up to 4 major errors (things we have taught you directly) and up to 8 minor errors. There are major concerns with the cleanliness of the file and folder structure.

Design (5 points): Consistency, responsiveness, branding, user flow, and clarity of interaction.

The style guide effectively leverages principles of 'atomic design' to construct combinations of elements (i.e. navigation, product/service listing) that effectively respond to different devices. Style guide looks uniquely branded; entirely unlike the template provided.

The style guide presents a consistent aesthetic with clear interface and interaction elements that effectively respond to user interactions. Style guide creates uniquely branded elements but follows a similar structure to the template provided.

The style guide presents a consistent aesthetic with some unclear interface and interaction cues that respond somewhat effectively to user interactions. Style guide looks somewhat similar to template provided.

The style guide presents an inconsistent aesthetic with unclear interface and interaction cues that respond poorly to user interactions. Style guide shows little to no development from the template.

Final submission requirements (June 3)

The final submission for P1 is a style guide website including citations, submitted as a URL to Canvas.

Your project submission is due to Canvas before your June 3 lab.

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.