Vieira – ARTM2210 Class Syllabi

Visualizing Design Principles

Project 1: Haikus

🗓️ PART 1: CLASS 3, SEPTEMBER 10TH, BEFORE CLASS 9AM  🗓️ 

🗓️ CRITIQUE & FULL PROJECT DUE: CLASS 5, SEPTEMBER 24TH, BEFORE CLASS 9AM  🗓️ 

Objective

This project challenges you to translate abstract design principles into visual and coded compositions. You will start by exploring core concepts through poetry and digital sketching, then bring those sketches to life as a cohesive webpage using modern HTML and CSS. The goal is to build a strong connection between your design intent and your code.

Part 1: Concept & Design

(Due at the beginning of Class 3, September 10th)

  1. Write Your Haiku: Write ten haiku for ten different design principles.
  2. Create Your Sketches in Figma: Create a corresponding visual sketch in Figma for each haiku.

A 10% grade reduction will be applied if your Figma file containing all ten sketches is not ready by the start of Class 3. This design phase is the critical foundation for your coding work.

Part 2: Development & Styling

(Due at the beginning of Class 5)
Example Haiku page

In this phase, you will create a small website with 11 HTML pages and a CSS file.

Create Your File Structure:

  • Create a root project folder.
  • Inside, create a css folder.
  • Your project will contain a main index.html file, ten individual HTML files (e.g., balance.html, emphasis.html, etc.), and one style.css file inside the css folder.

Build Your Homepage (index.html):

  • This page will serve as the table of contents for your project.
  • It must contain a title and a list of links pointing to each of your ten composition pages.

Recreate Your Sketches (10 total):

  • For each of your ten haikus, create a separate HTML page.
  • Each page should contain the haiku text and the HTML/CSS to recreate your corresponding sketch.
  • Focus Areas:
    • Apply ID’s and classes to style your boxes.
    • Utilize web-safe fonts.
    • Set background colors and images.
    • Apply border styles.
    • Use positioning rules to place elements accurately.
  • Additional Resources:

Submission & Critique (Class 5, September 24th)

For the Critique: Be prepared to present your live project from its URL. 

To Receive Full Credit: Your final project, all files, must be uploaded to your mediaweb server before the start of class. Your course homepage should have a clear link to this project page.