Wekly+curriculum+SS10

 **Spring semester, 2010 (****SS10)**
 * JRN303: The news graphics class **

Index  • Course requirements • Grading points

  Week 1: INTRO TO COURSE  Week 2: THINKING WITH A PENCIL  Week 3: GRAPHIC DESIGN  Week 4: INFORMATION DESIGN  Week 5: THE COMPUTER DRAWN IMAGE <span class="wiki_link"> Week 6: QUANTIFYING WITH CHARTS <span style="font-family: Arial,sans-serif;"><span class="wiki_link"> Week 7: LOCATING WITH MAPS <span style="font-family: Arial,sans-serif;"><span class="wiki_link"> Week 8: DATA MAPS <span style="font-family: Arial,sans-serif;"><span class="wiki_link"> Week 9: MOTION GRAPHICS <span style="font-family: Arial,sans-serif;"><span class="wiki_link"> Week 10: CONTENT <span style="font-family: Arial,sans-serif;"><span class="wiki_link"> Week 11-14: FINAL PROJECT <span style="font-family: Arial,sans-serif;"><span class="wiki_link"> Week 15: FINAL PROJECT CRITIQUE
 * <span class="wiki_link"> • Curriculum **

= **Week 1:** =


 * INTRO TO COURSE**

Wednesday: • Class expectations. Homework, format for naming and submitting graphics, Angel • Talks: what is/isn't a graphic that communicates information. • Break apart a graphic/page/website/motion graphic: type, color, map, chart, diagram, etc. • Story about me exercise

**//Homework://** //• Find an infographic that is fully legible, evaluate it and// //write a half page critique of it using your judgment as a typical **reader**:// //Consider these issues:// //What works, what doesn't.// //What confused you?// //What was left out?// //What questions didn't it answer?// //What do you think about the colors, the usability, the flow of information, the logic, the design.// //Was it effective, instructive? Etc.// //@http://infographicsnews.blogspot.com///

//• Cut and paste your critique on the "Critique page" under the "Homework" link at left. At the top of your critique include your full name and a link to the largest (legible) version of the graphic you chose. (Do not embed the graphic itself on the page).//

Wednesday: • Presentation/discussion:History and theory of graphic visualization. Types of visual communication: narratives, maps, charts, diagrams. • Project: Earthquake. What can be visualized. Use the graphics to tell a story. Post-it notes.
 * HISTORY OF GRAPHIC VISUALIZATION**

= **Week 2:** =

**THINKING WITH A PENCIL**

Monday: //MLK holiday. No class//

Wednesday: • Review homework • Sketch<span style="font-family: Arial,sans-serif;">! Human figure graphic tools (arrows, icons, boxes, pointer boxes, etc), objects in front of them. <span style="font-family: Verdana,sans-serif;">• I sometric drawing. Draw by imagining a box for angles. http://www.printfreegraphpaper.com/ http://math.about.com/od/worksheets/ss/Grids_6.htm • Show Wikispaces

http://www.youtube.com/watch?v=CYgwD-W-Rao isometric video

**// Homework //**// : // // • Draw five human figures in your sketchbooks and then draw your dorm room isometrically. Include furniture, objects. (this counts as one of your sketchbook assignments) //

//• Create your Wikispaces site and join mine JRN303.wikispaces.com. You will use a separate page for each assignment and adhere to the names I give in each homework assignment.//

**Week 3:** 1/25


 * GRAPHIC DESIGN**

Monday: • Presentation/discussion: Graphic design
 * basic principles: balance, hierarchy, proximity, alignment, consistency, contrast, white space
 * media type="custom" key="5228859"
 * on design principles.

//**Homework:**// //• Assemble a single page or ad design using the elements from three different magazine pages or ads.//

Wednesday: • Working with type and the grid. terminology, kerning, leading, letter spacing, paragraph width, accent, point size, hierarchy, typeface, font, family, serif, san serif, color, condensed, regular, bold. http://www.designingwithtype.com/5/home.php • Presentation/discussion: Graphic design: Proximity, visual hierarchy, symmetry/asymmetry, repetition, unity, contrast, dynamics, emphasis) • Position shapes in InDesign to reflect the placements discussed in class • Overview of InDesign.

//**Homework:**// //• Redesign Alaska ad// //• Upload to Wiki (page name: "Redesign Alaska")//

