Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Tools Workshop

504 views

Published on

A collage of slides for our Design Tools Workshop we did for The Conference in Malmö (at ustwo Malmö, August 2016) and NEXT Conference in Hamburg (at German Wahnsinn Recording Studio, September 2016).

Published in: Design

Design Tools Workshop

  1. 1. http://precious-forever.com
  2. 2. HEJ – I’M CHRISTOPHE @preciousforever
  3. 3. WORKSHOP TOPICS @preciousforever
  4. 4. — Intro — Context — History and Meaning of Design Tools — BREAK — Exploring Design Tools — Meet Design Tools Makers — BREAK — Designing with Digital Material
  5. 5. WORKSHOP GOALS @preciousforever
  6. 6. — Meet likeminded people and enjoy some insightful exercises together — Reflect on designer/tool relationship and discuss human/machine collaboration — Meet design tools makers and take away a few practices and tools you can start using tomorrow
  7. 7. ACTION @preciousforever Introduce yourself and your favorite design tool!
  8. 8. SOME CONTEXT @preciousforever
  9. 9. Designtools Hackday Exploring the Future of Design Tools http://www.designtoolshackday.com
  10. 10. HELLO WORLD!
  11. 11. HAMBURGNYC
  12. 12. The feedback on the Designtools Hackday was very good and heartwarming.
  13. 13. https://medium.com/sketch-app-sources/runner-speed-up-your-sketch-workflow-fba470ed43c1#.esufuh5sl
  14. 14. Three great and now popular Sketch Plugins were born during the event:
  15. 15. http://sketchrunner.com
  16. 16. https://sketchfocus.com/
  17. 17. http://opencolor.tools
  18. 18. http://www.designtoolshackday.com
  19. 19. There’s no perfect design tool.
  20. 20. We’re leaving the design software monoliths from yesterday behind and start exploring a bright future of diverse and complementary design tools.
  21. 21. Sketch is the Minecraft of Design Tools: it has a pretty open API, it’s deliberately hackable, encourages "abuse" … and it often breaks and crashes.
  22. 22. As designers, the tools we use shape us and shape our work. Thus, to stay in charge we need to shape our tools and workflows.
  23. 23. – MARSHALL MCLUHAN „ We shape our tools and thereafter our tools shape us.
  24. 24. "Here’s the simple truth: you can’t innovate on products without first innovating the way you build them." Alex Schleifer, VP of Design at Airbnb
  25. 25. If we don’t love how we work, how can we create products or systems people are supposed to love?
  26. 26. Wilson Miner: When We Build – https://vimeo.com/34017777
  27. 27. HISTORY & MEANING OF DESIGN TOOLS @preciousforever
  28. 28. https://flic.kr/p/5xwYpF
  29. 29. http://www.zeldman.com/2015/09/10/all-websites-look-the-same/
  30. 30. Everybody can be a designer. “dumbing down of creativity” vs. "democratisation and escalation of creativity" https://web.archive.org/web/20090701000531/http://artbackwash.blogspot.com/2009/06/dont-be-tooler.html https://medium.com/@ArtificialExperience/creativeai-9d4b2346faf3#.edm2b3hmu
  31. 31. There are too many tools that just help us build instead of help us evaluate, think and understand.
  32. 32. Human Machine Collaboration From Manual Work to Automation to Augmentation API
  33. 33. Human Machine Collaboration The H-Metaphor https://medium.com/@ArtificialExperience/creativeai-9d4b2346faf3#.edm2b3hmu
  34. 34. Human Machine Collaboration From Manual Work to Automation to Augmentation API
  35. 35. The Future of Making Things: Generative Design by Autodesk – https://www.youtube.com/watch?v=E2SxqUvtpIk
  36. 36. https://www.youtube.com/watch?v=CtYRfMzmWFU
  37. 37. Auto Illustrator – https://vimeo.com/17593822
  38. 38. http://devpost.com/software/ai-909
  39. 39. https://www.youtube.com/watch?v=Kq0ZwmOln7Y
  40. 40. http://vision.cs.utexas.edu/projects/shadowdraw/shadowdraw.html
  41. 41. If everybody can be a designer, who designs design processes and design tools that make a difference?
  42. 42. ACTION @preciousforever Exploring Design Tools with a focus on human machine collaboration.
  43. 43. MEET DESIGN TOOLS MAKERS @preciousforever
  44. 44. DESIGNING WITH DIGITAL MATERIAL @preciousforever
  45. 45. Data Color
  46. 46. MEANINGFUL DATA @preciousforever
  47. 47. Designing with Data Timeline Designing with Meaningful Data – bit.ly/1QOn8c9 No Data Fake Data Mock Data Meaningful Data Manipulated Real Data Sketch Data Populator Project Comet by Adobe Lorem Ipsum lorem@ipsum.com Consetetur Lorem Ipsum lorem@ipsum.com Sadipscing Lorem Ipsum lorem@ipsum.com Sadipscing Lorem Ipsum lorem@ipsum.com Consetetur Lorem Ipsum lorem@ipsum.com Consetetur Lorem Ipsum lorem@ipsum.com Consetetur Maria Mendez-Ipsum lorem@ipsum.com Athens Maria Mendez-Ipsum lorem@ipsum.com Athens Tilda Swinton tilda@swinton.com London, UK George Clooney george@clooney.com Los Angeles, USA George Clooney george@clooney.com Los Angeles, USA Natalie Portman natalie@portman.com Los Angeles, USA Danielle Phillips wwells@gevee.net Werdau Emma Gibson tortiz@meevee.mil Herrenberg Kelly Miller gwest@janyx.org Rodgau Ralph Newman gparker@eimbee.info Aurich Kevin Larson jbishop@zoonder.mil Soest Beverly Crawford sbailey@browseblab.com Werdau Maria Richards 7-(229)551-6413 (+1) Available Matthew Cole 251-(676)194-7354 Not available Martha Lynch 33-(171)614-6692 (+2) Available Billy Ferguson 48-(672)718-6336 (+1) Do not disturb Roy Hunt 1-(480)970-3837 Not available Jonathan Little 66-(965)393-0501 Available JSON dataset Template with {placeholders} Populated instance Long-term iteration Short-term iteration Phillip Little 234-(395)993-6083 4 min ago Apple Inc 251-(676)194-7354 17 min ago Linda Parker 1-(571)831-3088 21 min ago Microsoft Inc 261-(314)441-4378 2 hours ago James Morris 86-(413)306-3447 3 hours ago Eugene Vasquez 86-(618)410-2686 4 hours ago Adding content is easy and quick – but the data remains random and loose. There’s no defined relationship within a dataset. Still a lot of repetition – adding data manually is a lot of repetitive effort and pain! Remember the "Paste Lorem Ipsum into selection" command in Photoshop? { "image": "mrichards.png", "firstname": "Maria", "lastname": "Richards", "phones": [ { "type": "Mobile", "number": "7-(229)551-6413" }, { "type": "Fixed", "number": "234-(395)993-6083" } ] "status": "Available" } {firstname} {lastname} {phones[0].number} {phones|&(+%n)}{status} JSON datasets are mapped to UI elements and conditional actions are being executed. UI Design with Data PopulationData ManipulationLive API Calls from/to People Calls from/to Companies People Calls Companies Manipulate Manipulate Manipulate Consuming, manipulating and visually exploring data structures as an integrated, iterative process. Craft by InVision LABS https://medium.com/sketch-app-sources/designing-with-meaningful-data-5456b40e172e
  48. 48. https://vimeo.com/131896485
  49. 49. j.mp/data-populator http://j.mp/data-populator
  50. 50. MEANINGFUL COLOR @preciousforever
  51. 51. https://medium.com/sketch-app-sources/designing-with-meaningful-color-28edd86240a7#.7qnmijl6e
  52. 52. http://opencolor.tools
  53. 53. opencolor.tools http://opencolor.tools
  54. 54. THANK YOU! @preciousforever

×