Newly discovered design methodologies including art direction, asset management, voice over recording, and general project management.

1. STORYBOARDING A SERIOUS COMIC
Case Study

2. Created by the Community Prevention and Intervention Unit of
University of Texas Southwestern Medical Center with a grant funded by
the Centers for Disease Control (CDC).
PROFILE

3. SITUATION
Prevention with Positives (PwP) is an initiative to help persons living with
HIV to get assistance and care through 10 components and related
resources.
•UTSW wanted to share the importance of PwP.
•Did not with traditional elearning.
•More of an awareness campaign in support of CDC initiative.
•Tell a story about the journey of two people with different
circumstances learning of their HIV positive status and the managed
care received.

4. SOLUTION
Write a story with an educational emphasis presented in a graphic novel
format and comic style artwork. Develop in an accessible authoring
software for packaging and delivery to the PwP website.

5. Splash screen concept sketch

7. PROCESS
• Script writing
• Voiceover (VO) recording
• Storyboarding
• Character Development
• Art Direction
• Speech Bubbles
• UI layout & design
• Asset Management
• Lessons Learned
IDEA DONE

8. THE SCRIPT

9. SCRIPT – ORIGINAL

10. Audio filename indicator
Example: 2A.wav included
2.1, 2.2, and 2.3 dialogue
SCRIPT – REVISED FOR VO

11. PROCESS
• Script writing
• Voiceover (VO) recording
• Storyboarding
• Character Development
• Art Direction
• Speech Bubbles
• UI layout & design
• Asset Management
• Lessons Learned
IDEA DONE

12. THE STORYBOARDING PROCESS

13. STEP 1: Sequential narrative sketches

14. STEP 2: Adjust flow

15. STEP 3: Get a really big board

16. STEP 4: Create storyboard from sequential narrative sketches

17. STEP 5: Rinse & Repeat

18. STEP 6: Keep working and refining the storyboard from script

19. Stoyrboarding
STEP 7: OMG! What have I got myself into?!

20. PROCESS
• Script writing
• Voiceover (VO) recording
• Storyboarding
• Character Development
• Art Direction
• Speech Bubbles
• UI layout & design
• Asset Management
• Lessons Learned
IDEA DONE

21. CHARACTER DEVELOPMENT

22. GREGNeed
Pro
Artist
Dude
STEP 1:
@hubriscomics

23. STEP 2: Feed the artist!

24. STEP 3: Pick a style, research, and draw a lot of concepts

25. INITIAL character development model sheet lineup

26. FINAL character development model sheet lineup

27. • No change to Frances and Carlos
• #1 RJ look became #2 Stu
• #2 RJ got a new look
• Tiffani needed to be “cuter”
• Jan needed to look “older”
#1
#2

28. CHARACTER MODEL SHEETS
FOUR INCH THICK FOLDER of ARTWORK

29. PROCESS
• Script writing
• Voiceover (VO) recording
• Storyboarding
• Character Development
• Art Direction
• Speech Bubbles
• UI layout & design
• Asset Management
• Lessons Learned
IDEA DONE

30. ART DIRECTION

31. SCENE 4:
Frances reviews Tiffani’s file
SCENE 4:
Frances leaves en route
to Tiffani’s apartment
SCENE 5:
Frances knocking on Tiffani’s
apartment door.
Q: Health Department to Tiffani’s apartment. How do we know that’s Frances knocking on the door?
A: The prop. The large purple beaded bracelet in earlier scenes establishes the character in later scenes.

32. USE REAL OBJECTS TO MODEL
Frances’ bracelet

33. Health Department Community Health Clinic Community Support Center
The story revolved around three Community-Based
Organizations (CBOs) that had to look similar as they
are all in the same urban neighborhood.

34. Parkside Community
The overhead shapes need to match the building elevations (previous slide).
Health Department
Positive Empowerment
Community Health Clinic

35. PROCESS
• Script writing
• Voiceover (VO) recording
• Storyboarding
• Character Development
• Art Direction
• Speech Bubbles
• UI layout & design
• Asset Management
• Lessons Learned
IDEA DONE

36. speech
334
‘nuff said!
bubbles

37. PROCESS
• Script writing
• Voiceover (VO) recording
• Storyboarding
• Character Development
• Art Direction
• Speech Bubbles
• UI layout & design
• Asset Management
• Lessons Learned
IDEA DONE

38. UI LAYOUT & DESIGN
Global access to slide out panels
Global access to slide out panels
Global access to slide out panels

39. Slide out panel to review character
backgrounds and biographies

40. Slide out panel to review an interactive
map of the three agencies

41. Slide out panel to review an
interactive DVD-style [Menu]

42. PROCESS
• Script writing
• Voiceover (VO) recording
• Storyboarding
• Character Development
• Art Direction
• Speech Bubbles
• UI layout & design
• Asset Management
• Lessons Learned
IDEA DONE

43. ASSET MANAGEMENT
Get and STAY organized!

44. Audio file naming convention matches script.

45. ALL artwork split out from background and
followed same script naming convention

46. ALL speech bubbles follow same script naming convention
including dialogue number and character name.

47. PROCESS
• Script writing
• Voiceover (VO) recording
• Storyboarding
• Character Development
• Art Direction
• Speech Bubbles
• UI layout & design
• Asset Management
• Lessons Learned
IDEA DONE
7 months-ish

48. LESSONS LEARNED
Script before Storyboard
Character Development early and DEFINE characteristics
Character voice actors record dialogue at same time
Prioritize visual design changes in phases
Art directing an artist in an unfamiliar industry

49. THANK YOU!
LET’S DO IT AGAIN!
Kevin Thorn
Storyboarding, art direction, development
@learnnuggets
NuggetHead Studioz
http://nuggethead.net
Greg Cravens
Illustrations
@HubrisComics
Hubris Comics
http://hubriscomics.com