**Week 4:** 2/1 //(turn in sketchbooks)//


 * INFORMATION GRAPHICS**

Monday: • Review Alaska ads • Presentation/discussion:
 * Benefits of visualizing information. Ways to communicates information visually. Types of graphics: map, chart, diagram, etc.
 * Elements of information design and graphics: Tufte. Redundancy, multiples, storytelling, cause and effect, comparing and contrasting, grouping, sorting, connecting, etc. ,

// **Homework:** // // • Using InDesign, create a five-page document illustrating some aspect of "you" utilizing the following five elements. Do not design into a layout. Once concept per page://
 * 1) //compare and contrast//
 * 2) //cause and effect//
 * 3) //measure//
 * 4) //locate//
 * 5) //group//

Wednesday: • Organize the homework elements into a single graphic. Label.

//**Homework:**// // • Design an 8 1/2" x 11 " horizontal or vertical description about an object that explains it. Use photographic images from Google, adhere to a grid structure, no superfluous ornament, use a sans serif typeface// //• Upload wiki (page name: Object layout) (Make sure to save as a PDF file with your full name!)//

**Week 5:** 2/8, 2/10

** THE COMPUTER DRAWN IMAGE **

Monday: • Adobe Illustrator overview. • Draw elements in Adobe Illustrator. http://vector.tutsplus.com/tutorials/tools-tips/illustrators-pen-tool-the-comprehensive-guide/

// **Homework:** // //• Illustrator tutorial//

Wednesday: • Adobe Illustrator: isometric drawing

//**Homework:**// • Finish your isometric drawing, color and label • Upload to wiki (page name: Isometric drawing in Illustrator)

// **Week 6:** 2/15, 2/17 // //(turn in sketchbooks)//

// **QUANTIFYING WITH CHARTS** //

Monday: // • The world of charts and graphs. Looking at data and graph styles, icons, etc. // // • Make a chart in Adobe Illustrator. //

// • Create a bar, line and pie on a single topic. You can find data at the Census Bureau, Bureau. of Labor statistics, American Cancer Society, etc. // http://www.census.gov/ http://www.census.gov/ipc/www/idb/ //<span style="font-family: Arial,sans-serif;">• Design them into the precise grouping as reference file on Angel // //<span style="font-family: Arial,sans-serif;"> • Upload to wiki. (page name: Three charts) //
 * // Homework //**// : //


 * BREAKING DOWN CONTENT FOR A GRAPHIC**

// Wednesday: // //• Introduce graphic project// //• More charts in Illustrator: resizing, putting into layout, text//

You will take the first steps toward the creation of an 11-inch x 17-inch graphic on the subject of your choice. The graphic must contain the following elements: //**• A title**// //**• 5 chapters (or sections)**// //**• at least one map**// //**• at least one chart**// //**• at least one diagram**//
 * Homework ** :

Here is a link to several graphics done by professionals for you to get ideas from

Your homework for this weekend will be to **research, refine and lay out your idea:**

//Here are the steps you need to do://

• Write down everything you can think of about your topic onto post-it notes. One idea per note. • Find logical groupings: these all deal with financing, these with logistics, these with history, these with ... Try to limit the number of groups you make to between five and ten. • Research your subject further and add to your groupings with new information and detail
 * 1) Brainstorm with Post it notes:**

• Now that you can see your topic laid out before you in organized groups, make decisions about what you want to include in your graphic • Ask yourself what story you want to tell here, and who your audience is • Edit your content. Let the necessary speak • Take away the post-it notes that you no longer need. • The groupings that remain will be your five chapters/sections in your graphic
 * 2) Make decisions:**

• Put the main theme of your topic in the center • Surround it with your main chapter topics, and more if you like. You can still continue to make decisions here. It's a process! • Expand on these with the details from your post-it notes and add new ideas where detail is required.
 * 3) Create a mind map from your groupings:** (USE this site to create your mind map: http://bubbl.us/)

HERE'S MIND MAP made on Bubbl.us



• What is your plan to package your five sections together? • Decide what is most important and what is least important. • If the reader had to walk away with just one thing, what would that be? What ever you decide is your most important element.
 * 4) Lay out a design in Adobe InDesign or Illustrator:**

