{"id":13954,"date":"2017-12-26T14:30:21","date_gmt":"2017-12-26T14:30:21","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=13954"},"modified":"2017-12-20T14:30:54","modified_gmt":"2017-12-20T14:30:54","slug":"re-thinking-reading-web","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/re-thinking-reading-web\/","title":{"rendered":"Re-thinking Reading on the Web"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Over the last six months we\u2019ve been collaborating with <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.theatlantic.com\/\">The Atlantic<\/a> to bring three interactive articles to life. It was an amazing opportunity to work side-by-side with a talented, multidisciplinary and relentless publication team. We learned a lot. We set out to create an <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">immersive, yet thoughtful reading experience<\/strong> and I\u2019d like to share some of our insights that helped get us there.<\/p>\n<div id='gallery-1' class='gallery galleryid-13954 gallery-columns-1 gallery-size-medium'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/1_3uuv2vDdCi_U-lHLKDl2g.png'><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"196\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/1_3uuv2vDdCi_U-lHLKDl2g-600x196.png\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/1_3uuv2vDdCi_U-lHLKDl2g-600x196.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/1_3uuv2vDdCi_U-lHLKDl2g-768x251.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/1_3uuv2vDdCi_U-lHLKDl2g-1500x490.png 1500w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">An immersive reading experience<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I\u2019ll start at the end. Here is a short video showing some highlights of the final output we created for the project:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" id=\"player\" src=\"https:\/\/player.vimeo.com\/video\/153164245?referrer=https%3A%2F%2Fblog.truthlabs.com%2Fmedia%2Fd27c8f0fc6b6b6bb7946ec8e2d1b6158%3FpostId%3D158e789eddd7\" width=\"900\" height=\"500\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">And don\u2019t forget to check out live site <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.theatlantic.com\/sponsored\/athenahealth\/\">here<\/a>.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">The story behind the\u00a0story<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When we were introduced to the team at The Atlantic they were creating a series of articles about \u201c<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/Population_health\">Population Health<\/a>\u201d \u2014 a broad concept used to describe a more holistic approach to healthcare aimed at improving the health of entire communities rather than a single individual.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">They wanted to tell these stories in an interactive and visual way.<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"> The challenge<\/strong> was to create interactive visualizations based on industry concepts and make them accessible to both healthcare professionals and the a casual audience.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">From the beginning we knew we wanted to create an experience that was <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>familiar<\/em><\/strong> from an interaction perspective <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>but different<\/em><\/strong> from a visual perspective. We aspired to take the traditional editorial content The Atlantic is known for and combine it with a rich digital narrative.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Inspiration from the\u00a090s<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Early in the discovery process with The Atlantic, we wanted to understand more about what\u2019s important to their business and what\u2019s important to their readers. After a few short meetings it became clear that READING is really important \u2014 go figure.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">That got us thinking about the history of reading on the Web. Going back to the early days of the web and the earliest web browsers. It quickly become obvious that there are (at least) two fundamental characteristics that have been present on the web since the beginning \u2014 <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">reading and scrolling.<\/strong><\/p>\n<div id=\"attachment_6580\" style=\"width: 2410px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1GDpx3JjbASxrE-RTsMOpuA.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1GDpx3JjbASxrE-RTsMOpuA.jpeg\" alt=\"\" width=\"2400\" height=\"830\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Early web browsers Netscape and Mosaic (circa 1993) \u2014 designed almost exclusively for reading and sharing\u00a0content.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">People have been reading and scrolling on the web longer than just about anything else! And at this point reading and scrolling (and the back button) should be respected as inherent attributes of the web (read: please stop <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/designing-for-humans\/you-jacked-my-scroll-bro-7764db6a9987#.ssl2138q8\">scroll-jacking<\/a> my websites).<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Very early in the project we decided to preserve the natural document scroll and reading flow. We also established a small set of <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">design principles<\/strong> that supported reading as the key tenet:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Graphics should enhance, not displace the article text.<\/li>\n<li>Let readers read at their own pace.<\/li>\n<li>Use familiar design patterns for links and navigation.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Throughout the design process we found ourselves coming back to these principles often, both with the client and internally. There was a tendency to keep layering up the visuals so the reader could scan the article without actually reading it. We didn\u2019t want to encourage that behavior so we focused on treating the graphics as supplements to rather than replacements for the copy.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Digital storytelling<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you take a quick tour of the big news and publication sites it\u2019s shocking how little the content experience has changed over the last 15 years.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">With a little help from the <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/archive.org\/web\/web.php\">Internet Wayback Machine<\/a>, the image below really highlights what I mean. Aside from the obvious styling improvements, the general approach to information remains unchanged. I don\u2019t mean to single out<a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.newyorker.com\/\"> The New Yorker<\/a> \u2014 they aren\u2019t the only ones. By and large, the industry hasn\u2019t moved the needle much with regard to digital storytelling.<\/p>\n<div id=\"attachment_6580\" style=\"width: 4890px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1pLKuYI7mqkhYVkOROC0pRA.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1pLKuYI7mqkhYVkOROC0pRA.jpeg\" alt=\"\" width=\"4880\" height=\"2764\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Typical article page on The New Yorker\u2019s website from 2001 (left) and 2016\u00a0(right)<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Understandably, generating bespoke digital experiences for the volume of content these types of sites crank out would be impossible. However, 15 years is a <em>long time <\/em>in tech-years. Especially compared to how much ground we\u2019ve covered in other aspects of the Web, it feels like we\u2019re ripe for some fresh thinking.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I\u2019m not suggesting every article written for the web needs to be an extravagant production. I believe <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>the story should dictate the type of visuals that accompany it<\/em><\/strong>. The goal, of course, is to improve engagement and comprehension.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The New York Times has been doing this with their <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.nytimes.com\/interactive\/2015\/us\/year-in-interactive-storytelling.html?_r=0\">interactive stories<\/a>. This new breed of storytelling does a great job helping the reader to fundamentally understand the content. Whether the article is about an aerospace engineering feat or illuminating a relatively unknown part of the world, the visuals go a long way in helping the reader wrap their mind around the subject matter.<\/p>\n<div id=\"attachment_6580\" style=\"width: 8636px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1MVIwuw8z2Fw4YGSO0Kljxg.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1MVIwuw8z2Fw4YGSO0Kljxg.png\" alt=\"\" width=\"8626\" height=\"1446\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Examples of modern storytelling from The New York\u00a0Times<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The technology available on the Web is enabling some really exciting opportunities in the storytelling space, things we haven\u2019t been able to do until very recently. We were certainly inspired by some of the interactive stories out there, and with WebGL and 3D capabilities at our disposal we wanted to bring an even more cinematic dimension to our project.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">A cinematic approach<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Rather than creating a series of interactive widgets embedded throughout the article, we decided to build an <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">interactive narrative<\/strong> that flows alongside the copy. We used <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/WebGL\">WebGL<\/a> to build full 3D environments which gave us the flexibility to tell the story from a variety of perspectives.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Using 3D enabled us to leverage familiar filmmaking tools like cameras and scenes, and throughout our design process we adopted various film directing techniques to help us tell our story.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Storyboarding<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We started drafting the key shots for each article, but quickly realized there were some complicated relationships between the sequences. We moved to storyboards so we could evaluate the story as a whole and rearrange clips as needed.<\/p>\n<div id=\"attachment_6580\" style=\"width: 3318px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1LEtWNqJGnBo6en3HMcTkGg.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1LEtWNqJGnBo6en3HMcTkGg.jpeg\" alt=\"\" width=\"3308\" height=\"400\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Storyboarding large sections of the story helped us manage relationships between sequences<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Pacing<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Another cinematic technique we put to use was <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.peachpit.com\/articles\/article.aspx?p=2233986\">pacing<\/a>. It\u2019s rare in movies to see complex action scene followed up by another intense action scene (unless you\u2019re watching a Michael Bay film).<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><\/p>\n<div id=\"attachment_6580\" style=\"width: 306px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/17rmQQ6_jvuM4Izu7P44-7w.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/17rmQQ6_jvuM4Izu7P44-7w.jpeg\" alt=\"\" width=\"296\" height=\"374\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Great reference \u2014 lots of very practical advice on storytelling<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Filmmakers use pacing as a way to manage the speed and flow of a scene. Similarly, we were strategic with the timing and ordering of close-ups vs infographic shots to preserve a natural ebb and flow in our story.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Ross Hockrow\u2019s book <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.amazon.com\/Out-Order-Storytelling-Techniques-Editors\/dp\/0321951603\/ref=sr_1_4?ie=UTF8&amp;qid=1453841212&amp;sr=8-4&amp;keywords=out+of+order\">Out of Order<\/a> has a really nice chapter on the topic of pacing. It\u2019s also a great desk-reference full of useful examples.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Spatial connections<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Each of the three articles were based in a unique geographic location. So naturally, we decided to use a map as the base for each of our scenes. Several times throughout the articles, the text makes a big jump in scope from a hyper-local location to a state-wide or nation-wide comparison. In these instances, managing the viewer\u2019s sense of context was challenging from both a visual and technical standpoint.<\/p>\n<div id=\"attachment_6580\" style=\"width: 2698px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1X-PkzQuhE99ljEGoH2mUeQ.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1X-PkzQuhE99ljEGoH2mUeQ.jpeg\" alt=\"\" width=\"2688\" height=\"1320\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">We used a variety of wireframes to establish how the user would transition between\u00a0scenes<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Steven Katz, author of the seminal filmmaking book \u201c<a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.amazon.com\/Film-Directing-Shot-Visualizing-Productions\/dp\/0941188108\">Film Directing Shot by Shot<\/a>\u201d, writes about the importance of managing spatial connections. He describes using spatial connections to:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\u201c\u2026describe spaces as large as the solar system or as small as the head of a pin, so [viewers] always know approximately how large the area is being framed.\u201d<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We spent a lot of time choreographing the visuals when transitioning spaces to help keep continuity and coherence. We kept logical camera movements while smoothly adding and removing elements from the scene. The goal was to seamlessly jump between huge geographic distances without disrupting the viewer\u2019s sense of place.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The Match Cut<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You\u2019ve probably seen the Match Cut used in dozens of movies or commercials but didn\u2019t realize it\u2019s a common film direction technique. The goal of a match or graphic cut is to transition between two disparate spaces or compositions with a common object to establish a relationship between them.<\/p>\n<div id=\"attachment_6580\" style=\"width: 1210px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1PDf17S3sG55dPkBBXj303w.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1PDf17S3sG55dPkBBXj303w.gif\" alt=\"\" width=\"1200\" height=\"480\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Despite the entire scene and theming transitioning, the roads remain consistent in both shots for continuity.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The figure above shows one example of how we use a match cut to transition between two relatively different scenes while maintaining a few common elements to suggest there is a relationship between the both sections.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Letting data tell the\u00a0story<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Creating the visuals for each section of the text wasn\u2019t always obvious. There were times throughout the project, when we stared blankly at the whiteboard re-reading the text desperately grasping for a concept, sentence or word to morph into a visual.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In those cases we resorted to doing our own research in hopes to find data that would help us craft a visual. Luckily, we found several public sector sites that had huge amounts of census and municipal data available. The only problem is that most of the data is available only in <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/Geographic_information_system\">GIS<\/a> formats which made it difficult to extract the parts we cared about \u2014 which is not uncommon for public data portals\u2026but that\u2019s a topic for another article.<\/p>\n<div id=\"attachment_6580\" style=\"width: 9778px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/12TwmV3zS6BqqOG2Mydoo4w.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/12TwmV3zS6BqqOG2Mydoo4w.jpeg\" alt=\"\" width=\"9768\" height=\"1974\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">We used open data sources to create custom 3D data visualizations<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When we plotted the raw census data, we started to see patterns that would ultimately help us shape the visuals for the scenes. Above are a few examples of scenes that are driven by various open data sources.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Putting it all\u00a0together<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">After many rounds of iteration, finessing the details, and handful of fire drills, we\u2019re proud to see our work out in the wild. In retrospect, we walked away with some key learnings:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Promote reading<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The scroll interaction was something we <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">prototyped<\/strong> meticulously upfront, and our test users found it to be intuitive.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We learned that in a situation where reading is the primary task, it\u2019s best to let the user\u2019s natural reading pace drive the visuals (as opposed to having the visuals drive the reading).<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Use cinematic techniques<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Designing for the web is a relatively new landscape. Because there are infinite approaches to solving a visual problem, it\u2019s common to overlook tried and true techniques from more established mediums. We found that applying classic cinematic techniques enabled us to craft solid narratives.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Leverage real data<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It was somewhat painful to find, massage and prep data for use in WebGL. We tried to \u201cfake it\u201d to save time, but ultimately came to terms with the fact that leveraging real data, no matter how tedious, always resulted in a better, weighty, respectable graphic. In the end, we learned it\u2019s wise to start with the raw data rather than waste time trying to simulate it.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1lZF59Yn77nqMWM05uBXQuw.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1lZF59Yn77nqMWM05uBXQuw.jpeg\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We hope you enjoyed hearing about our creative process. I\u2019m eager to see how the digital storytelling space continues to evolve this year.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you\u2019re interested in working together on these types of experiences send us note at hello@truthlabs.com or on twitter <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/truthlabschi\">@truthlabsch<\/a>i or <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/truthlabs.com\">truthlabs.com<\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Thanks to <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@DTHOMPSON?source=post_page\">Dan Thompson<\/a>, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@TysonDamman?source=post_page\">Tyson Damman<\/a>, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@drewvosburg?source=post_page\">Drew Vosburg<\/a>, and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@jasond_dnosaj?source=post_page\">Jason George<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This article was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/blog.truthlabs.com\/re-thinking-reading-on-the-web-158e789eddd7\">Erik's Medium page<\/a>. <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Over the last six months we\u2019ve been collaborating with The Atlantic to bring three interactive articles to life. It was an amazing opportunity to work side-by-side with a talented, multidisciplinary and relentless publication team. We learned a lot. We set out to create an immersive, yet thoughtful reading experience and I\u2019d like to share some of our insights that helped&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/re-thinking-reading-web\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":81,"featured_media":13975,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-13954","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/re-thinking-reading-web\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Re-thinking Reading on the Web | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Over the last six months we\u2019ve been collaborating with The Atlantic to bring three interactive articles to life. It was an amazing opportunity to work side-by-side with a talented, multidisciplinary and relentless publication team. We learned a lot. We set out to create an immersive, yet thoughtful reading experience and I\u2019d like to share some of our insights that helped... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/re-thinking-reading-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-26T14:30:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-20T14:30:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/readin.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1336\" \/>\n\t<meta property=\"og:image:height\" content=\"754\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"8 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/re-thinking-reading-web\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/readin.png\",\"width\":1336,\"height\":754},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/re-thinking-reading-web\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/re-thinking-reading-web\/\",\"name\":\"Re-thinking Reading on the Web | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/re-thinking-reading-web\/#primaryimage\"},\"datePublished\":\"2017-12-26T14:30:21+00:00\",\"dateModified\":\"2017-12-20T14:30:54+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/re-thinking-reading-web\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/re-thinking-reading-web\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/re-thinking-reading-web\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/17a32f9b93f672ad28c3fe6185e9fced\"},\"headline\":\"Re-thinking Reading on the Web\",\"datePublished\":\"2017-12-26T14:30:21+00:00\",\"dateModified\":\"2017-12-20T14:30:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/re-thinking-reading-web\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/re-thinking-reading-web\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/re-thinking-reading-web\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/17a32f9b93f672ad28c3fe6185e9fced\",\"name\":\"Erik Klimczak\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0f45fc433bf7199c7b3870bbbf0b76c65eff75e5666ddbc40386f5047547de7d?s=96&d=mm&r=g\",\"caption\":\"Erik Klimczak\"},\"description\":\"Designing the future at Uber in San Francisco. Follow me on @eklimcz.\",\"sameAs\":[\"https:\/\/blog.truthlabs.com\/@eklimcz\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/13954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=13954"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/13954\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/13975"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=13954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=13954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=13954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}