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

Homework, due Wednesday:
• 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):

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.
Did it compare or contrast elements. Was this successful?

Upload critique to Angel to folder marked "Critique a Graphic"


Wednesday, 9/7

CRITIQUE GRAPHICS. DISCUSS MAPS

• Review critique graphics. Each of you will discuss in great detail the graphic you were assigned based on your written critques.
• Maps presentation
• Illustrator overview (if time allows)

Great time-lapse video and blog shows how a city map was drawn in Illustrator.

No homework



Monday, 9/12

MAPS
Make an area map in Adobe Illustrator
Michigan_map_for_tracing_good.jpg
MAP FOR TRACING. RIGHT CLICK AND "SAVE AS" TO YOUR DESKTOP

How to make a road map in Illustrator

KARL GUDE VIDEO MAP TUTORIALS
Part 1 of 9: Adobe Illustrator map tutorial SIZING REF. MAP, LAYERS external image hd_video_result_page_logo-vfl3u0IPG.png
Part 2 of 9: Adobe Illustrator map THE PEN TOOL external image hd_video_result_page_logo-vfl3u0IPG.png

Part 4 of 9: Adobe Illustrator //map tutorial// TIP FOR ...

Part 5 of 9: Adobe Illustrator //map tutorial// HOW TO ...

Part 6 of 9: Adobe Illustrator map tutorial BORDERS AND LAKES external image hd_video_result_page_logo-vfl3u0IPG.png
Part 7 of 9: Adobe Illustrator map tutorial CITY DOTS & LABELS external image hd_video_result_page_logo-vfl3u0IPG.png
Part 8 of 9: Adobe Illustrator map tutorial DRAWING ROADS external image hd_video_result_page_logo-vfl3u0IPG.png
Part 9 of 9: Adobe Illustrator map tutorial TRIMMING A MAPS EDGES external image hd_video_result_page_logo-vfl3u0IPG.png

Homework: due Monday before class
• 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.


Wednesday, 9/14


CITY MAPS
• Discuss city maps


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





MSU_campus_map_detail.jpg



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


CHARTS. DISCUSS FIRST PROJECT: A PRINT AND INTERACTIVE GRAPHIC

• Discuss charts
• Show how to create a chart in Illustrator

Types of charts explained
Chart types in Adobe Illustrator
General instructions on Chartmaking in Illustrator

Illustrator video chart tutorials (by Karl Gude)
How to make a bar chart in Adobe Illustrator, Part 1
How to make a bar chart in Adobe Illustrator, Part 2
Scatter plot chart

DATA SOURCES
http://freevisualtools.wikispaces.com/DATA

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

, CHARTS
• Discuss topics/data for small graphics project (2 hours)
• Mind maps: bubbl.us
• Plot other charts and package them in Illustrator (line/pie/circle)

Homework (due Monday 2/7):
•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.
• 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.
Charts are due before class next week (all assignments are due a week later. Late homework will result in a 10-point deduction.
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.
You might find some data here that ties into your topic, or you may choose a topic from these reference links: http://freevisualtools.wikispaces.com/DATA
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.
• Upload to Angel folder, “Charts” before the next class. VERY important! Save your Illustrator file as a PDF file and upload that to Angel.
DO NOT UPLOAD AN ORIGINAL ILLUSTRATOR FILE. Just go up to “File/Save As” and, where it says “Format” scroll down to the “Adobe PDF” option
OPEN YOUR PDF FILE AND LOOK AT IT BEFORE YOU UPLOAD IT TO ANGEL. SOMETIMES THE REFERENCE CHART BELOW IS VISIBLE AND MAKES THE CHART YOU MADE UNREADABLE. YOU MUST DELETE IT.

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

Resource links:

Types of charts explained

Chart types in Adobe Illustrator

General instructions on Chartmaking in Illustrator

VIDEO TUTORIALS: How to make a chart in Adobe Illustrator (by Karl Gude)

How to make a bar chart in Adobe Illustrator, Part 1

How to make a bar chart in Adobe Illustrator, Part 2

Scatter plot chart (not by Karl)

Karl's_three_charts.jpg

Wednesday, 9/21

DESIGN AND TYPOGRAPHY
• Discuss labeled graphics
• Discuss design
Online presentation: Design concepts
About.com design terms/considerations
• Show previous student layouts.

• What works, what doesn't. Anatomy of type
• Different ways to work with type with different visual tools: timeline, sequence (Ed Gabel eye), etc.

• Build a layout of your graphic in Adobe Illustrator. Place homework under "Graphic Layout" tab in the Homework section.
This should look like a solid layout, something you could show to an editor.
Your layout must be 8.5 x 11 inches (standard letter size) and can be vertical or horizontal.
Include:
  • a visible grid (place guides along your grid)
  • placeholders for images
  • write chapter headlines
  • include dummy text wherever text will appea

Think about:
  • 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:

    • 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

CONTENT. LAYOUT AND DESIGN

Disucss:

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



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
Two versions: one print, one interactive.

Both versions of your graphic must include:
  • one map
  • one chart
  • 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).
  • one flow chart