• Use a grid. Five to six columns is best. Link to some grid information • Keep the layout simple. Remember the dragon hands • Lay your graphic out hierarchically, with important topics at the top • Have a dominant object, or area of focus • Keep the typography simple. One or two fonts, a serif and san serif • Use color intelligently, for navigation, to attract the eye [|Link to good color article]
 * 5) Think about these things when doing your layout:**

media type="custom" key="5393111"

// **Week 7:** // <span style="font-family: Arial,sans-serif;"> 2/22, 2/24


 * GRAPHIC**

Monday: • Review and critique layouts for your graphics • Use remaining time to refine your design based on critiques

//• Continue to refine your design. Begin to generate elements for your graphic.//
 * // Homework //**// : //

Wednesday: • Work on your graphics

//** Homework ** : // //• Type tutorial in Adobe Illustrator//: Type tutorial part 1 Type tutorial part 2

You will need this image 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. // • Upload to wiki (page name: Street map) //

<span style="color: #870303; font-family: Arial,sans-serif;">**Week 8:** 2/29, 2/30

// Monday: // Work on your graphics. Instructor will review them with you one-on-one
 * PROJECT GRAPHIC CONTINUED**

//** Homework ** : // //Continue building elements for graphic.//

// Wednesday: // Work on your graphics. Instructor will review them with you one-on-one

//** Homework ** : // //GIS map// // • Upload to wiki (page name: Data map) //

**Spring Break**
<span style="color: #730202; font-family: Arial,sans-serif;"> **Week 9:** 3/15, 3/17

Here is a US map you can use in Illustrator. You must draw individual states.



Monday: • Adobe Illustrator. Refresher: Divide into grid. How to modify charts and maps. • Review layouts of project graphics with students.
 * PROJECT GRAPHIC CONTINUED**

//** Homework ** : // //Continue on project graphic//

Wednesday: • Adobe Illustrator. Refresher. • Work on project graphic.

//• Prepare project graphic for brief one-on-one critique on Monday. In this I expect to see all of your content presented in some form. Actual charts plotted, maps drawn, text written. Final graphic will be due on Wed.//
 * // Homework //**// : //

<span style="color: #730202; font-family: Arial,sans-serif;">**Week 10:** 3/29, 3/31

Monday: Critique project graphics one on one
 * PROJECT <span style="font-family: Arial,sans-serif;">GRAPHIC **

//** Homework ** : // //• Finish graphics//

Wednesday: • Project graphics due • Critique project graphics

//•// This weekend please log into Lynda.com (you'll need to find the invitation I sent you), pay your 30 bucks and do this tutorial: "Flash CS4 Professional Essential Training" which consists of several short videos.
 * // Homework //**// : //

In order to understand this you will need to do more than just watch the videos. Download the exercise files by clicking on the tab at the top of the tutorial page Try out the things they're showing you in Flash. This can take you anywhere from two to several hours, depending on your commitment to learning. You can do it once, or divide it up.

In this tutorial you can skip:
 * 1) 2 Drawing in Flash
 * 2) 8 Working with Bones
 * 3) 9 Working with 3D elements

Please note that I will assume all of you have done this tutorial by class time on Monday. If you haven't, you will be left behind.

<span style="color: #770303; font-family: Arial,sans-serif;">**Week 1 2: **

Monday: • Finish critiquing final print graphics • Make a simple website in Flash NOLS photos

//** Homework ** : // //• Continue with Lynda tutorial// **//"Creating a First Web Site with Flash CS4 Professional//**", only doing numbers 0-3 (ending before video section) • In Illustrator, design a simple three page website, similar to what was shown in class and attached above.

=Now, upload your slide show to your MSU AFS server space=


 * What is your AFS space?** Called the MSU Andrews File Server (AFS), this is your personal online server space, and every student has one. You only need your MSU login and password to access it. //(You cannot upload a Soundslides project directly to your Wiki, a Wordpress blog, Facebook or any other type of commercial domain. It must be uploaded directly to a personal server space (like AFS or your own domain that you may have purchased for your own website) that you can access and then from there embedded into your wiki.//

===//**You can upload to your AFS server two ways, depending on whether you are ON campus of OFF campus:**//=== (Here are some helpful links beyond the instructions below if you need them, including how to use **Netfiles** for accessing AFS if you like: http://techbase.msu.edu/article.asp?id=2468#s53070)

