GD 220 / Spring 2010

Maryland Institute College of Art / Prof Callie Neylan

What’s due next week.

Due Saturday, March 27.

The dialogue, description, and keywords you will be using for Project 03 (see under “Requirements” in the project sheet, linked in the column at right).

Submit these as a comment to this blog post. Do not email them to me. If you have problems posting, let me know.


Due Tuesday, March 30.

01 For your final Project Two submission, I want to see iterations on the comps you showed on 3/23, integrating suggestions made during critique, as well as any typographic inspiration you may garner from sites like these that use beautiful typography inspired by publication design:


The Daily Beast

T Magazine

The Bold Italic

Please post these to Flickr and bring printed copies to class for critique.

02 Storyboard sketches for your motion piece. These can just be rough sketches at first, using this template to print out and sketch on. Or, you can just use a sketchbook, manually creating the template.

Here are a couple of storyboarding tutorials and a storyboard template. Like a schematic and wireframes for websites, a storyboard is a planning tool used to create films and for this assignment, motion design. Obviously, your “actors” will be type and words, not people:


Four-Minute Film School: Storyboarding


Filed under: Uncategorized

Pencil 2 Pixel.

Next Wednesday evening, March 31, AIGA Philadelphia is holding this event. If there’s enough interest, maybe we could form a carpool?

Pencil to Pixel Pencil to Pixel: Making the Transition from Print to Interactive
Making the Transition from Print to Interactive

Designing for the interactive world can be very complex. Getting started can feel intimidating when the technology is a moving target. The good news is that if you already design for print, you are armed with many of the skills you will need to not only make the transition, but to give yourself the competitive edge. Discover how you can leverage the fundamental skills you already possess to bring your concepts to life for interactive experiences.

Filed under: 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,