Adobe Muse is ideally suited for building online media presentations, and nowhere have I seen better evidence of that than Al Jazeera’s “Beyond the Beach” documentary. I recently chatted with Konstantinos Antonopoulos, Interactive producer at Al Jazeera English, and asked him about the processes involved in the build.
The Interview
Hi Konstantinos, thanks for taking time to answer a few questions for us! Just briefly, tell us about the “Beyond the Beach” project.
It is one of the longform features that we built within our Interactive team at Al Jazeera English, as the next logical step to the standard feature articles that can be found in the site; as a “media-rich” article that captivates the users and gets them involved with the tragic story of a country that is recovering from a civil war.
Soon after we had published a good longform feature on the war on the Democratic Republic of Congo, we were looking to get involved with telling more complicated visual news stories using Muse.
Marcelle Hopkins, a producer with Al Jazeera in the US, came to us with an idea to do a longform on Sri Lanka, as soon as she got permission to visit the country to report on the aftermath of the civil war - something extremely hard for a western journalist. She and cinematographer Andrew Blum spent a month on deployment and brought back a wealth of material. We had magnificent photos and video and fascinating people stories when we sat down to structure them into a longform experience.
Al Jazeera has a huge global presence and I can imagine breaking into new territory on their behalf was challenging. Why did you feel Adobe Muse offered what you needed for this project?
When we started examining longforms as a way to tell complicated feature stories, we initially thought of coding them ourselves - after all, our Interactive team is a bunch of programmers, designers and editors who sit on the same room and often spar on technology talk and throw around ideas. We quickly decided against that, as deadlines are frequent killers of the fun in newsrooms.
The next step was to use a solution in beta that was available on the market by a startup company. We tried creating several layouts, but we felt the tool was holding our creativity back and was not allowing us to tell stories the way we had imagined, storyboarded and planned.
We brought in Muse for a test drive on a live project on a tight deadline. Up until that point, I had never explored it further than the opening screen and -even though I knew what it could offer- I had not built anything with it and my experience as an InDesign user guided me through the layout process.
Being able to customise the story completely was the selling feature. We usually follow a storyboard that we prepare beforehand and I found that, when designing a story with Muse, it is extremely easy to make a story flow from top to bottom, without narrative breaks or compromising the experience for the reader.
You’ve really gone to town on using video, rich imagery, scroll interaction and so on - were there details which you would have liked to add which Adobe Muse couldn't help you with?
Our Interactive team includes coders, who sit next to journalists and designers and are making sure we have every custom element we need. In “Beyond the Beach” I wanted the users to be able to view the intro videos in every category and then, without any interaction from their part, to start reading the story. Muse did not have a feature like this, so we built it ourselves.
This was the first of a series of custom widgets we develop within the Al Jazeera web team. Some are bringing in useful metrics data, to help us understand how the users are viewing our stories. Others allow us to control the behaviour of multimedia depending on the way to tell the story, which is extremely helpful when we want videos to autoplay when visible, for example.
Then again some are just playing out the storytelling features we want the story to have: we developed a widget that initially shows a button on top of an image and, as the user scrolls to 70% visibility, the button disappears and a video starts playing; when it finishes or the user scrolls to the top of the page, the poster image is again visible and the button as well, which can be clicked to share the video.
As we continue to build custom elements, we are planning to make some of them freely available to the Muse community through the Adobe channels.
Story-telling on the web plays an important part of journalism these days; was the writer (@marcellehopkins) keen to have her say in how the story “Beyond the Beach” was presented?
From the beginning to the end, I worked closely with Marcelle; she guided me through the story, I guided her through the storyboard and we formed the narrative together. We established the focal point of each story and worked so that the words and visuals were in harmony.
When designers and editors work together, it helps when one speaks the language of the other. Being a journalist for more than 15 years, before turning to editorial design, I am usually able to communicate clearly with editors on longform stories. Marcelle’s impeccable producing skills and great eye for visuals made working on this piece so much easier.
When working on an Adobe Muse project, how heavily do you rely on other design applications, such as Adobe Photoshop and Adobe Illustrator for example? How do you find they work together?
I have been using Illustrator for years for practically everything - it is the only program that is set to open as soon as I fire up my Macs! I am exporting most artwork in .svg using Illustrator and dropping it into Muse. I am grateful that Adobe simplified this process since I built “Beyond the Beach” and I can now just copy and paste vector artwork into Muse.
As I am working with big imagery, I am making quite a lot of use of Photoshop and Lightroom, depending on the needs of the project. I have a ton of custom actions created in Photoshop for optimising Muse exports and supporting retina screens, as well as making sure the images are properly graded. The ability to use the .psd format in Muse makes the round trips for minor edits much comfortable.
Video editing and exporting stills are usually handled by either Premiere or Final Cut Pro X and I am using Adobe Speedgrade for color grading. We are making extensive use of Edge Animate when we need to add custom code, as the .oam export and drop into Muse is making everything faster and simpler.
With such serious subject matter, did you find some elements of UI design inappropriate for this project?
Throughout the whole story, I tried to hide as many distractions I could from the user, so that the focus remained on the story. The initial production sketches had an even more minimalistic approach, but -after testing within Al Jazeera- I decided to use the the fixed menu as an easier way for people to navigate.
This approach, a distraction-free environment for the story to grow, is what we usually take on longforms.
There doesn't appear to be any mobile-specific design for this website, was that a deliberate decision?
We have been using Muse’s multiple layouts feature for many of the longforms we produce, but we did not take that step for this one. The decision was made because of deadlines and because our tests with multiple screens showed that the story would be readable and enjoyable across various devices.
It is a commitment to design for as many screens as possible and I usually take the extra step to actually design different experiences for different versions of the story -desktop, tablet and mobile- but, as I exported this one to my iPhone and iPad and went through it, I was happy to realise that it is perfectly all right to go with this layout.
So, what’s next for you and Adobe Muse?!
I have just finished designing a very complex project, called “Palestine Remix” for Al Jazeera Media Network, which will launch on November 29.
It is a website that is home to 21 documentaries about the Palestinians that have been produced for the network in recent years; in time, we will be adding more. All include searchable transcripts and the ability to move through any piece just by clicking on any given word, using a technology called HyperAudio. This also gives the users the ability to create and share their custom remixes of the original material, by dragging parts of the text to a new video window.
All this functionality is built on top of Muse layouts, which also include several other elements -glossary, timeline, people finder, interactive maps, aerial footage and a search function- that compliment the stories and give the readers a complete insight in the historic and current situation in the Middle East.
Useful Links
- Beyond the Beach
- @konstantinosant on Twitter
- Konstantinos Antonopoulos on Aj Jazeera
- @marcellehopkins on Twitter
- Andrew Jordan Blum on Vimeo