Skip to content

Latest commit

 

History

History
78 lines (58 loc) · 4.11 KB

README.md

File metadata and controls

78 lines (58 loc) · 4.11 KB
Raw
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.