Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016

Download Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016

Post on 19-Jan-2017

190 views

Category:

Design

2 download

Embed Size (px)

TRANSCRIPT

<ul><li><p>Building device agnostic UX systemsby Anna Dahlstrm | @annadahlstrom GENERATE LONDON, 23 SEPTEMBER 2016 Image from Creative Bloq</p><p>http://www.annadahlsrom.com</p></li><li><p>We always hoped for snow on the morning of Christmas Eve (Julaftons morgon in Swedish) </p><p>Shutterstock</p></li><li><p>Shutterstock</p><p>or Julafton moron as auto correct would have it</p></li><li><p>Shutterstock</p><p>We always hoped for snow on the morning of Christmas Eve (Julaftons morgon in Swedish) </p></li><li><p>This is what Christmas in my hometown usually looks like</p><p>https://www.flickr.com/photos/sigfridlundberg/6755434225/</p></li><li><p>The snow didnt arrive but Santa did</p><p>https://www.flickr.com/photos/38446022@N00/4866804674/</p><p>Not the actual model I got</p></li><li><p>There was a lot of Lego</p><p>https://www.flickr.com/photos/clement127/19093561751/in/album-72157640172443564/</p><p>Mum Dad</p><p>MeDavid</p><p>JohanSara</p><p>Martin</p></li><li><p>https://www.flickr.com/photos/j_regan/6454379951/in/photostream/</p><p>The people at Lego are very, very clever</p></li><li><p>Source: Google</p></li><li><p>Source: Google</p></li><li><p>Source: Google</p></li><li><p>Source: http://gizmodo.com/303370/lego-iphone-already-pre-bricked-out-of-the-box</p><p>http://gizmodo.com/303370/lego-iphone-already-pre-bricked-out-of-the-box</p></li><li><p>https://www.flickr.com/photos/boltofblue/4418442567/in/photostream/</p><p>Only when its needed do they create bespoke pieces</p></li><li><p>We tried to keep the Lego pieces organised but..</p><p>https://www.flickr.com/photos/meddygarnet/3871865379/</p></li><li><p>This is the most exciting time</p></li><li><p>None of these existed when I moved to London 10 years ago</p></li><li><p>Just a giant iPhone</p><p>Source: Screenshots apple.co.uk + oculus.com</p><p>http://apple.co.ukhttp://oculus.com</p></li><li><p>https://www.flickr.com/photos/125026780@N05/28847382404/</p></li><li><p>https://www.flickr.com/photos/quattrovageena/2664049226/</p><p> Every once in a while, a revolutionary product comes along that changes everything. </p><p>- Steve Jobs </p></li><li><p>Smart homes are the new smartphones</p><p>Screenshot fromThe Next Web http://thenextweb.com/insider/2015/12/23/2016-predictions-for-iot-and-smart-homes/#gref</p><p>http://thenextweb.com/insider/2015/12/23/2016-predictions-for-iot-and-smart-homes/#gref</p></li><li><p>Screenshot: Minority Report</p></li><li><p>Screenshot: Minority Report Source: https://www.corning.com/cala/en/innovation/a-day-made-of-glass.html</p><p>https://www.corning.com/cala/en/innovation/a-day-made-of-glass.html</p></li><li><p>Screenshot: Her</p></li><li><p>https://www.flickr.com/photos/seryo/3035815376/in/photostream/</p><p> Get your content to go anywhere, because its going to go everywhere. </p><p>- Brad Frost</p></li><li><p>Screenshot: Minority Report Source: https://medium.com/@maxbraun/my-bathroom-mirror-is-smarter-than-yours-94b21c6671ba#.ndwoxzamc</p><p>https://medium.com/@maxbraun/my-bathroom-mirror-is-smarter-than-yours-94b21c6671ba#.ndwoxzamc</p></li><li><p>https://www.flickr.com/photos/websummit/15089463204/</p><p>A boundless future where content flows from one device to another</p></li><li><p>Source: https://www.youtube.com/watch?v=9J7GpVQCfms</p><p>https://www.youtube.com/watch?v=9J7GpVQCfms</p></li><li><p>Source: Duo Skin</p></li><li><p>Screenshot: https://blog.intercom.com/the-end-of-apps-as-we-know-them/</p><p> The idea of an app as an independent destination is becoming less important, and the idea of an app as a publishing tool, with related notifications that contain content and actions, is becoming more important. - Source: The End of Apps As We Know Them</p></li><li><p>Its one of the ideas behind iOS 10</p><p>Screenshot: Apple.co.uk</p><p>http://Apple.co.uk</p></li><li><p>everywhere</p></li><li><p>https://www.flickr.com/photos/paradoxicallystrange/8077764591/in/photostream/</p><p>There are around 7.8bn conncted devices on earth - GSMAs Real-time tracker </p></li><li><p>Source: Open Signal http://opensignal.com/reports/2015/08/android-fragmentation/</p></li><li><p>The big reveal of the page design is gone</p><p>https://www.flickr.com/photos/s-e-f/6455978889/</p></li><li><p>It depends</p></li><li><p>https://www.flickr.com/photos/tunggul/9011104633/</p><p>44% of the worlds population were connected to the internet at the end of 2015 - Source: Mobile Connectivity Index</p><p>http://www.mobileconnectivityindex.com/widgets/connectivityIndex/pdf/ConnectivityIndex_V01.pdf</p></li><li><p> You get shit done while you get shit done. </p><p>- Buzzfeed</p><p>http://randytsang.com/blog/2010/04/ipad-review-revolutionising-the-way-we-consume-media-in-small-ways/</p><p>https://www.buzzfeed.com/carolinekee/are-you-reading-this-in-the-bathroom-rn</p></li><li><p>device browser screen input method connection speed</p><p>Any anytime anywhereUsed </p></li><li><p> The site you build is not dependent on knowing what device it is being displayed on. </p><p>- Sarita Harbour, WDD </p><p>Image courtesy of Shutterstock</p></li><li><p>How can we not do a wireframe for every page?</p><p>https://www.flickr.com/photos/avlxyz/15633960313/</p></li><li><p>Little did I know</p><p>https://www.flickr.com/photos/44949218@N02/17941113065/</p></li><li><p>http://www.bbc.co.uk/sport/olympics/19266882</p><p>http://www.bbc.co.uk/sport/olympics/19266882</p></li><li><p>In reality its not too different from building lego</p><p>https://www.flickr.com/photos/mwboeckmann/3275537425</p><p>https://www.flickr.com/photos/mwboeckmann/3275537425</p></li><li><p>www.flickr.com/photos/ulfk/7976687420</p><p>Weve been doing modular design for a long time</p><p>This is Lund Cathedral in my hometown. Its nearly 900 years old </p><p>http://www.flickr.com/photos/ulfk/7976687420</p></li><li><p>Theres been a need for modular design for a long time</p><p>https://www.flickr.com/photos/kullez/5897887693/</p><p>I grew up 15 mins, by foot, </p><p>from here</p></li><li><p>Magic and stop all in one</p><p>https://www.flickr.com/photos/wlodi/3085157011</p><p>https://www.flickr.com/photos/wlodi/3085157011</p></li><li><p>The majority will be sad, just like Wall-e</p><p>https://www.flickr.com/photos/meddygarnet/3871865379/</p><p>This guy hasnt realised it, yet</p></li><li><p>If were not careful well be swimming in pieces</p><p>https://www.flickr.com/photos/wwworks/2472230611</p><p>https://www.flickr.com/photos/wwworks/2472230611</p></li><li><p>Sooner or later youve got to clearn up the mess</p><p>https://www.flickr.com/photos/clement127/28800579010/</p></li><li><p>Its always been about building blocks and grids</p><p>www.flickr.com/photos/dahlstroms/4411448782/</p></li><li><p>Fluid FixedFixed Fluid</p></li><li><p>www.flickr.com/photos/theaftershock/2811382400</p><p> Content needs to be choreographed to ensure the intended message is preserved on any device and at any width. </p><p>- Trent Walton </p><p>http://desktopwallpaper-s.com/19-Computers/-/Future/</p></li><li><p>To really do that we need to know our building blocks</p><p>xxxxwww.flickr.com/photos/ulfk/7976687420</p><p>http://www.flickr.com/photos/dahlstroms/4411448782/</p></li><li><p>We need to know what were building</p><p>https://www.flickr.com/photos/fallentomato/24818009379/</p></li><li><p>Define views &amp; key templates</p><p>Header&amp; Nav</p><p>Products</p><p>Footer</p><p>Filter &amp; search</p><p>Product listing Product pageCategoriesHomeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured products</p><p>Featured categories</p><p>Header&amp; Nav</p><p>Footer</p><p>Categories</p><p>Header&amp; Nav</p><p>GalleryDescrip-</p><p>tion</p><p>Footer</p><p>Additional info</p><p>Related products</p></li><li><p>Break down content further &amp; explore layouts</p><p>1 Header&amp; Nav2 Filter &amp; search</p><p>Product listing</p><p>1 Header&amp; Nav</p><p>2Gallery</p><p>2Descrip-</p><p>tion</p><p>8 Footer</p><p>3Additional info</p><p>Product page</p><p>1 Header&amp; Nav</p><p>2Category</p><p>3Category</p><p>4 Category</p><p>9Categ</p><p>7Categ</p><p>10 Footer</p><p>Categories</p><p>7Prod</p><p>6Categ</p><p>5Categ</p><p>1 Header&amp; Nav</p><p>2Features</p><p>11 Footer</p><p>Home</p><p>3Category</p><p>4 Category</p><p>6 Categ</p><p>6 Categ</p><p>10Prod</p><p>9 Prod</p><p>8Prod</p><p>7Prod</p><p>8Categ</p><p>6Prod</p><p>5 Prod</p><p>4Prod</p><p>3Prod</p><p>10Prod</p><p>9 Prod</p><p>8Prod</p><p>7Prod</p><p>14Prod</p><p>13 Prod</p><p>12Prod</p><p>11Prod</p><p>18Prod</p><p>17 Prod</p><p>16Prod</p><p>15Prod</p><p>19 Footer</p><p>7Prod</p><p>6 Prod</p><p>5Prod</p><p>4Prod</p></li><li><p>Home - largeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured products</p><p>Featured categories</p><p>1 Header&amp; Nav</p><p>2Features</p><p>11 Footer</p><p>3Category</p><p>4 Category</p><p>6 Categ</p><p>6 Categ</p><p>10Prod</p><p>9 Prod</p><p>8Prod</p><p>7Prod</p><p>1 Header&amp; Nav</p><p>2Features</p><p>10 Footer</p><p>3 Category</p><p>4 Categ</p><p>5 Categ</p><p>6 Product</p><p>7 Product</p><p>8 Product</p><p>9 Product</p><p>Header&amp; Nav</p><p>Features</p><p>Footer</p><p>Home - small</p><p>Featured categories</p><p>Featured products</p><p>Do the same across screen sizes</p></li><li><p>Break down each module into elements</p><p>Home - largeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured products</p><p>Featured categories</p><p>1 Header&amp; Nav</p><p>2Features</p><p>11 Footer</p><p>3Category</p><p>4 Category</p><p>6 Categ</p><p>6 Categ</p><p>10Prod</p><p>9 Prod</p><p>8Prod</p><p>7Prod</p><p>1 Header&amp; Nav</p><p>2Features</p><p>10 Footer</p><p>3 Category</p><p>4 Categ</p><p>5 Categ</p><p>6 Product</p><p>7 Product</p><p>8 Product</p><p>9 Product</p><p>Header&amp; Nav</p><p>Features</p><p>Footer</p><p>Home - small</p><p>Featured categories</p><p>Featured products</p></li><li><p>Views</p><p>Home - large Home - small</p><p>Start identifying your building blocks &amp; variations</p></li><li><p>Views</p><p>Home - large Home - small</p><p>Start identifying your building blocks &amp; variations</p></li><li><p>Feature - large Feature - small</p><p>Views Modules</p><p>Home - large Home - small</p><p>Start identifying your building blocks &amp; variations</p></li><li><p>Feature - large Feature - small</p><p>Views Modules</p><p>Home - large Home - small</p><p>Start identifying your building blocks &amp; variations</p></li><li><p>Feature - large Feature - small</p><p>Featured products - large Featured products - small</p><p>Views Modules</p><p>Home - large Home - small</p><p>Start identifying your building blocks &amp; variations</p></li><li><p>Feature - large Feature - small</p><p>Featured products - large Featured products - small</p><p>Views Modules</p><p>Home - large Home - small</p><p>Start identifying your building blocks &amp; variations</p></li><li><p>Feature - large Feature - small</p><p>Featured products - large</p><p>Single product - large</p><p>Featured products - small</p><p>Single product- small</p><p>Views Modules</p><p>Home - large Home - small</p><p>Start identifying your building blocks &amp; variations</p></li><li><p>Iterate &amp; refine across views &amp; key templates</p><p>Header&amp; Nav</p><p>Products</p><p>Footer</p><p>Filter &amp; search</p><p>Product listing Product pageCategoriesHomeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured products</p><p>Featured categories</p><p>Header&amp; Nav</p><p>Footer</p><p>Categories</p><p>Header&amp; Nav</p><p>GalleryDescrip-</p><p>tion</p><p>Additional info</p><p>Related products</p><p>Footer</p></li><li><p>Iterate &amp; refine across views &amp; key templates</p><p>Header&amp; Nav</p><p>Products</p><p>Footer</p><p>Filter &amp; search</p><p>Product listing Product pageCategoriesHomeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured categories</p><p>Header&amp; Nav</p><p>Footer</p><p>Categories</p><p>Header&amp; Nav</p><p>GalleryDescrip-</p><p>tion</p><p>Additional info</p><p>Related products10</p><p>Prod9 </p><p>Prod8</p><p>Prod7</p><p>Prod</p><p>Footer</p></li><li><p>Iterate &amp; refine across views &amp; key templates</p><p>Header&amp; Nav</p><p>Products</p><p>Footer</p><p>Filter &amp; search</p><p>Product listing Product pageCategoriesHomeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured categories</p><p>Header&amp; Nav</p><p>Footer</p><p>Categories</p><p>Header&amp; Nav</p><p>GalleryDescrip-</p><p>tion</p><p>Additional info</p><p>Related products</p><p>Footer</p></li><li><p>Iterate &amp; refine across views &amp; key templates</p><p>Header&amp; Nav</p><p>Products</p><p>Footer</p><p>Filter &amp; search</p><p>Product listing Product pageCategoriesHomeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured categories</p><p>Header&amp; Nav</p><p>Footer</p><p>Categories</p><p>Header&amp; Nav</p><p>GalleryDescrip-</p><p>tion</p><p>Additional info</p><p>7Prod</p><p>6 Prod</p><p>5Prod</p><p>4Prod</p><p>Footer</p></li><li><p>Iterate &amp; refine across views &amp; key templates</p><p>Header&amp; Nav</p><p>Products</p><p>Footer</p><p>Filter &amp; search</p><p>Product listing Product pageCategoriesHomeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured categories</p><p>Header&amp; Nav</p><p>Footer</p><p>Categories</p><p>Header&amp; Nav</p><p>GalleryDescrip-</p><p>tion</p><p>Additional info</p><p>Footer</p></li><li><p>Iterate &amp; refine across views &amp; key templates</p><p>Header&amp; Nav</p><p>Footer</p><p>Filter &amp; search</p><p>Product listing Product pageCategoriesHomeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured categories</p><p>Header&amp; Nav</p><p>Footer</p><p>Categories</p><p>Header&amp; Nav</p><p>GalleryDescrip-</p><p>tion</p><p>Additional info</p><p>Footer</p><p>6Prod</p><p>5 Prod</p><p>4Prod</p><p>3Prod</p><p>10Prod</p><p>9 Prod</p><p>8Prod</p><p>7Prod</p><p>14Prod</p><p>13 Prod</p><p>12Prod</p><p>11Prod</p><p>18Prod</p><p>17 Prod</p><p>16Prod</p><p>15Prod</p></li><li><p>Iterate &amp; refine across views &amp; key templates</p><p>Header&amp; Nav</p><p>Footer</p><p>Filter &amp; search</p><p>Product listing Product pageCategoriesHomeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured categories</p><p>Header&amp; Nav</p><p>Footer</p><p>Categories</p><p>Header&amp; Nav</p><p>GalleryDescrip-</p><p>tion</p><p>Additional info</p><p>Footer</p><p>6Prod</p><p>5 Prod</p><p>4Prod</p><p>10Prod</p><p>9 Prod</p><p>8Prod</p><p>7Prod</p><p>14Prod</p><p>13 Prod</p><p>12Prod</p><p>11Prod</p><p>18Prod</p><p>17 Prod</p><p>16Prod</p><p>15Prod</p></li><li><p>Iterate &amp; refine across views &amp; key templates</p><p>Header&amp; Nav</p><p>Footer</p><p>Filter &amp; search</p><p>Product listing Product pageCategoriesHomeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured categories</p><p>Header&amp; Nav</p><p>Footer</p><p>Categories</p><p>Header&amp; Nav</p><p>GalleryDescrip-</p><p>tion</p><p>Additional info</p><p>Footer</p></li><li><p>Gradually build your module library</p><p>Feature - large Feature - small</p><p>Featured products - large Featured products - small</p><p>Single product - large Single product- small</p><p>Also used for: Module REL01 - Related products</p><p>1</p><p>3</p><p>4</p><p>1</p><p>2</p><p>3</p><p>1</p><p>2</p><p>1</p><p>2</p><p>3</p><p>4</p><p>2</p><p>3</p><p>1</p><p>2</p><p>3</p><p>1</p><p>2</p><p>1</p><p>1</p></li><li><p>Pretty much the same as lego</p><p>www.flickr.com/photos/toomuchdew/5243719740</p><p>http://www.flickr.com/photos/toomuchdew/5243719740</p></li><li><p>Re-use &amp; sparingly do bespoke moduleswww.flickr.com/photos/toomuchdew/5243719740</p><p>www.flickr.com/photos/toomuchdew/5914351500</p><p>www.flickr.com/photos/toomuchdew/5148233898</p><p>www.flickr.com/photos/toomuchdew/3792159077</p><p>www.flickr.com/photos/toomuchdew/3792972952</p></li><li><p>The key to making it happen is working together across disciplines</p><p>https://www.flickr.com/photos/levork/3760382453/</p><p>and with clients</p></li><li><p>Pussle vs Lego</p></li><li><p>Its really about going back to basics</p><p>www.flickr.com/photos/dahlstroms/4411448782/</p></li><li><p>Responsive design has allowed us to adapt views &amp; interactions</p></li><li><p>Each device is different. Make the most of it</p><p>Browse </p><p>Research </p><p>Buy &amp; Pay </p><p>Get notified</p></li><li><p>1. Take 2 pieces of A4 paper 2. Fold one in half and rip it into two pieces 3. Continue until you have 5 uniquely sized pieces of paper, the intact A4 piece of paper included 4. Consider their physical size to be the size of the screen youre designing for 4. Sketch your main pages and views onto each one</p><p>https://www.flickr.com/photos/skynoir/8825832242/</p></li><li><p>1. Consider any device your starting point 2. Define key pages/ views and your (content) templates 3. Approach it like lego, not a puzzle 4. Sketch and rip up paper 5. Collaborate across disciplines </p><p>In summary</p></li><li><p>https://www.flickr.com/photos/tunggul/9011104633/ http://randytsang.com/blog/2010/04/ipad-review-revolutionising-the-way-we-consume-media-in-small-ways/</p><p>This is the future</p></li><li><p>Its a sweetspot somewhere in the middle between this</p><p>https://www.flickr.com/photos/petaqui/8789580419</p><p>https://www.flickr.com/photos/petaqui/8789580419</p></li><li><p>and this</p><p>https://www.flickr.com/photos/artisticrichmond/2716147621/</p></li><li><p>We can all do our bit</p><p>https://www.flickr.com/photos/brickresort/6823916051/in/photostream/</p></li><li><p>Thank youannadahlstrom.com| @annadahlstrom eepurl.com/bZxppz Image from Creative Bloq</p><p>http://www.annadahlsrom.comhttp://eepurl.com/bZxppz</p></li></ul>