Curriculum+Calendar+2

JRN338: Communicating with Graphics Fall semester, 2011

Wikispaces help

=Wednesday, 8/31 =
 * INTRO TO COURSE **

• Class expectations. Homework, format for naming and submitting graphics, flash drive, attendance • Overview of class wiki site. • Talks: what is/isn't a graphic that communicates information. • Break apart a graphic/page/website/motion graphic: type, color, map, chart, diagram, etc. • Exercise

• Choose an infographic from this link and critique it. Write a half page critique (approx. 250 words) of the graphic using your judgment as a typical reader (there is an example of a good critique under the Homework/Critique a Graphic tab at left):
 * Homework, due Wednesday: **

What works, what doesn't. What confused you? What was left out? <span style="font-family: Arial,Helvetica,sans-serif;">What questions didn't it answer? <span style="font-family: Arial,Helvetica,sans-serif;">What do you think about the colors, the usability, the flow of information, the logic, the design. <span style="font-family: Arial,Helvetica,sans-serif;">Was it effective, instructive? Etc. <span style="font-family: Arial,Helvetica,sans-serif;">Did it compare or contrast elements. Was this successful?
 * <span style="font-family: Arial,Helvetica,sans-serif;">Consider these issues: **


 * <span style="font-family: Arial,Helvetica,sans-serif;"> Upload critique to Angel to folder marked "Critique a Graphic" **

=<span style="color: #ff0000; font-family: Arial,Helvetica,sans-serif;">Wednesday, 9/7 =
 * <span style="font-family: Arial,Helvetica,sans-serif;">CRITIQUE GRAPHICS. DISCUSS MAPS **

<span style="font-family: Arial,Helvetica,sans-serif;">• Review critique graphics. Each of you will discuss in great detail the graphic you were assigned based on your written critques. <span style="font-family: Arial,Helvetica,sans-serif;">• Maps presentation <span style="font-family: Arial,Helvetica,sans-serif;"> • Illustrator overview (if time allows)

<span style="font-family: Arial,Helvetica,sans-serif;">Great time-lapse video and blog shows how a city map was drawn in Illustrator.


 * <span style="color: #ff00ff; font-family: Arial,Helvetica,sans-serif;">No homework **

= Monday, 9/12 = Make an area map in Adobe Illustrator <span style="font-family: Arial,Helvetica,sans-serif;"> <span style="color: #f02121; font-family: Arial,Helvetica,sans-serif;">MAP FOR TRACING. RIGHT CLICK AND "SAVE AS" TO YOUR DESKTOP
 * <span style="font-family: Arial,Helvetica,sans-serif;">MAPS **

How to make a road map in Illustrator

//KARL GUDE VIDEO **MAP** TUTORIALS// <span style="font-family: Arial,Helvetica,sans-serif;"> [|Part 1 of 9: Adobe Illustrator map tutorial SIZING REF. MAP, LAYERS] <span style="font-family: Arial,Helvetica,sans-serif;"> [|Part 2 of 9: Adobe Illustrator map THE PEN TOOL]

