Abbiamo fatto una chiacchierata con Zack Brown, CEO e visionario di Haiku Animator.
Vorremmo iniziare questo articolo con una poesia:
UX e UINon è così divertente da animareMa ora c'è Haiku- School of MotionQueste barzellette in inglese da terza elementare ti fanno bene?
C'è molto fermento intorno al motion design e a come si inserisce nel mondo del design UI/UX. In prima linea nella ricerca UI/UX c'è Zack Brown, CEO di Haiku e il visionario dietro Haiku Animator.
Il mondo è assetato di aggiungere animazioni espressive alle proprie esperienze utente, ma l'attuale flusso di lavoro per l'animazione in UI e UX ha molto da desiderare. Ora, con l'aiuto di Haiku Animator è possibile progettare, animare, pubblicare ed incorporare in un unico programma ben calibrato.
Non si tratta di una startup a caso, Haiku è passata attraverso il leggendario programma Y Combinator, noto per aver contribuito a dare il via ad alcuni dei marchi più innovativi che conosciamo oggi, come Dropbox e Airbnb. Quindi, è sicuro dire che Haiku sembra avere le carte in regola.
Nel podcast ci siamo seduti con Zack per parlare del mondo dell'animazione UI/UX. Durante il percorso sentirete parlare del background di Zack nel mondo della pubblicità, di come ha fondato Haiku e di cosa significa gestire una startup in rapida espansione.
Haiku offre anche ai nostri ascoltatori del podcast uno sconto su Animator. Questi sconti saranno disponibile fino al 1° agosto 2019 Per richiedere lo sconto basta cliccare sui link sottostanti. Ecco due diverse opzioni:
- 50% di sconto per tre mesi di un piano mensile (risparmio di $27)
- 25% di sconto sul primo anno di un piano annuale (risparmio di $45)
Ora che la vostra curiosità è stata stuzzicata, salutiamo Zack...
NOTE DELLO SPETTACOLO DI ZACK BROWN
Prendiamo i riferimenti dal nostro podcast e aggiungiamo qui i link, aiutandovi a rimanere concentrati sull'esperienza del podcast.
- Zack Brown
- Animatore Haiku
PERSONE/STUDI
- Via Thomas
- Paul Graham
RISORSE
- Schizzo
- Y Combinator
- Ispettore Spaziotempo
- Episodio del Podcast di Lottie
- L'unità
- Episodio del Podcast di Issara Willenskomer
- Lottie
VARIE
- Dreamweaver
- Fuochi d'artificio
- Agitare
TRASCRIZIONE DI ZACK BROWN
Joey Korenman:
Devo confessare una cosa: sono molto interessato a ciò che accade nello spazio UI e UX per quanto riguarda il motion design. È un'area che sembra esplodere con progetti interessanti, opportunità di lavoro e nuove tecnologie che rendono più facile tradurre le animazioni in codice. Tuttavia, a partire da questa registrazione nel 2019, è ancora una specie di spina nel fianco creare animazioni facilmente utilizzabili inin modo interattivo all'interno delle app.
Joey Korenman:
Il nostro ospite di oggi si propone di cambiare questa situazione. Zack Brown, e sì, questo è il suo vero nome, è il CEO e fondatore di una startup chiamata Haiku. Dopo essere passati attraverso il leggendario programma Y Combinator, Zack e il suo team hanno lanciato "Animator", un'applicazione che ha il modesto obiettivo di unificare il design e il codice. Roba piuttosto altisonante, ma credo che Haiku sia davvero in gamba.
Joey Korenman:
Il team di Haiku ha ideato un modo di distribuire le animazioni che potrebbe risolvere uno dei problemi più difficili che i motion designer devono affrontare quando lavorano sulle app. Animator, con cui ho giocato e che adoro, consente di animare e codificare in un'unica interfaccia che può poi distribuire l'animazione in modo molto semplice e flessibile per gli sviluppatori. In questa intervista, approfondiamo il funzionamento di animator e che cosalo rende diverso e più efficiente nello spazio dell'interfaccia utente rispetto, ad esempio, ad After Effects.
Joey Korenman:
Parliamo anche di come Zack ha fondato l'azienda e ha costruito un'applicazione di animazione completamente nuova da zero. È una conversazione molto interessante e credo che vi darà un'idea dei tipi di strumenti che noi motion designer utilizzeremo nel prossimo futuro.
Joey Korenman:
Zack, è fantastico averti nel podcast di School of Motion. Grazie mille per avermi dedicato del tempo e non vedo l'ora di scervellarmi con te.
Zack Brown:
Sì, è un piacere essere qui, Joey. Grazie per avermi invitato.
Joey Korenman:
Sì, nessun problema. Per prima cosa devo chiederti del nome. Ho chiesto alla nostra troupe di School of Motion: "Ehi, sta arrivando Zack Brown di Haiku", e tutto quello che volevano sapere era com'è essere una star della musica country, quindi te lo chiedono spesso? Sai chi è la Zac Brown Band?
Zack Brown:
Sì, è molto faticoso lavorare in nero come musicista famoso mentre gestisco una startup, ma in qualche modo ce la faccio e riesco a realizzare tutto.
Joey Korenman:
Quella vecchia castagna.
Zack Brown:
Ma in effetti è stato un autista di carro attrezzi che mi ha fatto conoscere Zac Brown per la prima volta e mi ha detto: "Ho bisogno della tua firma" e "Zac Brown, ho bisogno del tuo autografo". Credo di aver avuto 20 anni all'epoca, ho fatto 20 anni di vita con Zack Brown e da allora devi sempre fare clic su "volevi dire Zac Brown Band?".
Joey Korenman:
Esattamente, sì. Non credo che abbia la K, quindi puoi dire che sono Zack con la K. Questo chiarirà le cose. Oh, è davvero divertente. Tutti quelli che stanno ascoltando, sono sicuro che non conoscono ancora bene la tua azienda e la tua app, ma lo faranno.
Joey Korenman:
Ma volevo iniziare a saperne un po' di più su di lei: qual è il suo background e come è finito a fondare una società di software che sta costruendo un'applicazione per l'animazione?
Zack Brown:
Certo, ok, ho iniziato la mia vita creativa con la stampa e la fotografia, usando Illustrator, Photoshop e altri strumenti. Sono sempre stato appassionato di computer fin da quando ero molto giovane e, mentre esploravo questi mezzi di comunicazione, ho scoperto uno strumento chiamato Flash, un software meraviglioso che è diventato il mio ponte verso la programmazione.
Zack Brown:
In Flash, non solo si poteva disegnare con questi strumenti di scrittura vettoriale, ancora oggi unici, ma si potevano decorare i disegni con il codice in modo davvero elegante e autonomo, e questo mi ha fatto appassionare alla programmazione. Ho creato tutti questi piccoli giochi. Il mondo era la mia ostrica, per così dire. Così, ho continuato a studiare informatica e poi ho lavorato come ingegnere del software per un po' di tempo.in tutti i settori, rendering 3D, sistemi distributivi, un po' di AI, AR.
Zack Brown:
E una buona dose di UI, UX e poi ho fondato un'agenzia chiamata Thomas Street. Siamo stati in giro per circa sette anni, siamo cresciuti fino a raggiungere una dimensione piuttosto buona. Avevamo clienti come Coca-Cola, DirecTV, poi l'ho venduta. Ho viaggiato per due anni dopo i miei 20 anni. È stata una mossa di carriera intenzionale, che ci crediate o no. Ho visitato una quarantina di paesi, ho imparato alcune lingue, ho trascorso un periodo in barca a vela, cercando diarricchire la mia vita.
Zack Brown:
E poi, dopo averne preso le mosse, ha fondato Haiku, nel 2016, e siamo in giro da un po' di tempo.
Joey Korenman:
Vendere un'azienda e viaggiare per due anni è una storia davvero bella. Voglio approfondire un po'. Hai detto di aver aperto un'agenzia e di aver lavorato per marchi come Coca-Cola e simili. Che tipo di lavoro facevi?
Zack Brown:
Si trattava di un'attività trasversale, generalmente incentrata a colmare il divario tra progettazione e codice, come se fosse la nostra scatola nera. Quindi, entravamo in gioco, raccoglievamo i requisiti con le diverse parti interessate, proponevamo progetti, li facevamo approvare, implementavamo i progetti come software e questo processo end-to-end era il nostro pane quotidiano.
Zack Brown:
Questo è anche l'inizio della mia personale comprensione del problema di passare dalla progettazione al codice. È un problema complicato e ancora oggi non esiste una soluzione perfetta.
Joey Korenman:
Sì, è proprio quello che volevo chiederti, perché anche adesso, e questa intervista è un ottimo tempismo per noi, perché School of Motion sta affrontando un processo di rebranding del design e lo stiamo implementando in tutto, sul nostro sito web, e quindi siamo alle prese anche con questo.
Joey Korenman:
Abbiamo tutte queste idee e vorremmo che il nostro sito web funzionasse in un certo modo e siamo una scuola di animazione, quindi vogliamo che le cose si animino. E anche adesso, nel 2019, è ancora molto difficile farlo, quindi quando lei dirigeva questa agenzia, com'era questo processo? Il processo di trasformare il design e, presumo, anche l'animazione in codice? Qual era lo stato dell'arte a quel tempo?
Zack Brown:
Era più o meno lo stesso stato dell'arte di oggi, in cui i progettisti usano strumenti digitali per creare simulazioni di ciò che dovrebbe essere costruito in pixel, che poi consegnano agli sviluppatori il cui compito è quello di costruire quei pixel in altri pixel, ma quelli giusti.
Joey Korenman:
Giusto.
Zack Brown:
Esatto, e questo è ancora una volta il nocciolo del problema: tutti noi usiamo già strumenti digitali, ma i nostri flussi di lavoro sono disgiunti e il flusso di lavoro è davvero il nocciolo del problema. Come possiamo riunire questi flussi di lavoro?
Joey Korenman:
Sì, e c'è anche una parola completamente diversa da "paradigma", perché suona così banale, ma è la parola che ritengo appropriata. Quando i motion designer pensano in termini di narrazione essenzialmente lineare, l'aspetto sarà questo, perché lo sto animando in questo modo e verrà riprodotto ogni volta in questo modo.
Joey Korenman:
Ma quando si parla di un'applicazione, beh, si animerà in uno stato diverso, ma poi potrebbe animarsi all'indietro. Se si torna indietro e il colore del pulsante potrebbe cambiare in base a una preferenza. E ci sono tutte queste cose che ora sono interattive e hanno dipendenze e cose del genere.
Joey Korenman:
È questo il motivo per cui esiste un problema di traduzione tra gli strumenti che utilizziamo per il motion-design e quelli per la codifica?
Zack Brown:
Esattamente, sì. E non c'è uno strumento del genere con l'avvertenza di mettere una spilla, non c'è uno strumento del genere oggi che permetta di farlo. Una volta ce n'era uno. Questo è esattamente ciò che Flash permetteva di fare, ancora una volta, mescolando design e codice, si poteva andare al frame 20 e impostare un piccolo flag nel codice e ora, qualunque sia il pulsante, è rosso invece che blu. After Effects non lo fa e After Effects è davvero tuttoche è rimasto nel mondo degli strumenti per il motion design in questi giorni.
Zack Brown:
Ma in realtà, negli ultimi cinque, dieci anni, da quando Flash è effettivamente morto, il mondo ha sentito questo vuoto, perché aveva un monopolio e quando un monopolio muore, ci troviamo in una situazione strana. Ha senso tutto questo?
Joey Korenman:
Sì, no, è vero. In realtà, prima di dedicarmi completamente al motion design, mi sono dilettato anche con Flash e mi piaceva molto il fatto che si potessero usare gli action script e creare un sacco di interattività mentre si progettava, ed era davvero una cosa fantastica da usare.
Joey Korenman:
Ad essere sincero, non ho mai capito bene perché sia morto in modo così nobile. Hai qualche idea su cosa l'abbia ucciso? E per tutti quelli che stanno ascoltando, Flash è ancora in circolazione. Ora si chiama Animate. Adobe l'ha ribattezzato e viene usato molto per l'animazione di celle, per l'animazione tradizionale, ma non è più usato come una volta.
Joey Korenman:
Sono curioso di sapere perché, Zack.
Zack Brown:
Allora, l'inizio della fine di Flash è stato intorno al 2005, quando Adobe ha acquisito Macro Media per 3,4 miliardi di dollari e quel denaro era essenzialmente tutto per Flash. Macro Media aveva altri prodotti nella sua linea, come Dream Weaver e Fireworks, ma Flash era davvero, era il gioiello della corona. Funzionava su tutti i dispositivi, a quel punto serviva la metà degli annunci pubblicitari di Internet, era il punto di riferimento per i clienti di Internet.piattaforma per la creazione di giochi.
Zack Brown:
Se ricordate i giochi in flash, i cartoni animati in flash, era la spina dorsale, la spina dorsale dell'infrastruttura di YouTube e, in generale, dei video sul web. È facile dimenticare tutto questo, ma Flash è stato un grande successo, e quindi Adobe ha pagato giustamente una somma enorme per questo e poi, è arrivato il cellulare. L'iPhone è stato una sorta di fiore all'occhiello per la rivoluzione dei cellulari, degli smartphone e il cellulare ha ucciso Flash con l'aiuto diSteve Jobs e l'intero modello di business dell'app store, una parte gigantesca dei cui ricavi proviene dai giochi.
Zack Brown:
E i giochi gratuiti sul web sono certamente in contrasto con i giochi a pagamento attraverso l'app store e il suo gatekeeper. E ci sono anche una serie di ragioni tecniche. La base di codice a questo punto aveva 15 anni, era passata attraverso tutti i tipi di leader diversi e attraverso l'acquisizione, alcune persone non sono rimaste. Nessuno conosceva veramente la base di codice.
Zack Brown:
Questo, unito al DNA di Adobe e a quella che definirei un'efficace cattiva gestione di Flash, è stata la tempesta perfetta che ha portato alla sua morte.
Joey Korenman:
Wow.
Zack Brown:
Sì.
Joey Korenman:
C'è uno strano parallelismo tra questa storia e altre simili: aziende che vengono acquisite e poi lentamente soffocate. C'era un'applicazione di compositing davvero potente e straordinaria, chiamata Shake, che era una specie di precursore di Nuke, che oggi è lo strumento standard per gli effetti visivi.
Joey Korenman:
Apple ha comprato Shake e poi, in un certo senso, è morto sul nascere e c'è stata molta rabbia anche per questo, quindi non è una cosa insolita. Va bene, la mia prossima domanda, su cui credo che abbiamo ballato abbastanza, è che la tua azienda, Haiku, costruisce uno strumento chiamato Animator e lo approfondiremo, ma solo per dare a tutti una visione d'insieme, cos'è Animator? E qual è l'obiettivo?problema che sta cercando di risolvere?
Zack Brown:
Certo. Credo che After Effects sia un buon punto di riferimento. After Effects è stato rilasciato per la prima volta 26 anni fa, nel 1993, quindi è uno strumento di motion graphics specifico per il cinema e la TV, e lo è sempre stato. Immaginate per un attimo se After Effects fosse stato costruito da zero, ma con l'obiettivo di progettare il motion design per il software e le interfacce utente invece che per il cinema.
Zack Brown:
E ci sono alcune differenze fondamentali tra questi media, come l'interattività, l'integrazione con le basi di codice, il controllo delle versioni. Questi aspetti non esistono nel mondo del cinema e della televisione.
Joey Korenman:
Giusto.
Zack Brown:
Molti utenti ci hanno paragonato all'analogia tra Sketch e Photo Shop e Haiku Animator e After Effects: è più recente, è stato costruito appositamente per l'animazione dell'interfaccia utente, è più pulito e più accessibile, soprattutto per chi si avvicina per la prima volta al motion design.
Joey Korenman:
Perfetto. Sì, penso che sia la descrizione perfetta e ci ho giocato ed è molto divertente da usare e chiunque usi After Effects capirà subito come funziona. C'è un altro lato di Animator che non esiste in After Effects e voglio parlarne, ma voglio sentire come hai costruito questa applicazione, perché penso che tu ed io ci siamo incontrati un anno fa ae all'epoca l'app era in versione beta e voi avete aggiunto molte funzioni e l'avete sviluppata.
Joey Korenman:
Sono sempre curioso di sapere come si fa a fare una cosa del genere, a costruire un software così complicato. Quindi, forse potresti parlare di come hai sviluppato le versioni iniziali dell'applicazione. Sei stato tu a codificarla? Hai avuto un team, come ha funzionato?
Zack Brown:
Anche in questo caso, l'intera storia risale a quell'agenzia e a colmare il divario tra design e codice e a capire il problema. In realtà, questo è l'inizio della storia di Haiku. Credo che la mia carriera personale abbia orbitato intorno a questo problema in alcuni punti diversi, in diversi lavori. E lungo la strada, ho incontrato il mio co-fondatore. Abbiamo lavorato insieme in una precedente azienda e anche lui ha visto il problema e così, abbiamo deciso die ci siamo costituiti nel giugno 2016.
Zack Brown:
I primi sei mesi sono stati piuttosto sperimentali, lui era a Philadelphia, io a SF, quindi solo videochiamate, chat vocale, Slack, controllo delle versioni e avanti e indietro per capire qualcosa. E c'è voluto più di un anno prima di ottenere qualcosa di utile per tutti. Perché è iniziato tutto in un ambiente di laboratorio scientifico: "E se facessimo questo, e se facessimo quest'altro?".dell'inizio, solo un sacco di sperimentazione, forza bruta, esplorazione, e poi abbiamo portato il nostro primo investimento verso la fine del 2016.
Zack Brown:
A quel punto abbiamo iniziato a pensare: "Dobbiamo monetizzare questa cosa, creiamo un'utilità reale, troviamo un caso d'uso che interessi alle persone e che alla fine pagherà".
Joey Korenman:
Una delle cose che mi incuriosiscono di più è il fatto che siete stati accettati nel programma Y Combinator, e non so se tutti gli ascoltatori sanno di cosa si tratta. Tutti nel mondo della tecnologia conoscono Y Combinator, ma nel mondo del motion design sono sicuro che ci sono persone che non lo conoscono.
Joey Korenman:
Può spiegare cos'è Y Combinator e perché ha scelto di partecipare a questo programma?
Zack Brown:
YC, Y Combinator, è un acceleratore di startup, che si occupa di intervistare le startup e i fondatori che ritiene promettenti e poi, a quelli che accetta, fornisce risorse e assistenza, essenzialmente per la raccolta di capitale di rischio e il gioco delle startup. E investe anche un po' di denaro, ma non si prende YC per i contanti, perché è un po' caro.una fetta di capitale proprio.
Zack Brown:
Al giorno d'oggi esistono molti acceleratori di startup, ma YC è uno degli originali, se vogliamo, gli OG.
Joey Korenman:
Giusto.
Zack Brown:
Ho qui un elenco di altre società in portafoglio, tra cui Air Bnb, Stripe, Cruise, Dropbox, Coin Base, Instacart, Reddit, Twitch TV e l'elenco continua. Sono in corso tutte queste IPO. YC non si lamenta affatto.
Joey Korenman:
Hanno un buon occhio per i talenti.
Zack Brown:
Hanno anche un marchio e quindi hanno un sacco di persone che fanno domanda e, notoriamente, il loro tasso di accettazione è inferiore a quello di Harvard, tipo quattro volte inferiore. Quindi, passare attraverso YC ti dà un timbro simile di credenziali, come oh YC dice che sono ok, quindi ovviamente sono ok.
Zack Brown:
Le credenziali sono sempre valide e, almeno nella Silicon Valley, è così che funziona, credo.
Joey Korenman:
Sì, è davvero molto bello. Voglio sentire anche io l'esperienza, ma voglio scavare un po' di più, perché è una cosa a cui ho pensato e ho parlato con altri imprenditori e School of Motion, per ora, non ha investitori. È stata completamente finanziata, ma ci ho pensato.
Joey Korenman:
Ho parlato con gli investitori e voi soppesate i pro e i contro di questa scelta, quindi sono curioso di sapere cosa ha fatto pendere l'ago della bilancia per far sì che valesse la pena di cedere capitale proprio per raccogliere capitali invece di avviare l'attività in proprio.
Zack Brown:
In parte risale ai primi tempi del laboratorio scientifico sperimentale, in cui cercavamo di inventare qualcosa di rivoluzionario e, quando siamo stati ammessi a YC, non avevamo un percorso verso la redditività. Non avevamo ancora monetizzato. Abbiamo monetizzato solo un anno dopo essere stati ammessi a YC, quindi semplicemente non c'era un percorso verso il bootstrapping, non con quella traiettoria attuale.
Joey Korenman:
Giusto.
Zack Brown:
Avevamo raccolto un po' di capitale da amici e parenti e da fondatori, quindi avevamo già raccolto un po' di VC, ma stavamo cercando di capire se volevamo cambiare strada e concentrarci su qualcosa di poco impegnativo che facesse soldi o se volevamo raccogliere un po' di più e puntare a qualcosa di più grandioso o ambizioso fin dall'inizio, il che è musica per le orecchie dei VC.
Zack Brown:
Sì, nel momento in cui siamo entrati in YC, avevamo circa cinque mesi di margine di manovra, il che potrebbe essere sufficiente per raccogliere un seed round nella Valley, ma è difficile da vendere quando si ha una tecnologia da fiera della scienza e non si dispone ancora di capitale. Quindi, abbiamo scelto YC per questo, oltre che per una serie di altre ragioni, e personalmente sono stato molto soddisfatto dell'esperienza.
Joey Korenman:
Sì, mi piacerebbe sentire parlare di questa esperienza, perché è una specie di leggenda. YC è l'acceleratore di startup più famoso al mondo e Paul Graham è un genio e Paul Graham, per chiunque stia ascoltando e non conosca questo nome, è uno dei fondatori di YC tra le altre cose e ha un blog incredibile con un sacco di saggezza.
Joey Korenman:
Ma sì, cosa fa questo programma per un'azienda come la vostra?
Zack Brown:
Devo dire innanzitutto che YC, quando siamo entrati, alla fine del 2017, all'inizio del 2018, è molto diverso da quello che era nel 2005, quando hanno iniziato. Quando hanno iniziato, è proprio come le coorti leggendarie quando hanno iniziato, le Twitch TV e i Reddit e gli Air Bnb e oggi, è così ma in scala maggiore.
Zack Brown:
Anche YC si considera una startup e quindi il suo obiettivo è quello di scalare. E quando siamo passati noi, c'erano tra le 100 e le 200 aziende nel gruppo, contro le 10 o giù di lì del primo gruppo. Un'esperienza molto diversa, molto diversa. Detto questo, ho frequentato una grande università e una delle cose che ho imparato all'università, un po' a fatica all'inizio, è che ci sono una tonnellata di aziende che non hanno mai avuto un'esperienza simile.risorse disponibili, ma se ci si piega indietro invece di entrarvi, se ci si piega indietro non si ottengono quelle risorse.
Zack Brown:
E qualcun altro le otterrà e voi non farete altro che tirare avanti. Tuttavia, se raggiungete le risorse e le cogliete...
Zack Brown:
Tuttavia, se si raggiungono e si sfruttano in modo proattivo le risorse di una grande università e di un grande Y Combinator, si ottiene molto. E credo di avere 30 anni ora. Voglio fare qualcosa nella mia vita e sono stato fortunato ad avere la consapevolezza, credo, che è meglio appoggiarsi e cogliere queste risorse. E come risultato, sento che abbiamo ottenuto molto da questo, cose come la rete,Ho sorvolato sulla rete, ma è una parte davvero importante. Tra quelle circa 200 aziende, siamo stati in grado di creare molte connessioni e persone con cui mi tengo in contatto ancora oggi. E la rete YC è anche, gestiscono questa comunità interna in cui è possibile contattare qualsiasi altro fondatore di YC. Elenca l'indirizzo e-mail e il numero di telefono. Quindi, se volevo, potevoSe avessi un buon motivo per farlo, potrei visitare il fondatore di Dropbox per Airbnb, ma quella rete è un pezzo importante di YC.
Joey Korenman:
Non voglio paragonare School of Motion a YC, ma abbiamo una rete di alumni che è diventata probabilmente la parte più preziosa dell'esperienza di frequentare uno dei nostri corsi. È stata una cosa inaspettata all'inizio, quanto preziosa si sia rivelata. Per me ha molto senso. Entriamo quindi nel meritoE per tutti coloro che stanno ascoltando, ci collegheremo al sito web di Haiku e potrete scaricarla. Credo che al momento ci sia una prova gratuita di 14 giorni di Animator e ci sono dei tutorial sul sito. Un sacco di ottime informazioni.
Joey Korenman:
Ci sono altre applicazioni per l'animazione in fase di sviluppo e sembra che ci siano molte applicazioni in generale, sia web che native, per cercare di semplificare il web design e il design delle applicazioni. Qual è l'aspetto unico di Animator?
Zack Brown:
La particolarità di Animator è che è pensato per le basi di codice. È un motion design che viene spedito in produzione. Quindi il codice è un cittadino di prima classe, sia all'interno dell'applicazione, come il file sorgente, se si pensa a un .PSD per Photoshop, come quel tipo di file sorgente. Il file sorgente di Animator è codice vero e proprio, codice modificabile a mano. Quindi ogni volta che si sposta qualcosa sul palco o sul set, il codice viene modificato.di un Tween, in realtà legge e scrive codice mentre lo fa, e questo è molto intenzionale, in modo che sia facilissimo da integrare con le basi di codice.
Joey Korenman:
Lasciate che vi chieda questo. Perché, e non sono super sofisticato in materia, quindi perdonatemi se lo scrivo male, ma in After Effects abbiamo Bodymovin, che prende il vostro comp di After Effects, e ci sono un sacco di avvertenze quando lo si usa, ma in generale, se si utilizzano i livelli di forma e cose del genere, sputa fuori un file JSON. Quindi, in che modo questo è diverso da quello che Bodymovin èfare?
Zack Brown:
Sì. Ricordo quando Lottie è uscito nel 2017, quando avevamo già preso una sorta di traiettoria di motion design per Haiku, all'epoca Haiku per Mac, ora Haiku Animator. L'ho sempre trovato di grande ispirazione. Ho qualche remora personale nei confronti di After Effects, come puoi immaginare, soprattutto come strumento per le UI, per i software. Bodymovin e Lottie sono stati progettati intorno a questo,Il programma è stato costruito sulla base del reverse engineering del file sorgente di After Effects, per cui il blob JSON che si ottiene da Bodymovin è la forma del formato del file di After Effects.
Zack Brown:
Personalmente, quando immagino il design del movimento per il software, come hai già detto tu, Joey, l'interattività è fondamentale, come la capacità di cambiare colore o di rispondere al tocco, o di passare da questo stato a quello in un modo diverso rispetto alla transizione da quello stato a quello successivo. Anche se questo richiede logica. In termini informatici, richiede la completezza di Turing. E tu semplicementenon si può ottenere da After Effects.
Joey Korenman:
Giusto.
Zack Brown:
Giusto. Quindi la differenza più grande è che abbiamo avuto il privilegio e l'incredibile onere di costruire lo strumento di creazione da zero, il sostituto di After Effects, se vogliamo. Questo ci ha permesso di progettare un formato di codice che fosse pensato per il codice invece di essere adattato ad esso.
Joey Korenman:
È un'ottima spiegazione. Avendo usato Animator per un po', mi ricorda molto il modo in cui funziona Flash. È davvero interessante. Ho notato che state usando la stessa terminologia di Flash, Tween e stage e cose del genere. In After Effects usiamo parole diverse. Ma avete essenzialmente un comp, e avete dei livelli, e potete inserire dei pezzi di codice.su quei livelli che li inducono a reagire a determinate cose e a rispondere al layout, e si possono impostare cose reattive. È davvero molto bello. Quindi, quali sono alcuni... forse può farci qualche esempio di come si può usare uno strumento come Animator per fare cose che sono difficili da fare in altri modi.
Zack Brown:
Ancora una volta, partendo dalla premessa che l'obiettivo di Animator è quello di colmare il divario tra motion design e codice, il vero potere che avete a portata di mano è il codice, come la magia del codice. Animator ha quindi alcuni modi in cui potete codificare all'interno dell'applicazione. Anche questa è una differenza fondamentale rispetto ad After Effects. Ci sono tre modi in cui potete codificare. Abbiamo questi costrutti chiamati espressioni, che sono molto utili per la creazione di un'applicazione.Sono essenzialmente funzioni di un foglio di calcolo di Excel. Così come in Excel si può fare la somma delle celle da A3 ad A14 scrivendo uguale a somma [inaudibile 00:27:15], questa bella espressione, in Animator si può fare la stessa cosa, ma rispondendo, ad esempio, alla posizione del mouse o a un tocco, a un tap. Ha senso?
Joey Korenman:
Sì, ha molto senso.
Zack Brown:
Ok. E poi l'altro modo, che è stato pensato per essere semplice, ma anche molto potente. Incanala la programmazione funzionale e reattiva. E si possono applicare queste espressioni a qualsiasi proprietà. Quindi posso fare in modo che la posizione X di uno dei miei elementi sia mappata sul mouse X dell'utente, e che la posizione Y sia mappata sul mouse Y dell'utente, e che la scala sia come una funzione sinusoidale, ad esempio, della posizione della mia timeline e del mouse Y dell'utente, seCosì potete iniziare a creare questi tipi di interazioni davvero facili da scrivere, ma davvero potenti. E di sicuro, questo tipo di potere creativo è ciò in cui Flash eccelle davvero, davvero tanto, e ciò che manca al mondo, giusto?
Joey Korenman:
Sì. E che linguaggio usi quando codifichi all'interno di Animator?
Zack Brown:
JavaScript.
Joey Korenman:
Oh, perfetto. Ok, quindi se siete abituati alle espressioni di After Effects, sono sicuro che alcune parti sono identiche. E presumo che ci siano alcune cose personalizzate che avete esteso in JavaScript per aggiungere funzioni specifiche di Animator?
Zack Brown:
Esattamente, sì.
Joey Korenman:
Sto cercando di pensare a un caso d'uso comune per questo. Per esempio, se volete un comportamento sul vostro sito web di un personaggio e volete che le pupille degli occhi vi seguano, come se seguissero il mouse. Potete creare una bozza in After Effects e poi un ingegnere dovrà capire come farlo. Ma in Animator, potete costruire questo comportamento e poi passarlo a voi?
Zack Brown:
Il motore di rendering utilizzato all'interno di Animator è open source, prima di tutto, e in secondo luogo è lo stesso motore di rendering che viene utilizzato quando si esegue sul web, la stessa cosa. Quindi la modalità di anteprima è letteralmente la modalità di anteprima. È la stessa cosa. E questo si riduce al fatto che il file sorgente è codice. Quando si scrive un'espressione, qualsiasi cosa si scriva sarà valutata esattamente inall'interno di Haiku Animator come sul sito web.
Joey Korenman:
Una delle maggiori differenze tra Animator e altre applicazioni del genere e After Effects è che in After Effects si può animare quello che si vuole, ma la persona che lo vedrà non dovrà assistere al rendering. Quando lo si fa dal vivo, come avviene sul web o in un'applicazione, è dal vivo. Quindi sono curioso di sapere comeCome vi comportate, in generale, anche come sviluppatori di app, con il fatto che i vostri utenti potrebbero voler animare cose che non possono accadere in tempo reale? È un problema?
Zack Brown:
Quello che si crea quando si crea qualcosa in Haiku Animator è un software. Punto e basta, quello che si crea è un software. E lo si fa attraverso una combinazione di strumenti visivi e, se si vuole, di codice. Ma il risultato finale è un software. Ora, quando si crea un software, una delle preoccupazioni intrinseche di cui si deve essere consapevoli sono le prestazioni. E se uno sviluppatore va escrivere un ciclo for che blocca il disco AIO in modo tale da bloccare il computer, è qualcosa che un programmatore dovrebbe capire durante i test e che dovrebbe correggere in modo che non ci sia un grosso bug di perfezione nel suo software. Esattamente lo stesso vale per Haiku Animator. Si possono animare 5.000 punti che rimbalzano e si vedrà che rallenta. E come creatore di software, è sua responsabilità assicurarsi che funzioni correttamente.
Joey Korenman:
Sì, è una cosa a cui non devi mai pensare. Cioè, quando costruisci qualcosa in After Effects devi pensare se ci vorrà troppo tempo per il rendering, ma una volta che è stato renderizzato, è fatto. È un modo completamente diverso di pensare. È davvero interessante.
Zack Brown:
Detto questo, Lottie eredita lo stesso problema perché viene interpretato in fase di esecuzione. Quindi se avete 1.000 punti che rimbalzano in After Effects, strisceranno anche in Bodymovin.
Joey Korenman:
Giusto. Sì, è molto, molto interessante. Ok. Sto cercando di trovare un altro esempio. E una delle cose che ricordo di aver fatto in Flash era che si potevano avere questi elaborati stati di rollover. Diciamo che stiamo facendo questo aggiornamento del design proprio ora su School of Motion, e non so quando uscirà questo episodio, ma se lo state ascoltando, potrebbe già essere suMa diciamo che stiamo rifacendo l'aspetto delle miniature del nostro sito che mostrano i post del blog, i tutorial e i podcast, cose del genere.
Joey Korenman:
Supponiamo di volere un elaborato stato di rollover, in cui il titolo dell'oggetto cresce un po', e poi l'immagine stessa si ridimensiona entro i limiti della miniatura, e poi questo gradiente di sovrapposizione, l'opacità di esso si trasforma. E poi quando si passa il mouse, qualcosa di leggermente ... quando si toglie il mouse, scusate, succede qualcosa di leggermente diverso. Il modo in cui ioL'idea che avevo in mente era quella di prototiparlo in After Effects e poi passarlo agli sviluppatori, magari usando qualcosa come Inspector Spacetime, in modo che avessero le mie curve di facilitazione e cose del genere, e poi dovessero implementarlo. Quindi, se decidessi di farlo in Animator, come sarebbe il flusso di lavoro? Come dovrei inserire la mia opera d'arte e se ci sono gli strumenti per farlo.e farlo funzionare?
Zack Brown:
Per ottenere l'espressività illimitata che si desidera, quando passo il mouse qui, dovrebbe accadere questo. Ancora una volta, forse sono della vecchia scuola, forse sono solo un bisbetico, ma da tutte le mie conoscenze informatiche e quant'altro, credo che il codice non stia scomparendo.
Joey Korenman:
Sono d'accordo con lei.
Zack Brown:
Il modo in cui si può fare in Haiku Animator è quello di utilizzare una linea temporale. È molto simile a Flash. Si utilizza una linea temporale, si hanno diverse regioni che hanno le diverse azioni. Quindi i fotogrammi da 1 a 80 potrebbero essere il mouse over, e i fotogrammi da 81 a 120 saranno il mouse out. Seguiamo un modello a componenti con Haiku Animator, quindi ciò che si crea è avvolto come un componente, supporto di prima classe perReact, Angular e View. Si spera che ne stiate usando uno sul vostro...
Joey Korenman:
Stiamo usando React, sì.
Zack Brown:
Ok. Supportiamo anche JavaScript vanilla se volete andare al sodo, per così dire. E così otterrete un componente React da Haiku Animator che vi dà un riferimento all'API di Haiku Animator dove potete, da React, dire al passaggio del mouse, al passaggio del mouse su React, scorrere la timeline da zero a 80, o andare a riprodurre il fotogramma zero, o andare a riprodurre il fotogramma 81. Quindi lo sviluppatore èin realtà è lui a tirare le fila alla fine della giornata, ma è lei a preparare la scena, per così dire, usando Animator.
Joey Korenman:
Va bene, questo potrebbe essere molto complicato, ascoltatore, quindi mi scuso, ma sono davvero curioso di questo e voglio davvero capirlo. Quindi questo ha perfettamente senso per me, e se qualcuno sta ascoltando ha usato Flash, questo è esattamente ciò che si farebbe. Si direbbe che al passaggio del mouse, si va al fotogramma 20 e si riproduce fino al fotogramma 40, all'uscita del mouse o qualunque sia. E si diceIn pratica, tutte le animazioni sono su una linea temporale e vengono riprodotti diversi intervalli di fotogrammi. Ora, la mia domanda è, e a proposito, chiederò ai miei sviluppatori di ascoltarlo, perché lo capiranno molto meglio di me e avranno un sacco di idee interessanti.
Joey Korenman:
Ma ecco la mia domanda, Zack: se sviluppassi un componente di questo tipo, che è l'aspetto di una miniatura e come si presenta, e presumo che lo sviluppo visivo avvenga in qualcosa come Sketch, e poi lo portassimo in Animator, animerei il modo in cui voglio che il componente si comporti al passaggio del mouse, e forse al click succede qualcos'altro. Ma poi l'opera d'arte vera e propriaQuindi non si crea ancora il problema di come lo sviluppatore debba immergersi nel codice e smontare il tutto per inserire la miniatura giusta nel posto giusto, oppure c'è un modo migliore per farlo e rendere il processo più semplice?
Zack Brown:
Sì. Ok. Quindi, imparando da Flash, ancora una volta, mi sento un po' un disco rotto, ma una delle cose sbagliate di Flash era una sorta di scatola nera, un vicolo cieco, dove una volta che hai Flash, per esempio nel tuo sito web, non puoi più tornare indietro. Quella scatola di pixel appartiene a Flash, e Dio ti fulmini se vuoi provare a cambiare qualcosa lì dentro. Devi aprire l'IDE di Flash e fare alcune modifiche eaggiungere un po' di logica, gestire le loro API per il passaggio dei dati, eccetera, ed era un gran casino.
Zack Brown:
In Haiku Animator, abbiamo una nozione di segnaposto in cui, durante la creazione, si può dire: "Ecco un rettangolo all'interno di questo super rettangolo che sto creando in Haiku Animator". Questo rettangolo appartiene allo sviluppatore. Non ho idea di cosa ci sarà qui dentro, ma posso animarlo. Si chiamano trasformazioni affini, scala, posizione, rotazione, obliquità, tutte queste trasformazioni. È possibile animarlo.e poi, al momento del codice, lo sviluppatore può passare il contenuto. In React, quindi, questo sembrerebbe un componente figlio, o in HTML, è qualcosa all'interno di un div. Questa è la nostra soluzione per i contenuti dinamici all'interno di Haiku Animator, e ciò che appare allo sviluppatore finale è direttamente React. Non ci sono salti mortali o qualcosa di speciale. Si passa semplicemente il contenuto come figlio di Haiku Animator.Componente React.
Joey Korenman:
Ok, una delle cose che stavo leggendo nella documentazione e altro, è che... perché abbiamo fatto un po' di questo sul nostro sito web. Abbiamo delle animazioni che sono più o meno integrate. Ma poi abbiamo alcune piccole animazioni quando si passa il mouse su qualcosa che abbiamo prototipato, e cose del genere. E il problema è che se decidiamo di cambiare il nostro sito...Non è come copiare, incollare, ora è aggiornato. Quindi, come vi comportate, e non so se sto usando questo termine correttamente, ma con il controllo di versione, quando avete una nuova versione dello stato di passaggio del mouse sulle nostre miniature? C'è un modo più semplice per implementarlo ora che avete trovato?
Zack Brown:
Sì, infatti. Questo è stato uno dei punti chiave... di nuovo, tornando ai tempi in cui lavoravo in agenzia, e vedendo quanto sia difficile non solo implementare il design nel codice, ma anche iterare. Probabilmente è qui che si concentra l'80% dello sforzo, è l'iterazione. Ora hai implementato questo design come codice, ora c'è un nuovo design che in realtà cambia un po' i requisiti, e ora ciò che era stato progettato nel codice deve essereTutti i problemi che derivano dall'iterazione, ecco dove risolvere il flusso di lavoro, credo che questo sia il Santo Graal per risolvere il flusso di lavoro.
Zack Brown:
Il nostro approccio con Haiku Animator è ancora una volta basato sul modello a componenti, i componenti sono soggetti a versioni. Quindi, se si crea un progetto in Haiku Animator e si preme il pulsante di pubblicazione, si ottiene la versione 0.0.1 di quel componente e lo si può rilasciare in una base di codice. Ci integriamo con NPM per il mondo del web, per tutti gli sviluppatori del mondo del web che hanno familiarità con questo. Quindi, in realtà, basta soloNPM installa il componente Haiku Animator alla versione 0.0.1 e il gioco è fatto.
Zack Brown:
Ora, l'animatore, il motion designer o lo sviluppatore, chiunque utilizzi Haiku Animator, può tornare indietro e apportare le modifiche successive, aggiornare le risorse da Sketch, per esempio, che passeranno ad Haiku Animator, e pubblicare di nuovo, e ora si ha la versione 0.0.2. E tutto ciò che si deve fare dal codice è aggiornare il componente alla versione 0.0.2 e si è pronti. Ecco come abbiamo risolto questo problema.Il problema dell'iterazione si risolve affidandosi a una combinazione di controllo delle versioni e di gestori di pacchetti. È tutto piuttosto tecnico e un modo carino per riassumerlo è che ci integriamo con gli strumenti di sviluppo nello stesso modo in cui ci integriamo con gli strumenti di progettazione, come Sketch e Photoshop, Illustrator.
Joey Korenman:
Quindi, se ho capito bene, funziona come Flash, ma è molto più facile da implementare, aggiornare e utilizzare su un'intera applicazione e su un'intera piattaforma. Quindi sono davvero entusiasta di giocarci di nuovo, perché questo è davvero, come ho detto, il momento perfetto per noi. E sono davvero entusiasta, spero che molti di voi che stanno ascoltando scarichino la demo di 14 giorni. seSe fate questo tipo di lavoro, provate questa applicazione, perché sarebbe davvero molto bello vedere cosa riescono a creare alcuni motion designer davvero bravi. E stavo per chiedertelo, perché ho avuto sempre più conversazioni di questo tipo.
Joey Korenman:
È quasi come se questi due mondi stessero iniziando a fondersi: c'è il motion design e c'è l'UX. Entrambi si stanno muovendo l'uno verso l'altro, e ora c'è una sovrapposizione tale da rendere praticabili strumenti come questo. E tu sembri unico, perché sei arrivato a questo punto dall'intersezione. Stavi prototipando e implementando queste cose per i clienti. Quindi sei un animatore? Come hai fatto a creare un'animazione?Perché l'ho aperto la prima volta senza sapere nulla, e ci sono i fotogrammi chiave e un editor di grafici, come un editor di curve di animazione, che è davvero bello da usare, e un sistema di compositing basato sui livelli, e tutto ha avuto un senso. Quindi come hai deciso quali funzioni inserire?
Zack Brown:
Quindi direi che sono un animatore per circostanza.
Joey Korenman:
Mi piace molto.
Zack Brown:
Ho avuto qualche esperienza quando ero più giovane, di nuovo quella parola con la F, Flash. E così l'idea di cornici e tempistiche chiave, una volta [inaudibile 00:42:03] da parte del mio...
Zack Brown:
L'idea dei fotogrammi chiave e delle linee temporali, una volta [inaudibile 00:42:04] nella mia giovane mente, mi è rimasta impressa nella mia mente di adulto. La risposta breve è che gli utenti, i nostri utenti sono gli esperti e, come sapete, è saggezza comune nel mondo della creazione di prodotti capire cosa vogliono i vostri utenti e costruirlo. Così, l'editor Curve, per esempio, l'abbiamo lanciato di recente. Il prodotto esiste da quando è stato creato.Nel 2006 e nel 2019 abbiamo finalmente lanciato l'editor di curve dopo le richieste, le richieste e le richieste degli utenti. La mascheratura è una funzione che attualmente non supportiamo e che gli utenti hanno richiesto a gran voce. Quindi, mi aspetto che arrivi tra non molto.
Zack Brown:
È così che lo scopriamo: gli esperti ce lo dicono e noi ne prendiamo atto.
Joey Korenman:
Giusto, perché ci sono molte cose che gli utenti di After Effects fanno di continuo: usare un livello come maschera per un altro, avere dei tracciati che hanno una linea che si anima lungo il percorso. Fare cose del genere era... Francamente, anche gli strumenti di After Effects per fare alcune di queste cose sono molto vecchi e avrebbero bisogno di un po' di aggiornamento.c'è l'opportunità di parlare con gli utenti e scoprire esattamente cosa renderà la loro vita più facile.
Joey Korenman:
Che tipo di utenti si trovano a lavorare con Animator? Si tratta di motion designer o di UX designer che hanno bisogno di animazioni?
Zack Brown:
Quindi, come se Sketch fosse più accessibile di Photoshop o Illustrator, abbiamo scoperto che c'è un intero segmento di utenti che sta imparando il motion design, magari utilizzando per la prima volta un paradigma di timeline a keyframe, e che con Haiku Animator si trova a meraviglia. Mentre sviluppavamo l'applicazione, abbiamo anche sviluppato una documentazione, come un centro di assistenza, e ogni genere di cose.Abbiamo dei tutorial e quindi delle buone risorse per chi si avvicina per la prima volta al motion design.
Zack Brown:
Stiamo anche vedendo motion designer esperti che apprezzano il valore aggiunto della spedizione alla produzione o il valore aggiunto di "Aggiungi un po' di codice", cosa che non si può fare in After Effects. Fondamentalmente si tratta di un punto unico nel mercato per questa soluzione, e tutto risale al vuoto di Flash.
Zack Brown:
Quindi sì, e l'altra parte della domanda riguarda le aziende di tutte le forme e dimensioni, dalle Fortune 5 alle agenzie e ai freelance, e vediamo che anche gli sviluppatori lo usano. O come gli unicorni del front end... Gli unicorni ne traggono sicuramente il massimo perché hanno l'intera gamma di funzioni di design e di codice, ma in realtà lo usano un po' tutti.
Joey Korenman:
Volevo chiederti perché molti dei nostri ascoltatori e dei nostri studenti sono prima di tutto motion designer e alcuni di loro stanno iniziando a cimentarsi con After Effects Expressions. Ero quindi curioso di sapere se hai capito qual è la curva di apprendimento per gli animatori che iniziano a usare Animator, Haiku Animator. Inizierò a dire Haiku Animator per renderlo più semplice.
Zack Brown:
Va bene, sì.
Joey Korenman:
Si tratta di capire qual è la curva di apprendimento per gli animatori che lo utilizzano: quanto codice dovranno imparare e quali dovrebbero essere le aspettative della curva di apprendimento?
Zack Brown:
Se avete mai usato Excel o Google Sheets, probabilmente avete usato una formula di un foglio di calcolo e siete pronti per Haiku Animator. Far sì che qualcosa segua il mouse è facile come fare una somma in Excel ed è molto soddisfacente quando ci riuscite. Molto, credo sia una parola banale, ma è molto gratificante vederlo accadere.
Zack Brown:
Direi che se siete dei motion designer che vogliono iniziare a lavorare con il codice, questo è lo strumento perfetto per voi. Questo è in gran parte il motivo per cui l'abbiamo costruito. Ancora una volta, per colmare il divario tra motion design e codice. Quindi, tra le risorse che abbiamo a disposizione e l'editor di codice integrato nell'app, dovrebbe essere un buon modo per iniziare.
Joey Korenman:
Ottimo. Parliamo dello stato generale di questa cosa che chiamiamo... non so nemmeno come si chiama. L'intersezione tra UX e motion design. Animator sta risolvendo alcuni problemi che si protraggono da anni. Ricordo che in un episodio di questo podcast abbiamo avuto come ospiti Salih e Brandon di Airbnb, due dei ragazzi del team che ha creato Lottie.
Zack Brown:
Sì, adoro quei ragazzi.
Joey Korenman:
Sì, sono fantastici e sono stati fondamentali per farmi capire quali sono i punti dolenti e pensavo che Lottie arrivasse e li risolvesse tutti, ma ogni volta che ne parlo con qualcuno mi dice: "No, non sono ancora risolti". È ancora molto doloroso prendere il progetto del movimento e trasformarlo in codice.
Joey Korenman:
Il modo in cui gli animatori affrontano questo aspetto sembra davvero molto intelligente, e credo che tu abbia sicuramente ragione, ma quali sono gli altri aspetti che dovranno essere affrontati per rendere questo processo davvero snello ed efficiente? Sai, voglio dire che il mondo della codifica e quello del motion design sono piuttosto separati in questo momento.Si può costruire un componente, ma poi quella stessa persona sarà in grado di implementare quel componente? È una cosa a cui dovremmo puntare? Quindi sono curioso di sapere cosa ne pensi di quali altre cose potrebbero cambiare nei prossimi anni per rendere questo processo ancora migliore?
Zack Brown:
Se parliamo di una scala di diversi anni, credo che molte persone si concentrino su cosa faranno i progettisti tra x anni o su cosa faranno gli sviluppatori tra x anni. Su questa base, credo che sia fallace l'idea che tra qualche anno significherà la stessa cosa. Che sviluppatore significhi la stessa cosa oggi e tra qualche anno, giusto?
Zack Brown:
Questo è il motivo per cui mi piace pensare... Ho accennato prima, qualche minuto fa, a quello che state facendo con Haiku Animator: creare software. Non ci interessa se siete uno sviluppatore, né se siete un designer. State creando software. Tutto qui. Quindi la mia idea è che tra qualche anno non importa quale sia la vostra qualifica, ma che tutti noi costruiremo software insieme. E mi piace sottolineare doveQuesto è già avvenuto in un settore parallelo, quello dei videogiochi.
Zack Brown:
Chiunque abbia usato Unity 3D, chiunque sia stato coinvolto in quell'ecosistema, sta costruendo giochi, sta costruendo software. E se si usa Photoshop per creare le texture, che saranno mappate sui modelli 3D all'interno di Unity, in realtà si sta creando un software attraverso Photoshop. Si può tornare indietro e modificare la texture, che viene trasferita al software e inviata alla produzione.
Zack Brown:
Unity ha risolto il problema del flusso di lavoro tra motion designer... C'è un sistema di animazione a timeline e keyframe all'interno di Unity, editor di texture, rigger, modellatori 3D e sviluppatori. Tutti costruiscono la stessa cosa in Unity. E questo è ciò che penso sia il futuro della creazione di software, per così dire, e questo è il nostro punto di vista. Questo è il nostro campo di gioco, questo è il nostro mondo è il mondo della creazione.Non importa quale sia il vostro titolo o la vostra formazione, ma se facciamo bene il nostro lavoro unificando i flussi di lavoro, costruiremo tutti insieme un software.
Joey Korenman:
È bellissimo. Ho le lacrime agli occhi, amico. È stato davvero eloquente.
Joey Korenman:
Ok, ne ho parlato con Issara Willenskomer di UX in Motion, e attualmente è ancora il selvaggio west in termini di strumenti che le persone usano per eseguire l'animazione in un'applicazione. Ci sono milioni di modi diversi per farlo, e il modello che Animator sta usando forse risolve questo problema, ma c'è una sorta di standardizzazione? E ancora una volta, questa non è la mia esperienza, ma da quello che ho capito,Animator è un codice che... è essenzialmente come un componente react che, perdonatemi se mi sbaglio, è basato su javascript, giusto? È una sorta di versione di questo, giusto?
Zack Brown:
Sì, sì.
Joey Korenman:
Ok, bene. Quindi, funzionerà con... e se si sta costruendo un sito web o un'applicazione basata su questo, è fantastico, ma se non lo si fa? E se si usa... Vorrei avere un elenco di linguaggi di codifica. E se si usa Ruby o qualcosa del genere? C'è bisogno di una maggiore standardizzazione, immagino sia questo il punto? In generale, per far sì che questo problema scompaia, è ancora un problema?
Zack Brown:
Assolutamente sì. Quando parliamo di flussi di lavoro, la standardizzazione è il punto di partenza. Ecco perché Unity ha avuto successo, perché è diventato uno standard. Metà di tutti i giochi, metà. Letteralmente un gioco su due per qualsiasi piattaforma è costruito su Unity. In gran parte perché è diventato uno standard.
Zack Brown:
Ci sono alcuni standard che si stanno diffondendo. Lottie è un ottimo esempio nello spazio del motion design. E sapete, ho accennato ad alcune remore sul nucleo tecnico di Lottie, ovvero che il percorso per rendere Lottie interattivo è molto, molto ripido. Molto difficile. Proprio a causa del suo formato di base.
Zack Brown:
Quello che Lottie ha fatto molto bene è stato conquistare la consapevolezza e diventare uno standard e questo è stato un enorme passo avanti per il motion design come comunità e come mondo. Quindi Lottie è diventato uno standard. Siamo saliti su quel treno molto rapidamente. Haiku Animator è stato il primo strumento sul mercato, al di fuori di After Effects, a supportare l'esportazione di Lottie. Quindi, ancora una volta, nella nostra missione di riunire i flussi di lavoro, siamo statidi questo, di questo standard emergente.
Zack Brown:
Ma possiamo pensare alle animazioni in relazione al software in un paio di modi diversi. Uno di questi è il piccolo riquadro atomico, come una .gif o un video o un'animazione Bodymovin adatta a uno spinner di caricamento o a un elemento all'interno di un pulsante che, quando si fa clic sul pulsante, si avvia di nuovo, come uno spinner di caricamento. Inizia a girare.
Joey Korenman:
A destra.
Zack Brown:
Se aprite l'app di Airbnb, la casa di Lottie, aprite l'app di Airbnb e vedete questo piccolo logo di Airbnb che balla [inaudibile 00:52:57]. Un po' come... Quindi questa è una manifestazione del movimento nel software. L'altra è su scala più ampia, come l'animazione del layout.
Joey Korenman:
Giusto.
Zack Brown:
La standardizzazione non c'è stata. Questo è il selvaggio west. L'unico modo per fare questo tipo di animazioni è il codice, attualmente, e molti dei problemi sono dovuti al fatto che l'implementazione di un'animazione di layout nel web è molto diversa da quella per iOS. È molto diversa da quella per Android. È molto diversa da quella per la smart TV di Samsung. Quindi è un grosso problema,problema brutto e impegnativo.
Zack Brown:
Senza svelare troppo, il team di Haiku sta lavorando a qualcosa in questo campo, ma credo che valga la pena di identificare la distinzione tra questi due tipi di movimento nel software.
Joey Korenman:
Giusto. E lascia che ti chieda una cosa, perché in realtà la questione è emersa proprio stamattina, e credo che ci sia ancora molta confusione su cosa sia Lottie. Penso che dal lato degli sviluppatori sia molto più compreso che dal lato del motion design. Qualcuno nel nostro canale Slack stamattina ha detto: "Oh, guarda, Airbnb fa un'app di animazione" e io ho risposto: "No, non è così".
Joey Korenman:
Da quello che ho capito, Lottie traduce essenzialmente ciò che Bodymovin e anche l'animatore. Sai, il codice che viene fuori, lo traduce in iOS o Android. Quelle lingue. Quindi sembra che ciò che deve accadere per renderlo universale e facile è che ci sia una specie di traduttore universale, sai, ed è qualcosa che pensi che una società come Haikuo richiederà uno sforzo molto più universale da parte di Apple, Google e Samsung per creare un modo per ottenere un formato universale?
Zack Brown:
Prima di tutto, stiamo lavorando a qualcosa che al momento è top secret, avvolto nel mistero, ma che annunceremo presto: si tratta della standardizzazione delle piattaforme.
Joey Korenman:
A destra.
Zack Brown:
Personalmente, come startup da strapazzo, non credo che questo debba uscire da Google, ma certamente deve essere adottato da Google a un certo punto per diventare uno standard.
Zack Brown:
D'altra parte, uno scenario di successo, per come la vedo io, è una quota di mercato del 50%. Va bene. È quello che ha fatto Unity. Non stanno facendo male. Non riuscirai mai ad accontentare tutti. Soprattutto in una disciplina tecnica ... [inaudibile 00:55:47] era nel prodotto di crash di discipline tecniche di codificatori di vari linguaggi e progettisti che utilizzano vari strumenti di progettazione, e motion designer di varie strisce. MoltiplichiTutte queste diverse combinazioni, non riusciranno mai ad accontentare tutti con un solo standard o un solo strumento, e questo va benissimo. Ma qualcosa che possa avere una certa risonanza e risolvere il problema, come i problemi di base di un numero sufficiente di persone, per iniziare a diventare uno standard nel modo in cui lo è Unity, credo sia assolutamente possibile.
Zack Brown:
E non credo che questo debba provenire da una di queste grandi aziende. Sai, un parere di parte, ma personale.
Joey Korenman:
Sì. Molto bene. Sì, non vedo l'ora che tu sveli e salga sul palco con un dolcevita nero e mostri a tutti qual è questa caratteristica.
Joey Korenman:
Ho ancora un paio di domande da farle, lei vive a San Francisco, è nella bolla tecnologica, ha fatto l'esperienza di YC e tutto il resto.
Zack Brown:
Sicuramente.
Joey Korenman:
Immagino che lei sia in contatto con molte aziende tecnologiche. Sono sicuro che conosce persone delle grandi, come si dice adesso, FAANG.
Zack Brown:
FAANG, sì.
Joey Korenman:
... con due As, sì, sì. Sai, Facebook, Apple ...
Zack Brown:
Amazon.
Joey Korenman:
In realtà no, aspetta, sono Facebook, Apple, sì Amazon, poi Netflix e Google.
Zack Brown:
Penso che anche Microsoft sia lì, ma in realtà la Silicon Valley è [inaudibile 00:57:00].
Joey Korenman:
Ma comunque, i vostri utenti sono sia motion designer che UX designer e tutto quello che c'è in mezzo. Quindi sono curioso di sapere, dal vostro punto di vista, quali sono le prospettive di lavoro sulla costa occidentale per gli animatori che conoscono un po' di codice o per i coder che conoscono un po' di animazione. Dal mio punto di vista, in Florida, sembra che il settore sia in piena espansione,ma non sono lì e sono curioso di sapere cosa vedete sul campo.
Zack Brown:
L'idea dell'UX come elemento di differenziazione è davvero... è in piena adozione mainstream a questo punto, che attraversa la curva del baratro, se la conoscete. In ogni caso, è... tutti, e anche la loro madre e il loro nonno, sono consapevoli del fatto che la differenziazione dell'UX fa una grande differenza per le prospettive di successo di un'azienda. E il movimento è stato stabilito come una parte fondamentale di questo.
Zack Brown:
E tornando a Lottie e simili, rendere accessibile... rendere davvero facile inserire un'animazione deliziosa nella propria applicazione, è una cosa importante. Quindi sì, i motion designer che... I motion designer per il codice, i motion designer per le basi di codice, i motion designer per il software. Di sicuro, vediamo che questo settore è in piena espansione qui.
Joey Korenman:
Animator è già un'applicazione molto bella e davvero molto potente, e anche in questo caso ci collegheremo ad essa. Suggerisco a tutti di giocarci. Che facciate o meno questo tipo di lavoro ora, è molto probabile che lo facciate in futuro, perché credo che Zack abbia ragione: tutti, e anche la loro madre, vogliono le animazioni sul loro sito web e nelle loro app.
Joey Korenman:
Se si confronta Animator con After Effects, che credo abbia 25 o 26 anni, ovviamente ci sono molte funzioni che Animator non ha ancora, e non c'è una telecamera 3D o qualcosa del genere a questo punto.
Zack Brown:
Nessuna telecamera.
Joey Korenman:
Qual è la sua visione per il futuro dell'applicazione e, francamente, anche dell'azienda?
Zack Brown:
La nostra ambizione, quasi sciocca... Sai, dobbiamo puntare alle stelle. In parte è la Silicon Valley e l'appoggio di VC. In parte è solo ambizione cieca, per così dire. A livello personale, come a livello esistenziale, ma vedo l'opportunità di unificare design e codice. Giusto? Tutti i membri del nostro team lo fanno. Unificare questi flussi di lavoro per, ad esempio, raggiungere la quota di mercato che ha Unity.
Zack Brown:
La missione della nostra azienda è "Rivoluzionare la creazione di software unificando design e codice". Questo è il grande obiettivo di partenza e il modo in cui siamo arrivati sul mercato con il nostro primo prodotto è stato quello di riempire il vuoto lasciato da Flash nella progettazione del movimento da inviare alla produzione. E questo copre il primo caso d'uso del movimento nel software che ho menzionato. Quelle animazioni di tipo atomico. E Animator permette disi va oltre con cose come i segnaposto e l'API del codice.
Zack Brown:
Ma il problema non è solo questo e vediamo emergere tendenze interessanti come i sistemi di progettazione il cui scopo dichiarato è quello di sistematizzare la progettazione nello stesso modo in cui lo è il codice. Idee come il controllo di versione, idee come i componenti, e questo sta davvero iniziando a catturare l'attenzione. Soprattutto in ambito aziendale, dove le esigenze di grande coerenza hanno portato a spendere milioni e milioni di dollari.per la creazione di sistemi di progettazione, quindi potrebbe essere una parte del puzzle. È un aspetto che teniamo d'occhio.
Zack Brown:
Quello che i sistemi di design ignorano è lo stesso passaggio dal design al codice. Ora si può creare un sistema di design nel proprio strumento di design, e si ha questa meravigliosa nozione astratta di "Ecco la mia tipografia" e "Ecco i miei colori", ma si deve ancora implementare il tutto a mano nel codice. Ha ereditato lo stesso... che lo spazio ha ereditato lo stesso problema del passaggio del design tradizionale.Quindi è un problema che teniamo sotto controllo.
Zack Brown:
Sì, questo risponde alla tua domanda?
Joey Korenman:
Sì, penso che unificare, progettare e codificare sia un compito piuttosto ambizioso, ma non so. Dalle poche interazioni che ho avuto con te, Zack, penso che tu e il team siate all'altezza. E non vedo l'ora di vedere come andrà a finire.
Zack Brown:
Grazie Joey, grazie mille per avermi invitato oggi.
Joey Korenman:
Voglio ringraziare Zack per essere intervenuto e per aver parlato così bene delle sfide che animatori e sviluppatori si trovano ad affrontare quando si tratta di implementare l'animazione in un'applicazione. Animator è ancora abbastanza nuovo, ma è già un'applicazione molto bella da usare e credo che abbia la possibilità di cambiare il modo in cui animiamo gli oggetti che finiranno per essere interattivi su un computer.sito web o un'applicazione mobile o qualsiasi altra cosa.
Joey Korenman:
Assicuratevi di essere iscritti a questo podcast per rimanere aggiornati sulle novità del settore e sui nuovi strumenti come Animator. E se volete saperne ancora di più, andate su SchoolofMotion.com per ottenere un account gratuito e ricevere la nostra newsletter Motion Mondays. Si tratta di una breve e-mail che potete leggere davanti al vostro caffè Dunkin' Donuts extra large e che vi terrà al corrente di tutto ciò che dovreste sapere.di progettazione in movimento.
Joey Korenman:
E questo è tutto per questo episodio. Spero davvero che vi sia piaciuto, e pace.