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

GDS 230 Motion Design
Project 1: GIF Banner Ad

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 as layout and production tools.


Design an animated GIF banner ad for a local business or organization. Try to limit the published file size to no more than 150K.

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

Note: High resolution stock photos and illustrations are available from Photospin. Contact your instructor for more information.


1. Marketing research: Research the business you will be designing the banner ad for. What is the history of the business? Are there any unique selling points for this business? Who is the target audience? Who is the competition? Acquire a reproduction quality logo of the business. 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 (see vocabulary wheel ). Email your brief as a shared Google Doc or an attached Word file to

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

3. Keyframe execution: 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 web-ready GIFs or JPEGs of your keyframes and publish them on your personal Process Page for critique (see examples). Be prepared to talk about what design principles are utilized in your design. 

4. Final critique: Based on the critique of the above, revise your design (if needed), then animate your art. Publish your finished project as a link from 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.

5. 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). Review your personal Process Page and make sure you have an accurate record of your process. Place a GIF into P1 cobra dropbox. You will not receive credit for this project if any of the above elements are missing.

6. 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 (download this banner template). 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: 1/18/17 ■ Webmaster: Paul Young