summary: 'A creative design project that demonstrates the skills learned so far using the Gridifier, Typographer & Modulifier.'
time: '6 hours'
deliverables: '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.
- 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?
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
- 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.
- 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.