| 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 |
- 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.
- Typefaces: 2 Google fonts
- Gridifier settings: your choice
- Typografier settings: your choice
- Modulifier settings: your choice; “Responsive” required
- No images
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.
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.
- Explain your chosen concept.
- Why did you choose these typefaces?
- Why did you choose this type scale?
- Why did you choose these colours?
- How did you effectively use grids & modular CSS?
- What challenges did you overcome?
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 |
- Drop this folder into your Markbot application. Make sure to fix all the errors. And submit to Canvas using Markbot.
- Submit your rationale to Canvas in this assignment’s submission text box.