[|Part 5 of 9: Adobe Illustrator //map tutorial// HOW TO ...]
<span style="font-family: Arial,Helvetica,sans-serif;"> [|Part 6 of 9: Adobe Illustrator map tutorial BORDERS AND LAKES] <span style="font-family: Arial,Helvetica,sans-serif;"> [|Part 7 of 9: Adobe Illustrator map tutorial CITY DOTS & LABELS] <span style="font-family: Arial,Helvetica,sans-serif;"> [|Part 8 of 9: Adobe Illustrator map tutorial DRAWING ROADS] <span style="font-family: Arial,Helvetica,sans-serif;"> [|Part 9 of 9: Adobe Illustrator map tutorial TRIMMING A MAPS EDGES]

• Draw a complex map of the MSU campus, similar to this one. Find a reference map on the msu.edu website to trace. • Post on Homework/Map as a PDF file (not jpeg). **//See tutorial on Homework "home" page for how to post an image in Wordpress.//**
 * <span style="color: #ff00ff; font-family: Arial,Helvetica,sans-serif;">Homework: due Monday before class **

=<span style="color: #ff0000; font-family: Arial,Helvetica,sans-serif;">Wednesday, 9/14 =

<span style="font-family: Arial,Helvetica,sans-serif;">• Discuss city maps
 * <span style="font-family: Arial,Helvetica,sans-serif;">CITY MAPS **

• Make a city map in Adobe Illustrator in class. You may finish it and turn it in for extra credit.

<span style="font-family: Arial,Helvetica,sans-serif;">


 * <span style="color: #ff00ff; font-family: Arial,Helvetica,sans-serif;">Homework: due before class for extra credit **

• Finish your map of the MSU campus and make it thematic by visualizing the following fake news:

There was a shooting on campus. A gunman fired his gun in one building (you choose which), then gets into a vehicle and drives to another building, where he is captured. Place the following elements on your map"


 * Highlight the buildings involved by using color, a thinker line or some means to make them stand out.
 * Draw a line that that stands out (color and width) illustrating his route between the two buildings.
 * Tell what happened with pointer boxes.

= Monday, 9/19 =


 * <span style="font-family: Arial,Helvetica,sans-serif;">CHARTS. DISCUSS FIRST PROJECT: A PRINT AND INTERACTIVE GRAPHIC **

<span style="font-family: Arial,Helvetica,sans-serif;">• Discuss charts <span style="font-family: Arial,Helvetica,sans-serif;">• Show how to create a chart in Illustrator

<span style="font-family: Arial,Helvetica,sans-serif;">Types of charts explained <span style="font-family: Arial,Helvetica,sans-serif;">Chart types in Adobe Illustrator <span style="font-family: Arial,Helvetica,sans-serif;">General instructions on Chartmaking in Illustrator

Illustrator video chart tutorials (by Karl Gude) <span style="font-family: Arial,Helvetica,sans-serif;">[|How to make a bar chart in Adobe Illustrator, Part 1] <span style="font-family: Arial,Helvetica,sans-serif;">[|How to make a bar chart in Adobe Illustrator, Part 2] <span style="font-family: Arial,Helvetica,sans-serif;">Scatter plot chart

//<span style="font-family: Arial,Helvetica,sans-serif;">**DATA** SOURCES // http://freevisualtools.wikispaces.com/DATA

<span style="color: #ff00ff; font-family: Arial,Helvetica,sans-serif;">**Homework:** <span style="font-family: Arial,Helvetica,sans-serif;">• We are going to **begin our first project: A print and interactive version of a news topic of your choice. Be prepared to talk about your topic in class.**

<span style="font-family: Arial,Helvetica,sans-serif;">• Discuss topics/data for small graphics project (2 hours) • Mind maps: bubbl.us <span style="font-family: Arial,Helvetica,sans-serif;">• Plot other charts and package them in Illustrator (line/pie/circle)
 * <span style="font-family: Arial,Helvetica,sans-serif;">, CHARTS **

<span style="font-family: Arial,Helvetica,sans-serif;">•Create three charts in Adobe Illustrator that pertain to the news topic you will be making a graphic about. All text must be completely written and proofed, without typos. Package them together exactly like the image below with a real headline and subhead. Include a source line at the bottom. <span style="font-family: Arial,Helvetica,sans-serif;">• You may download the graphic below for reference to use as a guide. by right clicking on it and saving to your computer. Place it (File/Place) into your Illustrator document on it's own layer and build your graphic right over the top of it. It will be easier to do this if you lock this reference layer.
 * <span style="color: #ff00ff; font-family: Arial,Helvetica,sans-serif;">Homework **<span style="color: #000000; font-family: Arial,Helvetica,sans-serif;"> (due Monday 2/7):

You need to make one bar, one pie and one line chart.
These three charts must be designed and fit together into the same space as the sample charts below. Do your best to match up your font sizes and weights (bold, regular, etc.). You may use whatever colors you want. Your charts will likely look different than the ones on the chart below because your data will be different, but that’s okay. Perhaps your bars must be vertical instead of horizontal.

=
All text must be completely written and proofed, without typos. Group them together (like the image above) with a headline and subhead. Include a source line at the bottom. Right click on the chart image above and save to your computer. Place (File/Place) into your Illustrator document on it’s own layer and build your graphic right over the top of this one. It will be easier to do that if you lock this reference layer.=====

TEN POINTS WILL BE DEDUCTED FOR EACH OF THESE:

 * =====The layout didn’t match what was assigned=====
 * =====Data was incomplete or duplicated=====
 * =====The wrong kind of chart was used for the data (see the link below for details on each chart type)=====
 * =====Your reference chart was visible in the PDF file=====
 * =====Homework was late=====

Scatter plot chart (not by Karl)
<span style="font-family: Arial,Helvetica,sans-serif;">

=<span style="color: #ff0000; font-family: Arial,Helvetica,sans-serif;">Wednesday, 9/21 =

Online presentation: Design concepts
About.com design terms/considerations

• Show previous student layouts.
<span style="font-family: Arial,Helvetica,sans-serif;">• What works, what doesn't. Anatomy of type • Different ways to work with type with different visual tools: timeline, sequence (Ed Gabel eye), etc.

**Include**:

 * =====a visible grid (place guides along your grid)=====
 * =====placeholders for images=====
 * =====write chapter headlines=====
 * =====include dummy text wherever text will appea=====

**Think about:**
> =====**• Reduce & Resize** One measure of importance is size. Use larger graphics to communicate the most important goals of the piece. Smaller graphics are of lesser importance. When space is at a premium, drop the smaller elements first — they are less important. Instead of many small images, consider using just one or two large images. Image overload generally comes from using too many bits of scattered clip art, decorative bullets, boxes or borders, and rules (lines) all on the same page. Strip most of that out. It's unnecessary. Choose one or two key images that complement the text and use them to focus attention or provide visual interest.===== > =====**• Unify** Instead of many completely different images scattered all over, unify them. Make them all the same size. Use the same border. Line them up vertically or horizontally. Use a single style of dingbat for bullets throughout the page, throughout the publication. When it is necessary to use many images, provide consistency and order by tying them together visually.===== > =====**• Prioritize** Instead of a barrage of images competing for attention, prioritize them. Give a single image prominence through size and placement. Unify the remaining images elsewhere on the page using the techniques previously described.===== > =====**• Pick a Central Idea** Many times the creator of a piece will feel the necessity to use a piece of clip art to illustrate or point out every idea or concept on the page.===== > =====For example, a party announcement might have a phone icon by the phone number, a house or envelope next to the address, a clock beside the time, and several pieces of clip art for cakes, streamers, party hats, presents, or whatever and a confetti border around the whole page. While the idea may be to emphasize each of those key pieces of information, it's overkill.===== > =====Instead, use font size, placement, alignment, or color to group, set apart, or emphasize the secondary information and cut that clip art. Pick one or two images to signify the party theme and use them.===== > =====**• The Bottom Line:** Make sure each image used in a piece serves a necessary purpose and is appropriate to the tone and style of the piece. When the image count rises above three on a single page, consider o=====
 * =====a logic to the layout. Z Layout: Mentally impose the letter Z or a backwards S on the page. Place important items or those you want the reader to see first along the top of the Z. The eye normally follows the path of the Z, so place your "call to action" at the end of the Z.=====
 * =====//From About.com://=====


 * <span style="font-family: Arial,Helvetica,sans-serif;">CONTENT . LAYOUT AND DESIGN**


 * Disucss:**


 * Topic ideas for graphics
 * Chalkboard exercise
 * Post-It note ideation
 * Design/layout

<span style="font-family: Arial,Helvetica,sans-serif;">You will make a graphic on a news topic of your choice, but it must be a serious new topic. You might find some data here that ties into your topic, or you may find inspiration here for choosing a topic: http://freevisualtools.wikispaces.com/DATA <span style="font-family: Arial,Helvetica,sans-serif;">Two versions: one print, one interactive.

<span style="font-family: Arial,Helvetica,sans-serif;">Both versions of your graphic must include:
 * <span style="font-family: Arial,Helvetica,sans-serif;">one map
 * <span style="font-family: Arial,Helvetica,sans-serif;">one chart
 * <span style="font-family: Arial,Helvetica,sans-serif;">one drawing**:** Choose an an object pertaining to your infographic project to trace, label and color in Adobe Illustrator. You MUST use the pen tool's bezier curve function (click and drag points).
 * <span style="font-family: Arial,Helvetica,sans-serif;">one flow chart

Have rough layouts ready for class discussion in one week: 9/28
Final print graphic due in two and half weeks: 10/10

FINAL INTERACTIVE GRAPHIC: Due in four weeks: 10/24

= Monday, 9/26 =
 * <span style="font-family: Arial,Helvetica,sans-serif;">FLOW CHARTS. DRAWING and LABELING **

Discuss: types of flowcharts

<span style="font-family: Arial,Helvetica,sans-serif;">• Draw in Adobe Illustrator, trace/label photo
 * <span style="font-family: Arial,Helvetica,sans-serif;">heavy outline around major parts
 * <span style="font-family: Arial,Helvetica,sans-serif;">blends
 * <span style="font-family: Arial,Helvetica,sans-serif;">simplify image
 * <span style="font-family: Arial,Helvetica,sans-serif;">layer elements
 * <span style="font-family: Arial,Helvetica,sans-serif;">limit to four tones

<span style="font-family: Arial,Helvetica,sans-serif;">

<span style="font-family: Arial,Helvetica,sans-serif;">A variety of short, fun Illustrator drawing tutorials

<span style="font-family: Arial,Helvetica,sans-serif;">**• Finish your astronaut drawing. Research the gear this astronaut is wearing and add labels and brief descriptions pointing to each item. Add a title and two-line subhead at top.**
 * <span style="color: #ff00ff; font-family: Arial,Helvetica,sans-serif;">Homework: **<span style="font-family: Arial,Helvetica,sans-serif;">(due next class)

= Wednesday, 9/29 =
 * <span style="font-family: Arial,Helvetica,sans-serif;">DRAWING/LABELING **

<span style="font-family: Arial,Helvetica,sans-serif;">• Discuss next steps on print graphic project. It must include:
 * <span style="font-family: Arial,Helvetica,sans-serif;">one map
 * <span style="font-family: Arial,Helvetica,sans-serif;">one chart
 * <span style="font-family: Arial,Helvetica,sans-serif;">one drawing
 * <span style="font-family: Arial,Helvetica,sans-serif;">one timeline

<span style="font-family: Arial,Helvetica,sans-serif;">• Discuss labeled/narrative graphics <span style="font-family: Arial,Helvetica,sans-serif;">• Guest speaker

= Monday, 10/3 =

<span style="font-family: Arial,Helvetica,sans-serif;">• Wrap around an object <span style="font-family: Arial,Helvetica,sans-serif;">• Columns and grids <span style="font-family: Arial,Helvetica,sans-serif;">• Type hierarchy in a circle to accent data <span style="font-family: Arial,Helvetica,sans-serif;">• Bullets • Indent, line after, etc.
 * <span style="font-family: Arial,Helvetica,sans-serif;">TYPE IN ADOBE ILLUSTRATOR **

= Wednesday, 10/5 = <span style="color: #f02121; font-family: Georgia,serif;">Work on your project <span style="color: #f02121; font-family: Georgia,serif;">Demo: How to use textures in Illustrator
 * <span style="font-family: Arial,Helvetica,sans-serif;">WORK ON PROJECT **

<span style="font-family: Arial,Helvetica,sans-serif;">Continue working on your drawing for your labeled graphic assignment.
 * <span style="color: #ff00ff; font-family: Arial,Helvetica,sans-serif;">Homework: **

= = = Monday, 10/10 =

** OPTIONAL EXTRA CREDIT ASSIGNMENT: 25 POINTS (DUE WED. FEB. 23) **
<span style="font-family: Arial,Helvetica,sans-serif;">Type tutorial part 1 <span style="font-family: Arial,Helvetica,sans-serif;">Type tutorial part 2
 * <span style="font-family: Arial,Helvetica,sans-serif;">• Do this type tutorial and then label your drawn image that pertains to your project. **<span style="font-family: Arial,Helvetica,sans-serif;"> Do the two-part Illustrator type tutorial on the wiki. Upload a jpeg file to the homework page called "Type tutorial"

<span style="font-family: Arial,Helvetica,sans-serif;">You will need the image below for your tutorial. Right click on it and save it to your desktop. Place into Illustrator on it's own layer and copy the type according to the video tutorials above.

<span style="font-family: Arial,Helvetica,sans-serif;">

=
<span style="color: #ff00ff; font-family: Arial,Helvetica,sans-serif; font-size: 13px; line-height: 19px;">Homework<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 19px; font-weight: normal; line-height: 28px;">: (due Monday, 2/21) =====

** Monday, 10/17 **
WORK ON PRINT LAYOUTS

**Final PRINT GRAPHICS DUE**
**Review print graphics**

• Show both professional and student work
• Introduction to Flash


 * ===== Overview of the program =====
 * ===== Build a small graphic in class =====

Create an interactive version of your print graphic in Flash.

 * To turn in your interactive versions of your print graphics, go to File/Export/Export Movie,which will give you a file that ends in .swf, which is what you'll upload to the "Interactive Graphic" folder.

||


 * Flash samples:**










 * Flash links:**

<span style="font-family: arial,sans-serif;">Gina Holder wine graphic

<span style="color: #5797b0; font-family: arial,sans-serif;">http://www.ginaholder.com/ graphics.html

<span style="font-family: arial,sans-serif;">Last semester's assignments

<span style="color: #5797b0; font-family: arial,sans-serif;">http://jrn338.wikispaces.com/ Final+projects+12-17

<span style="font-family: arial,sans-serif;">NY Times print:

<span style="font-family: arial,sans-serif;">Trailer living (by Frank): <span style="color: #5797b0; font-family: arial,sans-serif;">http://www.nytimes.com/2006/ 07/09/weekinreview/20060709_ TRAILER_GRAPHIC.html?_r=2& oref=slogin&oref=slogin

<span style="font-family: arial,sans-serif;">INTERACTIVE:

<span style="font-family: arial,sans-serif;">**NY Times:**

<span style="font-family: arial,sans-serif;">How people spend their day graph: <span style="color: #5797b0; font-family: arial,sans-serif;">http://www.smallmeans.com/new- york-times-infographics/

<span style="font-family: arial,sans-serif;">Afghanistan election map: <span style="color: #5797b0; font-family: arial,sans-serif;">http://www.smallmeans.com/new- york-times-infographics/

<span style="font-family: arial,sans-serif;">China minorities map: <span style="color: #5797b0; font-family: arial,sans-serif;">http://www.nytimes.com/ packages/khtml/2006/10/11/ nyregion/20061011_CRASH_ GRAPHIC.html

<span style="font-family: arial,sans-serif;">Guitar: <span style="color: #5797b0; font-family: arial,sans-serif;">http://www.nytimes.com/ interactive/2008/02/21/travel/ escapes/20080221_MARTIN_ GRAPHIC.html#step1

<span style="font-family: arial,sans-serif;">Viginia Tech: <span style="color: #5797b0; font-family: arial,sans-serif;">http://www.nytimes.com/2007/ 04/17/us/20070417_SHOOTING_ GRAPHIC.html?_r=2&oref=slogin

<span style="font-family: arial,sans-serif;">Manhattan apt. bldg. plane crash: <span style="color: #5797b0; font-family: arial,sans-serif;">http://www.nytimes.com/ packages/khtml/2006/10/11/ nyregion/20061011_CRASH_ GRAPHIC.html

<span style="font-family: arial,sans-serif;">Sea ice globes: <span style="color: #5797b0; font-family: arial,sans-serif;">http://www.nytimes.com/ interactive/2007/10/01/ science/20071002_ARCTIC_ GRAPHIC.html#first

<span style="font-family: arial,sans-serif;">Home Runs: <span style="color: #5797b0; font-family: arial,sans-serif;">http://www.nytimes.com/ref/ sports/20070731_BONDS_GRAPHIC. html?th&emc=th <span style="color: #5797b0; font-family: arial,sans-serif;">Interactive news graphics: http://elearningexamples.com/examples/multimedia-journalism/911/


 * ACTIONSCRIPT 3.0 CODE:**

-
stop;

home.addEventListener(MouseEvent.CLICK, clickAbout);

function clickAbout(eventObj:MouseEvent)

{

gotoAndStop("home");

}

about.addEventListener(MouseEvent.CLICK, clickHome);

function clickHome(eventObj:MouseEvent)

{

gotoAndStop("about");

}

stop;

frame1buttonname.addEventListener(MouseEvent.CLICK, clickSection);

frame2buttonname.addEventListener(MouseEvent.CLICK, clickSection);

function clickSection(evtObj:MouseEvent)

{

gotoAndStop(evtObj.target.name);

}

-
var homeTween:Tween = new Tween(home_mc, "alpha", Regular.easeOut, 0, 1, 1.5, true);

** Wednesday, 10/26 **
No class. I will be away.

• More on using Flash including:

 * Code snippets
 * Easing
 * Slideshow
 * Alpha

Two parts: 1) Flash tutorials. Quiz in two weeks. 2) Did You Know storytelling with Flassh
 * Homework**:

