Hoe ze het deden Al Jazeera 'Beyond the Beach', gebouwd met Adobe Muse

Adobe Muse is bij uitstek geschikt voor het bouwen van online mediapresentaties en nergens heb ik dat beter kunnen zien dan de documentaire "Beyond the Beach" van Al Jazeera. Ik heb onlangs met Konstantinos Antonopoulos, Interactive producer bij Al Jazeera English, gesproken en hem gevraagd naar de processen die bij de bouw betrokken zijn.

Het interview

Hallo Konstantinos, bedankt dat je de tijd hebt genomen om een ​​paar vragen voor ons te beantwoorden! Vertel ons eens kort over het project "Beyond the Beach".

Het is een van de langwerpige functies die we hebben gebouwd in ons interactieve team bij Al Jazeera English, als de volgende logische stap naar de standaardartikelartikelen die op de site te vinden zijn; als een "media-rijk" artikel dat de gebruikers boeit en betrokken raakt bij het tragische verhaal van een land dat herstellende is van een burgeroorlog.

Kort nadat we een goede longform-functie hadden gepubliceerd over de oorlog tegen de Democratische Republiek Congo, waren we op zoek om betrokken te raken bij het vertellen van meer gecompliceerde visuele nieuwsverhalen met Muse.

Marcelle Hopkins, een producent met Al Jazeera in de VS, kwam naar ons met een idee om een ​​lange indruk te maken op Sri Lanka, zodra ze toestemming kreeg om het land te bezoeken om verslag te doen van de nasleep van de burgeroorlog - iets extreem moeilijks voor een westerse journalist. Zij en cameraman Andrew Blum brachten een maand in gebruik en brachten een schat aan materiaal terug. We hadden prachtige foto's en video's en fascinerende mensenverhalen toen we gingen zitten om ze te structureren in een langwerpige ervaring.

Al Jazeera heeft een enorme wereldwijde aanwezigheid en ik kan me voorstellen dat het voor hen een uitdaging was om nieuwe gebieden te betreden. Waarom vond u dat Adobe Muse heeft aangeboden wat u nodig had voor dit project??

Toen we longforms begonnen te onderzoeken als een manier om gecompliceerde speelverhalen te vertellen, dachten we er in eerste instantie aan om ze zelf te coderen - ons interactieve team bestaat immers uit een stel programmeurs, ontwerpers en redacteuren die op dezelfde kamer zitten en vaak sparren over technologie praten en gooi rond ideeën. We hebben snel besloten dat niet te doen, omdat deadlines frequente moordenaars zijn van het plezier in redacties.

De volgende stap was om een ​​oplossing in bèta te gebruiken die door een startup-bedrijf op de markt was. We hebben geprobeerd verschillende lay-outs te maken, maar we voelden dat de tool onze creativiteit terughield en ons niet in staat stelde om verhalen te vertellen zoals we ons hadden voorgesteld, storyboarded en gepland.

We hebben Muse uitgebracht voor een proefrit op een live project met een krappe deadline. Tot dat moment had ik het nooit verder onderzocht dan het beginscherm en - hoewel ik wist wat het kon bieden - had ik er niets mee gebouwd en mijn ervaring als InDesign-gebruiker leidde me door het lay-outproces.

Het verhaal volledig kunnen aanpassen, was de verkoopfunctie. Meestal volgen we een storyboard dat we van tevoren voorbereiden en ik ontdekte dat het bij het ontwerpen van een verhaal met Muse uiterst eenvoudig is om een ​​verhaal van boven naar beneden te laten vloeien, zonder narratieve breaks of de ervaring voor de lezer in gevaar te brengen.

Je bent echt naar de stad gegaan met video, rijke beelden, scrolinteractie, enzovoort - waren er details die je graag had toegevoegd, waar Adobe Muse je niet mee kon helpen met?

Ons interactieve team bevat codeurs, die naast journalisten en ontwerpers zitten en ervoor zorgen dat we elk aangepast element hebben dat we nodig hebben. In "Beyond the Beach" wilde ik dat de gebruikers de introductievideo's in elke categorie konden bekijken en vervolgens, zonder enige interactie van hun kant, het verhaal konden gaan lezen. Muse had deze functie niet, dus hebben we deze zelf gebouwd.

Dit was de eerste van een reeks aangepaste widgets die we ontwikkelen binnen het Al Jazeera-webteam. Sommigen brengen nuttige meetgegevens in om ons te helpen begrijpen hoe de gebruikers onze verhalen bekijken. Anderen stellen ons in staat om het gedrag van multimedia te regelen, afhankelijk van de manier om het verhaal te vertellen, wat uiterst nuttig is wanneer we willen dat video's automatisch worden afgespeeld wanneer ze zichtbaar zijn, bijvoorbeeld.

En weer spelen sommigen gewoon de vertelfuncties af die we het verhaal willen laten hebben: we hebben een widget ontwikkeld die in eerste instantie een knop bovenop een afbeelding toont en, terwijl de gebruiker naar 70% zicht verschuift, verdwijnt de knop en begint een video te spelen ; wanneer het klaar is of de gebruiker scrolt naar de bovenkant van de pagina, is de posterafbeelding weer zichtbaar en de knop ook, waarop kan worden geklikt om de video te delen.

Naarmate we doorgaan met het bouwen van aangepaste elementen, zijn we van plan om sommige ervan vrij toegankelijk te maken voor de Muse-gemeenschap via de Adobe-kanalen.

