A Few More Breaths Project Summary

Treating Cerebral Malaria in Children – by Jon Lowenstein

When he gave inhaled nitric oxide to a blue baby for the first time 20 years ago, doctor Warren M. Zapol challenged conventional wisdom of those who believed this gas was a poison. Today, most blue babies are given nitric oxide and more than 100,000 babies have been saved in the United States and Europe due to this treatment.

Now Dr. Warren M. Zapol, MD is Emeritus Anesthetist-in-Chief at the  Massachusetts General Hospital and he has a new dream: there are 500-million malaria infections per year – of these, 1-million die and 85% of the victims are children. Can he and others help to create a few more precious breaths for millions of babies who contract cerebral malaria?

To answer this question, he has teamed up with the doctors and nurses at Epicentre and Mbarara University of Science and Technology in Uganda where they will test inhaled nitric oxide on 100 babies inflicted with cerebral malaria. Most of these babies arrive at the hospital in a deep coma and die within 24 – 48 hours, despite treatment with anti-malarial medications.

NOOR photographer Jon Lowenstein traveled with Dr. Zapol to Mbarara photographing this budding study, the doctors’ efforts, the impact of Malaria on the children, mothers and families of Uganda.

Upon his return this past November he had unique access to document this groundbreaking study. If successful the widespread use of nitric oxide to treat malaria could change the lives of millions of people.

Related Resources

Project Overview

Download Summary, Student Project Overview and Phase One | PDF

We have partnered with noor images, an international photo agency based in Amsterdam, to produce a tablet publication on the topic of treating cerebral malaria in children. In addition we will be working with designer and Newhouse alumnus, David Miller as a sounding board for our project. David is producing a website for this project.

You will be provided with all the assets needed to produce your own functioning tablet prototype; still images, video and text. After each of you have produced a publication candidate we will then choose a final design and move into the last part of the semester refining and producing a single publication using InDesign & Adobe Edge Animate.

In addition you are required to produce at least one original alternative story element for the project. An example might be an interactive timeline or infographic based on topic data that adds a new layer of information for the user. Try and think of new and exciting ways of using interactive tools, both from within InDesign, Edge Animate and outside leveraging JavaScript libraries such as the Greensocks Animation Platform.

There will be a lot of technical hurdles we will encounter and overcome during the semester, be ready to be wrong but do your best to research current best practices for our target device, the iPad 3 (Retina Display).

Deliverables/Requirements

Phases

Phase One : Research

(5 Possible Points)

Phase 1: Due 01.23

You can’t make good design decisions without understanding the broader issue. To that end you are assigned to research and report on your findings regarding the topic of cerebral malaria, its treatment in general and specifically for children. You will be expected to produce a 2-4 page research paper that gives an overview of the topic and specific data that supports your findings. This can serve as the basis for the interactive information graphic requirement of your final individual project. You will also need to research what has already been done with interactive design and multimedia storytelling related to this subject.

Be prepared to present your findings to class.

Requirements

Phase Two: Creative Brief & Mood Board

(5 Possible Points)

Phase 2: Due 02.06/02.27

It’s always hard to start a project, so much content (or none at all yet!) to go over, what color palette, how will the graphics be displayed, typographical treatment and animation style/treatment? Mood boards to the rescue!  A mood board is meant to offer a sense of visual direction and get you some raw content to riff off of, be inspired by and really, just to start the conversation.  So go out there, scan objects, grab images off the web, rip off magazine type treatment, slap colors together and even try your hand and including all these with some actual images you’ve received from out main project. Oh, as the second (B) part of this phase we’ll be adding animation to our mood board!

Two parts

We will be breaking this main project assignment into two parts; part A will be a flat mood board with no moving parts; part B will take your mood board and add animation and some interactivity.

Part A, Creative Brief, Flat Mood Board (drafts due 02.06)

Here’s you chance to find amazing color, type and maybe a poster frame from a video you;d like to incorporate in your mood board. Remember this is to get your creative juices flowing, be brave and really have fun!

Related Resources

Deliverables/Requirements

Part B,  Final; Creative Brief, Animated Mood Board (due 02.27)

Using Adobe Edge Animate you will take your flat (lame) design and add some life. Remember, think like a movie director and use animation to guide the visual story and enhance the user experience and understanding of the message! You need to do your tutorial homework and start thinking about how things will integrate.

Deliverables/Requirements

Reading List

Related Resources

Phase Three: Paper Mockups

(10 Possible Points)

Phase 3: Due 02.13/02.27