=1) Complete Flash tutorials=

You have received an email invitation to join Lynda.com for a minimal cost (for what you get!) Join, and open
=Flash Professional CS5 Essential Training= Download this PDF file to see which lessons you must do: = =
 * There will be a hands-on Flash quiz next //Monday// to test your knowledge.**

[|http://www.lynda.com/Flash-CS5-tutorials/flash-professional-cs5-essential-training/59964-2.html?srchtrk=index%3A1%0Alinktypeid%3A2%0Aq%3AFlash Professional CS5 Essential Training %0Apage%3A1%0As%3Arelevance%0Asa%3Atrue%0Aproducttypeid%3A2]

=**2) Did You Know type storytelling in Flash due Monday, Nov. 14**= In one week we will discuss in class the framework of the story you want to tell. Have a beginning, middle and an end to your story. For example, you might open with the problems, followed by the impact of those problems and then maybe end with solutions. I want to hear a few specific data examples.
 * Create a 60 second (at least, but it can be longer) Flash animation that tells a story based on health and poverty stats culled from the Children's Defense Fund. Pretend that they are your client and they want you to tell the story of children in a new way.

@http://www.childrensdefense.org/home.html

There is information under "Research library" tab.

This should tell a story with a beginning, middle and an end. For instance, it may start off with the current state of children's health and poverty, what that results in and what we should do about it.

