Embed Size (px)
Citation preview
Kung Fu Numerik Inc. 3981 boul. Saint-Laurent, #888
Montréal (QC) H2W 1Y5 T 514.907.4528
www.kngfu.com
2015
LIFE ON HOLD SYRIAN REFUGEES IN LEBANON
A CASE STUDYEJTA 2015
Milan
FIRST, QUICK PRESENTATIONS
Ralph Dfouni, Creative Director
Ghassan Fayad, Producer
AL JAZEERA
• Media group based in Qatar
• English Chapter “AJE - Al Jazeera English” in collaboration with AJA, AJT, AJB, AJAM
• Large and varied audience, both demographically and geographically
• Journalism and documentary tradition
• A few baby steps in interactive media
THE MANDATE
• 10-15 portraits of Syrian refugees in Lebanon, representing a diverse spectrum of stories and backgrounds
• At the core is a video experience.
• Must contain a participative / user contributed device (“UGC”) … and a space for additional content
• 4 languages : English - Arabic - Turkish - Bosnian
• Mobile friendly
DEVELOPMENT
• Meetings in Qatar
• Meetings in Montréal
• Research on the ground, scouting, casting in Beirut
• And lots of virtual meetings
PRODUCTION
• Editorial direction in Doha (+ copywriter in Vancouver)
• Shooting in Beirut (+ local team), editing in Doha
• Illustration in Dubai
• Post-production in Lisbon
• Creative direction, Art direction, Sound design, Development and integration of the platform and project management from Montréal
DEPLOYMENT
• Launched on March 15th : 4th anniversary of the events in Syria
• Deployed in two phases - 5 portraits at a time
• Highlighted online and on air throughout the Al Jazeera networks and social media channels
• Media attention shifting from Syrian refugees towards end of production
MOODBOARDS
Al Jazeera Syrian Refugees Web Documentary
Moodboard v1.0
Interfaces Full-screen video/animated background interfaces with graphical elements overlayed on top. Ferme makes good use of stills with narration and a simple interactive metaphor (2 sides to a story). Black Negative is a really rich interactive experience, probably a bit over the top for us, but they make good use of animation and interaction on the surface of the interface. Patrick Watson (a site I designed :P) is interesting because of the dock that allows for interaction/navigation without stopping the video. Similarly, The Source is a really elegant solution which removes all navigation after a slight delay, and has it fade in on mouse movement.
ferme.onf.cablacknegative.comadventuresinyourownbackyard.comdougaitkenthesource.com
Portraits Close up, extreme slow motion portraits that feature asynchronous narration. EMA’s is a particularly interesting example of holding a shot too long, where the viewer is almost brought to a point of discomfort. Blindness plays more with a surreal approach.
youtube.com/watch?v=7pVAdW4zDLAvimeo.com/84336261
Typography Modernist, structured, black and white, sans-serif typography with a bit of a rough edge. Exaggerated letterspacing, scale and positioning can be used metaphorically to represent fragmentation and displacement.
Type + Image Examples of typography placed over photography. It can be used very expressively like in the WU LYF example, or more restrained as in Walking Through Light and Replicant. Thin ruled boxes to frame typographic/informational elements can also be used to pull it off the image.
Photography (tone) Photography has a generally muted, soft, pallette, puncuated by small moments of vivid colour and contrast.
Texture Grain and soft noise can be used to add texture. Need to avoid sterotypes of “dust and scratches”, but within dissolves and transitions, it can be used effectively.
Calligraphy Possibly used for UGC and title cards of portraits. Calligraphy could be used to (re)construct the landscape of syria, with strokes being painted triggered by user interaction (leaving a message, etc.)
CORE CONCEPTS• Vignette
• Cinemagraph
• Impressionistic Moment
• Journey
• Fragments (extras)
• Wall
• Scroll horizontal
AJ_ INTERFACE_V3.1
Oct 26 2014—hbr
This is not a start from scratch effort. It’s the continuation of some of the original ideas that grew and took a different direction.
It doesn’t answer all the questions either. It’s an Interface doc, a bit more advanced than mock-ups and a bit more substantial in the sense that it’s both a macro and a micro conceptualization effort. It lays the backbone, which elements we will tweak and adjust as they come. Keep in mind as much as possible all that you can’t imagine yet, the movements, the flow, the animations, the different additional elements of design, the typography, the colours, etc. As well as the global aesthetic outlook. One last thing, in order to keep the read as short as possible, it doesn’t reformulate what has already been set in the previous mock-ups (the loading, certain sound elements, etc.), unless it’s improved or changed (menu, journey module, etc.).
CINEMAGRAPHS
WIREFRAMESLANDING PAGE : AN ANIMATED MAP APPEARS SHORTLY
EN
Turkey
Cyprus
Iraq
Jordan
Israel
5 525 657 LebanonPopulation
21 960 358 SyriaPopulation
2011 2012 2013 2014SALWAMOHAMMED
EN
THEN THE MENU APPEARS AS A LOADING. IT PRESENTS THE NAVIGATION AND INTRODUCES THE 10 PORTRAITS ONE AFTER THE OTHERA FULL SCREEN IMAGE OF A LANDSCAPE IS IN THE BACKGROUND
SALWAHAIFA HAJJ KHALIL MAYA MOHAMMED
EN
YOUSEF BASHAR FATIMA FURATI HAIFA HAJJ KHALIL MAYA MOHAMMED SALWA
EN
EN
YOUSEF BASHAR FATIMA FURATI HAIFA HAJJ KHALIL MAYA MOHAMMED SALWA
THE MENU GOES DOWN AND REVEALS A LAUNCH BUTTON TO START THE EXPERIENCE THE USER CAN CLICK TO LAUNCH THE WEBDOC, AND IT CAN AUTOMATICALLY BE LAUNCHED AFTER 10 SECONDS
EN
EXPLORE THE MEMORIES OF KHALILEN
KhalilTHE FIRST PORTRAIT OF THE EXPERIENCE IS PROPOSED RANDOMLY. IN THIS EXAMPLE IT IS MAYA.THE INTERFACE SCROLLS UNTIL MAYA Maya
EN
THE USER SELECTS THE VIGNETTE
PERMANENT ACCESS TO THE MEMORIES
You can instantly access anyportrait using the quick menu
EXPLORE THE MEMORIES OF MAYA
Maya
BACK TOTHE STORY
MENU OF THE UGC PART OF THE SITE
BUTTON TO FLIP THE MENUAND GO BACK TO THE STORIES
EN
MAYA
EXPLORE THE STORIES
MayaMAIN MENU
EN
YOUSEF BASHAR FATIMA FURATI HAIFA HAJJ KHALIL MAYA MOHAMMED SALWA
EXPLORE THE MEMORIES
THE USER CAN SWITCH AND GO BACK TO THE MEMORIES
View people’s reactions
AT THE END OF THE VIDEO THE USER CAN ACCESS TO THE UGC
Maya
EN EXPLORE THE MEMORIES OF MAYA
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
BACK TO THE STORIES
Maya
EN
TAMMAM COLLAGES ARE IN BACKGROUND
THE USER CAN GO BACK IN TIMEAND EXPLORE THE REACTIONSBEFORE THIS DAY
UGC PART
BACK TO THE STORY OF MAYA
SHORT INTRODUCTION TO THE UGCAND TAMMAM EXCLUSIVE WORK
Add your
reaction
REFUGEE FOR DAYS 623
Maya
EN BACK TO THE STORY OF MAYA
THE MORE THE USER SHARES REACTIONS, THE MORE THE BACKGROUND CHANGES
THE CIRCLES MOVESWITH THE MOVEMENT OF THE MOUSE(PARALLAX)
BACK TO THE STORIES
EN
TAMMAM COLLAGES ARE IN BACKGROUND
BACK TOTHE STORY
UGC PART
THE WISH OF THE USERAPPEARS IN THE CENTER
Maya
lorem ipsumdolor sit
amet
127
Michael N.
BACK TO THE STORY OF MAYA
THE USER CAN LIKE THE WISHTHE CIRCLE WILL THEN BE BIGGERON THE MAIN INTERFACE
SHARING OPTIONS
TAMMAM AZZAM
PORTRAITS OF FADING MEMORIES
PORTRAITS OF FADING MEMORIES
USER ENGAGEMENT
May all your prayers be answered and may you be rewarded in abundence in this life and the herafter
inshallah. Stay strong and happy.
Mohammad, stay as strong as you are. You are an incredible boy who will grow to be an incredible young
man.
May ALLAH grant you ease and his choicest blessings
Your determination and selflessness is inspiring,I hope that you will be reunited with your mother and that you
and your family will prosper
THANK YOU !
