Tartalom
A kreatív kód szórakoztató, de ijesztő betörni. Ha megnéz egy őrült WebGL kísérletet, vagy egy olyan webhelyet, ahol komplex CSS átmenetek vannak, könnyen úgy érezheti, hogy csak a jedikódoló képes kihúzni a mérnöki ragyogás ilyen varázslatát.
Van igazság, hogy technikailag jártasnak lenni hosszú utat jelent, de nem kell mindent tudnod mindenről ahhoz, hogy valami szépet elérj. Csak módszertanra van szükséged.
A cégemet e gyakorlat köré építettem. Önkényes a művészet, a design és a technika metszéspontjában van. Imádok kódot használni kifejező és művészi jellegűvé, de szeretek segíteni az embereknek a problémák megoldásában is. Ez általában azt jelenti, hogy új felhasználói felület paradigmákat kell kitalálni, mozgást és átmeneteket kiaknázni, vonzó tartalom létrehozásának módjaként, és szorosan együttműködve hasonló gondolkodású emberekkel a határok túllépése érdekében.
De nem is érdekel a technológia a technológia kedvéért - semmi sem érzi rosszabbul magam, mint hogy nagyon keményen dolgozzak valami őrült WebGL projekten, hogy csak az alapvető felhasználói célokat teljesítsem. Úgy gondolom, hogy egyensúly van a pragmatikus és a művészi között: Ez a kreatív kód több lehet, mint művészet és kísérletezés, és ez a termék több, mint a legújabb tervezési paradigma, amelyet egy nagy technológiai vállalat előállt. Elkezdtem mindezt bemutatni egy egyedi, folyamatosan változó logó létrehozásával.
Természetesen ez azt jelentette, hogy a pénzemet oda kell helyezni, ahol a szám van. Végül egy drámai logóval készültem, amire büszke vagyok, hogy megmutathatom magam, és még mindig büszkébb elmondani, hogyan készült.
A belső működés
A logó az, hogy ez nem csak egy HTML vászon, hanem valójában számos vászon, amelyek mindegyike egy adott munkát végez:
- A lábléc, amely a háromszög / szín őrületet rajzolta az oldal aljára.
- A logó, amely a láblécet a logó maszkjába vonta.
- A favicon, amely 16x16-ra kicsinyítette a logót.
Ahhoz, hogy az eredeti jelet a kívánt módon megszerezzem, a vektoros verzióval kezdtem, és a Draw Script nevű eszközön futtattam, amely a vektor alakzatokat JavaScript-vé konvertálta egy canvas> tag-ben való használatra.
A színek a Flat Surface Shader nevű plugin eredményeként jöttek létre, Matthew Wagerfield és Tobias Schneider által. Itt nincs varázslat a technikámban: az oldalukon a „View Source” elemet használtam a hatásuk másolásához és beillesztéséhez, majd addig kezdtem változtatni a számokat, amíg nem kaptam valamit, ami tetszett.
A Shader plugin nem támogatta a színek dinamikus megváltoztatását, ezért felfedeztem egy másik könyvtárat, a Tinycolort, és ezt a Tween-nel kombinálva használtam yo-yo oda-vissza a színek között. Extra bónuszként megváltoztathattam a színeket, amire csak akartam! A portfólió jövőbeni verzióiban a logó automatikusan megváltozik, hogy tükrözze az ügyfelek vagy projektek színeit.
Problémamegállapítások
Mindezek elolvasása ijesztőnek tűnhet számodra - csak magam olvasása kissé megijeszt! A kreatív kód számomra több folyamat, mint know-how. Nem mentem bele a folyamatba, tudván, hogy bármelyik könyvtárat vagy technikát fogom használni - még csak fogalmam sem volt arról, hogy mit akarok!
Sok ragyogó emberrel dolgozom együtt, és ebben az esetben Jarrod Riddle barátom segített a márkaépítésben. Jarrod küldött nekem egy szöveges üzenetet egy animált GIF-fel egy ötletről, amire gondolt - alapvetően színes formák úszkáltak és egymásba csapódtak.
Innentől kezdve egy-egy lépést tettem. A fejemben törtem le, mint olyan:
- Szükségem van arra, hogy dinamikusan rajzoljak cuccokat. Ez azt jelenti, hogy a canvas> címkét kell használnom.
- Pontosabban meg kell rajzolnom a logóm belsejét, mint egy maszkot. Meg kell tanulnom, hogyan kell vászonba maszkolni.
- Ki kell találnom, hogyan lehetne hűvösnek tűnni.
Más szavakkal, amikor elkezdtem, három problémamegállapításom volt, a harmadik pedig messze-messze volt a távolból. Az első kettő sokkal elérhetőbb volt, ezért a Google segítségével kis prototípusokat indítottam útjára. Olyan könyvtárakat próbáltam ki, mint a CreateJS és a KineticJS, és egy rotációs zöld négyzetet rajzoltam a „Hello World” -nek. Kipróbáltam vászonra rajzolni, könyvtár nélkül, csak összehasonlításképpen.
Ezeket a prototípusokat kicsi, elszigetelt demóként hozták létre, ahelyett, hogy egy nagyobb dolog felé dolgoznának. A prototípusaim csak egyetlen problémamegállapításra voltak hivatottak válaszolni; semmi több.
Miután túljutottam az első két problémán (a Google sok segítségével!), A harmadik problémamegállapítás tovább bomlott:
- Ki kell találnom, hogyan lehet sok olyan forma, amely reagál egymásra.
- Képesnek kell lennem változtatni a formák színein.
És amikor egyre közelebb kezdtem a kész effektushoz:
- Nem lenne jó látni a favicon frissítést? Kíváncsi vagyok ...
Ha szeretné látni az általam készített prototípusok egy részét, írtam egy sokkal részletesebb technikai leírást az Önkényes blogra.
Szerszámépítés
A webhely logója elég élesen néz ki, de mi a helyzet a közösségi média ikonjaival vagy más marketing anyagokkal? Ehhez létrehoztam az Arbitrary Logo Generator eszközt, amely lehetővé teszi animált GIF és PNG variációk készítését.
A legszebb dolog a Logo Generatorban az, hogy ez lehetővé teszi, hogy az idő előrehaladtával súroljak. Ez a funkció lehetővé teszi, hogy pontosan azt a keretet választhassam ki, amely szerintem az adott pillanatra a legjobb. Megvettem a GIF kimenetet, és lencsés nyomatokat készítettem a Gifpop segítségével! - nagyszerű ajándék az ügyfelek és a partnerek számára. Háttérképekhez és prezentációkhoz készítettem egy nagyobb változatot, az Arbitrary Background Generator-t. Ez a verzió eltávolítja a logót, és csak a hatásra összpontosít.
Következtetések
Rengeteg kódolót és tervezőt láttam kétségbeesve, hogy nem érzik magukat elég jól - ez az oka annak, hogy soha nem fogják megtenni azt, ami miatt más emberek teszik, mert valahogy "jobbak" vagy jobban értenek egy készséghez. Mélyen tudjuk, hogy ez nem igaz ... vagy legalábbis csak egy része.
A szintaxis nem nagyszerű fejlesztő - a folyamat igen. Az egyik trükk az, hogy emlékezzünk arra, hogy mi az első olyan hűvös a webben - a tervezés és az interaktivitás metszéspontjában.
Együttműködés másokkal. Bontja le a problémát olyan dolgokra, amelyeket meg kell tanulnia. Készítsen millió apró prototípust. Készítsen cuccokat, amelyekben van némi lélek. Valahányszor úgy érzi, hogy egy technika vagy technológia megfélemlíti, keresse meg az idejét, hogy beugorjon és megtanítsa magát. A legrosszabb az történik, ha tanulsz és növekedsz.
Szavak: Jamie Kosoy
Jamie Kosoy az @ArbitraryCo alapítója és a Big Spaceship korábbi technológiai igazgatója.
