While storytelling evolves towards more sophisticated artefacts, content designers may need to get to tinkering their way through html, data viz, and inspirational copy. Compared to classic editorial project, digital narratives are rising the bar of complication. Here’s why.

Back last October, we’ve already gone through some themes of contemporary digital culture. We saw how classical narratives are being refashioned for the Web, through the so called digital narratives. The galaxy of d.n is quite vast, as it stretches from pioneering experiments — Bear71, Welcome to pine point , Ro.me — to contemporary twists on basic websites. What is interesting is that these twists can vary from heavily code-elaborated pages to well structured, yet simple long scrolls.

Whatever the case, it seems that traditional graphic editorial projects, once prerogative of print media, are now being translated into digital communication. Web documentaries are particularly suitable for representing and communicating research projects.They are an ideal tool for reports and reportages. That’s why, back from a trip to India, I made up my mind about exploring the genre. Because if you want to mirror complexity, photos and copy sometimes ain’t enough. The process ain’t being a walk in the park, tough.


From a content design point of view, a web narrative is a massively complicated job. Not only the specialist has to gather or create contents, like in any other communication/editorial project before the WWW, but needs also to think cross media and cross-screen (responsively).

Hurdle1 –Research

Even if it starts from a personal experience, a web documentary is usually intended at exploring a particular subject of public interest. It can be a social experiment, a research project or else. That usually calls for a lot of preliminary research. Information should be accurate and reliable. Other people may already have written about the topic, so it is worth also an analysis of similar website, in terms of copy and tone of voice.

Hurdle2 –Wireframing

That isn’t a hurdle in a strict sense. In fact, wireframing is a handy tool to organise contents and clear up one’s mind about structure and stuff. It’s exactly the same thing that happens in print publishing, when a magazine page layout is being sketched out. Only that in the web you need to get to keeping different screen sizes in mind.

Wireframing is an important step of the web design process and is worth an accurate discussion, anytime soon. The important thing is laying down contents somewhere, either a piece of paper, or a wireframing software dashboard.

Coding without prior wireframing is an easier option if you are quick with Jquery, html and css. But you need to have a detailed sketch in your mind.

Hurdle3 — Thinking Media

Content designing for a web documentary implies taking care about many different things. It’s not just about gathering good copy, deciding how to organise it and how to match it with visual stuff. Other kind of sensorial experience, like sound, music or voiceover, come into play. Videos also may take central stage in a reportage/research project. Mastering all these kind of different contents all together calls for basic diverse competences, because different media have different tech requirements -think about how to optimise videos for different screen sizes and browsers. Who’s in charge of contents need to think holistically and selectively ahead, but, as specific issues usually arise, iteration becomes the normal.

Hurdle4 –Coding

If you know a bit of coding and you don’t have a developer in your team, you’d better make a virtue out of necessity. You can rely on user friendly front end frameworks, like Bootstrap, Foundation, Materialize, or Skeleton-if your project doesn’t require all of the style components of a larger framework.

Bootstrap allows for the development of responsive sites of all complexities and sizes. It’s constantly updated and offers large documentation. The downside is its excessive number of HTML classes and DOM elements, which can be messy and confusing.


  1. The Nature Conservancy: a series of curated web reports, shows a discreet yet sophisticated use of different media. Clever use of Call to Actions in strategic points of the pages.

2.Irene Pereyra-One Shared House-An interactive documentary on social living. Both a video an written reportage, with a section to address users directly prompting viewers to express an opinion.

3.JFKC-dedicated to J.F.Kennedy. A comprehensive celebration of the president, through images, sound and texts.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.

The author has chosen not to show responses on this story. You can still respond by clicking the response bubble.