Verhalen vertellen op het internet speelt tegenwoordig een belangrijke rol in de journalistiek; was de schrijver (@marcellehopkins) erop gebrand om haar te laten vertellen hoe het verhaal "Beyond the Beach" werd gepresenteerd?

Van het begin tot het einde werkte ik nauw samen met Marcelle; ze begeleidde me door het verhaal, begeleidde haar door het storyboard en we vormden samen het verhaal. We hebben het middelpunt van elk verhaal vastgesteld en zo gewerkt dat de woorden en beelden in harmonie waren.

Wanneer ontwerpers en editors samenwerken, helpt het wanneer iemand de taal van de ander spreekt. Als journalist voor meer dan 15 jaar, voordat ik me tot het redactionele ontwerp wend, ben ik meestal in staat om duidelijk te communiceren met redacteurs op longform-verhalen. De onberispelijke productievaardigheden van Marcelle en het geweldige visuele oog hebben het werken aan dit stuk zoveel gemakkelijker gemaakt.

Hoe zwaar vertrouwt u bij het werken aan een Adobe Muse-project op andere ontwerptoepassingen, zoals Adobe Photoshop en Adobe Illustrator bijvoorbeeld? Hoe vind je dat ze samenwerken?

Ik gebruik Illustrator al jaren voor vrijwel alles - het is het enige programma dat is ingesteld om te openen zodra ik mijn Mac's start! Ik exporteer de meeste illustraties in .svg met Illustrator en plaats deze in Muse. Ik ben dankbaar dat Adobe dit proces heeft vereenvoudigd sinds ik "Beyond the Beach" heb gebouwd en ik kan nu vectorillustraties kopiëren en plakken in Muse.

Omdat ik met grote beelden werk, maak ik vrij veel gebruik van Photoshop en Lightroom, afhankelijk van de behoeften van het project. Ik heb een heleboel aangepaste acties gemaakt in Photoshop voor het optimaliseren van Muse-uitvoer en het ondersteunen van netvliesschermen, en om ervoor te zorgen dat de afbeeldingen correct worden gesorteerd. De mogelijkheid om het .psd-formaat in Muse te gebruiken, maakt de roundtrips voor kleine bewerkingen veel comfortabeler.

Videobewerking en het exporteren van foto's worden meestal afgehandeld door Premiere of Final Cut Pro X en ik gebruik Adobe Speedgrade voor kleurcorrectie. We maken uitgebreid gebruik van Edge Animate wanneer we aangepaste code moeten toevoegen, omdat de .oam-export en -drop in Muse alles sneller en eenvoudiger maakt.

Met zo'n serieus onderwerp, vond je sommige elementen van UI-ontwerp niet geschikt voor dit project?

Door het hele verhaal heen probeerde ik zoveel mogelijk afleidingen te verbergen voor de gebruiker, zodat de focus bleef liggen op het verhaal. De eerste productieschetsen hadden een nog meer minimalistische benadering, maar na testen binnen Al Jazeera besloot ik om het vaste menu te gebruiken als een gemakkelijkere manier voor mensen om te navigeren.

Deze benadering, een afleidingsvrije omgeving om het verhaal te laten groeien, is wat we meestal op longforms doen.

Er lijkt geen mobiel-specifiek ontwerp voor deze website te bestaan, was dat een weloverwogen beslissing?

We hebben de functie Meerdere lay-outs van Muse gebruikt voor veel van de longforms die we produceren, maar we hebben deze stap niet gezet voor deze. De beslissing is genomen vanwege de deadlines en omdat onze tests met meerdere schermen hebben aangetoond dat het verhaal op verschillende apparaten leesbaar en leuk zou kunnen zijn.

Het is een verplichting om voor zoveel mogelijk schermen te ontwerpen en ik neem meestal de extra stap om daadwerkelijk verschillende ervaringen te ontwerpen voor verschillende versies van het verhaal -desktop, tablet en mobiel- maar zoals ik deze naar mijn iPhone en iPad heb geëxporteerd en er doorheen ging, was ik blij om te beseffen dat het perfect in orde is om met deze lay-out te gaan.

Wat is de toekomst voor u en Adobe Muse??!

Ik ben net klaar met het ontwerpen van een zeer complex project, genaamd "Palestine Remix" voor Al Jazeera Media Network, dat zal starten op 29 november.

Het is een website met 21 documentaires over de Palestijnen die de afgelopen jaren voor het netwerk zijn gemaakt; na verloop van tijd zullen we er meer aan toevoegen. Alle bevatten doorzoekbare transcripten en de mogelijkheid om door elk stuk te gaan door gewoon op een bepaald woord te klikken, met behulp van een technologie die HyperAudio heet. Dit geeft de gebruikers ook de mogelijkheid om hun aangepaste remixen van het originele materiaal te maken en te delen door delen van de tekst naar een nieuw videovenster te slepen.

Al deze functionaliteit is bovenop de museale lay-outs gebouwd, die ook verschillende andere elementen bevatten - tijdlijn, tijdlijn, personenzoeker, interactieve kaarten, luchtbeelden en een zoekfunctie - die de verhalen complimenteren en de lezers een volledig inzicht geven in de historische en huidige situatie in het Midden-Oosten.

handige links

  • Voorbij het strand
  • @konstantinosant op Twitter
  • Konstantinos Antonopoulos op Aj Jazeera
  • @marcellehopkins op Twitter
  • Andrew Jordan Blum op Vimeo