It must be a mix of text and simple illustration and move along at a pace similar to the Did You Know videos, with text that stays onscreen just long enough to read.

You may use photos, but there must be illustration in this, too.

It must have a music soundtrack that you can legally use, meaning it is open source and royalty free, or it may be your own if you know music. This site has some music, but googling will find you more. @http://www.partnersinrhyme.com/pir/free_music_loops.shtml

Have fun! You could be building this as you do the Lynda.com tutorials will be a great help to you for this project.

Upload to Angel into **Flash Storytelling** folder.

||

• How to nest animations in movie clips in Flash
My video tutorial here

** Wednesday, 11/9 **
• Work on Did You Know grapihic

Old curriculum below this! Ignore.
<span style="font-family: Arial,Helvetica,sans-serif;">Week 4: <span style="font-family: Arial,Helvetica,sans-serif;">Monday, 9/20 <span style="font-family: Arial,Helvetica,sans-serif;">GRAPHIC DESIGN 1 <span style="font-family: Arial,Helvetica,sans-serif;">• Review charts

<span style="font-family: Arial,Helvetica,sans-serif;">Design a graphic about rock climbing using Adobe Illustrator and these images: <span style="font-family: Arial,Helvetica,sans-serif;">http://www.flickr.com/photos/karlgude/sets/72157624872731789/detail/

