(Shared) WebStorytelling
1. Digital News Report
1.1 Data-driven news report
My favorite is The Pudding
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled.png)
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%201.png)
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%202.png)
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%203.png)
Every time someone says cool in Community
Hi I'm Russell. After watching an early supercut of every time Abed says , I figured it was time to update and visualize. It turns out that the 412 cools make it the second most used adjective, just behind good. The data were made from Netflix captions.
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%204.png)
Are Men Singing Higher in Pop Music?
Here is average register for the past 50 years. 2019 doesn't look that impressive compared to the '80s, And I wasn't expecting to see such a clear trend: rising register until the early '90s and then a drop-off. Let's look at 1984 a bit more.
https://pudding.cool/2019/08/register/
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%205.png)
Why are K-pop groups so big?
The 1st generation began with the debut of a 3-member group that is credited with inspiring K-pop as we know it today: Seo Taiji and Boys. They synthesized Korean music, fashion style, and dance with Western influences like hip-hop, new jack swing, and rock to capture the imagination of Korean youth.
https://pudding.cool/2020/10/kpop/
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%206.png)
1.2 Infographics
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%207.png)
South China Morning Post Graphics
The Collection of graphics made by The South China Morning Post via @SCMPgraphics
SCMP printed graphics memory
The South China Morning Post has been dedicated to bringing our readers the finest visual journalism for print and online since 2011. Here are some of our favourite full-page infographics as they appeared in the newspaper Ⓒ 2020 South China Morning Post Immerse yourself into some of our multimedia projects: This site has some features that may not be compatlibe with your browser.
2020: The Year in Visual Stories and Graphics
In a year with so many world-shaking moments, our strongest visual stories covered impeachment, outbreak, caucuses, primaries, donations, delegates, shutdown, jobs, deaths, coughing, hospitals, testing, George Floyd, protests, tear gas, dreams, nursing homes, policing, the election, stimulus, symptoms, Beirut, power, the Supreme Court, ballots, wildfires, Trump's taxes, turnout, swing states, masks, results, A.I., voter shifts, I.C.U.s, pollution and vaccines.
1.3 Web storytelling
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Oct-07-2021_10-01-25.gif)
2. Web storytelling for News
- Compared with just putting all materials (links, videos, figs, text) to the web
- An one-time experience, more similar to watch a video clip,
💡
What is web storytelling for news?
3 Now: Media + Storytelling designs
Media convergence
- Video, long or short
- Satellite images
- Geographic Information System
- AR/VR
- 3D Modeling
- Text presentation
Design pattern of web storytelling
Example: Web storytelling with videos
- Videos as storytelling platform: 以影像為平台、後製、文字擺放在影像中
- Videos-central web storytelling: 以網頁為平台，以影像為主要敘事媒介，但用捲軸來同步文字以說明影像。
- (Short and silent) Videos just used for describing mechanism or creating immersion 僅用短影片來呈現一種立體感、現場感、或提供對某個機制或事件的動態解釋。
- Videos or animation plays synchronized with scrolling (But why not video?) 直接用捲動來控制影像播放，捲多少播放多少。
Video as storytelling platform
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%208.png)
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%209.png)
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%2010.png)
Video-centered web storytelling
Concrete divisions: A new age of walls
This browser is not fully supported. Please update for the best experience. Scroll down to continue. Presentation includes sound. A debate over extending the wall on the U.S.-Mexico border has been a noisy centerpiece of this year's presidential election.
https://www.washingtonpost.com/graphics/world/border-barriers/us-mexico-border-crossing/
使用網頁作為主要平台（前者的主要平台為影像），但內容呈現主要以影像為核心而非文字。使用Scrolling來同步文字和影像，但卻沒有要求讀者必須把每一片影片看完。
受內容影響的數位敘事（video first）。大量影片的快剪，每段文字都很簡短，但背後影片時間顯然比文字捲動的長度要長。如果想要知道背後發生什麼事情，就必須要駐足欣賞。
Why short video?
Compared with long video, why short-video？A New Whitney (nyitmes, 2015-04-19)
A New Whitney (Published 2015)
Produced by Jeremy Ashkenas and Alicia DeSantis Graphics by Mika Gröndahl, Yuliya Parshina-Kottas and Graham Roberts From the west, along the Hudson River, it looks ungainly and a little odd, vaguely nautical, bulging where the shoreline jogs, a ship on blocks perhaps, alluding to one of New York's bedrock industries from long ago.
Wh not video?
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%2011.png)
Research methods on web storytelling
- Measured by physiological meters and tools
- Designed, reviewed and evaluated by service design tools
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%2012.png)
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%2013.png)
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%2014.png)
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%2015.png)
Connecting storytelling to library science
💡
What is web storytelling for news?
NOT Information architecture
NOT Information visualization: Understanding the fact inside data
NOT Infographics: using illustration to tell story behind events or data
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%2016.png)
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%2017.png)
More similar to service design and Curating
WU, Yue (2017) "It's My Library": An Immersive, Empathic and Collaborative Approach to Online Storytelling Design. Paper presented at: IFLA WLIC 2017 – Wrocław, Poland – Libraries. Solidarity. Society. in Session 207 - Library Buildings and Equipment with Management and Marketing. http://library.ifla.org/id/eprint/1755/
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%2018.png)
【Martech導航】忘記行銷漏斗吧！如何設計「顧客旅程地圖」成為潛在顧客的最佳指南
在不久之前，行銷和銷售人員仍廣泛地使用行銷漏斗 (Funnel)，來瞭解行銷如何運作：潛在顧客進入漏斗頂端，最後轉化成交易。透過最大化漏斗頂端的數量，並降低流失率，企業就能增加實際的成交或轉換數。 接著，我們迎接了大數據熱潮。雖然漏斗仍然具有作為內容策略工具的價值，但現在行銷人員對顧客旅程 (Customer Journey) ...
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%2019.png)
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%2020.png)
Curating
Visitor Journey Mapping
When responsibilities are divided across an organisation and your offer develops in different ways over time, a visitor's experience can become fragmented. It's easy to lose sight of how patrons experience organisations holistically, across each touchpoint - from content and curation to parking and loos.
%20WebStorytelling%209bef834d1178407f9c56d68f48f0c960/Untitled%2021.png)