Am stat de vorbă cu Zack Brown, CEO și vizionar în spatele Haiku Animator.
Am dori să începem acest articol cu o poezie:
UX și UINu atât de distractiv de animat, dar acum există Haiku- School of MotionGlumele astea cu engleza de clasa a 3-a te ajută cu ceva?
Există o mulțime de zvonuri în jurul motion design-ului și a modului în care acesta se potrivește în lumea design-ului UI/UX. În fruntea cercetării UI/UX se află Zack Brown, CEO al Haiku și vizionarul din spatele Haiku Animator.
Lumea este însetată să adauge animații expresive la experiențele utilizatorilor, dar actualul flux de lucru pentru animație în UI și UX este mult de dorit. Acum, cu ajutorul Haiku Animator puteți proiecta, anima, publica și încorpora într-un singur program bine pus la punct.
Nici acesta nu este doar un startup oarecare, Haiku a trecut prin legendarul program Y Combinator. Y Combinator este cunoscut pentru că a ajutat la lansarea unora dintre cele mai inovatoare branduri pe care le cunoaștem astăzi, cum ar fi Dropbox și Airbnb. Deci, putem spune că Haiku pare să fie pe drumul cel bun.
În cadrul podcastului am stat de vorbă cu Zack despre lumea animației UI/UX. Pe parcurs, veți afla despre trecutul lui Zack în lumea publicității, cum a înființat Haiku și cum este să conduci un startup în plină expansiune.
Haiku oferă, de asemenea, ascultătorilor noștri de podcast o reducere la Animator. Aceste reduceri vor fi disponibil până la 1 august 2019 Doar faceți clic pe link-urile de mai jos pentru a solicita reducerea. Aici sunt două opțiuni diferite:
- 50% Reducere pentru trei luni de plan lunar (Economisiți $27)
- 25% Reducere pentru primul an al unui plan anual (Economisiți $45)
Acum că v-ați trezit curiozitatea, haideți să-l salutăm pe Zack...
ZACK BROWN NOTE DE EMISIUNE
Luăm referințe din podcastul nostru și adăugăm linkuri aici, ajutându-vă să vă concentrați pe experiența podcastului.
- Zack Brown
- Haiku Animator
OAMENI/STUDIOS
- Thomas Street
- Paul Graham
RESURSE
- Schiță
- Y Combinator
- Inspector Spacetime
- Episodul Lottie Podcast
- Unitate
- Episodul Podcast Issara Willenskomer
- Lottie
DIVERSE
- Dreamweaver
- Focuri de artificii
- Shake
TRANSCRIEREA LUI ZACK BROWN
Joey Korenman:
Trebuie să mărturisesc ceva. Sunt foarte interesat de ceea ce se întâmplă în spațiul UI și UX în ceea ce privește motion design-ul. Este un domeniu care pare să explodeze cu proiecte interesante, oportunități de angajare și noi tehnologii care facilitează transpunerea animației în cod. Cu toate acestea, începând cu această înregistrare din 2019, este încă un fel de durere în fund pentru a crea animații care să fie ușor de utilizat înun mod interactiv în cadrul aplicațiilor.
Joey Korenman:
Invitatul nostru de astăzi își propune să schimbe acest lucru. Zack Brown, și da, acesta este numele său real, este CEO și fondator al unui startup numit Haiku. După ce au trecut prin legendarul program Y Combinator, Zack și echipa sa au lansat "Animator", o aplicație care are scopul modest de a unifica designul și codul. Lucruri destul de nobile, dar cred că Haiku este într-adevăr pe drumul cel bun.
Joey Korenman:
Echipa Haiku a venit cu o modalitate de implementare a animației care ar putea rezolva una dintre cele mai dificile probleme cu care se confruntă designerii de mișcare atunci când lucrează la aplicații. Animator, cu care m-am jucat și pe care îl iubesc, vă permite să animați și să codificați într-o singură interfață care poate apoi să implementeze animația într-un mod foarte elegant și flexibil pentru dezvoltatori. În acest interviu, vom intra în profunzime în modul în care funcționează animator și ceîl face să fie diferit și mai eficient în spațiul UI decât, de exemplu, After Effects.
Joey Korenman:
Vorbim, de asemenea, despre cum Zack a înființat compania și a construit o aplicație de animație complet nouă, pornind de la zero. Este o conversație foarte interesantă și cred că vă va oferi o imagine de ansamblu a tipurilor de instrumente pe care noi, designerii de mișcare, le vom folosi în viitorul foarte apropiat.
Joey Korenman:
Zack, este minunat să te avem la podcastul School of Motion. Îți mulțumesc foarte mult pentru timpul acordat și abia aștept să-ți aleg creierul.
Zack Brown:
Da, îmi face plăcere să fiu aici, Joey. Îți mulțumesc că m-ai invitat.
Joey Korenman:
Da, nici o problemă, omule. Primul lucru pe care trebuie să te întreb despre nume. Am întrebat echipa de la School of Motion: "Hei, vine Zack Brown de la Haiku", și tot ce au vrut să știe a fost cum e să fii un star de muzică country, așa că ți se spune des? Știi cine e Zac Brown Band?
Zack Brown:
Da, este o mulțime de muncă să lucrezi la negru ca muzician celebru în timp ce conduci un startup, dar cumva reușesc să fac totul să se întâmple.
Joey Korenman:
Bătrâna poveste.
Zack Brown:
Dar, într-adevăr, un șofer de camion de remorcare a fost cel care m-a făcut prima dată să îl cunosc pe Zac Brown și m-a întrebat: "Am nevoie de semnătura ta" și "Oh, Zac Brown, am nevoie de autograful tău". Am reușit, cred că aveam 20 de ani pe atunci, am reușit să fac 20 de ani din viața mea să fiu Zack Brown, iar după aceea, trebuie mereu să apeși pe "ai vrut să spui Zac Brown Band?".
Joey Korenman:
Exact, da. Nu cred că are un K, așa că poți spune că sunt Zack cu K. Asta va clarifica lucrurile. Oh, asta e foarte amuzant. Toți cei care ascultă asta, sunt sigur că nu sunt încă foarte familiarizați cu compania ta și cu aplicația ta, dar vor fi.
Joey Korenman:
Dar am vrut să încep prin a afla ceva mai multe despre tine. Care este trecutul tău și cum ai ajuns să înființezi o companie de software care construiește o aplicație de animație?
Zack Brown:
Sigur, bine, deci mi-am început viața creativă în domeniul designului tipografic și al fotografiei, folosind Illustrator, Photoshop, tot felul de instrumente. Am fost mereu pasionat de computere încă de când eram foarte tânăr și, în timp ce exploram aceste medii, am descoperit acest instrument numit Flash, care era un software minunat și care a devenit puntea mea spre programare.
Zack Brown:
În Flash, nu numai că puteai să desenezi cu aceste instrumente de autor vectorial unice și până în ziua de azi, dar puteai să îți decorezi desenele cu cod într-un mod foarte elegant și autonom, așa că asta a început să mă facă să mă intereseze cu adevărat programarea. Am făcut toate aceste mici jocuri. Lumea era ca o stridie pentru mine. Așa că am continuat să studiez informatica și apoi am lucrat ca inginer software pentru o vreme.în toate domeniile, randare 3D, sisteme de distribuție, un pic de inteligență artificială, AR.
Zack Brown:
Și o bună parte din UI, UX și apoi am înființat o agenție numită Thomas Street. Am fost în jur de șapte ani, am ajuns la o dimensiune destul de bună. Am avut clienți precum Coca-Cola, DirecTV, apoi am vândut-o. Am călătorit timp de doi ani la 20 de ani. A fost o mișcare intenționată în carieră, credeți sau nu. Am vizitat vreo 40 de țări, am învățat câteva limbi străine, am navigat o perioadă, încercând săsă-mi îmbogățesc viața, ca să zic așa.
Zack Brown:
Apoi, am ieșit din asta și am fondat Haiku, iar asta a fost în 2016. Suntem aici de ceva vreme.
Joey Korenman:
Cu toții ne putem identifica cu asta. Să vinzi o companie și să călătorești timp de doi ani. E o poveste foarte tare, omule. Vreau să aprofundăm puțin. Ai spus că ai început o agenție, că ai lucrat pentru branduri precum Coca-Cola și alte lucruri de genul ăsta. Ce fel de muncă făceai?
Zack Brown:
Era o activitate generalizată, în general concentrată pe reducerea diferenței dintre design și cod, ca și cum aceasta ar fi fost cutia noastră neagră. Consultanți de produs, cred. Deci, mergeam, adunam cerințele cu diferite părți interesate, propuneam proiecte, le aprobam, implementam proiectele ca software și acest proces de la un capăt la altul era pâinea noastră cea mai importantă.
Zack Brown:
Acesta este, de asemenea, începutul înțelegerii mele personale a problemei de a trece de la proiectare la cod. Este o problemă complicată și nu există încă o soluție perfectă pentru ea.
Joey Korenman:
Da, despre asta vroiam să te întreb, pentru că chiar acum și acest interviu este foarte potrivit pentru noi, pentru că School of Motion trece prin procesul de schimbare a designului și vom implementa acest lucru în tot ceea ce este legat de site-ul nostru, așa că ne confruntăm cu această problemă.
Joey Korenman:
Avem toate aceste idei și am vrea ca site-ul nostru să funcționeze într-un anumit fel, iar noi suntem o școală de animație, așa că vrem ca lucrurile să fie animate. Și chiar și acum, în 2019, este încă foarte dificil să faci asta, așa că, atunci când conduceai această agenție, cum era acest proces? Procesul de a transforma designul și presupun că și animația în cod? Care era situația pe atunci?
Zack Brown:
Era cam la fel ca în prezent, când designerii folosesc instrumente digitale pentru a crea machete a ceea ce ar trebui să fie construit în pixeli, pe care apoi le transmit dezvoltatorilor, a căror sarcină este de a construi acei pixeli în alți pixeli, dar în pixeli corecți.
Joey Korenman:
Da.
Zack Brown:
Corect, iar acesta este din nou miezul problemei. Cu toții folosim deja instrumente digitale, dar fluxurile noastre de lucru sunt dezarticulate, iar acest flux de lucru este cu adevărat punctul central al problemei. Cum aducem aceste fluxuri de lucru împreună?
Joey Korenman:
Da, și mai există și un cuvânt total diferit... Încercam să mă gândesc la un cuvânt diferit de "paradigmă", pentru că sună atât de prost, dar cred că acesta este cuvântul potrivit. Atunci când designerii de mișcare se gândesc de obicei în termeni de povestire liniară. Va arăta așa, pentru că eu o animez în acest fel și va fi redat de fiecare dată în acest fel.
Joey Korenman:
Dar atunci când vorbim despre o aplicație, aceasta va fi animată într-o stare diferită, dar apoi ar putea fi animată invers. Dacă te întorci înapoi și culoarea butonului se poate schimba în funcție de o preferință. Și există toate aceste lucruri care sunt acum interactive și au dependențe și lucruri de acest gen.
Joey Korenman:
Așadar, acesta este în esență motivul pentru care există această problemă de traducere între instrumentele pe care le folosim pe partea de proiectare a mișcării și partea de codare?
Zack Brown:
Exact, da. Și nu există un astfel de instrument cu o avertizare, pune un ac în el, nu există un astfel de instrument în ziua de azi care să-ți permită să faci asta. Era unul. Exact asta îți permitea Flash să faci, din nou, prin amestecul de design și cod, puteai să te duci la Frame 20 și să setezi un mic steguleț în cod și acum, indiferent de ce buton este roșu în loc de albastru. After Effects nu face asta, iar After Effects este de fapt doara mai rămas în lumea instrumentelor de motion design în aceste zile.
Zack Brown:
Dar, de fapt, în ultimii cinci, zece ani, de când Flash a murit efectiv, lumea a simțit acest vid, pentru că înainte avea un monopol și când un monopol moare, ne aflăm într-un loc ciudat. Are sens tot ce am spus?
Joey Korenman:
Da, nu, chiar așa este și eu, de fapt, înainte de a intra pe deplin în motion design, am experimentat și eu cu Flash și mi-a plăcut foarte mult faptul că puteai să folosești scripturi de acțiune și să creezi o tonă de interactivitate în timp ce proiectai și chiar a fost un lucru grozav de folosit.
Joey Korenman:
Și, ca să fiu sincer, nu am înțeles niciodată pe deplin de ce a avut moartea nobilă pe care a avut-o. Aveți vreo idee despre ceea ce l-a ucis? Și pentru toți cei care ne ascultă, Flash încă există. Acum se numește Animate. Adobe l-a rebranduit și este folosit foarte mult pentru animația celulară, pentru animația tradițională, dar nu mai este folosit așa cum era înainte.
Joey Korenman:
Sunt curios dacă știi de ce se întâmplă asta, Zack.
Zack Brown:
Da, am un gând sau două. Deci, începutul sfârșitului pentru Flash a fost în jurul anului 2005, când Adobe a achiziționat Macro Media pentru 3,4 miliarde de dolari, iar acei bani au fost, în esență, toți pentru Flash. Macro Media a avut și alte produse în gama sa, cum ar fi Dream Weaver și Fireworks, dar Flash a fost cu adevărat, a fost bijuteria coroanei. A rulat pe fiecare dispozitiv, a servit jumătate din reclamele de pe Internet, a fostplatformă pentru crearea de jocuri.
Zack Brown:
Dacă vă amintiți jocurile flash, desenele animate flash, a fost coloana vertebrală, coloana vertebrală a infrastructurii pentru YouTube și, în general, pentru videoclipurile de pe web. Este ușor să uităm toate acestea, dar Flash a fost un succes uriaș, așa că Adobe a plătit, pe bună dreptate, o sumă uriașă pentru el, iar apoi, a apărut mobilul. iPhone a fost un fel de navă amiral pentru revoluția mobilă, a telefoanelor inteligente, iar mobilul a ucis Flash împreună cu ajutorulSteve Jobs și întregul model de afaceri al magazinului de aplicații, din care o parte uriașă a veniturilor provine din jocuri.
Zack Brown:
Iar jocurile gratuite de pe web sunt cu siguranță în contradicție cu jocurile cu plată prin intermediul magazinului de aplicații și al gardianului său. Și mai sunt și o mulțime de motive tehnice. Baza de cod la acel moment era veche de 15 ani, trecuse prin tot felul de conducători diferiți și prin achiziție, unii oameni nu au rămas în preajmă. Nimeni nu cunoștea cu adevărat baza de cod.
Zack Brown:
Acest lucru, combinat cu ADN-ul Adobe și cu ceea ce aș numi în mod eficient administrarea defectuoasă a Flash, a fost furtuna perfectă care a dus la moartea acestuia.
Joey Korenman:
Wow.
Zack Brown:
Da.
Joey Korenman:
Adică, este foarte trist și nu știu. Există paralele ciudate pe care le poți face cu această poveste și cu alte lucruri asemănătoare, companii care sunt achiziționate și apoi, încet, încet, sufocate până la moarte. Era o aplicație de compoziție foarte, foarte puternică și uimitoare numită Shake, care a fost un fel de precursor al Nuke, care este acum instrumentul standard pentru efecte vizuale.
Joey Korenman:
Iar Apple a cumpărat Shake și apoi a cam murit în viță de vie și a fost multă furie și în jurul acestui lucru, așa că nu este un lucru neobișnuit. În regulă, următoarea întrebare, pe care cred că am cam dansat destul de mult în jurul ei, este că firma ta, Haiku, construiește un instrument numit Animator și ne vom scufunda adânc în el, dar doar pentru a oferi tuturor o imagine de ansamblu, ce este Animator? Și care esteproblema pe care încearcă să o rezolve?
Zack Brown:
Sigur. Deci, cred că After Effects este un bun punct de referință. After Effects a fost lansat pentru prima dată acum 26 de ani, în 1993, deci este de modă veche și este un instrument de grafică de mișcare special pentru film și televiziune și așa a fost întotdeauna. Imaginați-vă pentru o secundă dacă After Effects ar fi fost construit de la zero, dar cu scopul de a proiecta mișcări pentru software și interfețe de utilizator în loc de a face filme.
Zack Brown:
Și există câteva diferențe esențiale între aceste medii, cum ar fi interactivitatea, integrarea cu bazele de coduri, controlul versiunilor. Aceste preocupări nu prea există în lumea filmului și a televiziunii.
Joey Korenman:
Da.
Zack Brown:
Mulți utilizatori ne-au comparat cu analogia dintre Sketch și Photo Shop și Haiku Animator și After Effects, și anume, este mai nou, este construit special pentru animația interfețelor, este mai curat și mai accesibil, în special pentru cei care intră pentru prima dată în motion design.
Joey Korenman:
Perfect. Da, cred că este descrierea perfectă și m-am jucat cu el și este foarte distractiv de folosit și oricine care folosește After Effects va înțelege imediat cum funcționează. Există o cu totul altă latură a lui Animator care nu există în After Effects și vreau să vorbesc despre asta, dar vreau să aud cum ai construit această aplicație, pentru că cred că noi doi ne-am întâlnit acum un an lacel puțin și la acea vreme, aplicația era în versiune beta și ați adăugat o mulțime de caracteristici și ați dezvoltat-o.
Joey Korenman:
Și sunt mereu curios să aflu cum se face așa ceva, cum se construiește un software atât de complicat. Așadar, poate ați putea să ne vorbiți despre cum ați dezvoltat versiunile inițiale ale aplicației. Ați fost dumneavoastră cel care a codat-o? Ați avut o echipă, cum a funcționat?
Zack Brown:
Din nou, toată povestea se întoarce la acea agenție și la crearea unei punți de legătură între design și cod și la înțelegerea acestei probleme. Acesta este începutul poveștii Haiku, de fapt. Cred că cariera mea personală a gravitat în jurul acestei probleme în câteva locuri diferite, în diferite locuri de muncă. Și, pe parcurs, l-am întâlnit pe co-fondatorul meu. Am lucrat împreună la o companie anterioară și el a văzut și el problema și astfel, am stabilitîn afara țării, ne-am constituit în iunie 2016.
Zack Brown:
Primele șase luni au fost mai degrabă experimentale, doar că el era în Philadelphia, eu eram în SF, așa că, în realitate, doar apeluri video, chat vocal, Slack și control al versiunilor și înainte și înapoi și să ne dăm seama de ceva. Și a durat mai mult de un an până când am avut ceva care să fie folositor pentru cineva. Pentru că a început într-un fel de laborator științific. Cum ar fi: "Oh, ce-ar fi dacă am face asta, ce-ar fi dacă am face asta?" Asta e un fel dede la început, doar o mulțime de experimente, forță brută, explorare, iar apoi am adus prima noastră investiție spre sfârșitul anului 2016.
Zack Brown:
Și atunci am început să ne gândim că trebuie să monetizăm acest lucru, să construim o utilitate reală în el, să găsim un caz de utilizare de care oamenii să se intereseze și pentru care, în cele din urmă, să plătească și așa a evoluat.
Joey Korenman:
Mișto și unul dintre lucrurile de care sunt foarte curioasă este faptul că ai fost acceptată în programul Y Combinator. Și nu știu dacă toată lumea care ne ascultă va ști ce este asta. Toată lumea din lumea tehnologiei știe despre Y Combinator, dar în lumea designului de mișcare, sunt sigură că sunt oameni care nu știu.
Joey Korenman:
Deci, poți să ne explici ce este Y Combinator și de ce ai ales să aplici la acest program?
Zack Brown:
Așadar, YC, Y Combinator, YC, este un accelerator de startup-uri. Ceea ce fac ei este să intervieveze startup-uri și fondatori pe care îi consideră promițători și apoi, pe cei pe care îi acceptă, îi conectează cu resurse și pregătire, în esență pentru a strânge capital de risc și a juca jocul startup-urilor. Și investesc ei înșiși o mică parte din bani, dar nu iei YC pentru bani, pentru că sunt cam scumpi. Ei iau o mareparte din capital.
Zack Brown:
Există o mulțime de acceleratoare de startup-uri în zilele noastre, dar YC este unul dintre cele originale, un OG, dacă vreți.
Joey Korenman:
Da.
Zack Brown:
Și am aici o listă cu alte companii din portofoliu, printre care Air Bnb, Stripe, Cruise, Dropbox, Coin Base, Instacart, Reddit, Twitch TV și lista poate continua. Parcă toate aceste IPO-uri au loc chiar acum. YC nu se plânge deloc.
Joey Korenman:
Au un ochi bun pentru talente.
Zack Brown:
Au un brand și, de asemenea, o mulțime de oameni aplică și, după cum se știe, rata lor de acceptare este mai mică decât cea de la Harvard, de patru ori mai mică. Deci, dacă treci prin YC îți oferă o ștampilă de acreditare similară, cum ar fi că YC spune că sunt buni, deci evident că sunt buni.
Zack Brown:
Asta este la fel de valoros ca și acreditările și, cel puțin în Silicon Valley, așa funcționează, cred.
Joey Korenman:
Da, e foarte, foarte tare, de fapt. Și vreau să aud și eu despre experiența asta, dar vreau să sap mai mult, pentru că e ceva la care m-am gândit și am vorbit cu alți antreprenori, iar School of Motion, deocamdată, nu are investitori. A fost complet finanțată din fonduri proprii, dar m-am gândit la asta.
Joey Korenman:
Am vorbit cu investitorii și ați cântărit argumentele pro și contra, așa că sunt curioasă ce v-a făcut să vă gândiți că merită să renunțați la capitalul propriu pentru a obține capital în loc să vă dezvoltați.
Zack Brown:
O parte din ea se întoarce la începuturile experimentale ale laboratorului științific, când căutam să inventăm ceva revoluționar și, în momentul în care am fost acceptați la YC, nu aveam o cale spre profitabilitate. Nu monetizasem încă. Am monetizat abia la un an după ce am fost acceptați la YC, așa că pur și simplu nu exista o cale de pornire, nu cu acea traiectorie actuală.
Joey Korenman:
Da.
Zack Brown:
Am strâns puțin capital de la prieteni și familie și de la fondatori, așa că am strâns deja ceva capital de risc, așa cum era, și ne întrebam dacă vrem să ne schimbăm calea și să ne concentrăm pe ceva mai mic, care să facă bani, sau să strângem ceva mai mult și să facem ceva mai măreț sau mai ambițios de la bun început, ceea ce este o muzică pentru urechile VC.
Zack Brown:
Da, în momentul în care am intrat în YC, aveam aproximativ cinci luni de funcționare, ceea ce ar putea fi suficient pentru a obține o rundă de lansare în Valley, dar este greu de vândut atunci când ai o tehnologie științifică și încă nu ai capital. Așa că am ales YC pentru acest lucru, printre multe alte motive și, personal, am fost foarte mulțumit de această experiență.
Joey Korenman:
Da, mi-ar plăcea să aud despre această experiență, pentru că este un fel de legendă. YC este cel mai faimos accelerator de startup-uri din lume, iar Paul Graham este un geniu, iar Paul Graham, pentru oricine ne ascultă și nu cunoaște acest nume, este unul dintre fondatorii YC, printre altele, și are un blog uimitor, cu multă înțelepciune pe el.
Joey Korenman:
Dar da, și ce face acest program pentru o companie ca a ta?
Zack Brown:
În primul rând, ar trebui să spun că YC, când am trecut prin ea, am intrat la sfârșitul anului 2017, am intrat la începutul anului 2018, este foarte diferită de ceea ce a fost în 2005, când au început. Când au început, este ca și cohortele legendare, când au început, Twitch TV și Reddits și Air Bnb și în zilele noastre, este la fel, dar la scară mai mare.
Zack Brown:
YC se consideră și ea un startup, așa că obiectivul lor este să se extindă. Iar când am trecut noi, erau undeva între 100 și 200 de companii în lot față de vreo 10 sau ceva în primul lot. O experiență foarte diferită, foarte diferită. Acestea fiind spuse, am mers la o universitate mare și unul dintre lucrurile pe care le-am învățat în universitate, cam pe calea cea grea la început, a fost că există o tonă deresurse disponibile, dar dacă te apleci înapoi în loc să te apleci spre ele, dacă te apleci înapoi, nu primești acele resurse.
Zack Brown:
Și altcineva le va obține și tu vei trece peste. Totuși, dacă te întinzi și profiți de resursele ...
Zack Brown:
Cu toate acestea, dacă ajungi și valorifici resursele în mod proactiv la o universitate mare și la marele Y Combinator, atunci obții multe de acolo. Și cred că acum am 30 de ani. Vreau să fac ceva cu viața mea și am fost norocos să am această cunoștință, cred, că este mai bine să mă înclin și să valorific aceste resurse. Și, ca urmare, simt că am obținut multe de acolo, lucruri precum rețeaua,mentorat, doar sfaturi în general. Am trecut cu vederea rețeaua, dar aceasta este o parte foarte importantă. Printre cele aproximativ 200 de companii, am reușit să creăm o mulțime de conexiuni și oameni cu care păstrez legătura și astăzi. Și rețeaua YC este, de asemenea, o comunitate internă unde poți contacta orice alt fondator YC. Este listată adresa de e-mail și numărul de telefon. Așa că, dacă aș fi vrut, aș fi putut săaș putea să mă adresez fondatorului Dropbox pentru Airbnb, probabil dacă aș avea un motiv întemeiat să fac acest lucru. Dar acea rețea este o bucată mare din YC.
Joey Korenman:
Oh, asta e foarte interesant. Și există unele asemănări. Nu vreau să compar School of Motion cu YC, dar noi avem o rețea de absolvenți care a devenit probabil cea mai valoroasă parte a experienței de a urma unul dintre cursurile noastre. Și a fost un lucru neașteptat la început, cât de valoroasă s-a dovedit a fi. Așa că are mult sens pentru mine. Deci, să trecem la partea actualăȘi toți cei care ne ascultă, vom face un link către site-ul Haiku, site-ul Haiku, și puteți descărca. Cred că în prezent există o perioadă de testare gratuită de 14 zile pentru Animator, și există tutoriale pe site. O mulțime de informații excelente.
Joey Korenman:
Există și alte aplicații de animație în curs de dezvoltare, și se pare că există o mulțime de aplicații în general, atât aplicații web, cât și aplicații native, pentru a încerca să faciliteze proiectarea web și proiectarea de aplicații. Care este lucrul unic la Animator?
Zack Brown:
Ceea ce este unic la Animator este faptul că este destinat bazelor de cod. Este un motion design care se livrează în producție. Deci, codul este un cetățean de primă clasă, atât în interiorul aplicației, ca și fișierul sursă, dacă vă gândiți ca un .PSD pentru Photoshop, ca și acest tip de fișier sursă. Fișierul sursă pentru Animator este cod direct, cod editabil manual. Deci, de fiecare dată când mutați ceva pe scenă sau pe platouîn sus un Tween, citește și scrie de fapt cod în timp ce face acest lucru. Și acest lucru este foarte intenționat, astfel încât să fie foarte ușor de integrat cu bazele de cod.
Joey Korenman:
Deci, lasă-mă să te întreb ceva. Pentru că, și nu sunt foarte sofisticat în această privință, așa că iartă-mă dacă o să mă ocup de asta, dar în After Effects avem Bodymovin, care ia compusul After Effects, și există o mulțime de avertismente atunci când îl folosești, dar în general, dacă folosești straturi de forme și lucruri de genul ăsta, el scoate un fișier JSON. Deci, scoate un cod. Deci, cum este diferit de ceea ce face Bodymovin esteCe faci?
Zack Brown:
Da. Îmi amintesc când a apărut Lottie, în 2017. Era atunci când eram deja un fel de blocați și încărcați pe traiectoria de motion design pentru Haiku, pe atunci Haiku pentru Mac, acum Haiku Animator. Întotdeauna mi s-a părut super inspirațional. Am unele rețineri personale în legătură cu After Effects, după cum îți poți imagina, mai ales ca instrument pentru UI, pentru software. Bodymovin și Lottie sunt concepute în jurul lui,construit în jurul ingineriei inverse a fișierului sursă After Effects. Astfel, acel blob JSON pe care îl obțineți din Bodymovin este forma formatului de fișier After Effects.
Zack Brown:
Personal, atunci când îmi imaginez motion design pentru software, așa cum ai menționat deja, Joey, interactivitatea este esențială, cum ar fi capacitatea de a schimba culorile sau de a răspunde la atingere, sau de a trece de la această stare la acea stare într-un mod diferit de tranziția de la acea stare la starea următoare. Deși asta necesită logică. În termeni de informatică, necesită completitudine turing. Și pur și simplunu pot obține acest lucru din After Effects.
Joey Korenman:
Da.
Zack Brown:
Corect. Deci, aceasta este cea mai mare diferență: am avut, cred, atât privilegiul, cât și povara incredibilă de a construi instrumentul de creare de la zero, înlocuitorul After Effects, dacă vreți. Acest lucru ne-a permis să concepem un format de cod destinat codului, în loc de a fi adaptat pentru el.
Joey Korenman:
E o explicație foarte bună. Și după ce am folosit puțin Animator, îmi amintește foarte mult de modul în care funcționează Flash. Și e foarte interesant. Observ că folosești aceeași terminologie pe care o folosea Flash, Tween și stage și alte lucruri de genul ăsta. În After Effects, folosim cuvinte diferite. Dar în esență ai un comp, ai straturi și poți plasa bucăți de cod.pe acele straturi care le determină să reacționeze la anumite lucruri și să răspundă la aspect, și poți configura lucruri sensibile. Și este foarte, foarte mișto. Deci, care sunt unele dintre... poate ne puteți da câteva exemple despre cum puteți folosi un instrument precum Animator pentru a face lucruri care sunt dificil de realizat în alte moduri.
Zack Brown:
Din nou, pornind de la premisa că scopul Animator este de a face o punte între motion design și cod, adevărata putere pe care o aveți la îndemână este codul, ca și magia codului. Și astfel, Animator are câteva moduri în care puteți codifica în interiorul aplicației. Aceasta este, de asemenea, o diferență fundamentală față de After Effects. Și există trei moduri în care puteți codifica. Avem aceste construcții numite expresii, care sunt foartefoarte asemănătoare cu expresiile din After Effects, dar cu o particularitate. În esență, sunt funcții din foaia de calcul Excel. Deci, la fel cum poți lua o sumă a celulelor A3 până la A14 în Excel doar scriind egal cu suma [inaudibil 00:27:15], acea expresie mică și drăguță, poți face același lucru în Animator, dar răspunzând, de exemplu, la poziția mouse-ului sau la o atingere, un tap. Are sens?
Joey Korenman:
Da, asta are sens.
Zack Brown:
Bine. Și apoi cealaltă cale, care se dorește a fi simplă, dar și foarte puternică. Aceasta canalizează programarea funcțională, reactivă. Și puteți aplica aceste expresii în orice proprietate. Astfel, pot face ca poziția X a unuia dintre elementele mele să fie mapată cu mouse-ul X al utilizatorului X, și pot face ca poziția Y să fie mapată cu mouse-ul Y al utilizatorului Y, și pot face ca scara să fie ca o funcție sinusoidală a, să zicem, poziției liniei mele temporale și a mouse-ului Y al utilizatorului, dacăcare să aibă sens. Astfel încât să poți începe să creezi aceste interacțiuni, foarte ușor de scris, dar foarte puternice. Și, cu siguranță, acest tip de împuternicire creativă este ceea ce Flash a excelat cu adevărat, cu adevărat, și ceea ce lipsește lumii, nu-i așa?
Joey Korenman:
Da. Și ce limbaj folosești atunci când codifici în Animator?
Zack Brown:
JavaScript.
Joey Korenman:
Oh, perfect. Bine, deci dacă sunteți obișnuiți cu expresiile After Effects, sunt sigur că unele părți sunt identice. Și presupun că există unele lucruri personalizate pe care le-ați extins în JavaScript pentru a adăuga caracteristici specifice Animator?
Zack Brown:
Exact, da.
Joey Korenman:
Încerc să mă gândesc la un caz de utilizare comună pentru acest lucru. De exemplu, dacă doriți un comportament pe site-ul dvs. web, de exemplu un personaj și doriți ca pupilele ochilor să vă urmărească, să urmărească mouse-ul în jurul dvs. Puteți crea o machetă în After Effects, iar apoi un inginer va trebui să se gândească cum să facă acest lucru. Dar în Animator, puteți construi acest comportament și apoi să îl transferați?
Zack Brown:
Da, exact. Motorul de randare folosit în interiorul Animator este open source, în primul rând, și în al doilea rând, este exact același motor de randare care este folosit atunci când îl rulați pe web, exact același lucru. Deci, modul de previzualizare este literalmente modul de previzualizare. Este același lucru. Și asta se reduce la faptul că fișierul sursă este cod. Când scrieți o expresie, tot ceea ce scrieți va fi evaluat în exactîn același mod în Haiku Animator ca și pe site.
Joey Korenman:
Adică, una dintre cele mai mari diferențe dintre Animator și alte aplicații de acest gen și After Effects este că în After Effects îți poți permite luxul de a anima orice vrei și va trebui să faci o randare, dar persoana care o va vedea nu trebuie să se uite la randare. Când o faci în direct, așa cum se întâmplă pe web sau într-o aplicație, este în direct. Așa că sunt curios, cum se întâmplăcum vă descurcați cu acest lucru, în general, chiar și ca dezvoltator de aplicații, cum vă descurcați cu faptul că utilizatorii ar putea dori să anime lucruri care nu se pot întâmpla în timp real? Este aceasta o problemă?
Zack Brown:
Da, sigur că da. Ceea ce creezi atunci când creezi ceva în Haiku Animator este un software. Punct, ceea ce creezi este un software. Și o faci printr-o combinație de instrumente vizuale și, dacă vrei, de cod. Dar rezultatul final este un software. Acum, când creezi un software, una dintre preocupările inerente de care trebuie să fii conștient este performanța. Și dacă un dezvoltator se duce șiscrie o buclă for care blochează discul AIO astfel încât un computer se blochează, este ceva ce un programator ar trebui să își dea seama în timpul testelor și ar trebui să rezolve pentru a nu exista un mare bug de perfomanță în software-ul lor. Exact la fel cu Haiku Animator. Poți să te duci să animezi 5.000 de puncte doar săltând și vei vedea că încetinește. Și ca și creator de software, este responsabilitatea ta să te asiguri că funcționează corect.
Joey Korenman:
Da. Este ceva la care nu trebuie să te gândești niciodată. Adică, trebuie să te gândești la asta la început, când construiești chestii în After Effects, dacă va dura prea mult timp pentru randare, dar odată ce este randat, este gata. Este un mod total diferit de a gândi. Este foarte interesant.
Zack Brown:
Acestea fiind spuse, Lottie moștenește aceeași preocupare, deoarece este interpretată în timpul execuției. Deci, dacă aveți 1.000 de puncte care sar în After Effects, acestea se vor târî și în Bodymovin.
Joey Korenman:
Corect. Da, este foarte, foarte interesant. Bine. Încerc să găsesc un alt exemplu. Și unul dintre lucrurile pe care îmi amintesc că le făceam în Flash era că puteai avea aceste stări elaborate de rollover. Să spunem că facem o actualizare a designului chiar acum la School of Motion, și nu știu când va fi publicat acest episod, dar dacă îl ascultați, poate că este deja peDar să spunem că am refăcut modul în care arată miniaturile de pe site-ul nostru, care arată postările de pe blog, tutoriale și podcast-uri, lucruri de genul acesta.
Joey Korenman:
Deci, să spunem că dorim o stare de rollover elaborată, în care, dacă îl rolați, titlul crește puțin, iar imaginea în sine se mărește în limitele miniaturii, iar apoi această suprapunere de gradient, opacitatea acesteia se transformă. Și apoi, când treceți cu mouse-ul peste, se întâmplă ceva ușor... când îl îndepărtați, scuzați-mă, se întâmplă ceva ușor diferit. Modul în care euplănuia să facă acest lucru era să realizeze un prototip în After Effects, iar apoi să îl predea dezvoltatorilor, poate folosind ceva precum Inspector Spacetime, astfel încât să aibă curbele mele de relaxare și alte lucruri de genul acesta, iar apoi ei ar trebui să implementeze asta. Așadar, dacă aș decide să fac asta în Animator, cum ar arăta fluxul de lucru? Cum aș aduce lucrarea mea artistică și există instrumentele necesare pentru a face un fel deși să facem să funcționeze asta?
Zack Brown:
Da, cu siguranță. Acum va fi nevoie de ceva cod pentru a realiza ceea ce ați descris. Și convingerea noastră este că așa ar trebui să fie. Pentru a obține acea expresivitate nelimitată pe care o doriți, atunci când trec cu mouse-ul pe aici, ar trebui să se întâmple asta. Din nou, poate că sunt de modă veche, poate că sunt doar un încrezut, dar din toate cunoștințele mele de informatică și altele, cred că codul nu va dispărea.
Joey Korenman:
Sunt de acord cu dumneavoastră.
Zack Brown:
Și astfel, modul în care ați putea face acest lucru în Haiku Animator este să folosiți o linie de timp. Este foarte asemănător cu Flash. Folosiți o linie de timp, aveți diferite regiuni care au diferite acțiuni. Astfel, cadrele de la 1 la 80 ar putea fi mouse over, iar cadrele de la 81 la 120 vor fi mouse out. Urmăm un model de componentă cu Haiku Animator, astfel încât ceea ce creați este înfășurat ca o componentă, suport de primă clasă pentruReact și Angular și View. Să sperăm că folosești unul dintre acestea pe...
Joey Korenman:
Noi folosim React, da.
Zack Brown:
Bine. De asemenea, susținem JavaScript vanilie, dacă doriți să mergeți la obiect, ca să spunem așa. Astfel, veți obține o componentă React din Haiku Animator, care vă oferă o referință la Haiku Animator API, unde puteți, din React, să spunem că, la trecerea mouse-ului peste, la trecerea mouse-ului React, puteți derula linia de timp de la zero la 80, sau puteți merge și reda cadrul zero, sau puteți merge și reda cadrul 81. Deci, dezvoltatorulde fapt, cel care trage sforile în cele din urmă, dar ați pregătit scena, ca să spunem așa, folosind Animator.
Joey Korenman:
Asta e super tare. În regulă, deci s-ar putea să ne băgăm în buruieni, ascultătorule, așa că îmi cer scuze, dar sunt foarte curios în legătură cu asta și chiar vreau să înțeleg. Așa că are sens pentru mine, și dacă cineva care ne ascultă a folosit Flash, asta e exact ceea ce ar trebui să faci. Ai spune că la trecerea mouse-ului, mergi la frame-ul 20 și rulează până la frame-ul 40, la părăsirea mouse-ului sau ce a fost. Și tuPractic, ai toate animațiile pe o linie de timp și joci diferite intervale de cadre. Acum, întrebarea mea este, și apropo, o să-i pun pe dezvoltatorii mei să asculte asta, pentru că o vor înțelege mult mai bine decât mine și vor avea o mulțime de idei interesante.
Joey Korenman:
Dar iată care este întrebarea pe care o am, Zack. Deci, dacă dezvolt o componentă, așa arată o miniatură și cum arată. Și presupun că dezvoltarea vizuală se va face în ceva de genul Sketch. Și apoi am aduce-o în Animator, aș anima modul în care vreau ca acea componentă să acționeze la trecerea mouse-ului peste, și poate că la click se întâmplă altceva. Dar apoi lucrarea de artă propriu-zisăcare este afișată în acea miniatură trebuie să fie dinamică, nu-i așa? Deci, nu creează asta o problemă de genul că dezvoltatorul trebuie să se scufunde în acel cod și să îl dezmembreze ca să poată insera miniatura potrivită în locul potrivit, sau există o modalitate mai bună de a face asta și de a ușura procesul?
Zack Brown:
Da. Bine. Deci, învățând de la Flash, din nou, mă simt un pic ca un disc stricat, dar unul dintre lucrurile pe care Flash le-a făcut greșit a fost că a fost un fel de cutie neagră, o fundătură, în care odată ce ai instalat Flash pe, să zicem, site-ul tău, nu mai ieși niciodată. Cutia aceea de pixeli aparține lui Flash, și Dumnezeu să te ajute dacă vrei să încerci să schimbi ceva acolo. Trebuie să deschizi IDE-ul Flash și să faci niște schimbări șisă adaug niște logică și să mă descurc cu API-ul lor pentru trecerea datelor, etc., și a fost o mare încurcătură.
Zack Brown:
În Haiku Animator, avem o noțiune de placeholder în care, atunci când creați, puteți spune, iată un dreptunghi în interiorul acestui super dreptunghi pe care îl creez în Haiku Animator. Acest dreptunghi aparține dezvoltatorului. Nu am nicio idee despre ce va intra aici, dar îl pot anima. Se numesc transformări afine, scale, position, rotate, skew, toate aceste transformări. Puteți anima astași apoi, în momentul codului, dezvoltatorul poate trece conținutul înăuntru. Deci, în React, ar arăta ca o componentă copil, sau în HTML, este ceva în interiorul unui div. Aceasta este soluția noastră pentru conținut dinamic în interiorul Haiku Animator, și ceea ce arată pentru dezvoltatorul final este direct React. Nu există salturi sau ceva special. Pur și simplu treci conținutul înăuntru ca un copil al componentei HaikuComponenta React.
Joey Korenman:
Asta e super tare. Bine. Deci, unul dintre lucrurile pe care le-am citit în documentație și alte chestii, este că... pentru că am făcut un pic din asta pe site-ul nostru. Avem animații care sunt mai mult sau mai puțin integrate. Dar apoi avem anumite animații mici atunci când treci peste ceva pe care am făcut un fel de prototip, și lucruri de genul ăsta. Și problema este că dacă decidem să schimbămNu este ca și cum ai copia, lipi, acum este actualizat. Deci, cum te descurci, și nu știu dacă folosesc acest termen corect, dar controlul versiunilor, atunci când ai o nouă versiune a mouse-ului peste starea miniaturilor noastre? Există o modalitate mai simplă de a o implementa acum, pe care ați găsit-o voi?
Zack Brown:
Da, de fapt, acesta a fost unul dintre principalele ... din nou, mă întorc la zilele mele de agenție și am văzut cât de dificil este nu numai să implementezi designul în cod, ci și să iterezi. Probabil că 80% din efort constă în iterare. Acum ai implementat acest design ca și cod, acum există un nou design care de fapt schimbă puțin cerințele, iar acum tot ce a fost proiectat în cod trebuie săToate problemele care apar în urma iterației, și aici rezolvarea fluxului de lucru, cred că acesta este Sfântul Graal pentru rezolvarea fluxului de lucru.
Zack Brown:
Iar abordarea noastră cu Haiku Animator este, din nou, bazată pe modelul de componente, componentele sunt versificate. Deci, dacă creați un proiect în Haiku Animator și apăsați butonul de publicare, veți obține versiunea 0.0.1 a acelei componente și puteți să o introduceți într-o bază de cod. Ne integrăm cu NPM pentru lumea web, pentru ca orice dezvoltator din lumea web să fie familiarizat cu asta. Deci, de fapt, trebuie doar săNPM instalează componenta Haiku Animator la versiunea 0.0.1 și ești gata de plecare.
Zack Brown:
Acum, animatorul, designerul de mișcare sau dezvoltatorul, oricine folosește Haiku Animator, poate să se întoarcă și să facă modificări ulterioare, să actualizeze activele din Sketch, de exemplu, care vor trece în Haiku Animator, și să publice din nou, iar acum aveți versiunea 0.0.2. Și tot ce trebuie să faceți din cod este să actualizați acea componentă la versiunea 0.0.2 și sunteți gata. Asta e. Deci, așa am rezolvat problema.Totul este destul de tehnic, iar un mod frumos de a rezuma este că ne integrăm cu instrumentele de dezvoltare în același mod în care ne integrăm cu instrumentele de proiectare, cum ar fi Sketch și Photoshop, Illustrator.
Joey Korenman:
Deci, dacă înțeleg bine, adică funcționează foarte asemănător cu Flash, doar că este mult mai ușor de implementat și de actualizat și de utilizat într-o întreagă aplicație și o întreagă platformă. Așa că sunt foarte încântat să mă joc din nou cu el, pentru că este, așa cum am spus, momentul perfect pentru noi. Și sunt foarte încântat, sper că mulți dintre voi care ascultați acest articol să descărcați demo-ul de 14 zile. Dacăfaceți acest gen de muncă, încercați această aplicație, pentru că ar fi foarte, foarte tare să vedeți ce pot face niște motion designeri foarte buni. Și voiam să vă întreb despre asta, pentru că am avut din ce în ce mai multe conversații de acest gen.
Joey Korenman:
Este aproape ca și cum aceste două lumi încep să fuzioneze. Ai motion design și ai UX. Și amândouă se îndreaptă una spre cealaltă, iar acum există o suprapunere suficientă pentru ca astfel de instrumente să devină viabile. Iar tu pari a fi unic, pentru că ai venit la această intersecție. Ai făcut prototipuri și ai implementat aceste lucruri pentru clienți. Deci ești animator? Cum ai făcut-o?știi ce instrumente să pui în Animator? Pentru că l-am deschis prima dată fără să știu nimic despre el, și există cadre cheie și un editor de grafice, ca un editor de curbe de animație, care este de fapt foarte plăcut de folosit, și un sistem de compoziție bazat pe straturi, și totul a avut sens. Deci, cum te-ai decis ce caracteristici să pui în el?
Zack Brown:
Aș putea spune că sunt un animator de circumstanță.
Joey Korenman:
Îmi place asta.
Zack Brown:
Cu siguranță nu una grozavă. Am avut ceva experiență când eram mai tânăr, acel cuvânt cu F din nou, Flash. Și astfel, ideea de cadre cheie și termene, o dată [inaudibil 00:42:03] de către mine...
Zack Brown:
Ideea cadrelor cheie și a liniilor de timp. Știi, odată ce [inaudibil 00:42:04] în mintea mea tânără au cam rămas cu mine în mintea mea de adult. Răspunsul scurt este că utilizatorii, utilizatorii noștri sunt experții și știi, este o înțelepciune comună în lumea creării de produse să îți dai seama ce vor utilizatorii tăi și să îl construiești. Deci, editorul Curve, de exemplu, l-am lansat recent. Produsul există de când2006 și 2019 a fost anul în care am lansat în sfârșit editorul de curbe, după ce utilizatorii au cerut, cerut, cerut, cerut. Mascarea este o caracteristică pe care nu o susținem în prezent și pe care oamenii au cerut-o. Așadar, mă aștept să apară în curând.
Zack Brown:
Așa descoperim: experții ne spun și noi ne ocupăm de asta.
Joey Korenman:
Corect, pentru că există o mulțime de lucruri pe care utilizatorii After Effects le fac tot timpul. Știți, folosirea unui layer ca mască pentru altul, trasee care au un fel de linie care se animă de-a lungul traseului. Lucrurile de genul acesta erau... Sincer, chiar și instrumentele din After Effects pentru a face unele dintre aceste lucruri sunt foarte vechi și ar putea fi actualizate și este interesant să vezi căexistă un fel de oportunitate de a vorbi cu utilizatorii și de a afla exact ce le va ușura viața.
Joey Korenman:
Ce fel de utilizatori găsiți care lucrează cu Animator? Sunt designeri de mișcare sau designeri UX care au nevoie de animație?
Zack Brown:
Ambele. Deci, din nou, ca și cum Sketch este mai accesibil decât Photoshop sau Illustrator, am constatat că există un întreg segment de utilizatori care învață motion design, poate că folosesc pentru prima dată o paradigmă de timeline cu cadre cheie, și se dau în vânt după Haiku Animator. Pe măsură ce am dezvoltat aplicația, am dezvoltat și documentația, cum ar fi un centru de ajutor, tot felul de lucruri.Avem tutoriale, deci avem resurse bune pentru cei care încep să facă motion design pentru prima dată.
Zack Brown:
Vedem, de asemenea, designeri de mișcare experimentați care apreciază propunerea de valoare a livrării la producție sau propunerea de valoare "Adaugă un pic de cod." Ceva ce nu poți face în After Effects. Știi, în mod fundamental, este un loc unic pe piață pentru această soluție, iar totul se întoarce la vidul de Flash.
Zack Brown:
Deci da, iar cealaltă parte a întrebării este reprezentată de companii de toate formele și mărimile, de la Fortune 5 până la agenții și freelanceri, și vedem că și dezvoltatorii îl folosesc, de asemenea. Sau, cum ar fi un fel de unicornii front-end... Unicornii îl folosesc cel mai mult, cu siguranță, pentru că au o gamă completă de caracteristici de design și o gamă completă de caracteristici de cod, dar, de fapt, toate categoriile îl folosesc.
Joey Korenman:
Voiam să te întreb, pentru că mulți dintre ascultătorii și studenții noștri sunt mai întâi motion designeri, iar unii dintre ei abia încep să se familiarizeze cu After Effects Expressions, așa că eram curios dacă ți-ai făcut o idee despre cum este curba de învățare pentru animatorii care încep să folosească Animator, Haiku Animator. Voi începe să spun Haiku Animator ca să fie mai ușor.
Zack Brown:
E în regulă, da.
Joey Korenman:
Da, cum este curba de învățare pentru animatorii care îl folosesc. Cât de mult cod vor trebui să învețe? Și care ar trebui să fie așteptările în ceea ce privește curba de învățare?
Zack Brown:
Bine, așa că aș recomanda să începi cu Expressions. Dacă ai folosit vreodată Excel sau Google Sheets, atunci probabil că ai folosit o formulă de foaie de calcul și ești pregătit pentru Haiku Animator. Ca și cum a face ceva să urmărească mouse-ul este la fel de ușor ca și cum ai lua o sumă în Excel și este foarte satisfăcător atunci când o faci. Foarte, cred că este un cuvânt banal, dar este foarte îmbucurător să vezi că se întâmplă asta.
Zack Brown:
Aș spune că, dacă sunteți un designer de mișcare care dorește să înceapă să lucreze cu codul, acesta este instrumentul perfect pentru dvs. Acesta este în mare parte motivul pentru care l-am construit. Din nou, pentru a reduce decalajul dintre designul de mișcare și cod. Deci, între resursele pe care le avem disponibile și editorul de cod integrat în aplicație, ar trebui să fie o modalitate bună de a începe.
Joey Korenman:
Excelent. Să vorbim despre starea generală a acestui lucru pe care îl numim... nici măcar nu știu cum se numește. Intersecția dintre UX și motion design. Animator rezolvă niște probleme care persistă de ani de zile. Îmi amintesc că într-un episod al acestui podcast, de fapt, i-am avut pe Salih și Brandon de la Airbnb, care erau doi dintre cei care au construit Lottie.
Zack Brown:
Da, îi iubesc pe tipii ăia.
Joey Korenman:
Da, sunt grozavi. Și știi, ei au fost foarte importanți pentru a mă face să înțeleg care sunt aceste puncte de durere, și am crezut că Lottie vine și le va rezolva pe toate, dar de fiecare dată când vorbesc cu cineva, ei spun: "Nu, nu sunt încă rezolvate." Este încă foarte dureros să iei un design de mișcare și să îl transformi în cod.
Joey Korenman:
Iar modul în care animatorii abordează acest aspect pare foarte inteligent și cred că ai descoperit ceva, dar care sunt alte lucruri care vor trebui abordate pentru ca acest proces să fie cu adevărat simplificat și eficient? Știi, pentru că este vorba de lumea codării și cea a motion design-ului, sunt destul de separate în acest moment. Și chiar și un produs precum Animator, știi, încăvor avea nevoie de un dezvoltator pentru a implementa acest lucru, nu-i așa? Adică, poți construi o componentă, dar apoi aceeași persoană va fi capabilă să implementeze acea componentă? Este acesta un obiectiv pe care ar trebui să îl urmărim? Așadar, sunt curios care este părerea dvs. cu privire la alte lucruri care ar putea fi schimbate în următorii ani pentru a face acest proces și mai bun?
Zack Brown:
Dacă vorbim la o scară de câțiva ani, cred că mulți oameni se gândesc la ce vor face designerii peste x ani sau ce vor face dezvoltatorii peste x ani. Pe baza acestei idei, cred că este falsă ideea că va însemna același lucru peste câțiva ani. Dezvoltatorul înseamnă același lucru astăzi ca și peste câțiva ani, nu-i așa?
Zack Brown:
De aceea îmi place să mă gândesc la... am menționat mai devreme, acum câteva minute, ceea ce faci cu Haiku Animator este să creezi software. Nu ne pasă dacă ești dezvoltator. Nu ne pasă dacă ești designer. Creezi software. Asta este. Deci, părerea mea este că în câțiva ani, nu contează cu adevărat ce titlu ai, dar vom construi cu toții software împreună. Și îmi place să arăt undeacest lucru s-a întâmplat deja într-o industrie paralelă, în industria jocurilor.
Zack Brown:
Oricine a folosit Unity 3D, oricine a fost implicat în acest ecosistem, construiește jocuri. Construiești software. Și dacă folosești Photoshop pentru a crea texturi, care vor fi mapate pe modelele 3D din Unity, creezi software prin Photoshop. Poți să te întorci și să schimbi acea textură, iar aceasta se transferă în software și se trimite în producție.
Zack Brown:
Unity a rezolvat problema fluxului de lucru între designerii de mișcare... Există un sistem de animație cu cronologie și cadre cheie în Unity, editori de texturi, riggeri, modelatori 3D și dezvoltatori. Toți construiesc același lucru în Unity. Și astfel, cred că acesta este viitorul creării de software, ca să spunem așa, și asta este ceea ce facem noi. Acesta este terenul nostru de joacă, aceasta este lumea noastră, lumea creăriiNu contează cu adevărat ce titlu aveți sau chiar ce pregătire aveți, dar dacă ne facem treaba cum trebuie, unificând fluxurile de lucru, vom construi cu toții software împreună.
Joey Korenman:
E frumos. Mi-au dat lacrimile. A fost foarte elocvent.
Joey Korenman:
Bine, deci am vorbit cu Issara Willenskomer despre acest lucru de la UX in Motion, iar în prezent este încă vestul sălbatic în ceea ce privește instrumentele pe care oamenii le folosesc pentru a executa animații într-o aplicație. Și există un milion de moduri diferite de a face acest lucru, iar modelul pe care îl folosește Animator poate că rezolvă acest lucru, dar se întâmplă vreun fel de standardizare? Și din nou, aceasta nu este expertiza mea, dar din ce am înțeles,Animator scoate un cod care este... în esență, este ca o componentă react, care este, iertați-mă dacă greșesc, dar se bazează pe javascript, nu? Este un fel de aromă a acestei componente, nu?
Zack Brown:
Da, da.
Joey Korenman:
Bine, grozav. Deci, va funcționa cu... și dacă construiești un site web sau o aplicație bazată pe asta, e grozav, dar dacă nu o faci? Dacă folosești... Aș vrea să am o listă de limbaje de codare. Dacă folosești Ruby sau ceva de genul ăsta? Este nevoie de mai multă standardizare, cred că asta vreau să spun? În general, pentru ca această problemă să dispară, mai este încă o problemă?
Zack Brown:
Absolut, da. Când vorbim despre fluxuri de lucru, standardizarea este cea mai importantă. De aceea Unity a avut succes, pentru că a devenit un standard. Jumătate din toate jocurile, jumătate. Literalmente, unul din două jocuri pentru orice platformă este construit pe Unity. În mare parte pentru că a ajuns să fie un standard.
Zack Brown:
Există unele standarde care se conturează. Lottie este un exemplu excelent în domeniul designului de mișcare. Și știți, am menționat unele rețineri cu privire la nucleul tehnic al lui Lottie, și anume că este foarte, foarte greu să faci Lottie interactiv. Foarte dificil. Doar din cauza formatului său de bază.
Zack Brown:
Ceea ce a făcut Lottie foarte bine a fost să obțină mindhare și să devină un standard, ceea ce a fost un pas uriaș înainte pentru motion design ca și comunitate, ca și lume. Așadar, Lottie a devenit un standard. Ne-am urcat în acest tren destul de repede. Haiku Animator a fost primul instrument de pe piață, în afara After Effects, care a acceptat exportul Lottie. Deci, din nou, în misiunea noastră de a aduce împreună fluxurile de lucru, am fostfoarte conștienți de acest lucru, de acest standard emergent.
Zack Brown:
Dar, vreau să spun, ne putem gândi la animații în ceea ce privește software-ul în câteva moduri diferite. Unul dintre ele este cutiuța atomică, cum ar fi un .gif sau un videoclip sau o animație Bodymovin bună pentru un spinner de încărcare sau un element în interiorul unui buton care, atunci când faceți clic pe buton, începe din nou, ca un spinner de încărcare. Începe să se învârtă.
Joey Korenman:
Da.
Zack Brown:
Știi, deschizi aplicația Airbnb, casa lui Lottie. Deschizi aplicația Airbnb și ai acest mic dans drăguț, [inaudibil 00:52:57] logo-ul Airbnb. Puțin cam așa ceva... Deci, aceasta este o manifestare a mișcării în software. Cealaltă este la scară mai mare, cum ar fi animația layout-ului.
Joey Korenman:
Da.
Zack Brown:
Această standardizare nu a avut loc. Acesta este pur și simplu vestul sălbatic. În prezent, singura modalitate de a face acest tip de animație este prin cod, iar o mare parte din această problemă constă în faptul că implementarea unei animații de layout pe web este foarte diferită de cea pentru iOS, pentru Android sau pentru Samsung smart TV. Deci este o mare problemă,problemă urâtă și provocatoare.
Zack Brown:
Fără a dezvălui prea multe, echipa Haiku lucrează la ceva în acest domeniu, dar cred că merită să identificăm această distincție între cele două tipuri de mișcare în software.
Joey Korenman:
Corect. Și permiteți-mi să vă întreb asta, pentru că de fapt asta a apărut azi dimineață, și cred că există încă multă confuzie cu privire la ceea ce este Lottie. Cred că pe partea de dezvoltare, este mult mai bine înțeles decât pe partea de motion design. Cineva de pe canalul nostru Slack de dimineață a spus: "Oh, uite, Airbnb face o aplicație de animație." Și eu am spus: "Nu, nu asta este.
Joey Korenman:
Deci, din câte am înțeles, Lottie traduce în esență ceea ce face Bodymovin și, de asemenea, ceea ce face animatorul. Știi, codul pe care îl emite, îl traduce în iOS sau Android. Aceste limbi. Deci, se pare că ceea ce trebuie să se întâmple cu adevărat pentru a-l face universal și ușor este că trebuie să existe un fel de traducător universal, știi, și crezi că este ceva ce o companie ca Haikuar trebui să se ocupe, sau va fi nevoie de un efort mult mai universal din partea Apple, Google și Samsung pentru a crea o modalitate de a crea un format universal?
Zack Brown:
Deci, în primul rând, lucrăm la ceva care este strict secret, învăluit în mister, în acest moment, dar pe care îl vom anunța în curând, și anume să facem o încercare de standardizare între platforme.
Joey Korenman:
Da.
Zack Brown:
Știi, personal, în calitate de tip de startup, nu cred că acest lucru trebuie să vină de la Google, dar cu siguranță trebuie să fie adoptat de Google la un moment dat pentru a deveni un standard.
Zack Brown:
Apoi, din nou, un scenariu de succes, așa cum îl văd eu, este o cotă de piață de 50%. E bine. Asta a făcut Unity. Nu sunt răniți. Nu vei mulțumi niciodată pe toată lumea. Mai ales într-o disciplină tehnică ... [inaudibil 00:55:47] a fost în produsul de prăbușire a disciplinelor tehnice de codificatori de diferite limbaje și designeri care folosesc diferite instrumente de design, și designeri de mișcare de diferite dungi. Te înmulțeștitoate aceste combinații diferite, nu vei reuși niciodată să mulțumești pe toată lumea cu un singur standard sau cu un singur instrument, iar acest lucru este în regulă. Dar, ceva care poate rezona și poate rezolva problema, cum ar fi problemele de bază ale unui număr suficient de oameni, pentru a începe să devină un standard în felul în care este Unity, cred că este absolut posibil.
Zack Brown:
Și nu cred că acest lucru trebuie să vină de la una dintre aceste companii mari. Știi, o opinie părtinitoare, dar personală.
Joey Korenman:
Da, foarte mișto. Da, abia aștept să dezvălui și să urci pe scenă cu un guler negru și să arăți tuturor care este această caracteristică.
Joey Korenman:
Așadar, mai am câteva întrebări pentru tine, iar tu locuiești în San Francisco, ești în bula tehnologică, ai făcut chestia cu YC și toate astea.
Zack Brown:
Cu siguranță.
Joey Korenman:
Îmi imaginez că sunteți în contact cu o mulțime de companii de tehnologie. Sunt sigur că știți oameni de la marile companii, cum se spune acum? FAANG.
Zack Brown:
FAANG, da.
Joey Korenman:
... cu doi As, da, da. Știi, Facebook, Apple...
Zack Brown:
Amazon.
Joey Korenman:
De fapt, nu așteptați, este vorba de Facebook, Apple, da, Amazon, apoi Netflix și Google.
Zack Brown:
Cred că și Microsoft își are locul acolo sus, dar de fapt este că Silicon Valley este [inaudibil 00:57:00].
Joey Korenman:
Corect. E ca și cum copiii cool ar exclude... Dar, oricum, știi, utilizatorii tăi sunt atât designeri de mișcare, cât și designeri UX și tot ce e între ei. Așa că sunt curios, doar din perspectiva ta, cum arată perspectivele de angajare pe coasta de vest pentru animatorul care știe puțin cod sau pentru programatorul care știe puțină animație? Din punctul meu de vedere, din Florida, se pare că e în plină expansiune,dar eu nu sunt acolo și sunt curios ce vedeți la fața locului.
Zack Brown:
Ideea de UX ca factor de diferențiere a fost cu adevărat... a fost adoptată în mod curent în acest moment, ca o curbă de trecere a prăpastiei, dacă o știți. Oricum, toată lumea și mama și bunicul lor sunt conștienți de faptul că diferențierea prin UX face o mare diferență în ceea ce privește perspectivele de succes ale unei companii. Și mișcarea a fost stabilită ca o parte esențială a acestui lucru.
Zack Brown:
Și, revenind la Lottie și altele asemenea, a face accesibil... a face foarte ușor să introduci o animație încântătoare în aplicația ta, este un lucru important. Așa că da, designerii de mișcare care... Designerii de mișcare pentru cod, designerii de mișcare pentru baze de cod, designerii de mișcare pentru software. Cu siguranță, vedem acest lucru în plină expansiune aici.
Joey Korenman:
Este minunat. Ei bine, de ce nu încheiem cu asta? Animator este deja o aplicație foarte, foarte tare și foarte puternică și, din nou, vom face un link către ea. Vă sugerez tuturor să vă jucați cu ea. Indiferent dacă faceți sau nu acest tip de muncă acum, există o șansă bună să o faceți în viitor, deoarece cred că Zack are dreptate, toată lumea și mama lor vor animații pe site-ul lor acum și în aplicația lor.
Joey Korenman:
Dacă comparați Animator cu After Effects, care cred că are 25 sau 26 de ani, este evident că există o mulțime de caracteristici pe care Animator nu le are încă, și nu există o cameră 3D sau ceva de genul acesta în acest moment.
Zack Brown:
Fără cameră.
Joey Korenman:
Care este viziunea ta pentru viitorul aplicației și, sincer, și al companiei?
Zack Brown:
Ambiția noastră aproape stupidă... Știi, trebuie să țintim spre stele. O parte din asta se datorează faptului că suntem în Silicon Valley și suntem susținuți de VC. O parte din asta este doar o ambiție oarbă, ca să spunem așa. Personal, la nivel existențial, dar văd o oportunitate de a unifica designul și codul. Nu-i așa? Toată lumea din echipa noastră vede asta. Să unificăm aceste fluxuri de lucru pentru a obține, de exemplu, cota de piață pe care o are Unity.
Zack Brown:
Misiunea companiei noastre este "Să revoluționăm crearea de software prin unificarea designului și a codului". Acesta este marele scop al misiunii de început, iar modul în care am ajuns pe piață cu primul nostru produs a fost să umplem golul lăsat de Flash în ceea ce privește designul de mișcare care să ajungă în producție. Și asta acoperă primul caz de utilizare a mișcării în software pe care l-am menționat. Aceste animații de tip atomic. Și Animator permitemergeți mai departe cu lucruri cum ar fi spațiile rezervate și API-ul de cod.
Zack Brown:
Dar problema nu se rezumă la atât și vedem că apar tendințe interesante, cum ar fi sistemele de proiectare, al căror scop declarat este de a sistematiza proiectarea în același mod în care se sistematizează codul. Idei precum controlul versiunilor, idei precum componentele, iar acestea încep să capteze cu adevărat atenția. Mai ales în întreprinderi, unde nevoile de mare coerență au condus la milioane și milioane și milioane și milioane de dolari pentru a fiDeci, aceasta ar putea fi o parte a puzzle-ului. Este un aspect pe care îl urmărim cu atenție.
Zack Brown:
Ceea ce ignoră sistemele de design este exact același transfer de la design la cod. Acum poți crea un sistem de design în instrumentul tău de design și ai această minunată noțiune abstractă: "Iată tipografia mea" și "Iată culorile mele." Dar tot trebuie să mergi apoi să implementezi manual în cod. A moștenit aceeași... acest spațiu a moștenit aceeași problemă pe care o are transferul tradițional de designAșa că este o problemă pe care o urmărim cu atenție.
Zack Brown:
Da, asta îți răspunde la întrebare?
Joey Korenman:
Da, cred că unificarea, designul și codul. Este o sarcină destul de ambițioasă, dar nu știu. Doar din cele câteva interacțiuni pe care le-am avut cu tine, Zack, cred că tu și echipa sunteți în stare să o faceți. Și abia aștept să văd unde se va ajunge.
Zack Brown:
Mulțumesc, Joey. Mulțumesc foarte mult că m-ați invitat astăzi.
Joey Korenman:
Check out Animator la Haiku.ai. Chiar vreau să-i mulțumesc lui Zack pentru că a venit și a vorbit atât de bine despre provocările cu care se confruntă animatorii și dezvoltatorii atunci când vine vorba de implementarea animației în aplicații. Animator este încă destul de nou, dar este deja o aplicație destul de plăcută de folosit și cred că are o șansă reală de a schimba modul în care animăm lucrurile care vor sfârși prin a fi interactive pe unun site web sau o aplicație mobilă sau orice altceva.
Joey Korenman:
Asigură-te că ești abonat la acest podcast pentru a fi la curent cu noutățile din industrie și cu noile instrumente precum Animator. Și dacă vrei și mai multe cunoștințe, mergi la SchoolofMotion.com pentru a obține un cont gratuit și pentru a primi newsletter-ul nostru Motion Mondays. Este un e-mail scurt pe care îl poți citi la cafeaua ta extra mare de la Dunkin' Donuts și te va ține la curent cu tot ceea ce ar trebui să fiiconștientizat în proiectarea în mișcare.
Joey Korenman:
Și asta e tot pentru acest episod. Sper din suflet că v-a plăcut, și pace.