<span style="font-family: Arial,Helvetica,sans-serif;">Title must be: The ABCs of Rock Climbing

<span style="font-family: Arial,Helvetica,sans-serif;">Wednesday: 9/22 <span style="font-family: Arial,Helvetica,sans-serif;">GRAPHIC DESIGN 2

<span style="font-family: Arial,Helvetica,sans-serif;">Week 5: <span style="font-family: Arial,Helvetica,sans-serif;">Monday, 9/27 <span style="font-family: Arial,Helvetica,sans-serif;">DESIGN A s m a l l PRINT GRAPHIC <span style="font-family: Arial,Helvetica,sans-serif;"> Pen tool exercise: (scroll down to Number 9) <span style="font-family: Arial,Helvetica,sans-serif;"> http://vector.tutsplus.com/tutorials/tools-tips/illustrators-pen-tool-the-comprehensive-guide/

<span style="font-family: Arial,Helvetica,sans-serif;">Homework: Due next Monday (10/4) <span style="font-family: Arial,Helvetica,sans-serif;">Three things:

<span style="font-family: Arial,Helvetica,sans-serif;">1) Finish your rock climbing graphic. No need to write it. The type can be dummy. Upload a jpeg to the homework wiki page called "Rock Climbing Graphic."

<span style="font-family: Arial,Helvetica,sans-serif;">3) Adjust your one-column drawn graphics from last week to reflect the comments we made during class. This will be rolled into your total grade for the assignment. Place it on the wiki page right below your first version of the graphic.

<span style="font-family: Arial,Helvetica,sans-serif;">Wednesday, 9/29 <span style="font-family: Arial,Helvetica,sans-serif;">INSTRUCTOR OUT. CLASS CANCELED (Snow day ;)

<span style="font-family: Arial,Helvetica,sans-serif;">Week 6: <span style="font-family: Arial,Helvetica,sans-serif;">Monday, 10/4 <span style="font-family: Arial,Helvetica,sans-serif;">• Review rock climbing graphics <span style="font-family: Arial,Helvetica,sans-serif;">• Watch film <span style="font-family: Arial,Helvetica,sans-serif;">• Flint project overview <span style="font-family: Arial,Helvetica,sans-serif;">* Make mind maps of Flint

<span style="font-family: Arial,Helvetica,sans-serif;">Homework: <span style="font-family: Arial,Helvetica,sans-serif;">None

<span style="font-family: Arial,Helvetica,sans-serif;">Wednesday, 10/6 <span style="font-family: Arial,Helvetica,sans-serif;">Flint discussion of website categories

<span style="font-family: Arial,Helvetica,sans-serif;">Homework: <span style="font-family: Arial,Helvetica,sans-serif;"> I sent you invitations from Lynda.com to sign up for the online tutorials. This is mandatory. The cost is about $25. <span style="font-family: Arial,Helvetica,sans-serif;"> Start with: <span style="font-family: Arial,Helvetica,sans-serif;"> Flash CS4 Professional Essential Training <span style="font-family: Arial,Helvetica,sans-serif;"> You have from now until next Wednesday (10/13) to complete this portion of the tutorial. DO NOT wait until the last minute. This is extensive training. <span style="font-family: Arial,Helvetica,sans-serif;"> We will have a hands-on quiz on Wed. the 13th worth 100 points to test your knowledge. No make ups. <span style="font-family: Arial,Helvetica,sans-serif;"> Only do these sections in this tutorial: <span style="font-family: Arial,Helvetica,sans-serif;"> 1, 3, 5 (skip "Understanding timelines" and "Using the Art Deco Tool"), 11, 12, 13, 14, 15 (Only Illustrator integration part), 16

<span style="font-family: Arial,Helvetica,sans-serif;">Week 7: <span style="font-family: Arial,Helvetica,sans-serif;">Monday, 10/11 <span style="font-family: Arial,Helvetica,sans-serif;">Flint discussion of website categories

<span style="font-family: Arial,Helvetica,sans-serif;">Brainstorming session:

<span style="font-family: Arial,Helvetica,sans-serif;">Flint documents detailing the issues:

<span style="font-family: Arial,Helvetica,sans-serif;"> Websites that build community, tell stories, share data and info.: <span style="font-family: Arial,Helvetica,sans-serif;"> http://www.cnn.com/SPECIALS/war.casualties/index.html <span style="font-family: Arial,Helvetica,sans-serif;"> http://mediastorm.com/ <span style="font-family: Arial,Helvetica,sans-serif;"> http://widerimage.reuters.com/timesofcrisis/ <span style="font-family: Arial,Helvetica,sans-serif;"> http://repoweramerica.org/wall/ <span style="font-family: Arial,Helvetica,sans-serif;"> http://www.google.org/flutrends/ <span style="font-family: Arial,Helvetica,sans-serif;"> http://www.wfp.org/ <span style="font-family: Arial,Helvetica,sans-serif;"> http://www.youtube.com/cop15#g/c/26A02117D1F88AC0

<span style="font-family: Arial,Helvetica,sans-serif;">Wednesday, 10/13 <span style="font-family: Arial,Helvetica,sans-serif;">Flash <span style="font-family: Arial,Helvetica,sans-serif;">[|birds.aiff]

<span style="font-family: Arial,Helvetica,sans-serif;">Week 8:

<span style="font-family: Arial,Helvetica,sans-serif;">Discuss website. <span style="font-family: Arial,Helvetica,sans-serif;">Paper plane contest

<span style="font-family: Arial,Helvetica,sans-serif;">Wednesday, 10/20 <span style="font-family: Arial,Helvetica,sans-serif;">• Discuss design <span style="font-family: Arial,Helvetica,sans-serif;">Online presentation: Design concepts <span style="font-family: Arial,Helvetica,sans-serif;"> • Make paper plane 'print' graphic in Adobe Illustrator <span style="font-family: Arial,Helvetica,sans-serif;">Chart types in Adobe Illustrator <span style="font-family: Arial,Helvetica,sans-serif;">General instructions on Chartmaking in Illustrator <span style="font-family: Arial,Helvetica,sans-serif;">(pages 6 and 7 show how to incorporate images)

