Page layout

Here is a wonderful example of page design that:

  • Enhances the story.
  • Does not use flashy gimmicks.
  • Is built with a framework (Foundation, which is similar to Bootstrap in many ways).
  • Adapts perfectly to all device sizes (try it in Chrome Developer Tools and see).

Screen Shot 2015-11-19 at 10.57.41 AM

Even if you are not especially interested in the people behind the Paris attacks, take some time to examine how the design serves the storytelling. There’s nothing unnecessary in this design.

The design itself helps to tell the story more clearly.

Storytelling

It’s no secret that I love NPR visuals. These are lovingly handcrafted stories that stand out from all the great audio stories by NPR because these stories cannot be told on radio — or if they are, they are very different.

The most recent example: Rain Forest Was Here.

Screen capture from NPR

Not only are the wall-to-wall photos responsive at any size — from small phone screen to giant desktop — but this story also plays perfectly in vertical mode on a phone. Try it and see.

Stories like this are no accident. There’s a philosophy behind them. A guy at NPR named Wes Lindamood, whose job title is senior interaction designer, wrote about that philosophy here:

The Evolution of NPR’s Picture Stories

I love seeing innovation in storytelling because it’s all about making the audience sit up and pay attention. There are so many stories, so much media, so many distractions. How can you make somebody pay attention?