P1: Process (due May 31)
This is old content
Andrew is not currently teaching IAT-339. This material is left online for reference only.
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:
- A description of the company: What does this company do, sell, or offer?
- How to contact the company: Do I use a form? is there an email address or social media connection?
- A listing of products or services: What items or services can I buy through the website?
- The ability to complete purchasing a product or service: How can I get from selecting an item to getting confirmation of my purchase?
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 10 to May 17
The first week is about defining what product or service you are building the site for and building the HTML of the style guide.
- 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)
- 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
- Please place all the materials above in one HTML document and bring it to your next lab.
Bring to your May 17 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 17 to May 24
This week is about applying your branding and CSS styling to the style guide.
- 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.
- 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
- Please bring your HTML and CSS to your next lab.
Bring to your May 24 lab
Your styleguide HTML and CSS. We will chat about your deliverables in the lab.
From May 24 to May 31
This week you will be making your style guide responsive.
- 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 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.
- 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.
- 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):
|
|
|
|
|
Design (5 points):
|
|
|
|
|
Final submission requirements (May 31)
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 May 31 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.