//**How to upload to AFS from ON campus:**//
====So my Nols site would be written like this: **[] user /gudek/nols.html**==== Or you can substitute "user" for the ~ symbol, which would look like this: **[|https://www.msu.edu/~]gudek/nols.html**
 * 1) Select //“Connect to server”// from the //“Go”// menu in the Finder.
 * 2) Type in the address **afs.msu.edu**
 * 3) Enter you MSU mail ID and password
 * 4) Click on **//your MSU mail name//** to open your personal AFS space.
 * 5) Find the folder called "**web**"
 * 6) Go to your Flash document: select File/Publish, which will create two new documents in your Flash project folder, one with a **.swf** designation and the other **.html**. Drag both files into the "**Web**" folder in your AFS space
 * 7) Now, test your Flash project in a browser! There are **two URLs** you can type in to see it and **both will work**. The only difference between them is one has the word "user" in it and the other uses the ~ symbol instead.
 * ===<span class="wiki_link_ext">[]. user <span class="wiki_link_ext">/ your msu mail ID**///Name.html//**===

//**How to upload when OFF campus:**//
If you are going to upload your final Soundslides project from off campus, you will not be able to access your AFS folder using "Go", so you will need to use what's called FTP software. But all it does is access your AFS space, after which you perform the same steps from #5 above, under How to upload to AFS from ON Campus"

FTP, which stands for "File Transfer Protocol", is free and there are different ones available for the Mac and for the PC. I prefer to use Fetch for the Mac, and show below how that works.

Download free FTP software for uploading files to your AFS space:
//I explain how to upload using Fetch below. For more information on uploading to AFS using Fetch and Filezilla, go to:// Uploading files to your AFS space: Read section, "Using FTP"
 * **Mac OS:** Fetch
 * **Windows:** Filezilla:>

==**Filezilla is recommended for the PC, and here is a tutorial for that:** How to use Filezilla to upload to the web==

How to upload to Fetch for the Macintosh:
> Host name: //**afs.msu.edu**// > User name: MSU NetID > Password: •••••• > > Here is a screen shot of Fetch: > > > > ** NOTE! EVERYTHING FROM THIS POINT ON IS IDENTICAL TO THE SECTION ABOVE FOR UPLOADING ON CAMPUS.** ===<span class="wiki_link_ext">[]. user <span class="wiki_link_ext">/ your msu mail ID/name of soundslides folder in AFS/ //(the one you renamed from "publish_to_web")//=== ====So my Gude family video would be written like this: **[] user /gudek/gudes/**==== ===<span class="wiki_link_ext">[] ~ your msu mail ID/name of soundslides folder in AFS/ //(the one you renamed from "publish_to_web")//=== ====//So my Gude family video would be written like this: **[] ~ gudek/gudes/**//====
 * 1) With both Fetch and Filezilla, you will need to log into your personal AFS space (what these FTP softwares refer to as the "host"):
 * 1) You will now be inside of your AFS space.
 * 1) Find the folder called "**web**"
 * 2) Drag the folder called "**publish _to_web**" (inside your Soundslides project folder) into the "**web**" folder in your AFS space.
 * 3) You will want to rename the "**publish _to_web**" folder something that reflects what your slide show is about. In my case, since it was about my family, I renamed it "**gudes**" by dragging across the words **"publish _to_web"** and typing it. Make sure it is one word or if multiple words, you will need to use the underscore character to link the words together.
 * 4) Now, test your slide show in a browser! There are two URLs you can type in to see it and both will work. The only difference between them is one has the word "user" in it and the other uses the ~ symbol instead.

FINALLY: TEST YOUR LINK, THEN UPLOAD TO ANGEL AND PLACE ON YOUR WIKI PAGE

Wednesday: • Look at various kinds of motion graphics, including those from last semester: // How to storyboard a motion graphic. //

//• Flash tutorial 2//
 * // Homework //**// : //


 * <span style="color: #a00303; font-family: Arial,Helvetica,sans-serif;"> Week 13–14: ** 3/22-4/23


 * <span style="font-family: Arial,sans-serif;"> WORK ON FINAL PROJECT GRAPHICS **

Submit outline, Week 11 (page name: Final project outline)

**<span style="font-family: Arial,sans-serif;"> Week 15: ** 4/26


 * <span style="font-family: Arial,sans-serif;"> CRITIQUE PROJECTS **