ahandrewh teaches IAT-339web design & development

P1: Process (due Oct 6)

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 Sept 15 to Sept 22

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
    • 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 bring it to your next class.
Bring to your Sept 22 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 Sept 22 to Sept 29

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 bring your HTML and CSS to your next class.
Bring to your Sept 29 class

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

From Sept 29 to Oct 6

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.

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 (Oct 6)

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 Oct 6 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.