GD 220 / Spring 2010

Maryland Institute College of Art / Prof Callie Neylan

CSS Exercise, Part Two (Due May 4).

For your final CSS exercise, create five more compositions using the same text listed in the first part of the assignment. Again, you will be using limited design elements to create effective visual hierarchies.

In addition to using white space as you did before, this time you are allowed to use the following additional elements: type size and style (i.e., bold, all caps, or italic).

So, for this second assignment:

  • 1 Use the base HTML and CSS files you’ve already created.
  • 2 Use only one typeface for all of your compositions. This must be a typeface pulled into the file via Typekit, as Wesley demonstrated in class.
  • 3 You may use no more than three type sizes for your compositions.
  • 4 You may use either bold and/or italic in each composition.
  • 5 All type should be set horizontally, although if you wish to experiment with CSS to set type vertically, you can.
  • 6 Create five compositions that use white space, type scale, and type style to create effective visual hierarchies.
  • 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.

Filed under: Assignments

Due April 13.

For next week, bring your animated dialogue. If your dialogue is really long, you may shorten it, but it should be at least 30-45 seconds long.

These can be posted as an animated gif, a .swf file (this is what you will save as if using Flash), or a Quicktime video. Upload these files to a server and post the link here (you should have your MICA server space activated by now). You may also bring the file to class on a hard drive, as long as you get to class early enough to post to the projector Mac before class.

Also, I updated the project sheet for the kit of parts (see side rail).

Email myself or Wesley with any questions.

Filed under: Assignments, Project Three, Uncategorized

Due March 23rd.

Here’s what’s due March 23 (I’ll update the project sheet).

Design two sets of key user paths* (see definition below) for the following two scenarios. These can be created in Photoshop or Illustrator:


Persona: A stay-at-home mother of three.

Goals: To find out which stores accept the new local currency and to see a map with all store locations plotted.

Design all screens necessary for her to find the above information.



Persona: An urban planner researching local currency systems in order to implement a similar system in other cities.

Goals: To find out the history of your local currency project, why it was implemented, the benefits of using local currency (shopping local, etc),  and the design process and profile of the currency designer.

Design all screens necessary for him/her to find the above information.



A completely thought out sitemap. While some of you have this pretty nailed down, others are resisting putting this on paper. In designing for digital interfaces, this is a deliverable that designers are expected to hand off. It is a piece of information design that is all about attention-to-detail, communicating to others on your team, and your thought process. For this project you will submit one created in Illustrator or InDesign, showing details about the information that will be included in your site. So, you should be showing sections down to at least a tertiary level. I don’t expect any of your sites to be more than three levels deep.

Here’s another good resource on the topic. A clearly communicated, well-designed sitemap is part of your grade for this project.

At minimum, it should require structure for the following information:

  • 1 History of the city (what would a tourist want to know?)
  • 2 Info about the currency design, including the design process. Who designed it, the design process used,  and why a local currency was designed.
  • 3 Benefits of shopping local
  • 4 How to use the currency
  • 5 Where to use the currency
  • 6 How to join the system for accepting the currency if you are a merchant.

These two key user paths plus your sitemap should be uploaded to Flickr for class critique on Tuesday, March 23. If you have any questions at all, email or text me.

* A key user path is a series of screens the user has to click through to complete a goal; i.e., think of all the screens you click through at Amazon or Zappo’s to go through the process of choosing what you want to buy and then paying for it online. Or, remember the screens we walked through in class on in order to find out information about a class offered in the Illustration department. I’ve also posted an example in the Resources sidebar.

Filed under: Assignments, Project Two

Clarification for what’s due Tuesday.

I had a question this morning regarding what’s due on Tuesday:

I was looking over the project sheet and I’m just a little confused as to what’s due this week. I know it states clearly that our wordpress site should be up with “sublevel pages”, “three visual concepts”, and a complete click-thru wireframe…I’m really sorry but I can’t seem to figure out what all this means. I’ve never made a website before, and I only have handdrawn sketches of my wireframes. How do I make a click-thru wireframe? What do you mean by three visual concepts and sublevel pages? I can’t seem to find anything on the blog to help..I clicked to the two links under the CSS panel, but I don’t understand what they do? If you could help me out that’d be great. I talked to Wesley about it in class but he seemed to think you’d be explaining more on the blog.

Here was my response:

What I mean by three visual concepts are samples of pages exploring different layouts (exploring WordPress templates will help with this) and apply some visual design to various layouts. So, at least three variations of layout, typeface, color, design elements, etc. Like we did with the moodboards for your money, only this time with your wireframes (keeping in mind that this has to work visually with your money system). In terms of the click-thru prototype, we’ll go through that in class on Tuesday. We’ll spend time working in class on this aspect.

So for Tuesday, bring your visual comps printed out (these can be done in Illustrator or Photoshop, with the document size set to 1024 x 768 pixels), have your WordPress set up and a template chosen (or a couple that you’re considering if you’re having trouble making a decision) and your sitemap (aka, a detailed outline of your site content, which should define what will go on sublevel pages).


If you guys have any questions about anything else, please email me!

Filed under: Assignments, Project Two

Schematic + WordPress.

For Tuesday, create a WordPress account and select a template that you will use for the base structure of the site.

You will also create a schematic (i.e. sitemap) of your site’s information architecture. This can be a simple diagram created in Illustrator. For those of you who have not completely thought through the outline of your site contents, this will help you do that.

I’ll post examples in the “Resources” section.

Filed under: Assignments,

Project One.

Tuesday your final for project one is due. I created a new group on Flickr just for this class. You should have received an invitation to join the group. If you didn’t, please email me.

Before class on Tuesday, your final projects should be posted to the group. In addition, you are required to critique, via well-thought out, strategic comments (Simple comments like “Nice!” or “I like this!” don’t count), on at least five of your studio mates’ final pieces. This online critique requirement is part of your grade for this project.

Wesley and I will be checking for the comments and they will be considered in the grading process.

Filed under: Assignments, Project One