Uvod u generativni dizajn
Edukacija
Generativno
Grafički dizajn
Informacijski dizajn
Popularno
Rubni dizajn
Uobičajena podjela dizajnera i programera nalaže da jedni razmišljaju intuitivno i vizualno, drugi racionalno i logički, dok je kombinacija oba načina razmišljanja više iznimka nego pravilo. Ipak, mnogi dizajneri (i ostali pripadnici kreativnih industrija) uvode programiranje u svoj proces, upravo zahvaljujući pojavi razvojnih okruženja namijenjenih vizualnom izražavanju.
Generativni dizajn podrazumijeva korištenje programskog koda, algoritama s određenim parametrima unutar dizajnerskog procesa. Kod generativnog pristupa, dizajner ne radi direktno na finalnom proizvodu, već na sustavu koji će dovesti do finalnog proizvoda. Dizajner i edukator Rune Madsen je ovakav pristup okarakterizirao kao meta-dizajn.[1] Generativni proces svoju primjenu ima u umjetnosti, arhitekturi, 3D modeliranju, produkt dizajnu, kao i dizajnu vizualnih komunikacija na koji ćemo se fokusirati u ovom članku.
Primjena generativnog dizajna
Svoju primjenu generativni dizajn nalazi na širem području vizualnih komunikacija — od klasičnih zadataka grafičkog dizajna sve do generiranja naprednih infografika. Najveća prednost ovog pristupa možda leži upravo u broju iteracija koje je moguće proizvesti u relativno kratkom roku, kao i lakoj obradi velike količine podataka.
Vizualizacija podataka za koju bi dizajner potrošio cijeli dan, može biti gotova u roku od nekoliko sekundi. Kod vizualnih identiteta, u nekoliko minuta može nastati tisuće permutacija loga te svaki zaposlenik tvrtke može imati svoju verziju na posjetnici. Vizuali se mogu prilagođavati različitim medijima uz promjenu nekoliko ulaznih parametara. Kod dizajna knjiga, svako poglavlje može imati vlastitu pod-naslovnicu koja je nastala analizom riječi koje sadrži.
Primjeri
Jedan od popularnijih primjera je vizualni identitet koncertnog prostora “Casa Da Musica”, čiji je autor Sagmeister Inc (danas Sagmeister&Walsh). Sama zgrada postala je logo, čija se orijentacija, boja i tekstura mijenja pomoću posebno razvijenog softvera. Dizajner učitava sliku izvođača, softver analizira dominantne boje te ih primjenjuje na sam znak. Uz minimalno podešavanje, slika i znak skladno funkcioniraju na plakatu.
Njemački dizajner Boris Müller je od 2002. godine zadužen za vizuale međunarodnog festivala Poetry on the Road. Iako se vizuali mijenjaju, ideja je uvijek ista — generirani su pomoću različitih algoritama, tehnika i metoda koje pretvaraju riječi u slike. Svaka slika je direktna reprezentacija određene riječi, u ovom slučaju poezije koja se predstavlja na festivalu.
Plakat iz 2007. godine uzima ključne riječi iz pjesmi, po njima traži fotografije na servisu Flickr (putem API-ja), a one se zatim koriste u finalnom dizajnu. Onaj iz 2004. svaku pjesmu tretira kao klaster poligona, dok je svaki poligon individualna riječ.
MIT Media Lab logo je primjer s kojim se mnogi susretnu kad krenu istraživati područje dinamičnih vizualnih identiteta. Nastao je povodom 25 godina te institucije, a autori su E Roon Kang i Richard The. Algoritam generira znak u gridu 7×7, kroz 12 kombinacija boja, što rezultira s približno 500 000 permutacija.
Iako je dobro reflektirao duh laboratorija, zbog različitih manjkavosti,identitet je zamijenjen novim, čiji je autor Pentagram. Više o tome možete pročitati ovdje.
Julia Laub i Cedric Kiefer iz studija Onformative vizualizirali su razmjenu poruka na Skypeu između 2008. i 2010. godine. Infografika je generirana na temelju 62,676 poruka, odnosno 2,531,434 znakova. Rezultat je plakat koji je dobar primjer kombinacije velike količine podataka i generativne vizualizacije, koju bi dizajneri vrlo teško odradili ručno s takvom preciznošću.
Alati i okruženja
Postoje različita okruženja za generativni dizajn. U nastavku slijede oni s kojima sam se, kao autor teksta, susretao i za koje smatram da su najlakši za savladati, zahvaljujući velikoj količini dostupnih tutorijala i dokumentacija. Ako ne znate programirati, to vas nikako ne bi trebalo plašiti da se upustite u ovo još uvijek svježe područje — za svako od okruženja moguće je preuzeti besplatne primjere, a kroz modifikaciju postojećeg koda lako možete shvatiti kako funkcionira. Za dva alata na listi, iako je poželjno, nije potrebno znati programirati kako bi ih se koristilo!
basil.js
Basil je programski jezik baziran na JavaScript sintaksi, a namijenjen je isključivo za proširenje standardnih mogućnosti Adobe InDesigna. Nastao je kao sredstvo za učenje na školi dizajna u Baselu, a autori su Ludwig Zeller, Ted Davis i Benedikt Groß.
Primjer:
Basil skripta (preuzeta sa službene stranice i prerađena) spaja sve instance odabranih ključnih riječi.
Potencijalne primjene navedenog primjera:
• Eksperimentalna knjiga u kojoj se čitatelja navodi na drugačiji pristup čitanju
• Godišnje izvješće neke grupacije, povezivanje ključnih pojmova kroz cijelu publikaciju
Primjer:
Jednostavna Basil skripta bazirana na nasumičnosti (b.random). Šest različitih elemenata nasumično se razmješta po stranici. Tri kruga imaju jasno definiranu veličinu i boju, no mijenja im se pozicija. Tekstualni okviri osim promjene pozicije (po x i y osi), nasumično mijenjaju tracking i veličinu fonta, unutar zadanog ranga.
Skripta:
#includepath "~/Documents/;%USERPROFILE%Documents";
#include "basiljs/bundle/basil.js";
function draw() {
var count = 0;
for (var i = 0; i < 30; i++) { // skripta će izgenerirati 30 plakata
b.addPage(b.AFTER); // dodavanje nove stranice nakon svakog izvršenja
b.doc();
// definicija prvog kruga
b.fill(255,220,100);
b.ellipse(b.random(0, 1055), b.random(0,1055), 500, 500);
// definicija drugog kruga
b.fill(255,118,124);
b.ellipse(b.random(0, 1055), b.random(300,1055), 500, 500);
// definicija trećeg kruga
b.fill(118,205,144);
b.ellipse(b.random(0, 1055), b.random(600,955), 500, 500);
// definicija prvog tekst okvira
b.textSize(b.random(120,150));
b.textTracking(b.random(0,155));
b.fill(0,0,255);
b.textFont("Helvetica", "Bold")
b.text("ime nekog eventa", b.random(0,355), b.random(0,225), 700, 1000);
// definicija drugog tekst okvira
b.textSize(b.random(60,75));
b.textTracking(b.random(30,50));
b.fill(0,0,0);
b.textFont("Adobe Garamond Pro", "Bold")
b.text("lokacija", b.random(0,355), b.random(330,455), 600, 1000);
// definicija trećeg tekst okvira
b.textSize(b.random(45,65));
b.textFont("Adobe Garamond Pro", "Bold")
b.textTracking(b.random(25,40));
b.fill(0,0,0);
b.text("30.03.2015.", b.random(0,155), b.random(600,755), 1000, 1000);
}
};
b.go();
Potencijalna primjena navedenog primjera:
• generiranje mnoštvo layouta u relativno kratkom roku, od kojih jedan ili više mogu biti finalni
Platforme
Mac, Windows
Preuzimanje
http://basiljs.ch/download/
upute za instalaciju
http://basiljs.ch/tutorials/installation-and-getting-started/
Processing
Najpoznatiji alat na listi, Processing, je zapravo posebno prilagođena, pojednostavljena verzija programskog jezika Java. Rad u alatu se bazira na metafori softverskih blokova za crtanje (Sketchbooks).
“Processing povezuje koncepte programiranja sa pricipima vizualne forme, pokreta i interakcije. On integrira programski jezik i razvojno okruženje u jedinstveni sistem. Kreiran je za učenje osnova kompjuterskog programiranja unutar vizualnog konteksta.” [2]
Primjer:
Processing sketchbook (skripta) koja učitava drugi font za svaki slovni znak.
PFont font;
PFont.list(); //klasa koja učitava sve fontove iz sistema
size(900, 160);
background(255);
String[] fontList = PFont.list();
int randomIndex = int(random(fontList.length));
font = createFont(fontList[randomIndex], 65);
textFont(font);
fill(0);
String tekst="METAMORPHOSIS"; //definirani tekst
for (int i = 0; i < tekst.length(); i++) { //funkcija broji duzinu stringa teksta (broj znakova)
randomIndex = int(random(fontList.length)); //random font na svaki znak
font = createFont(fontList[randomIndex], 75);
textFont(font);
text (tekst.charAt(i), 120+i*52, 110) ; //ispis teksta sa random znakovima
}
Potencijalna primjena navedenog primjera:
• Logotip koji se bazira upravo na upotrebi različitih fontova ili debljina istog fonta. Dizajn svaki dan logo bi se mogao generirati na sličan način ukoliko bi se lista fontova ograničila samo na Futuru
Budući da je Processing najraširenije okruženje, ovaj primjer je tek mali dio onog što može. Do pravog izražaja dolazi u različitim mogućnostima interakcije (miš, tipkovnica, kamera), naprednih vizualizacija podataka i interaktivnih instalacija. U ovom tekstu navedeni primjer, “Casa Da Musica” Stefana Sagmeistera, koristi upravo Processing za generiranje različitih znakova.
Platforme
Mac, Windows, Linux
Preuzimanje
https://processing.org/download/
upute za instalaciju
https://processing.org/tutorials/gettingstarted/
Quartz Composer
Quartz Composer je vizualni programski jezik, baziran na čvorovima (nodes), razvijen od strane Applea. Iako mu je prvenstvena namjena stvaranje prototipa i animacija prilikom razvoja softvera za iOS i OS X, mnogi ga koriste za generativni dizajn i različite vizualizacije. Tome pridonosi činjenica da za vidljive rezultate ne treba naučiti programirati, već se sve bazira na “patchevima”. Unutar Quartz editora, patchevi su prikazani kao pravokutnici s ulaznim i izlaznim točkama. Točke se međusobno povezuju te šalju signale jedna drugoj, a vizualni output se vidi direktno u “viewer” prozoru.
Primjer:
Audio input patch koji uzima jačinu signala mikrofona, spojen je na Math patch (koji jačinu množi s određenim brojem). Math patch taj output šalje u rotacijski input Kaleidoscope patcha. Kaleidoscope patch primjenjuje efekt kaleidoskopa na sliku, ovisno o jačini zvuka koji dolazi u mikrofon. Sve je prikazano kroz Billboard patch koji šalje obrađenu sliku u Viewer prozor.
Kako to izgleda u editoru:
Vizualni output:
Potencijalne primjene navedenog primjera:
• Bend izdaje novi singl, želi imati različite varijacije naslovnice. Dizajner postavlja parametre, pušta singl kroz neki od patcheva koji rade s audiom, Quartz generira različite vizuale i u relativno kratkom roku imaju stotine grafika. Svatko tko kupi singl ima jedinstvenu naslovnicu.
• Varijacije geometrijskog znaka, koji se kasnije naknadno obrađuje u alatima poput Illustratora
Na blogu ste mogli pročitati primjer telekom operatera Oi, koji personalizira proizvode za svoje korisnike putem sličnog logo generatora, osjetljivog na glas.
Platforme
Mac
Preuzimanje
https://developer.apple.com
upute za instalaciju
http://qcdesigners.com/index.php/forums/topic/2/new-to-quartz-composer-start-he
NodeBox
NodeBox je besplatna aplikacija za generativnu umjetnost/dizajn, bazirana na Python programskom jeziku. Prva verzija alata (Nodebox 1) bazira se na direktnoj vizualizaciji Python koda i prikladna je za izradu jednostavnih 2D vizuala. NodeBox 3 bazira se na nodeovima (kao i Quartz Composer), i ne zahtijeva znanje programiranja kako bi se koristio.
Jednostavan primjer (NodeBox 3):
Textpath modul koji ispisuje neki tekst, spojen je na Resample node koji uzima vektorske točke ispisanih slovnih znakova. Resample output je spojen na Snap to grid node. Promjenom parametara na Snap to grid nodeu, tekst se distorzira.
Potencijalne primjene navedenog primjera:
• Stalno promjenjivi tipografski logo
• Knjiga u kojoj je svaki naslov drugačiji, unutar zadanih parametara
• Varijacija naslovnice knjige, sa različitim tipografskim tretmanom, unutar zadanih parametara
Platforme
Mac, Windows, Linux
Preuzimanje
https://www.nodebox.net/download/
upute za instalaciju
https://www.nodebox.net/node/documentation/tutorial/getting-started.html
Dodatni alati
• Drawbot (Mac)
• VVVV (Windows)
• Paper.js (web)
• P5.js (web)
• Scriptographer (Adobe Illustrator)
Budućnost
Standardni alati kojima se služimo kao dizajneri, počivaju na procesima koju su tu puno dulje nego računalo, što u nekim situacijama dovodi do određenih ograničenja. Generativni pristup može dovesti do izlaska iz tih granica, čiji su rezultat fluidniji i cjelovitiji dizajnerski proizvodi — sustavi koji ne poznaju limite određenog medija i tradicionalnih procesa.
Iako je podjela dizajnera i programera još uvijek više nego jasna, u budućnosti, ako to projekti dopuste, možemo očekivati sve češće prelaske između disciplina. Dizajnerske/umjetničke škole sve više uvode kolegije i smjerove koji se bave kreativnim kodiranjem, te tako odgajaju dizajnere sa znanjem utemeljenim na klasičnim principima, no sa svježim pristupom.
Ako savladate neke od generativnih alata/procesa, to može samo doprinijeti vašoj kompetitivnosti na tržištu rada u bliskoj budućnosti.
Različiti resursi
• Kizny — introduction to generative design
• Open Processing
• NodeBox data visualization
• Knjiga Type+Code: Processing for designers
• Printing code by Rune Madsen
• Designit — Generative imperative
• Knjiga Generative design
• Generative design & design hacking webinar
• D3js
[1] http://printingcode.runemadsen.com
[2] M. Turčić, M. Rudolf; Tipografija u grafičkim programskim jezicima (sa primjenom u Processingu)