Five Steps to Multimedia Storytelling

I. SEEK INSPIRATION
– Review similar sites to get ideas about how you might want to structure your site.

ONA Awards
Webby Awards
Site of the Day
Mobile Journalist Award
Communication Arts Web Picks

II.  CONCEPTUALIZING YOUR INTERACTIVE/MULTIMEDIA STORY (Click for complete checklist)
– What are the editorial components: features, interviews, chronologies, Q&As, vignettes, how-to’s/checklists, explainers, profiles etc.
– Match these to media types best suited for each: slideshows, panoramas, maps, timelines, interactive graphics, interactive audio/video, raw/streaming audio/video

III. SITE PLANNING: ARCHITECTURE & NAVIGATION (Click for examples)
– What is the most compelling way for an audience to experience your story?
– How is your story structured? Linear, non-linear, linear + non-linear branches etc.
– Is content organized by topics? chapters? geography, media type?
– Map out your site, including all the ways users can navigate your content.
– Storyboard your pages/site/features

IV. REVIEW CMS THEMES OR DIY MULTIMEDIA AUTHORING PLATFORMS

– WordPress has many themes that work for long-form features. In particular, newer modular themes like Divi maximize the creative freedom you have for producing your story. If your theme is missing functionality, look for a plugin that can fill in the gap.

Hosted WordPress site
-Pick a host: Namecheap ($17), Reclaim ($30), Godaddy ($60-$90)
– Pick a Theme
WordPress Themes
Divi

Using Divi WP Theme
Divi theme description
Divi documentation and tutorials

Sites Built with Divi
NYCityLens: Nightshift
NYCityLens: Killing Rikers
NYCityLens: Guns of New York
NYCityLens: End of Trash
NYCityLens: Lovenomics

How We Heal
Climate Countdown
Ladies’ Luck
Food Plight
The Maternity Divide
Sex, Apps & Bingo
Failure to Yield
The Sex Talk
Table Scraps
The End

– Multimedia platforms: New authoring tools pop up all the time. You may want to test out the following options: Medium, Wix.com, ReadyMag

– Medium
Free, multimedia embeds, built-in audience. Hosted on Medium.com.

– Ready Mag
Free version, multimedia embeds, some design/layout. Hosted on ReadyMag.com unless you redirect for a fee.

– Wix.com
Free version, pre-fab templates, drag and drop features. Hosted on wix.com unless you redirect for a fee.

– WordPress.com
Free version, pre-fab themes, new block builder, some limits on embedded code. Hosted on wordpress.com unless you redirect for a fee.

V. PRODUCING YOUR SITE

A. Interactive Content Tools
Review the range of tools for producing multimedia or interactive features within your stories. (Click here for a list of tools)

Timeline JS tool link
Carto mapping
Datawrapper charts and maps
Tableau charts and maps
StoryMap tool link
Juxtapose tool link
SoundCite

Graphic Applications for Pictures
EZ – GIF – A free GIF-building tool that allows for some customization

Flixl – A high-end suite for building cinemagraphs and other animations

Plotograph – Allows  you to make animations from photos

PlaceKitten – Provides placeholder images at any dimensions you put in

Iconfinder – A repository of graphics and icons

Cinemagraphs – Animated videos with still overlays

B. Designing a Long-form SiteWrite a few sentences describing the tone and expected audience for your site. Who will be interested in your story and why? Pick a 5-color palette, three fonts, experiment with a logo.
You can use Typetester to test out type combinations and experiment with color.

Seek Inspiration: Site Design Examples

Fonts

Where used: logos, h1, h2, h3, p, graphics
Resources:
Google Fonts
Typetester
Typewolf
Just My Type
FontPair

Palettes
Where used: backgrounds, fonts, logos, rollovers, hyperlinks, graphics.
Resources:
Adobe Color CC
Color Scheme Designer
Color Blender
Tin Eye Photo Palette match
Large selection of tools

Logos
Used in: header, footer, favicon
Resources:
Logo design process
logomakr.com