A Brief Introduction to Design Hacking + Generative Design

Hello.

I’m [email protected]

Guy Haviv meetgooya.com @stupidapp

mailto:[email protected]








Design Hacking / Generative Design

a brief introduction to





Mixing technology with aesthetics to generate awesomeness.

We’ll talk about:

Design Hacking / Generative Design




- Introduction- Ideas are fluid- Design Hacking- Generative Design

Outline



Introduction





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




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




Trained my eyesLearned how to thinkLearned a craft

Today we’ll explore one (new) aspect of digital craft.

In design school I...

Introduction




What I learned from my illustrator friend:

Introduction




be obsessed with the process.

Draw > Xerox to 2000% > Draw Again > Scan > Add type

Introduction




everyone’s using the same tools?

let’s tinker with the tools then!

Introduction




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



Ideas are fluid





Ideas are fluid.they can be mixed & matched like design elements.

Ideas are fluid




Vered Mosenzon calls this ‘spinning ideas’.

IDEO developed Method Cards to support idea generation

Ideas are fluid




IDEO Method Cards app



Design ‘Hacking’





Macs have revolutionized graphic design.

Design Hacking

in the 80s,




more accurately,WYSIWYG + PostScript revolutionized graphic design.

Design Hacking




We’ll focus on Mac software / hacks today.

Design Hacking




Be a screen capture ninja.

Design Hacking

hack #01




Design Hacking

Cmd+Shift+3Cmd+Shift+4Cmd+Shift+4 ... Space(Copies Windows’ drop shadows!)

also:try these with Ctrl added

use Space like in Illustrator




Be an iconcapture ninja.

Design Hacking

hack #02




Copy any file/folder in FinderOpen PreviewCmd+Nw00t.

Design Hacking

hack #02: Be an icon capture ninja.




Understand the.AI + .PDF relationship

Design Hacking

hack #03




Design Hacking

Illustrator is an incredible app - it has forward compatibility.

Each .ai file actually has a hidden .pdf file inside.




Design Hacking

.ai + pdf bundles enable QuickLook on .ai files.


Be an app bundle researcher/ninja.

Design Hacking

hack #04




The Finder has a trick called bundles.

Bundles are folders that act like single files.

They hide some good stuff inside.

Design Hacking




.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




Fonts are usually embedded within PDFs

Design Hacking

hack #05




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




(demo).

Design Hacking




Be aPDF-everywhere ninja.

Design Hacking

hack #06




Printers speak PostScript.

Design Hacking




PDFs are PostScript wrappers.

Design Hacking

Illustrator is like a planning environment for PDFs.




Macs speak PDF quick fluently.

Design Hacking




Nearly every time you see something on screen, it’s a vector PDF.

Design Hacking

Macs speak PDF quick fluently.




GrapherDictionaryiCal

Design Hacking

Demo




Design Hacking




(demo).

Design Hacking



Generative Design





Objects, type & images shold be fluid as well.

Generative Design

Just like ideas are fluid




We could use technology to make image, shape & type even more fluid.

Generative Design




We should master our tools, and then alter them.

Generative Design




Core Image Fun Housegenerative tool #01

Get it when downloading Xcode:http://developer.apple.com/technologies/xcode.html

Generative Design

Mac only



http://developer.apple.com/technologies/xcode.html



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




Design Hacking


(demo).

Generative Design




Generative Design

Quartz Composergenerative tool #02

Get it when downloading Xcode:http://developer.apple.com/technologies/xcode.html

Mac only






Node based visual language for mixing image, video, audio, code & other media.

Generative Design

Quartz Composer




Quartz Composer files are called Compositions.

They are used on the Mac as:Screen saversiTunes visualizersKeynote plugins

They are also playable on any Mac with Quicktime.

Generative Design




I used Quartz Composer to create an interactive poster.

Generative Design




(demo).

Generative Design




Generative Design

Processinggenerative tool #03

processing.org

Mac & PCOpen source






Maybe the most well known generative design tool.

Open Source, very well documented.

Generative Design

Processing




Write simplified Java code, get visual results.

Thousands of samples to play with.

Generative Design




Generative Design

NodeBoxgenerative tool #04

nodebox.net

Mac onlyOpen Source






NodeBox is fucking awesome.

You write Python code & generate vector graphics.

Copy as PDF to Illustrator to continue tweaking.

Generative Design

NodeBox




I used NodeBox to generate posters with infographics

Generative Design




and also in a branding project to wrap shapes around paths

Generative Design




(demo).

Generative Design




Generative Design

ScriptographerIllustrator scripting plugin

generative tool #05

scriptographer.org

Mac & PCOpen source






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




Generative Design




Generative Design

PostScript Hackinggenerative tool #06




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




I used postscript hacking mainly to distort shapes

Generative Design




(demo).

Generative Design



Summary





Don’t treat all of thisas merely eye candy.

Always attempt tomarry code & concept.

Generative Design




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













http://www.generatorx.no/category/tools-code/






A Brief Introduction to Design Hacking + Generative Design

Business

Transcript of A Brief Introduction to Design Hacking + Generative Design