<span style="font-family: Arial,Helvetica,sans-serif;">Paper plane data:

<span style="font-family: Arial,Helvetica,sans-serif;">Homework: (due 10/25) <span style="font-family: Arial,Helvetica,sans-serif;">Do only the Action Script 3 tutorials on Lynda.com that are listed in the document below. <span style="font-family: Arial,Helvetica,sans-serif;"> DO NOT just watch the videos. Download the files and work along with the tutorials. <span style="font-family: Arial,Helvetica,sans-serif;"> <span style="font-family: Arial,Helvetica,sans-serif;">Have a jpeg file of your paper plane layout posted on the wiki page called "Paper plane layout" under the homework link. This does not have to have finished art. I am looking for a general layout, a road map, that illustrates what your content is and where it will go. Include section heads over each area of the graphic so that we can understand what your plan is. <span style="font-family: Arial,Helvetica,sans-serif;">Your graphic must: <span style="font-family: Arial,Helvetica,sans-serif;"> • be letter sized <span style="font-family: Arial,Helvetica,sans-serif;"> • horizontal or vertical <span style="font-family: Arial,Helvetica,sans-serif;"> • include at least two graphs <span style="font-family: Arial,Helvetica,sans-serif;"> • include how to fold at least one paper plane <span style="font-family: Arial,Helvetica,sans-serif;"> • illustrate two techniques for throwing a plane. These must be traced from photos that you shot of someone throwing a plane.

<span style="font-family: Arial,Helvetica,sans-serif;">Week 9: <span style="font-family: Arial,Helvetica,sans-serif;">Monday, 10/25 <span style="font-family: Arial,Helvetica,sans-serif;">Continue working on your paper plane layouts. <span style="font-family: Arial,Helvetica,sans-serif;">Online presentation: Grids applied to previous student work

<span style="font-family: Arial,Helvetica,sans-serif;"> Homework: <span style="font-family: Arial,Helvetica,sans-serif;">Homework: (due Monday, 11/1) <span style="font-family: Arial,Helvetica,sans-serif;">• Continue with Lynda tutorial "Creating a First Web Site with Flash CS4 Professional", only doing numbers 0-5

<span style="font-family: Arial,Helvetica,sans-serif;">Wednesday, 10/27 <span style="font-family: Arial,Helvetica,sans-serif;">Begin Flash site of paper plane contest explanation. <span style="font-family: Arial,Helvetica,sans-serif;"> Your site needs to contain a home page with links from it to various content

<span style="font-family: Arial,Helvetica,sans-serif;">**Examples of interactive graphics from the New York Times** <span style="font-family: Arial,Helvetica,sans-serif;">Examples of New York Times graphics editor Graham Roberts' work <span style="font-family: Arial,Helvetica,sans-serif;">Andrew Devigal's links on delicious.com (Andrew is the multimedia editor of the New York Times)

<span style="font-family: Arial,Helvetica,sans-serif;">45 cool Flash websites

<span style="font-family: Arial,Helvetica,sans-serif;">Plan your site: <span style="font-family: Arial,Helvetica,sans-serif;">Four things to consider as you plan (details for each below) (from this link)
 * <span style="font-family: Arial,Helvetica,sans-serif;">The content: the substance, and information on the site should be relevant to the site and should target the area of the public that the website is concerned with.
 * <span style="font-family: Arial,Helvetica,sans-serif;">The usability: the site should be user-friendly, with the interface and navigation simple and reliable.
 * <span style="font-family: Arial,Helvetica,sans-serif;">The structure: of the web site as a whole.
 * <span style="font-family: Arial,Helvetica,sans-serif;">The appearance: the graphics and text should include a single style that flows throughout, to show consistency. The style should be professional, appealing and relevant.

<span style="font-family: Arial,Helvetica,sans-serif;">Content:
 * <span style="font-family: Arial,Helvetica,sans-serif;">Keep your site simple so visitors aren't overwhelmed with text and images
 * <span style="font-family: Arial,Helvetica,sans-serif;">Form follows function, so define what your goal is, who your audience is, etc, before you design.

<span style="font-family: Arial,Helvetica,sans-serif;">Usablility
 * <span style="font-family: Arial,Helvetica,sans-serif;">Put your best content at the top of the page.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Thoroughly plan your website around serving the user.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Simplify navigation.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Be consistent with navigation, such as menu locations.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Don't let buttons lead to dead ends. Have a back/return button.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Keep the file sizes of images small (72 dpi) for quick loading. Visitors get impatient having to wait for them to load.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Design webpages that load quickly.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Don't make pages too long - users don't like to scroll down too far.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Write as shortly and clearly as possible.

<span style="font-family: Arial,Helvetica,sans-serif;">Structure
 * <span style="font-family: Arial,Helvetica,sans-serif;">Lay out your site before building it using a mind map
 * <span style="font-family: Arial,Helvetica,sans-serif;">Keep your home page simple
 * <span style="font-family: Arial,Helvetica,sans-serif;">Break your site into home page, sections and sub sections
 * <span style="font-family: Arial,Helvetica,sans-serif;">Use a grid. Download a template for Illustrator here: @http://960.gs/
 * <span style="font-family: Arial,Helvetica,sans-serif;">How to divide up the grid

<span style="font-family: Arial,Helvetica,sans-serif;">Appearance
 * <span style="font-family: Arial,Helvetica,sans-serif;">Cool home pages (Flash ones)
 * <span style="font-family: Arial,Helvetica,sans-serif;">Break text into logical blocks.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Use plenty of 'white space'.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Carefully select color.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Type: consider these issues:typeface, contrast, line length, alignment emphasis
 * <span style="font-family: Arial,Helvetica,sans-serif;">Don't overuse flashing/animated graphics.

