class: center, middle # Design + Tech =<br>**Web Storytelling** .small[[@Tokyo Loftwork COOOP](http://opencu.com/events/daigo-fujiwara-session) | August 10, 2015] by Daigo Fujiwara | [daigofuji.github.io/digital-storytelling](http://daigofuji.github.io/digital-storytelling/#1) --- class: center, middle ## Daigo Fujiwara Front-end Web Developer, Harvard Business Review --- class: center, middle, white ## Little about myself [](http://daigofuji.github.io/) Lucky to have worked with so many talented people. --- class: center, middle ## Designer? Developer? **I make things on the Internet.** --- class: center, middle, big-img, white  --- class: center, middle, white ## Multimedia --- class: center, middle, big-img, white  --- class: center, middle, big-img, white  --- class: center, middle, big-img, white  --- class: center, middle ## **FastCompany.com** redesign XHTML/CSS conversion in April 2003 with [Dan Cederholm]() Art director: Patrick Mitchell --- class: center, middle, big-img, white  --- class: center, middle ## New **BostonGlobe.com** launch Responsive Web Site in 2011 with [Filament Group](http://ethanmarcotte.com/), [Upstatement](http://upstatement.com/) and [Ethan Marcotte](http://ethanmarcotte.com/). The first major site to go responsive. Art directors: Dan Zedek, Miranda Mulligan --- class: center, middle, full-img, white  --- class: center, middle, inverse ## Harvard Business Review --- class: center, middle ## Print Magazine --- class: center, middle, white ### First issue (1923)  --- class: center, middle, white ...and today<br>  --- class: center, middle # hbr.org redesign Responsive Web Site with [Bocoup](https://bocoup.com/) in November 2014 Art director: James DeVries, with [Huge Inc.](https://www.hugeinc.com/) --- class: center, middle ## Old site .small[(Originally designed May 2010)] We also had separate mobile site --- class: center, middle, big-img, gray  --- class: center, middle ## Redesign was launched on November 10, 2014 --- class: center, middle, big-img, gray  --- class: middle, center ## **Technology** has changed --- class: center, middle, big-img, white  .credit[https://www.flickr.com/photos/zeldman/9609702980/] --- class: center, middle, big-img, white  --- class: middle, center ## **Reader habits** have changed Just look around while on the subway... --- class: center, middle, big-img, white  --- class: center, middle, big-img, white  --- class: center, middle, big-img, white  --- class: middle, center, big-img, white <!-- HBR traffic: June 2013 Desktop **71%** Mobile **21%** Tablet **8%** June 2014 Desktop **61%** Mobile **30%** Tablet **9%** June 2015 Desktop **56%** Mobile **37%** Tablet **7%** -->  .credit[Source: HBR.org front end team analysis of Google Analytics] --- class: center, middle, big-img, white  --- class: middle, center ## Our audience More people have access to our content --- class: center, middle, big-img, white  --- class: middle, center # Shifting to a<br>**device-agnostic**<br>website The new hbr.org works regardless of users' screen sizes --- class: center, middle, big-img, white [](video/video1.html) --- class: center, middle, big-img, white [](https://hbr.org/my-library) --- class: center, middle ## Premium Mobile Experience? --- class: middle * Easy to navigate * Easy to share * Clear, Simple, Beautiful, Useful * Fast loading (Web Optimization) * Engaging interactives --- class: middle ## Metrics: * Increase in sharing * Increase in repeat visits * increase in page views * increase in mobile sessions --- class: center, middle, inverse # Responsive Web Design --- class: center, middle ## Not a new idea --- class: center, middle, big-img, white  --- class: center, middle # It’s Easy... ```css @media (min-width:500px) { ... } ``` --- class: center, middle # ...or _is it?_ Not just code, but an approach --- class: center, middle ## **Mindset** of everyone Not just programmers and designers, but writer, editor, producer, copy editor, layout editor... --- class: center, middle ## Web **content** fills a variety of **containers**. --- class: center, middle, big-img, white  --- class: center, middle, big-img, white  --- class: center, middle # **EMBRACE THE FLUIDITY OF THE WEB!** It is no longer “a book”, but 0s and 1s --- class: center, middle ## Instead of _page-based designs_, we need **design systems**. --- class: center, middle, inverse # Style Guide<br>or<br>Pattern Library --- class: middle ### Benefits of **a web-based Style Guide** * Being able to **test** responsive design .small[(“Designing in browser”)] * Improved **workflow** .small[(Iterative process)] * Shared **vocabulary** .small[(“What do you call this module?”)] * **Future** reference .small[(“What needs to be coded next?”)] .small[Adapted from [Front-end Style Guides](http://24ways.org/2011/front-end-style-guides/) by Anna Debenham] also [a book](http://maban.co.uk/projects/front-end-style-guides/). --- class: middle ### Examples of **front-end style guides** in the wild * [**styleguides.io**](http://styleguides.io/examples.html) .small[styleguides.io/] * [**Lonely Planet**](http://rizzo.lonelyplanet.com/styleguide/) .small[rizzo.lonelyplanet.com/styleguide/] * [**BBC**](http://www.bbc.co.uk/gel) .small[bbc.co.uk/gel] * [**Starbucks**](http://www.starbucks.com/static/reference/styleguide/) .small[starbucks.com/static/reference/styleguide] * [**Yelp**](http://www.yelp.com/styleguide) .small[yelp.com/styleguide] --- class: middle ## But... * **Time consuming** to create * Seen only as **developer's tool** * Often too **abstract** * Often too **incomplete** and/or **out-of-date** --- class: middle ### **Tools** that are available to create style guide: * [Pattern Primer](http://patternprimer.adactio.com/) * [Style Guide Boilerplate](http://bjankord.github.io/Style-Guide-Boilerplate/) * [Pattern Lab](http://patternlab.io/) * [Living Styleguide](http://livingstyleguide.org/) * [Document CSS](http://documentcss.com/) * ... and [a lot more](https://github.com/daigofuji/styleguide-generators)! --- class: center, middle ## **Atomic Web Design** and **Pattern Lab** helped us with those problems --- class: center, middle, inverse # Atomic Web Design --- class: middle, center, white ### **Atomic Web Design** [http://patternlab.io/about.html](http://patternlab.io/about.html)  .small[Created by **Brad Frost**, the creator of [this is responsive](http://bradfrost.github.io/this-is-responsive/) pattern library and [Mobile Web Best Practice](http://mobilewebbestpractices.com/)] --- class: middle, white  **Atoms** on the Web are HTML elements like: h1, p, div, button, etc. More abstract atoms include colors and fonts. Combining atoms, you get **molecules**, molecules create **organisms**. --- class: center, middle, big-img, white  --- class: middle, white  ## Each of them is **on its own, responsive**. --- class: middle, white  Think of molecules and organisms as **Lego-like building blocks** designed to be combined together. Combined, they become **templates**, and ultimately **pages**. --- class: center, middle ## Every reusable components on our website is now created with **“mobile first”** in mind. --- class: center, middle, big-img, white  --- class: center, middle, inverse # Pattern Lab --- class: center, middle, white ### Pattern Lab is **an open source tool** to help you create atomic design systems and “living” style guide.  **[http://patternlab.io/](http://patternlab.io/)** .small[Also created by **Brad Frost** and **Dave Olsen**, available on [github](https://github.com/pattern-lab/patternlab-php)] --- class: middle ## What did Pattern-Lab give us? - Visual library of building blocks - View-port resizer and tester - Annotation and Code viewer --- class: middle ## Benefits of Pattern Lab * Start conversation (in browser) * Build better team (by collaborating) * Create a shared vocabulary * Focus (through testing) * Design systems, instead of page-based designs --- class: center, middle ## What are "Patterns"? --- class: center, middle ## A pattern describes **a solution to a problem** that occurs **over and over again** .small[-- Christopher Alexander (via [Dave Olsen](http://www.slideshare.net/dmolsenwvu/the-death-of-lorem-ipsum-pixel-perfect-content))] --- class: center, middle # DEMO We open sourced our tool, daisy. [Download and try it](https://github.com/HBRGTech/daisy), let us know what you think! We are hoping to release our style guide to public soon! --- class: center, middle, inverse # Pattern / System<br>vs.<br>Creative / Crafts Design of content --- class: center, middle, white ## **Art and Design** Strong visuals by designers of HBR Led by James Devries and Marta Kusztra .small[Linked from slides: [daigofuji.github.io/digital-storytelling](http://daigofuji.github.io/digital-storytelling/#1)] --- class: middle ### Beautiful and strong Visual and Typography with mobile in mind * Refined Typography * Organized, uncongested layouts * Beautiful art on large and small screens --- class: center, middle, big-img, black [](https://hbr.org/2015/04/were-all-terrible-at-understanding-each-other) <!-- We’re All Terrible at Understanding Each Other by Heidi Grant Halvorson APRIL 16, 2015 --> --- class: center, middle, big-img, black [](https://hbr.org/2015/05/the-3-d-printing-revolution) <!-- Customized art for degital: https://hbr.org/2015/05/the-3-d-printing-revolution The 3-D Printing Revolution by Richard D’Aveni FROM THE MAY 2015 ISSUE --> --- class: center, middle, big-img, black [](https://hbr.org/2015/04/the-best-presentations-are-tailored-to-the-audience) <!-- Digital only art: https://hbr.org/2015/04/the-best-presentations-are-tailored-to-the-audience? The Best Presentations Are Tailored to the Audience by Harvard Business Review Staff APRIL 17, 2015 --> --- class: center, middle, big-img, black [](https://hbr.org/2015/04/survey-how-does-late-night-emailing-affect-you) <!-- Survey: How Does Late-Night Emailing Affect You? https://hbr.org/2015/04/survey-how-does-late-night-emailing-affect-you by Nicole Torres APRIL 17, 2015 --> --- class: center, middle, big-img, black  --- class: center, middle, big-img, black  --- class: center, middle, inverse ## Charts and Interactives Also designed mobile-first .small[(*It is challenging!)] --- class: center, middle, big-img, black [](https://hbr.org/2015/05/leadership-across-cultures) <!-- Interactives: https://hbr.org/2015/05/leadership-across-cultures Leadership Across Cultures FROM THE MAY 2015 ISSUE --> --- class: center, middle, big-img, black [](https://hbr.org/2015/04/the-world-of-business-16th-century-style-2) <!-- Interactives: https://hbr.org/2015/04/the-world-of-business-16th-century-style-2 The World of Business, 16th-Century Style FROM THE APRIL 2015 ISSUE --> --- class: center, middle, big-img, black [](https://hbr.org/2014/12/vision-statement-how-to-lie-with-charts) <!-- Interactives https://hbr.org/2014/12/vision-statement-how-to-lie-with-charts Vision Statement: How to Lie with Charts FROM THE DECEMBER 2014 ISSUE --> --- class: center, middle, big-img, black [](https://hbr.org/2014/11/the-best-performing-ceos-in-the-world) <!-- Interactives https://hbr.org/2014/11/the-best-performing-ceos-in-the-world The Best-Performing CEOs in the World --> --- class: center, middle, big-img, black [](https://hbr.org/visual-library/2013/03/optimizing-advertising) <!-- Visual Library https://hbr.org/visual-library/2013/03/optimizing-advertising --> --- class: center, middle, big-img, black [](https://hbr.org/visual-library/1995/01/disruptive-innovation) <!-- Visual Library https://hbr.org/visual-library/1995/01/disruptive-innovation Disruptive Innovation --> --- class: center, middle, big-img, black [](https://hbr.org/2015/05/customer-data-designing-for-transparency-and-trust) <!--Charts: https://hbr.org/2015/05/customer-data-designing-for-transparency-and-trust --> --- class: center, middle, big-img, black [](https://hbr.org/2015/03/vision-statement-stuff-when-less-is-more) <!-- Infgraphics: https://hbr.org/2015/03/vision-statement-stuff-when-less-is-more Stuff: When Less Is More --> --- class: center, middle, inverse #Viral! Social media friendly visuals --- class: center, middle, big-img, black  --- class: center, middle, big-img, white  --- class: center, middle, big-img, white  --- class: center, middle, inverse # “Snow Fall” --- class: center, middle, white [2012 New York Times article “Snow Fall”](http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek) [](video/video2.html) --- class: center, middle, white [2013 Guardian article](http://www.theguardian.com/world/interactive/2013/nov/01/snowden-nsa-files-surveillance-revelations-decoded) [](video/video3.html) --- class: center, middle, white ## Checkout<br>crowd sourced<br>[Google Doc mega-list](https://docs.google.com/spreadsheets/d/1NnTg-KfmEpWeLtCm7zMK-THWyzHIDdaeWaoYtQMAyPQ/edit?usp=sharing) --- class: center, middle ## Web is a story telling medium --- class: center, middle # We are **story tellers** --- class: center, middle ## Editorial Designer<br>Newsroom Developer<br>Visual Journalist<br>Data Reporter<br>... --- class: center, middle, white # We are **Journalists**  “With great power, comes great responsibility”<br>.small[Spiderman's Uncle Ben] --- class: center, middle # 職人 ### **Craftsmanship** --- class: center, middle ## **Web** でしか出来ない **Reading Experience** を Provide reading experience only possible on the web --- class: center, middle, inverse # Putting it all together --- class: center, middle, white ## Atomic Web Design System<br>Visual Design<br>User Interface<br>User Experience --- class: center, middle, big-img, white  --- class: center, middle UX / Tech / Design... #“Content is KING” --- class: center, middle ## Contents that gives people reason to come back to! 「読んで・見てよかった」と言ってもらえるコンテンツ --- class: middle, center **Thank you!** # **Let’s tell great stories** daigo@daigofujiwara.com [<i class="fa fa-github"></i> github @daigofuji](https://github.com/daigofuji) [<i class="fa fa-twitter"></i> twitter @daigofuji](https://twitter.com/DaigoFuji)  --- class: middle, text-heavy More topics (in case I run out of things to talk about...): - Agile vs Waterfall (Design + Tech iterative process) - MVP (Minimal Viable Product) - git/github and Jenkins - Lean: "Life is too short to build something nobody wants" - Brown Bag Study Groups and Meetups - Being "Digital Minded" - C.O.P.E. (Create Once, Publish Everywhere) - "Sweat and Tears" vs Data - Web Optimization effort - [Baseball Hack Day](http://baseballhackday.com)