GD 220 / Spring 2010

Maryland Institute College of Art / Prof Callie Neylan

CSS exercise (due April 27).

Visual Hierarchy + Grid + CSS Exercise

  • 1 To learn the basics of CSS.*
  • 2 To create effective typographic hierarchies using white space based on a grid structure.

* Set up server space for yourself online; you should get free server space from MICA. These files will need to be turned in as a URL, with the five compositions linked together (I already created this linking structure for you in the bottom of the lesson.html file). You also need to create a free Typekit account before you come to class next week.


  • 1 Use the base HTML and CSS files linked here.
  • 2 Use only one type family for all five of your compositions.
  • 3 Use only one type size for all five of your compositions.
  • 4 All type should be set in Roman.
  • 5 All type should be set horizontally.
  • 6 Create five compositions that use white space to create effective visual hierarchies (You will do this by modifying the position of your div tags).
  • 7 For these compositions, define which elements should be primary in the visual hierarchy, which should be secondary, and which should be tertiary; i.e., what information do you want the viewer to read first, second, then third? Using the same classification for each composition, use white space to create variations on your visual hierarchies.

Here is an example (the numbers are for illustrative purposes only to show what I mean by hierarchy levels)..


Theatre Exile

by David Harrower
Directed by Joe Canuso

Featuring Pearce Bunting and Juliana Zinkel

February 5 – March 1

Plays and Players Theatre
1714 Delancey Street

“Compelling and devastating drama.” – The New York Times


Filed under: Uncategorized

4 Responses

  1. Emily Ragle says:

    What is due as far as our kit of parts for next week? Also, I have a website due for another class this week, and only one server space. How should I handle that?

    • neylano says:

      Hi, Emily. For what’s due on the kit of parts is listed in the project sheet (linked in the right rail of the blog and the email I sent out last week).

      In terms of adding my files to your web server space, all you need to do is create a subdirectory (i.e., another folder), and put the files for your CSS project there. For example, your URL would then read something like this, depending on what you name your folders and files:


  2. Chrisi Atha says:

    Heres the link to my hierarchies:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: