Download as PDF, PPTX
Uploaded byAnna Dahlström
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
The document discusses the importance of building device-agnostic UX systems, emphasizing modular design akin to assembling LEGO. It highlights the evolution of technology and the need for content to be adaptable across various devices, promoting collaboration in the design process. Key principles include defining templates and views, iterating across designs, and focusing on fundamental design elements to ensure effective communication regardless of the device used.
More Related Content
Similar to Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
- 1. Building device agnosticUX systems by Anna Dahlström | @annadahlstrom GENERATE LONDON, 23 SEPTEMBER 2016 Image from Creative Bloq
- 2. We always hopedfor snow on the morning of Christmas Eve (‘Julaftons morgon’ in Swedish) Shutterstock
- 3. Shutterstock …or ‘Julafton moron’ as auto correct would have it
- 4. Shutterstock We always hopedfor snow on the morning of Christmas Eve (‘Julaftons morgon’ in Swedish)
- 5. This is whatChristmas in my hometown usually looks like https://www.flickr.com/photos/sigfridlundberg/6755434225/
- 6. The snow didn’tarrive but Santa did https://www.flickr.com/photos/38446022@N00/4866804674/ Not the actual model I got
- 7. There was a lot of Lego https://www.flickr.com/photos/clement127/19093561751/in/album-72157640172443564/ Mum Dad Me David Johan Sara Martin
- 8. https://www.flickr.com/photos/j_regan/6454379951/in/photostream/ The people atLego are very, very clever
- 9.
- 10.
- 11.
- 12.
- 13. https://www.flickr.com/photos/boltofblue/4418442567/in/photostream/ Only when it’sneeded do they create bespoke pieces
- 14. We tried tokeep the Lego pieces organised but.. https://www.flickr.com/photos/meddygarnet/3871865379/
- 15. This is themost exciting time
- 16. None of theseexisted when I moved to London 10 years ago
- 17. “Just a giant iPhone” Source:Screenshots apple.co.uk + oculus.com
- 18.
- 19. https://www.flickr.com/photos/quattrovageena/2664049226/ “ Every oncein a while, a revolutionary product comes along that changes everything. ” - Steve Jobs
- 20. Smart homes are the new smartphones Screenshot fromThe Next Web http://thenextweb.com/insider/2015/12/23/2016-predictions-for-iot-and-smart-homes/#gref
- 21.
- 22. Screenshot: Minority ReportSource: https://www.corning.com/cala/en/innovation/a-day-made-of-glass.html
- 23.
- 24. https://www.flickr.com/photos/seryo/3035815376/in/photostream/ “ Get yourcontent to go anywhere, because it’s going to go everywhere. ” - Brad Frost
- 25. Screenshot: Minority ReportSource: https://medium.com/@maxbraun/my-bathroom-mirror-is-smarter-than-yours-94b21c6671ba#.ndwoxzamc
- 26. https://www.flickr.com/photos/websummit/15089463204/ A boundless futurewhere content flows from one “device” to another
- 27.
- 28.
- 29. Screenshot: https://blog.intercom.com/the-end-of-apps-as-we-know-them/ “ Theidea 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
- 30. It’s one ofthe ideas behind iOS 10 Screenshot: Apple.co.uk
- 31.
- 32. https://www.flickr.com/photos/paradoxicallystrange/8077764591/in/photostream/ There are around7.8bn conncted devices on earth - GSMA’s Real-time tracker
- 33. Source: Open Signalhttp://opensignal.com/reports/2015/08/android-fragmentation/
- 34. The big revealof the page design is gone https://www.flickr.com/photos/s-e-f/6455978889/
- 35.
- 36. https://www.flickr.com/photos/tunggul/9011104633/ 44% of theworld’s population were connected to the internet at the end of 2015 - Source: Mobile Connectivity Index
- 37. “ You getshit done… while you get shit done. ” - Buzzfeed http://randytsang.com/blog/2010/04/ipad-review-revolutionising-the-way-we-consume-media-in-small-ways/
- 38.
- 39. “ The siteyou build is not dependent on knowing what device it is being displayed on. ” - Sarita Harbour, WDD Image courtesy of Shutterstock
- 40. How can wenot do a wireframe for every page? https://www.flickr.com/photos/avlxyz/15633960313/
- 41. Little did Iknow… https://www.flickr.com/photos/44949218@N02/17941113065/
- 42.
- 43. In reality it’snot too different from building lego https://www.flickr.com/photos/mwboeckmann/3275537425
- 44. www.flickr.com/photos/ulfk/7976687420 We’ve been doing modulardesign for a long time This is Lund Cathedral in my hometown. It’s nearly 900 years old
- 45. There’s been aneed for modular design for a long time https://www.flickr.com/photos/kullez/5897887693/ I grew up 15 mins, by foot, from here
- 46. Magic and ‘stop’ allin one https://www.flickr.com/photos/wlodi/3085157011
- 47. The majority willbe sad, just like Wall-e https://www.flickr.com/photos/meddygarnet/3871865379/ This guy hasn’t realised it, yet
- 48. If we’re notcareful we’ll be swimming in pieces https://www.flickr.com/photos/wwworks/2472230611
- 49. Sooner or lateryou’ve got to clearn up the mess https://www.flickr.com/photos/clement127/28800579010/
- 50. It’s always been aboutbuilding blocks and grids www.flickr.com/photos/dahlstroms/4411448782/
- 51.
- 52. www.flickr.com/photos/theaftershock/2811382400 “ Content needsto be choreographed to ensure the intended message is preserved on any device and at any width. ” - Trent Walton
- 53. To really dothat we need to know our building blocks xxxxwww.flickr.com/photos/ulfk/7976687420
- 54. We need toknow what we’re building https://www.flickr.com/photos/fallentomato/24818009379/
- 55. Define views &key templates Header& Nav Products Footer Filter & search Product listing Product pageCategoriesHome Header& Nav Features Footer Featured products Featured categories Header& Nav Footer Categories Header& Nav Gallery Descrip- tion Footer Additional info Related products
- 56. Break down contentfurther & explore layouts 1 Header& Nav 2 Filter & search Product listing 1 Header& Nav 2 Gallery 2 Descrip- tion 8 Footer 3 Additional info Product page 1 Header& Nav 2 Category 3 Category 4 Category 9 Categ 7 Categ 10 Footer Categories 7 Prod 6 Categ 5 Categ 1 Header& Nav 2 Features 11 Footer Home 3 Category 4 Category 6 Categ 6 Categ 10 Prod 9 Prod 8 Prod 7 Prod 8 Categ 6 Prod 5 Prod 4 Prod 3 Prod 10 Prod 9 Prod 8 Prod 7 Prod 14 Prod 13 Prod 12 Prod 11 Prod 18 Prod 17 Prod 16 Prod 15 Prod 19 Footer 7 Prod 6 Prod 5 Prod 4 Prod
- 57. Home - large Header&Nav Features Footer Featured products Featured categories 1 Header& Nav 2 Features 11 Footer 3 Category 4 Category 6 Categ 6 Categ 10 Prod 9 Prod 8 Prod 7 Prod 1 Header& Nav 2 Features 10 Footer 3 Category 4 Categ 5 Categ 6 Product 7 Product 8 Product 9 Product Header& Nav Features Footer Home - small Featured categories Featured products Do the same across screen sizes
- 58. Break down eachmodule into elements Home - large Header& Nav Features Footer Featured products Featured categories 1 Header& Nav 2 Features 11 Footer 3 Category 4 Category 6 Categ 6 Categ 10 Prod 9 Prod 8 Prod 7 Prod 1 Header& Nav 2 Features 10 Footer 3 Category 4 Categ 5 Categ 6 Product 7 Product 8 Product 9 Product Header& Nav Features Footer Home - small Featured categories Featured products
- 59. Views Home - largeHome - small Start identifying your building blocks & variations
- 60. Views Home - largeHome - small Start identifying your building blocks & variations
- 61. Feature - largeFeature - small Views Modules Home - large Home - small Start identifying your building blocks & variations
- 62. Feature - largeFeature - small Views Modules Home - large Home - small Start identifying your building blocks & variations
- 63. Feature - largeFeature - small Featured products - large Featured products - small Views Modules Home - large Home - small Start identifying your building blocks & variations
- 64. Feature - largeFeature - small Featured products - large Featured products - small Views Modules Home - large Home - small Start identifying your building blocks & variations
- 65. Feature - largeFeature - small Featured products - large Single product - large Featured products - small Single product- small Views Modules Home - large Home - small Start identifying your building blocks & variations
- 66. Iterate & refineacross views & key templates Header& Nav Products Footer Filter & search Product listing Product pageCategoriesHome Header& Nav Features Footer Featured products Featured categories Header& Nav Footer Categories Header& Nav Gallery Descrip- tion Additional info Related products Footer
- 67. Iterate & refineacross views & key templates Header& Nav Products Footer Filter & search Product listing Product pageCategoriesHome Header& Nav Features Footer Featured categories Header& Nav Footer Categories Header& Nav Gallery Descrip- tion Additional info Related products 10 Prod 9 Prod 8 Prod 7 Prod Footer
- 68. Iterate & refineacross views & key templates Header& Nav Products Footer Filter & search Product listing Product pageCategoriesHome Header& Nav Features Footer Featured categories Header& Nav Footer Categories Header& Nav Gallery Descrip- tion Additional info Related products Footer
- 69. Iterate & refineacross views & key templates Header& Nav Products Footer Filter & search Product listing Product pageCategoriesHome Header& Nav Features Footer Featured categories Header& Nav Footer Categories Header& Nav Gallery Descrip- tion Additional info 7 Prod 6 Prod 5 Prod 4 Prod Footer
- 70. Iterate & refineacross views & key templates Header& Nav Products Footer Filter & search Product listing Product pageCategoriesHome Header& Nav Features Footer Featured categories Header& Nav Footer Categories Header& Nav Gallery Descrip- tion Additional info Footer
- 71. Iterate & refineacross views & key templates Header& Nav Footer Filter & search Product listing Product pageCategoriesHome Header& Nav Features Footer Featured categories Header& Nav Footer Categories Header& Nav Gallery Descrip- tion Additional info Footer 6 Prod 5 Prod 4 Prod 3 Prod 10 Prod 9 Prod 8 Prod 7 Prod 14 Prod 13 Prod 12 Prod 11 Prod 18 Prod 17 Prod 16 Prod 15 Prod
- 72. Iterate & refineacross views & key templates Header& Nav Footer Filter & search Product listing Product pageCategoriesHome Header& Nav Features Footer Featured categories Header& Nav Footer Categories Header& Nav Gallery Descrip- tion Additional info Footer 6 Prod 5 Prod 4 Prod 10 Prod 9 Prod 8 Prod 7 Prod 14 Prod 13 Prod 12 Prod 11 Prod 18 Prod 17 Prod 16 Prod 15 Prod
- 73. Iterate & refineacross views & key templates Header& Nav Footer Filter & search Product listing Product pageCategoriesHome Header& Nav Features Footer Featured categories Header& Nav Footer Categories Header& Nav Gallery Descrip- tion Additional info Footer
- 74. Gradually build yourmodule library Feature - large Feature - small Featured products - large Featured products - small Single product - large Single product- small Also used for: • Module REL01 - Related products 1 3 4 1 2 3 1 2 1 2 3 4 2 3 1 2 3 1 2 1 1
- 75. Pretty much the same as lego www.flickr.com/photos/toomuchdew/5243719740
- 76. Re-use & sparingly do bespoke modules www.flickr.com/photos/toomuchdew/5243719740 www.flickr.com/photos/toomuchdew/5914351500 www.flickr.com/photos/toomuchdew/5148233898 www.flickr.com/photos/toomuchdew/3792159077 www.flickr.com/photos/toomuchdew/3792972952
- 77. The key tomaking it happen is working together across disciplines https://www.flickr.com/photos/levork/3760382453/ …and with clients
- 78.
- 79. It’s really about going back to basics www.flickr.com/photos/dahlstroms/4411448782/
- 80. Responsive design hasallowed us to adapt views & interactions
- 81. Each device isdifferent. Make the most of it Browse Research Buy & Pay Get notified ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
- 82. 1. Take 2pieces 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 you’re designing for 4. Sketch your main pages and views onto each one https://www.flickr.com/photos/skynoir/8825832242/
- 83. 1. Consider anydevice 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 In summary
- 84.
- 85. It’s a sweetspotsomewhere in the middle between this… https://www.flickr.com/photos/petaqui/8789580419
- 86.
- 87. We can all doour bit https://www.flickr.com/photos/brickresort/6823916051/in/photostream/
- 88. Thank you annadahlstrom.com| @annadahlstrom eepurl.com/bZxppzImage from Creative Bloq