joelmmartel / just-your-type

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

summary	time	deliverables
A creative design project that demonstrates the skills learned so far using the Gridifier, Typographer & Modulifier.	6 hours	1 HTML file, 4 CSS files

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 your rationale as an Issue on GitHub, attached to the “Just your type” repository.

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
Spelling & grammar	Wrds be gud!?	Lots of spelling & grammar mistakes	Decent, with a few mistakes	Great! No spelling or grammar errors
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 for grades using Markbot.
   When you submit to Progressinator, you’ll get a grade for the “Code” deliverable—this shows the project was handed in. You’ll still have to write a Rationale and the teacher will still be grading it personally under the “Design” deliverable.
2. Submit your rationale as an Issue on GitHub, attached to the “Just your type” repository, and “Pin” the issue: there’s a button near the bottom of the Issue’s screen’s righthand column.

just-your-type's Issues

Rationale

The concept I have chosen is an Arthur C. Clarke quote. I wanted to challenge myself into animating, so I placed the type into a box (the possible) and left the majority of the screen space for the unknown or impossible.

The selection of typefaces was inspired by the popular typefaces of the covers of classic science fiction, contrasting thin, sleek type with chunky slab serif.

The palette I selected was primarily inspired by outer space, leaning once again into the science fiction theme.

I was able to arrange my lines of type with incredibly ease, using the gridifier system. Modulifier was able to cut down my code required by a staggering amount in the sense of its boilerplate code, but I did not have much use for it in this assignment besides that. Typogrifier was extremely useful in attaining the type sizes to fit the box.

The main challenge I overcame in this project was learning about animation keyframes and how to time them. The line spacing was also quite different from anything we've previously learned, so that was frustrating to get by markbot.

@muxlowc