Journalism + Code + Design

Part 1: Code

Basic structure. The bare bones.

Making the bare bones pretty. Think of design. The Appearance.

Any functionality. What happens when I click this? Can I trigger an action?

Everyday stories from Poynter and how I did them

Lesson 1. Your browser is your best friend. Here is how you make the most out of it.

Why is it important?

Because social.

Instagram debuts discover for Web, which can help publishers find user-generated content: http://t.co/iNIiOCmplc pic.twitter.com/v0ljuS49n2

— Poynter (@Poynter) July 20, 2015

Tutorial here

More lessons on GIFs here via the amazing Lena Groeger

Lesson 3. But... Don't get carried away. Don't force interactivity where it is not required. Story over medium. Think of User Experience.

Lesson 4. When thinking of design, minimalism is the way to go. Concept over features.

When it comes to graphics, iterate and edit. Just like any other story.

Lesson 5. You know this...

Collaborate

Maps - Google Maps, Fusion Tables, CartoDB.
Charts - Datawrapper, Chartbuilder, Charted.io. Feeling adventurous? Try Highcharts.js, Google charts.
GIFS! - Be excited. We will spend a good 10 minutes on gifs. (Photoshopppppp)
Timelines - Timeline.js (Horizontal), Tik-tok (Vertical).
Annotation - Annonator.js, Hypothesis.
Interactions - Juxtapose.
Design - GIMP for Mac. Vectors from The Noun Project. Fancy people can use Photoshop and Illustratpr.

Journalism + Code + Design slides at gurmanbh.github.io/lunchandlearn/ Created by Gurman Bhatia / @gurmanbhatia