<span style="font-family: Arial,Helvetica,sans-serif;">Homework: (due Monday, 11/1) <span style="font-family: Arial,Helvetica,sans-serif;">Finish Lynda.com tutorials.

<span style="font-family: Arial,Helvetica,sans-serif;">Week 10: <span style="font-family: Arial,Helvetica,sans-serif;">Monday, 11/1 <span style="font-family: Arial,Helvetica,sans-serif;">Review how to make a Flash site using Action Script 3 <span style="font-family: Arial,Helvetica,sans-serif;">Continue to work on Flash version of paper plane contest explanation.

<span style="font-family: Arial,Helvetica,sans-serif;">Wednesday, 11/3 <span style="font-family: Arial,Helvetica,sans-serif;"> Finish Flash version of paper plane site.

<span style="font-family: Arial,Helvetica,sans-serif;">Homework: <span style="font-family: Arial,Helvetica,sans-serif;">Finish and submit your paper plane print and Flash graphics.

<span style="font-family: Arial,Helvetica,sans-serif;">To submit your final Flash graphics I want you to do the following:

<span style="font-family: Arial,Helvetica,sans-serif;"> 1) Upload it as a .swf file to the wiki (just as you would a Jpeg or a .PDF file.) by going to File/Export/Export movie and place it beneath your final print graphic. It should appear as a grey box on the page before you save it. Size it to match the width of your print graphic. <span style="font-family: Arial,Helvetica,sans-serif;"> 2) Upload BOTH your .fla (working Flash document) and .swf files to Angel in the folder "Paper plane graphics."

<span style="font-family: Arial,Helvetica,sans-serif;">Week 11: <span style="font-family: Arial,Helvetica,sans-serif;">Monday, 11/8 <span style="font-family: Arial,Helvetica,sans-serif;"> Review posted paper plane print and web graphics <span style="font-family: Arial,Helvetica,sans-serif;"> Show GIS and Google maps, online tools for visualizing data. You will need to know how to make these for your final project.

<span style="font-family: Arial,Helvetica,sans-serif;">Homework: (due Wed. 11/10) <span style="font-family: Arial,Helvetica,sans-serif;">Make two maps: <span style="font-family: Arial,Helvetica,sans-serif;"> 1) a GIS map using GeoCommons that illustrates two pieces of related data <span style="font-family: Arial,Helvetica,sans-serif;">You may use either "Make a Map" or "Upload Data." <span style="font-family: Arial,Helvetica,sans-serif;">Video tutorial Part 1 <span style="font-family: Arial,Helvetica,sans-serif;">Video tutorial Part 2 <span style="font-family: Arial,Helvetica,sans-serif;">Video tutorial Part 3

<span style="font-family: Arial,Helvetica,sans-serif;">2) a Google map that:
 * <span style="font-family: Arial,Helvetica,sans-serif;">locates where you live with a placemark
 * <span style="font-family: Arial,Helvetica,sans-serif;">locates CommArts with a different placemark
 * <span style="font-family: Arial,Helvetica,sans-serif;">shows the route you would take to get from your home to CommArts with a line
 * <span style="font-family: Arial,Helvetica,sans-serif;">embeds one video in either of the placemark boxes. It doesn't matter which placemark you use or which video you take from Youtube (To get the HTML code from a Youtube video just click on the small, gray "embed" button below the video.) This is just an exercise in how to embed a video (or photo from a photo site) in a Google map.

<span style="font-family: Arial,Helvetica,sans-serif;">Google map tutorial here

<span style="font-family: Arial,Helvetica,sans-serif;">Wednesday, 11/10 <span style="font-family: Arial,Helvetica,sans-serif;">Review homework maps <span style="font-family: Arial,Helvetica,sans-serif;">Discuss final project requirements

<span style="font-family: Arial,Helvetica,sans-serif;">Week 12 - 15: <span style="font-family: Arial,Helvetica,sans-serif;">Monday, 11/15 to Friday, 12/17