OK this is where we start getting our hands dirty, literally. We’re not going to start pushing pixels just yet but try and keep on the path of touch interaction with physical elements. In this phase you’ll take what you’ve discovered in phases 1&2 and start sketching your your story.
The point is to touch and explore the unique physical interaction that happens in this new medium. You’ll throw much of what you make away but will continue to craft your physical sketch until it’s a rough representation of what you’re going for. We’re taking a unique approach by mixing pencil, paper, photographs and at least one element that you must physically pinch, tap or tap/drag to interact with to reveal the second state or screen. Think of creative ways to use the pull-tabs/draws  technique in InDesign DPS  (Example: http://www.youtube.com/watch?v=OmMnH5h2chw).

Get in-touch with your sense touch party people!

Deliverables/Requirements

Reading List

02.13

02.20

02.27

Related Resources

Phase 4: Mockups

(15 Possible Points)

Phase 4: Due 03.06/03.27

In order to evolve our sketches into something more useful you will produce a layered mockup representation of your final design. You will be expected to have as close to all the detail work represented as possible, including your interactive information graphic. If you include animation (you should!) you will also need to represent that animation inside your mockup through at least three stages of the animation sequence.

Downloads

REQUIREMENTS

GRADING CRITERIA

  • Quality of Design
  • Does it make sense?
  • Does it provoke an emotional reaction?
  • Proper naming conventions (all files, layers and images, etc.)
  • Well written rationale
  • Does your design help tell the story?
  • Meet turn-in requirements; blog + Newhouse server

STUDENT EXAMPLES (Flash based but you’ll get the idea!)

  • Flash Example: David Miller Biopic on Tom Waits | ZIP
  • Full Package (PSD) : Renee Stevens Biopic On Cipe Pineles | Zip

TUTORIAL RESOURCES

Phase 5: InDesign & Edge Production

(25 Possible Points)

Phase 5: Due 04.17/04.27/05.08

Download Assignment | PDF

This is where the rubber (all your hard work) meets the road (Indesign & Edge). You will take your research, understanding of touch interaction & animation along with your flat (lifeless!) mockups; bring it all together using Adobe Indesign and Edge.  Don’t forget all you’ve learned along the way, don’t get caught up in the technology; understand you’re telling a story, not just making it pretty and adding some animation. Think emotion, empathy, grid, hierarchy and usability. Really consider how you can utilize the unique setting and technology of the tablet to further your message to the audience.

You will have to really push yourself fin this last phase to leran new ways of interacting with content and using both the Adobe and Edge technologies. This can not be done by just playing around with the apps. You must set aside time to read (Digital Publishing with Adobe InDesign CS6) and do the assigned in-book tutorials (Edge Classroom in a book).

DEADLINES

  1. 04.17; Full publication roughs in Indesign (w/o? animation)

  2. 04.27; Full Indesign roughs with animation and interactivity

  3. 05.08; Final turn-in, server + Shared Folio + blog

REQUIREMENTS

  • Complete packaged InDesign folder
  • Complete Adobe Edge Project Folder(s) (everything I would need to open your animated projects)
  • Shared Folio via your Adobe Account (share to kharpe01@syr.edu)
  • At least one animated sequence
  • At least one interactive element (tap/drag…)
  • Rational
  • Self-evaluation
  • Blog Post with screen shots of each page, links to tutorials used and your rational

GRADING CRITERIA

  • Overall quality of the design
    • Helps tell a story
    • Typography
    • Grid
    • Image edit
    • Use of color
    • Consistency
    • Does it speak to the intended audience
  • Use of Animation
    • Is it targeted and purposeful
    • Appropriate
    • Enhance the story
  • Turned in properly
    • Server folder, last-name-first-project-title
      • InDesign packaged folder
      • Rational (Including tutorial links used)
      • Self-evaluation
      • Edge project folder
    • Shared Folio
      • Shared using your Adobe ID with me, kharpe01@syr.edu
    • Blog Post
      • Screen shots of each page
      • Rational
      • Links to tutorials used

REQUIRED READINGS

Hunk 1

  • Designing For Emotion, Ch.4; Emotional Engagement
  • Digital Publishing IND CS6 , Ch.5; Tablet Applications
  • Adobe Edge Animate , Ch. 5/6; Designing Animation & Refining Animation and Adding Complexity

Hunk 2

  • Designing For Emotion, Ch.5; Overcoming Obstacles
  • Digital Publishing IND CS6, Ch.4; Layout Controls
  • Adobe Edge Animate , Ch.6/7; Adding Basic Interactivity & Embedding Media & Advanced Interactivity

Hunk 3

  • Designing For Emotion , Ch.6/7; Forgiveness & Risk and Reward
  • Digital Publishing IND CS6, Ch.2; Interactive Tools
  • Adobe Edge Animate, Ch.7; Publishing and Responsive Design

TUTORIAL RESOURCES