Final Critique Schedule.

Well, here we are. The end of the semester. In order to make critiques more manageable, we’re breaking our final one into six sections. Here’s the schedule for tomorrow night:

Group 01
6:00 – 6:30
Wednesday Trotto
Lauren Atha
Becky Winslow
—-

Group 02
6:30 – 7:00
Paige Rommel
Zoe Zoe Sheen
Justine Smith
Jade Sturms
—-

Group 03
7:00 – 7:30
Alan Morris
Lorraine Nicoletta
Emily Ragle
—-

Group 04
7:30 – 8:00
Sam Kittinger
Emily Long
Katy Mitchell
—-

Group 05
8:00 – 8:30
Logan Eadon
David Carpenter
Rivkah Khanin
—-

Group 06
8:30 – 9:00
Victoria Venditto
Heda Hokschirr
Kamau Collins
—-

Filed under: Uncategorized

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

CSS exercise (due April 27).

Visual Hierarchy + Grid + CSS Exercise
Objectives

• 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.

Requirements

• 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)..

_____________

Text
Theatre Exile

Blackbird
by David Harrower
Directed by Joe Canuso

Featuring Pearce Bunting and Juliana Zinkel

February 5 – March 1

Plays and Players Theatre
1714 Delancey Street
215-218-4022
theatreexile.org

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

Filed under: Uncategorized

For Tuesday, April 20.

For your kit of parts on Tuesday, you need to have:

1 Three concepts for your logo and or / logotype. Bring in the sketches you used to determine these three concepts.

2 Your kit of parts, with at least five “parts” (see Step One in the Project 04 / Identity System + Kit of Parts).

3 At least five icons created from your parts (see Step Two in the example).

Applying the kit of parts across various media as mentioned in Step Three will be the second part of this assignment.

Filed under: Uncategorized

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

What’s due next week.

1 By Sunday night (I’m not requiring this, just giving you a chance for interim feedback), post black and white versions of your storyboards. Also, please post links to video or audio clips of your dialogue if you have them.

2 For Tuesday, bring your completely fleshed out storyboards to class, printed on 11×17″ paper. These final versions can have color added, of course.

3 Bring the festival or cultural institution you’ve chosen to create an identity/kit of parts for.

Filed under: Project Three, Assignments

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:

Bobulate

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:

Storyboarding

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
Making the Transition from Print to Interactive

http://www.aiga.org/content.cfm/event-detail?eid=40537102

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:

01

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.

——————

02

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.

——————

03

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 mica.edu 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