ahandrewh teaches IAT-339web design & development

P1: Process (due October 3)

On this page:

Introduction

This project has you practicing HTML, CSS and design to develop a style guide — a collection of designed, interactive elements — for a product website. Styleguides.io provides a wide variety of styleguide examples to review.

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 the elements that will become the actual website in P2.

The website 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 September 12 to September 19

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
    • A link within a paragraph of text
    • A menu or navigation button
    • A text input field with a label
    • An image that links to another URL (file or location)
    Text styling
    • Four levels of headings
    • A paragraph
    Combined elements
    • What your main navigation will be (likely a combination of 'menu or navigation links')
      A sketch of a series of menu navigation items

      A possible main navigation

    • A product/service listing (likely a combination of at least the name, image, and cost of the item)
      A sketch of a possible product/service listing

      A potential product listing

    • A maillist sign-up form (likely a combination of a title, form field and button)
      A sketch of a possible maillist sign-up form

      An example maillist sign-up form

  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 September 19 class

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

From September 19 to September 26

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

  1. Based on the feedback from the last class, 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 September 26 class

Your styleguide HTML and CSS. We will chat about your deliverables in the class.

From September 26 to October 3

This week you will be making your style guide responsive.

  1. Working with the tutorial from this week's class 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 reorganize to make better use of the space, 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.

Code reviews

If there are materials in your project submission that are not cited and seem beyond the scope of what we have covered in the course you may be required to complete a 'code review'.

A code review will require you meet with Andrew and answer specific questions of how the code is working and why it was built this way. If you are unable to effectively explain this the code grade for the project may become a zero, at the instructor's discretion.

Grading rubric

Your project will be graded on the following criteria:

A B C D

Code (5 points):

  • Is HTML mark-up semantically appropriate?
  • Does CSS use responsive units? Are they applied appropriately?
  • Does the code follow modern best practices as taught?
  • Are there any HTML and CSS errors identified by a validator?
  • Is the file and folder structure organized and web appropriate?
  • There is little to no room for improving the semantics of the HTML.
  • The CSS is using responsive units appropriately for sizing fonts and adjusting media queries.
  • The code follows modern best practices as taught or discovered.
  • The code is valid HTML5 and CSS3.
  • File/folder structure is clean and web appropriate.
  • Semantic HTML elements are used appropriately but there are missed opportunites for improving the semantics.
  • The CSS is using responsive units appropriately for sizing fonts and adjusting media queries.
  • There are up to 4 minor errors (things we have not taught you) in following modern best practices.
  • The code is valid HTML5 and CSS3.
  • File/folder structure is clean and web appropriate.
  • There is a semantically inappropriate use of HTML elements.
  • The CSS is using responsive units appropriately for sizing fonts but not for adjusting media queries.
  • There is 1 major error (a thing we have taught you directly) and up to 4 minor errors in following modern best practices.
  • The code is valid HTML5 and CSS3.
  • There are some minor concerns with the cleanliness or web appropriateness of the file and folder structure.
  • There is a semantically inappropriate use of HTML elements or old non-semantic elements continue to be used.
  • There is little use of responsive units in the CSS for sizing fonts and adjusting media queries.
  • There are up to 4 major errors (things we have taught you directly) and up to 8 minor errors in following modern best practices.
  • The code is not valid HTML5 or CSS3.
  • There are major concerns with the cleanliness or web appropriateness of the file and folder structure.

Design (5 points):

  • Does the style guide look unique or distinct?
  • Does the style guide look like a cohesive set of elements?
  • Do the 'combined elements' make effective use of space at different browser sizes?
  • Is it clear what is an interactive element (and not)?
  • Do interactive elements provide clear feedback on mouse hover and keyboard focus?
  • The style guide looks uniquely branded and is entirely unlike the template provided.
  • The elements in the style guide use a consistent visual language.
  • The 'combined elements' reorganize effectively to make use of space in the browser window.
  • It is easy to distinguish between interactive and non-interactive elements.
  • Interactive elements clearly change visual states on mouse hover and keyboard focus.
  • The style guide looks uniquely branded but follows a similar structure to the template provided.
  • The elements in the style guide use a consistent visual language.
  • The 'combined elements' reorganize at different window sizes, but could use the space more effectively.
  • It is easy to distinguish between interactive and non-interactive elements.
  • Interactive elements clearly change visual states on mouse hover, but not keyboard focus.
  • The style guide does not look uniquely branded and follows a similar structure to the template provided.
  • The elements in the style guide use a consistent visual language.
  • The 'combined elements' reorganize at different window sizes, but could use the space more effectively.
  • It is somewhat difficult to distinguish between interactive and non-interactive elements.
  • Interactive elements clearly change visual states on mouse hover, but not keyboard focus.
  • The style guide does not look uniquely branded and follows a similar structure to the template provided.
  • The elements in the style guide do not use a consistent visual language.
  • The 'combined elements' do not reorganize at different window sizes and/or a horizontal scrollbar appears at some browser sizes.
  • It is somewhat difficult to distinguish between interactive and non-interactive elements.
  • Interactive elements do clearly change visual states on mouse hover, but not keyboard focus.

Final submission requirements (October 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 October 3 class.

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.