jasminect / just-your-type

A creative design project that demonstrates the skills learned so far using the Gridifier, Typographer & Modulifier.

summary	time	deliverables	submit
A creative design project that demonstrates the skills learned so far using the Gridifier, Typographer & Modulifier.	6 hours	1 HTML file, 4 CSS files	https://algonquin.instructure.com/courses/879551/assignments/7974603

Just your type

Overview

• Fork this repository.
• Select a quote, passage of poetry, chunk of lyrics, excerpt from a book, famous tweet, etc.
  No adult themes, graphic language, illegal text, or hate speech.
  Must be a minimum of 1 sentence (10 words) and a maximum of 5 sentences.
• Design a creative webpage using HTML & CSS only. No images.
• Make it responsive and interesting with thoughtful use of colour, type & grids.
• Consider it a type project—not just a website.
• Thoughtfully choose a type scale—not just the default, unless you can justify your reason.
• Be creative. Use modular CSS to push your concept.
• Some inspiration: 100 Days of Type, Typewolf, Type Scale
• Run it through Markbot and make sure it passes all the checks.

---

Details

• Typefaces: 2 Google fonts
• Gridifier settings: your choice
• Typografier settings: your choice
• Modulifier settings: your choice; “Responsive” required
• No images

---

Deliverables

The grades for this assignment are split over 3 different deliverables: text & sketches, code, design & rationale.

• Text & sketches — decide on the piece of text & plan every aspect of the website on paper: boxes, semantics, grids, type, modules, responsiveness—all screen sizes.
• Code — satisfy all of Markbot’s requirements—and submit using Markbot.
• Design & rational — apply sensible design choices, to compliment the text you’ve chosen—and explain all your decisions.

Rationale

Part of the submission is to write a rationale for your design choices. Submit the rationale to the “Just your type: design & rationale” assignment on Canvas, there’s a text box.

1. Explain your chosen concept.
2. Why did you choose these typefaces?
3. Why did you choose this type scale?
4. Why did you choose these colours?
5. How did you effectively use grids & modular CSS?
6. What challenges did you overcome?

---

Marking rubric

Below is the rubric of expectations for this project. You will be assigned a letter grade based on your standing within the rubric.

	0 points	1 points	2 points	3 points
Concept & creativity	What concept?	Obvious	Clever	Mind blown
Colour	Why!?	Okay	Good	Harmonious as all get out
Type	No effort, do not pass go	Okay pairing and gets the job done	Good pairing and use of scale	Dynamic pairing and use of scale
Design & responsiveness	No effort, not responsive	Very poor spacing and alignment, very awkward	Spacing and alignment too tight or inconsistent	Excellent alignment and spacing on all screen sizes
Gridifier	No Gridifier	Limited use	Good use of Gridifier	Excellent use of Gridifier
Typografier	No Typografier	Limited use	Good use of Typografier	Excellent use of Typografier
Modulifier	No Modulifier	Limited use	Good use of Modifier	Excellent use of Modulifier
Semantics	Very little HTML	Basic HTML tags chosen	Good variety and appropriate HTML tags chosen	Excellent demonstration of HTML tags and correct use

---

Hand in

1. Drop this folder into your Markbot application. Make sure to fix all the errors. And submit to Canvas using Markbot.
2. Submit your rationale to Canvas in this assignment’s submission text box.