Giter Club home page Giter Club logo

just-your-type's Introduction

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 People

Contributors

hab5fan31 avatar thomasjbradley avatar

Watchers

James Cloos avatar

just-your-type's Issues

Rationale

@hellachella

I chose a quote from a song called “not with haste” by the band Mumford & Sons. I love this song because it has meaning to it and a story to tell. The typefaces I chose are Patrick hands and Josefin slab because I find that these styles really showcase the type of band Mumford & Sons is, which is a folk band, so it really gives it that rustic and relaxing feel. The colours that I chose are a navy blue and a creamy yellow I thought they contrasted very well together and gave a nice touch to the design. I used grid to make everything centre including the borders so that everything would fit to a set length and modular for the positioning. The challenges I overcame were that I did it on my own but I still had difficulties like I didn’t want the background colour to take all the space I wanted it to focus on just the area the type was in and I wanted the text to be in the middle but after I put the grid and unit tags in it all went to the left top corner, so I still have a lot of trouble but I overcame a lot of it myself.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.