<span style="font-family: Arial,Helvetica,sans-serif;">Final project: Choose a news topic and create a print and online graphic that informs us about some aspect of it. <span style="font-family: Arial,Helvetica,sans-serif;">Your topic must have news value (it can't be about, for instance, how you make the best cinnamon toast on the planet!), and can be local, national or international in scope. It may pertain to MSU, also.

<span style="font-family: Arial,Helvetica,sans-serif;">Samples of online graphics from the New York Times

<span style="font-family: Arial,Helvetica,sans-serif;">Four things to consider as you plan (details for each below) (from this link)
 * <span style="font-family: Arial,Helvetica,sans-serif;">The content: the substance, and information on the site should be relevant to the site and should target the area of the public that the website is concerned with.
 * <span style="font-family: Arial,Helvetica,sans-serif;">The usability: the site should be user-friendly, with the interface and navigation simple and reliable.
 * <span style="font-family: Arial,Helvetica,sans-serif;">The structure: of the web site as a whole.
 * <span style="font-family: Arial,Helvetica,sans-serif;">The appearance: the graphics and text should include a single style that flows throughout, to show consistency. The style should be professional, appealing and relevant.

<span style="font-family: Arial,Helvetica,sans-serif;">Content:
 * <span style="font-family: Arial,Helvetica,sans-serif;">Keep your site simple so visitors aren't overwhelmed with text and images
 * <span style="font-family: Arial,Helvetica,sans-serif;">Form follows function, so define what your goal is, who your audience is, etc, before you design.

<span style="font-family: Arial,Helvetica,sans-serif;">Usablility
 * <span style="font-family: Arial,Helvetica,sans-serif;">Put your best content at the top of the page.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Thoroughly plan your website around serving the user.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Simplify navigation.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Be consistent with navigation, such as menu locations.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Don't let buttons lead to dead ends. Have a back/return button.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Keep the file sizes of images small (72 dpi) for quick loading. Visitors get impatient having to wait for them to load.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Design webpages that load quickly.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Don't make pages too long - users don't like to scroll down too far.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Write as shortly and clearly as possible.

<span style="font-family: Arial,Helvetica,sans-serif;">Structure
 * <span style="font-family: Arial,Helvetica,sans-serif;">Lay out your site before building it using a mind map
 * <span style="font-family: Arial,Helvetica,sans-serif;">Keep your home page simple
 * <span style="font-family: Arial,Helvetica,sans-serif;">Break your site into home page, sections and sub sections
 * <span style="font-family: Arial,Helvetica,sans-serif;">Use a grid. Download a template for Illustrator here: @http://960.gs/
 * <span style="font-family: Arial,Helvetica,sans-serif;">How to divide up the grid

<span style="font-family: Arial,Helvetica,sans-serif;">Appearance
 * <span style="font-family: Arial,Helvetica,sans-serif;">Cool home pages (Flash ones)
 * <span style="font-family: Arial,Helvetica,sans-serif;">Break text into logical blocks.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Use plenty of 'white space'.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Carefully select color.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Type: consider these issues:typeface, contrast, line length, alignment emphasis
 * <span style="font-family: Arial,Helvetica,sans-serif;">Don't overuse flashing/animated graphics.

<span style="font-family: Arial,Helvetica,sans-serif;">Final project <span style="font-family: Arial,Helvetica,sans-serif;">media type="googlecalendar" key="m7q0cn5d02colr2v6luvjeui38%40group.calendar.google.com" ARG0="&ctz=America/New_York" height="600" width="800"

<span style="font-family: Arial,Helvetica,sans-serif;">Finals week: =<span style="font-family: Arial,Helvetica,sans-serif;">Final project graphics are due by Friday, 12/16 (end of finals week) =

<span style="font-family: Arial,Helvetica,sans-serif;">Notes <span style="font-family: Arial,Helvetica,sans-serif;">Homework: Photograph a how-to sequence

<span style="font-family: Arial,Helvetica,sans-serif;">Flint discussion of website categories <span style="font-family: Arial,Helvetica,sans-serif;">DRAW NARRATIVE HOW-TO SEQUENCE

<span style="font-family: Arial,Helvetica,sans-serif;">Wednesday, 10/13 <span style="font-family: Arial,Helvetica,sans-serif;">CONTINUE SEQUENCE <span style="font-family: Arial,Helvetica,sans-serif;">SEQUENCE IN FLASH <span style="font-family: Arial,Helvetica,sans-serif;">Homework: Draw floor plan of a room in your home

**MASKS IN THREE PARTS.**

**Create :**


 * 1) **Poster**
 * 2) **An interactive graphic** **five W's and an H (who, what, where, when why and how)**
 * 3) **Your own mask**

**These must be centered around a mask or group of similar masks that visually explains some them.**

Consider the techniques listed below to visually explain your subject on both your poster and your interactive graphic.

Use maps, charts, diagrams, mind maps, timelines, etc, whatever works:


 * 1) Compare and contrast
 * 2) Cause and effect
 * 3) Measure
 * 4) Locate
 * 5) Group, cluster
 * 6) Break apart
 * 7) Label
 * 8) Associate
 * 9) Way-find
 * 10) Sequence
 * 11) Rank
 * 12) Series over time
 * 13) Composition
 * 14) Flows


 * 1) POSTER**: **due Monday, April 18.**

Create a poster that visually explains some aspect of your mask idea: Maybe show how it's used, a ritual surrounding it, other masks from other cultures that are used for similar purposes, what the different colors on it mean, etc. Keep it simple by focusing on just one or two of the five W's and an H (who, what, where, when why and how), or an aspect of them. It must be informational; it must instruct us about something we didn't know about these masks. Instead of simply showing a bunch of different masks, explain them. Try to relate them, group them or associate them. Keep the text simple. Below is a .pdf file with some concepts that may inspire you when laying out your poster (perhaps the circles represent your mask). Will your information fit one or a combination of any of these? Make your own, if not. I'd like to see your layout on Wednesday, so come prepared. Let me know if you have any questions.




 * Must be 3 feet wide by 4 feet tall.
 * Make sure you size your document correctly! Don't design this on a letter-sized page.
 * Must work in black and white, but if you want to color it by hand, go for it!
 * It must have minimal text, but still be clear as to it's purpose.
 * Print it out at Kinkos (the on on Michigan Ave near Harrison can do this). It should run you under $10. Take them a pdf file.


 * 2) INTERACTIVE GRAPHIC: Due Tuesday, April 26**


 * Will expand on the poster to include much more information. What are it's** **five "W"s and an "H" (who, what, where, when why and how)****?**


 * It's origins and culture
 * Two realistic drawings done in Adobe Illustrator:


 * 1) Your mask (will be used to highlight and explain certain characteristics of the mask, such as expression, color, etc) and 2) A full
 * 2) A human figure wearing your mask with their body acting out the mood the mask creates.


 * It's meaning and function (disguise, ceremonial, entertainment, punishment, protection, ritual, etc.).
 * What materials it's made of.
 * Masks in other cultures that are associated with or influenced by your chosen mask as well as contemporary interpretations. Visualize these in Illustrator.
 * Human facial expressions that mimic your mask. Get in front of your webcam, or talk a friend into doing it!
 * How and when it is worn
 * A page showcasing the mask you made (see below)


 * Technically and creatively, your site must contain:**


 * Minimal text, many visuals. You may use photos, but your mask must be drawn in Adobe Illustrator.
 * Two animations inside of movie clips that are helpful to explaining your mask. Perhaps you click a button and it activates an animation that overlays one mask over another, or tweens one mask style into another, or pulls all of the pieces together.
 * At least five pages (frames). Your own mask design may be one of them (see below).


 * 3) CREATE YOUR OWN MASK:** **Due Tuesday, April 26**

In addition, you must design and **create your own mask** on paper using any method you like, such as photos, construction paper, drawings, etc., or you may buy a mask mold from from a craft store and build your mask that way. This will be a separate page on your site.

Explain:


 * It's meaning and purpose
 * What other masks influenced you
 * Materials used to create it