FINAL PRINT GRAPHIC :

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

FLOW CHARTS. DRAWING and LABELING

Discuss: types of flowcharts

• Draw in Adobe Illustrator, trace/label photo
  • heavy outline around major parts
  • blends
  • simplify image
  • layer elements
  • limit to four tones

Space_suit_for_tracing_astronaut_JRN338.jpg

A variety of short, fun Illustrator drawing tutorials

Homework: (due next class)
• 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.


Wednesday, 9/29

DRAWING/LABELING

• Discuss next steps on print graphic project. It must include:
  • one map
  • one chart
  • one drawing
  • one timeline

• Discuss labeled/narrative graphics
• Guest speaker

Monday, 10/3


TYPE IN ADOBE ILLUSTRATOR
• Wrap around an object
• Columns and grids
• Type hierarchy in a circle to accent data
• Bullets
• Indent, line after, etc.



Wednesday, 10/5

WORK ON PROJECT
Work on your project
Demo: How to use textures in Illustrator

Homework:
Continue working on your drawing for your labeled graphic assignment.

Monday, 10/10


ther ways to achieve the same effect without adding more visual stimulation.

OPTIONAL EXTRA CREDIT ASSIGNMENT: 25 POINTS (DUE WED. FEB. 23)


• Do this type tutorial and then label your drawn image that pertains to your project. Do the two-part Illustrator type tutorial on the wiki. Upload a jpeg file to the homework page called "Type tutorial"
Type tutorial part 1
Type tutorial part 2

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.

Illustrator_type_tool_tutorial_BLUE_CAR.jpg


Wednesday, 10/12

Homework: (due Monday, 2/21)
WORK ON PRINT LAYOUTS, PHOTOSHOP
• Work on your print graphics
• I will discuss layouts with you individually. Take notes on the comments so that you can incorporate them into your layout!
• Photoshop

Monday, 10/17

WORK ON PRINT LAYOUTS

Wednesday, 10/19
Final PRINT GRAPHICS DUE
Review print graphics
• Critique final print graphics. NOTE: You will be expected to take notes during this discussion and to make improvements before submitting (must submit by next class time)

Monday, 10/24

INTERACTIVE GRAPHICS, FLASH

• Discuss interactivity in storytelling

• Show both professional and student work

• Introduction to Flash

  • Overview of the program
  • Build a small graphic in class


HOMEWORK
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:

Gina Holder wine graphic

http://www.ginaholder.com/ graphics.html



Last semester's assignments

http://jrn338.wikispaces.com/ Final+projects+12-17



NY Times print:

Trailer living (by Frank): http://www.nytimes.com/2006/ 07/09/weekinreview/20060709_ TRAILER_GRAPHIC.html?_r=2& oref=slogin&oref=slogin



INTERACTIVE:

NY Times:

How people spend their day graph: http://www.smallmeans.com/new- york-times-infographics/

