Graphic Design / Interactive Design / Fine & Applied Arts / Parkland College

GDS 230 Motion Design
Project 2: Animated Editorial Illustration + e-Newsletter

Instructor: Liza Wynette


To develop conceptual thinking skills. To communicate ideas visually and verbally. To become familiar with marketing principles. To explore illustration and photography styles. To apply design principles to real-world visual communication problems as it relates to motion design.

Secondary objectives

To utilize the Adobe Creative Suite and as layout and production tools.


Design an animated editiorial illustration for a news article and organization of your choice. Create an e-newsletter utilizing your illustration to create a "teaser" preview of the article to entice users to visit the organizations website. There are several free e-newsletter websites available. For this project, we will be using Mail Chimp, a popular a service that allows users to design clean contemporary layouts. It also manages mailing lists and tracks user experience. See example.

Kelsey Heinrichs
AIGA Eye on Design: Motion Illustrations
AIGA Eye on Design: The Secret to Making Highly Shareable Social Vids and GIFs?


Animation specifications:

  • animated GIF (first frame must be a stand-alone frame)
  • GIF file size must be under 130k
  • newsletter no wider than 600px

Newsletter specifications:

  • company logo
  • title of article and minimal body copy
  • "read more" link to the original article
  • clickable button (subscribe)
  • newsletter no wider than 600px

Your design must communicate a visual narrative and show an understanding of unity, emphasis, balance, rhythm, and color theory.


1. Research for inspiration:  Research existing animated editorial illustrations, animated GIF's, and award-winning editorial illustration. Be sure to review trade publications (Print, How, Communication Arts), art director's annuals, and award annuals. Scan, take screenshots, or collect digital copies of designs that you think are successful. Publish your research on your personal Process Page for discussion. Be sure to caption each image and cite the source. 

2. Marketing research: Search for an interesting news article that could benefit from an illustration. Research the news organization that published/posted the news story. Consider choosing a local, regional, or 'niche' source instead of a widely known news organization. What is the history of the news organization? What is their focus? Who is the target audience? Who is the competition? Do they have a political or social leaning? Acquire a logo of the business. Consider subscribing to their e-newsletter. Analyze your research and write a written statement of objectives in the form of a memo (see sample brief). Be sure to include descriptive adjectives in the "character" paragraph (seevocabulary wheel ). Email your brief as a shared Google Doc or an attached Word file to

3. Develop the storyboard:  In your sketchbook begin to conceptualize storyboards for this project (see examples). Make at least 10 sketches of all possible directions you might take this project. Draw exactly how you intend to layout key frames of your animation. Edit your concepts down to your best three ideas and redraw them using a felt tip pen. Scan and publish your storyboards on your personal Process Page for critique. Be prepared to discuss how your design fulfills the client's marketing objectives.

4. Keyframes: Based on the critique of the above, create prototype "mock-ups" in Photoshop or Illustrator which will show exactly how select key frames in your animation will look. Generate multi page PDF's of your keyframes and publish them on your personal Process Page for critique ( example). Be prepared to talk about what design principles are utilized in your design. 

5. Final critique of animation: Based on the critique of the above, revise your design (if needed), then animate your art in After Effects (optional) and Photoshop. Publish your finished GIF onto your personal Process Page for critique. Prepare a presentation to "sell" your design to the client during final critique. Be prepared to justify your design decisions and talk about how your solution fulfills the marketing objectives outlined in your brief.

6. Create an e-newsletter in Mail Chimp: Sign-up for a Mail Chimp account (if you don't already have one) and design an e-newsletter featuring your animated GIF. The design and content should compliment your illustration and entice readers to sign up for the organization's e-newsletter or subscription. When your design is complete, send a test email to your teammates. Reply to all your teammates offering revision suggestions. Prepare a presentation to "sell" your e-newsletter design to the client during final critique. Be prepared to justify your design decisions and talk about how your solution fulfills the marketing objectives outlined in your brief.

6. Grading: Based on the critique of the above, revise your project as needed. (duplicate your files to create new versions, do not delete older versions). Post a link to your animated GIF and url to your e-newsletter. Review your personal Process Page and make sure you have an accurate record of your process. Upload your animated GIF into the cobra dropbox. Include your Mail Chimp newsletter url in the comments section. You will not receive credit for this project if any of the above elements are missing.

7. Portfolio presentation: If you are happy with the results of this project, consider including it in your portfolio. If necessary, continue to make refinements until you are 100% satisfied with the project. Be sure to save all your files for future editing.

7. Extra credit: Submit your project into the annual student show by printing an art gallery quality proof of your project and mounting it on foam board.. Submit your entry into this OneDrive dropbox. Also submit the entry using the online entry form at Your project may win a cash prize and be published in a showcase of student work on Parkland's website.

Last updated: 2/8/17 ■ Webmaster: Paul Young