Introduction to Design Hacking & Generative Design

A energy-packed introduction to design hacking tricks and thoughts for young experience designers. This talk is filled with useful links and sneaky hacks shown to help students synthesize design & technology.

Transcript

1. Hello. I’m Guy. meetgooya.com stupidapp@gmail.com Guy Haviv meetgooya.com @stupidapp
2. Design Hacking / Generative Design a brief introduction to Guy Haviv meetgooya.com @stupidapp
3. Guy Haviv meetgooya.com @stupidapp Mixing technology with aesthetics to generate awesomeness. We’ll talk about: Design Hacking / Generative Design
4. Guy Haviv meetgooya.com @stupidapp - Introduction - Ideas are fluid - Design Hacking - Generative Design Outline
5. Introduction Guy Haviv meetgooya.com @stupidapp
6. Guy Haviv meetgooya.com @stupidapp Interactive design is at the intersection between design & technology. We usually talk about making things easy. Instead, let’s talk about making things beautiful. Introduction
7. Guy Haviv meetgooya.com @stupidapp Nowadays, kids already know all about the creative software used for design — all we can do is teach you how to think. I’ve heard this from several teachers at Shenkar: Introduction
8. Guy Haviv meetgooya.com @stupidapp Nowadays, kids already know all about the creative software used for design — all we can do is teach you how to think. I’ve heard this from several teachers at Shenkar: Introduction
9. Guy Haviv meetgooya.com @stupidapp Trained my eyes Learned how to think Learned a craft Today we’ll explore one (new) aspect of digital craft. In design school I... Introduction
10. Guy Haviv meetgooya.com @stupidapp What I learned from my illustrator friend: Introduction
11. Guy Haviv meetgooya.com @stupidapp be obsessed with the process. Draw > Xerox to 2000% > Draw Again > Scan > Add type Introduction
12. Guy Haviv meetgooya.com @stupidapp everyone’s using the same tools? let’s tinker with the tools then! Introduction
13. Guy Haviv meetgooya.com @stupidapp diving into the digital craft can give digital designers an edge over their print colleagues. And most of this stuff is super useful for print design as well. Why are we talking about this? Introduction
14. Ideas are fluid Guy Haviv meetgooya.com @stupidapp
15. Guy Haviv meetgooya.com @stupidapp Ideas are fluid. they can be mixed & matched like design elements. Ideas are fluid
16. Guy Haviv meetgooya.com @stupidapp Vered Mosenzon calls this ‘spinning ideas’. IDEO developed Method Cards to support idea generation Ideas are fluid
17. Guy Haviv meetgooya.com @stupidapp IDEO Method Cards app
18. Guy Haviv meetgooya.com @stupidapp IDEO Method Cards app
19. Design ‘Hacking’ Guy Haviv meetgooya.com @stupidapp
20. Guy Haviv meetgooya.com @stupidapp Macs have revolutionized graphic design. Design Hacking in the 80s,
21. Guy Haviv meetgooya.com @stupidapp more accurately, WYSIWYG + PostScript revolutionized graphic design. Design Hacking
22. Guy Haviv meetgooya.com @stupidapp We’ll focus on Mac software / hacks today. Design Hacking
23. Guy Haviv meetgooya.com @stupidapp Be a screen capture ninja. Design Hacking hack #01
24. Guy Haviv meetgooya.com @stupidapp Design Hacking Cmd+Shift+3 Cmd+Shift+4 Cmd+Shift+4 ... Space (Copies Windows’ drop shadows!) also: try these with Ctrl added use Space like in Illustrator
25. Guy Haviv meetgooya.com @stupidapp Be an icon capture ninja. Design Hacking hack #02
26. Guy Haviv meetgooya.com @stupidapp Copy any file/folder in Finder Open Preview Cmd+N w00t. Design Hacking hack #02: Be an icon capture ninja.
27. Guy Haviv meetgooya.com @stupidapp Understand the .AI + .PDF relationship Design Hacking hack #03
28. Guy Haviv meetgooya.com @stupidapp Design Hacking Illustrator is an incredible app - it has forward compatibility. Each .ai file actually has a hidden .pdf file inside.
29. Guy Haviv meetgooya.com @stupidapp Design Hacking .ai + pdf bundles enable QuickLook on .ai files.
30. Guy Haviv meetgooya.com @stupidapp Be an app bundle researcher/ninja. Design Hacking hack #04
31. Guy Haviv meetgooya.com @stupidapp The Finder has a trick called bundles. Bundles are folders that act like single files. They hide some good stuff inside. Design Hacking
32. Guy Haviv meetgooya.com @stupidapp .app files are bundles. Let’s look at an example. iWork files used to be bundles. Let’s extract some media from a .keynote document Design Hacking
33. Guy Haviv meetgooya.com @stupidapp Fonts are usually embedded within PDFs Design Hacking hack #05
34. Guy Haviv meetgooya.com @stupidapp When you export a file to PDF, the relevant fonts are being embedded into that PDF. And you can extract them. Get FontForge to try this stuff out. Design Hacking
35. Guy Haviv meetgooya.com @stupidapp (demo). Design Hacking
36. Guy Haviv meetgooya.com @stupidapp Be a PDF-everywhere ninja. Design Hacking hack #06
37. Guy Haviv meetgooya.com @stupidapp Printers speak PostScript. Design Hacking
38. Guy Haviv meetgooya.com @stupidapp PDFs are PostScript wrappers. Design Hacking Illustrator is like a planning environment for PDFs.
39. Guy Haviv meetgooya.com @stupidapp Macs speak PDF quick fluently. Design Hacking
40. Guy Haviv meetgooya.com @stupidapp Nearly every time you see something on screen, it’s a vector PDF. Design Hacking Macs speak PDF quick fluently.
41. Guy Haviv meetgooya.com @stupidapp Grapher Dictionary iCal Design Hacking Demo
42. Guy Haviv meetgooya.com @stupidapp Design Hacking
43. Guy Haviv meetgooya.com @stupidapp Design Hacking
44. Guy Haviv meetgooya.com @stupidapp (demo). Design Hacking
45. Generative Design Guy Haviv meetgooya.com @stupidapp
46. Guy Haviv meetgooya.com @stupidapp Objects, type & images shold be fluid as well. Generative Design Just like ideas are fluid
47. Guy Haviv meetgooya.com @stupidapp We could use technology to make image, shape & type even more fluid. Generative Design
48. Guy Haviv meetgooya.com @stupidapp We should master our tools, and then alter them. Generative Design
49. Guy Haviv meetgooya.com @stupidapp Core Image Fun House generative tool #01 Get it when downloading Xcode: http://developer.apple.com/technologies/xcode.html Generative Design Mac only
50. Guy Haviv meetgooya.com @stupidapp Take an image and stack a bunch of live pixel effects on top of it. (originally made as a technology exploration tool) Generative Design Core Image Fun House
51. Guy Haviv meetgooya.com @stupidapp Design Hacking
52. Guy Haviv meetgooya.com @stupidapp (demo). Generative Design
53. Guy Haviv meetgooya.com @stupidapp Generative Design Quartz Composer generative tool #02 Get it when downloading Xcode: http://developer.apple.com/technologies/xcode.html Mac only
54. Guy Haviv meetgooya.com @stupidapp Node based visual language for mixing image, video, audio, code & other media. Generative Design Quartz Composer
55. Guy Haviv meetgooya.com @stupidapp
56. Guy Haviv meetgooya.com @stupidapp Quartz Composer files are called Compositions. They are used on the Mac as: Screen savers iTunes visualizers Keynote plugins They are also playable on any Mac with Quicktime. Generative Design
57. Guy Haviv meetgooya.com @stupidapp I used Quartz Composer to create an interactive poster. Generative Design
58. Guy Haviv meetgooya.com @stupidapp (demo). Generative Design
59. Guy Haviv meetgooya.com @stupidapp Generative Design Processing generative tool #03 processing.org Mac & PC Open source
60. Guy Haviv meetgooya.com @stupidapp Maybe the most well known generative design tool. Open Source, very well documented. Generative Design Processing
61. Guy Haviv meetgooya.com @stupidapp Write simplified Java code, get visual results. Thousands of samples to play with. Generative Design
62. Guy Haviv meetgooya.com @stupidapp
63. Guy Haviv meetgooya.com @stupidapp Generative Design NodeBox generative tool #04 nodebox.net Mac only Open Source
64. Guy Haviv meetgooya.com @stupidapp NodeBox is fucking awesome. You write Python code & generate vector graphics. Copy as PDF to Illustrator to continue tweaking. Generative Design NodeBox
65. Guy Haviv meetgooya.com @stupidapp
66. Guy Haviv meetgooya.com @stupidapp I used NodeBox to generate posters with infographics Generative Design
67. Guy Haviv meetgooya.com @stupidapp and also in a branding project to wrap shapes around paths Generative Design
68. Guy Haviv meetgooya.com @stupidapp and also in a branding project to wrap shapes around paths Generative Design
69. Guy Haviv meetgooya.com @stupidapp (demo). Generative Design
70. Guy Haviv meetgooya.com @stupidapp Generative Design Scriptographer Illustrator scripting plugin generative tool #05 scriptographer.org Mac & PC Open source
71. Guy Haviv meetgooya.com @stupidapp Scriptographer is an interactive scripting environment for Illustrator. It adds a palette with scripts and a few tools - all of which can be edited and manipulated. Generative Design
72. Guy Haviv meetgooya.com @stupidapp Generative Design
73. Guy Haviv meetgooya.com @stupidapp Generative Design PostScript Hacking generative tool #06
74. Guy Haviv meetgooya.com @stupidapp What happens if you output an Illustrator file to .ps, and then play with random numbers inside? And then open the .ps with Adobe Distiller to make it a PDF to view the results? Generative Design
75. Guy Haviv meetgooya.com @stupidapp I used postscript hacking mainly to distort shapes Generative Design
76. Guy Haviv meetgooya.com @stupidapp I used postscript hacking mainly to distort shapes Generative Design
77. Guy Haviv meetgooya.com @stupidapp (demo). Generative Design
78. Summary Guy Haviv meetgooya.com @stupidapp
79. Guy Haviv meetgooya.com @stupidapp Don’t treat all of this as merely eye candy. Always attempt to marry code & concept. Generative Design
80. Guy Haviv meetgooya.com @stupidapp Slides available on: http://tinyurl.com/designhacking There’s a lot more to learn / explore: http://www.creativeapplications.net/ http://www.generatorx.no/category/tools-code/ thank you. Summary