Afghanistan election map: http://www.smallmeans.com/new- york-times-infographics/

China minorities map: http://www.nytimes.com/ packages/khtml/2006/10/11/ nyregion/20061011_CRASH_ GRAPHIC.html

Guitar: http://www.nytimes.com/ interactive/2008/02/21/travel/ escapes/20080221_MARTIN_ GRAPHIC.html#step1

Viginia Tech: http://www.nytimes.com/2007/ 04/17/us/20070417_SHOOTING_ GRAPHIC.html?_r=2&oref=slogin

Manhattan apt. bldg. plane crash: http://www.nytimes.com/ packages/khtml/2006/10/11/ nyregion/20061011_CRASH_ GRAPHIC.html

Sea ice globes: http://www.nytimes.com/ interactive/2007/10/01/ science/20071002_ARCTIC_ GRAPHIC.html#first

Home Runs: http://www.nytimes.com/ref/ sports/20070731_BONDS_GRAPHIC. html?th&emc=th
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.


-------------------------------------------------------------------------------------


Monday, 10/31
INTERACTIVE GRAPHICS
• More on using Flash including:
  • Code snippets
  • Easing
  • Slideshow
  • Alpha

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


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

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

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.




Wednesday, 11/2
INTERACTIVE GRAPHIC
• How to nest animations in movie clips in Flash
My video tutorial here
Monday, 11/7
INTERACTIVE GRAPHIC
• Discuss Did You Know story frameworks.Work on Flash graphic

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

Monday, 11/14
• Flash quiz
Wednesday, 11/16
INTERACTIVE GRAPHIC DUE
• Critique final Did You Know graphics. NOTE: You will be expected to take notes during this discussion and to make improvements before submitting (must submit by class time Monday)
Monday, 11/21


Wednesday, 11/23
Work on final project
Monday, 11/28
Wednesday, 11/30
Monday, 12/5
Wednesday, 12/7
Critique FINAL PROJECT

Finals week
No fianl exam in this class






















Old curriculum below this! Ignore.











Week 4:
Monday, 9/20
GRAPHIC DESIGN 1
• Review charts

Design a graphic about rock climbing using Adobe Illustrator and these images:
http://www.flickr.com/photos/karlgude/sets/72157624872731789/detail/

Title must be: The ABCs of Rock Climbing

Wednesday: 9/22
GRAPHIC DESIGN 2

Week 5:
Monday, 9/27
DESIGN A s m a l l PRINT GRAPHIC
Pen tool exercise: (scroll down to Number 9)
http://vector.tutsplus.com/tutorials/tools-tips/illustrators-pen-tool-the-comprehensive-guide/

Homework: Due next Monday (10/4)
Three things:

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

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.

Wednesday, 9/29
INSTRUCTOR OUT. CLASS CANCELED (Snow day ;)

Week 6:
Monday, 10/4
• Review rock climbing graphics
• Watch film
• Flint project overview
* Make mind maps of Flint

Homework:
None

Wednesday, 10/6
Flint discussion of website categories

Homework:
I sent you invitations from Lynda.com to sign up for the online tutorials. This is mandatory. The cost is about $25.
Start with:
Flash CS4 Professional Essential Training
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.
We will have a hands-on quiz on Wed. the 13th worth 100 points to test your knowledge. No make ups.
Only do these sections in this tutorial:
1, 3, 5 (skip "Understanding timelines" and "Using the Art Deco Tool"), 11, 12, 13, 14, 15 (Only Illustrator integration part), 16

Week 7:
Monday, 10/11
Flint discussion of website categories

Brainstorming session:


Flint documents detailing the issues:


Websites that build community, tell stories, share data and info.:
http://www.cnn.com/SPECIALS/war.casualties/index.html
http://mediastorm.com/
http://widerimage.reuters.com/timesofcrisis/
http://repoweramerica.org/wall/
http://www.google.org/flutrends/
http://www.wfp.org/
http://www.youtube.com/cop15#g/c/26A02117D1F88AC0

Wednesday, 10/13
Flash
birds.aiff

Week 8:

Discuss website.
Paper plane contest

Wednesday, 10/20
• Discuss design
Online presentation: Design concepts
• Make paper plane 'print' graphic in Adobe Illustrator
Chart types in Adobe Illustrator
General instructions on Chartmaking in Illustrator
(pages 6 and 7 show how to incorporate images)


Paper plane data:






Homework: (due 10/25)
Do only the Action Script 3 tutorials on Lynda.com that are listed in the document below.
DO NOT just watch the videos. Download the files and work along with the tutorials.

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.
Your graphic must:
• be letter sized
• horizontal or vertical
• include at least two graphs
• include how to fold at least one paper plane
• illustrate two techniques for throwing a plane. These must be traced from photos that you shot of someone throwing a plane.

Week 9:
Monday, 10/25
Continue working on your paper plane layouts.
Online presentation: Grids applied to previous student work

Homework:
Homework: (due Monday, 11/1)
• Continue with Lynda tutorial "Creating a First Web Site with Flash CS4 Professional", only doing numbers 0-5


Wednesday, 10/27
Begin Flash site of paper plane contest explanation.
Your site needs to contain a home page with links from it to various content

**Examples of interactive graphics from the New York Times**
Examples of New York Times graphics editor Graham Roberts' work
Andrew Devigal's links on delicious.com (Andrew is the multimedia editor of the New York Times)

45 cool Flash websites


Plan your site:
Four things to consider as you plan (details for each below) (from this link)
  • 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.
  • The usability: the site should be user-friendly, with the interface and navigation simple and reliable.
  • The structure: of the web site as a whole.
  • 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.

Content:
  • Keep your site simple so visitors aren't overwhelmed with text and images
  • Form follows function, so define what your goal is, who your audience is, etc, before you design.

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

Structure

Appearance



Homework: (due Monday, 11/1)
Finish Lynda.com tutorials.

Week 10:
Monday, 11/1
Review how to make a Flash site using Action Script 3
Continue to work on Flash version of paper plane contest explanation.

Wednesday, 11/3
Finish Flash version of paper plane site.

Homework:
Finish and submit your paper plane print and Flash graphics.

To submit your final Flash graphics I want you to do the following:

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.
2) Upload BOTH your .fla (working Flash document) and .swf files to Angel in the folder "Paper plane graphics."


Week 11:
Monday, 11/8
Review posted paper plane print and web graphics
Show GIS and Google maps, online tools for visualizing data. You will need to know how to make these for your final project.

Homework: (due Wed. 11/10)
Make two maps:
1) a GIS map using GeoCommons that illustrates two pieces of related data
You may use either "Make a Map" or "Upload Data."
Video tutorial Part 1
Video tutorial Part 2
Video tutorial Part 3

2) a Google map that:
  • locates where you live with a placemark
  • locates CommArts with a different placemark
  • shows the route you would take to get from your home to CommArts with a line
  • 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.

Google map tutorial here


Wednesday, 11/10
Review homework maps
Discuss final project requirements


Week 12 - 15:
Monday, 11/15 to Friday, 12/17

Final project: Choose a news topic and create a print and online graphic that informs us about some aspect of it.
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.

Samples of online graphics from the New York Times


Four things to consider as you plan (details for each below) (from this link)
  • 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.
  • The usability: the site should be user-friendly, with the interface and navigation simple and reliable.
  • The structure: of the web site as a whole.
  • 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.

Content:
  • Keep your site simple so visitors aren't overwhelmed with text and images
  • Form follows function, so define what your goal is, who your audience is, etc, before you design.

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

Structure

Appearance



Final project


Finals week:

Final project graphics are due by Friday, 12/16 (end of finals week)




Notes
Homework: Photograph a how-to sequence

Flint discussion of website categories
DRAW NARRATIVE HOW-TO SEQUENCE

Wednesday, 10/13
CONTINUE SEQUENCE
SEQUENCE IN FLASH
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