We spraken met Zack Brown, CEO en visionair achter Haiku Animator.
We willen dit artikel beginnen met een gedicht:
UX en UINiet zo leuk om te animerenMaar, nu is er Haiku- School of MotionDoen deze Engelse grappen uit de derde klas je iets?
Er is veel te doen over motion design en hoe dat past in de wereld van UI/UX design. In de voorhoede van UI/UX onderzoek staat Zack Brown, CEO van Haiku en de visionair achter Haiku Animator.
De wereld is dorstig om expressieve animaties toe te voegen aan hun gebruikerservaringen, maar de huidige workflow voor animatie in UI en UX heeft veel te wensen over. Nu, met behulp van Haiku Animator kunt u ontwerpen, animeren, publiceren en embedden in één enkel goed afgestemd programma.
Dit is ook niet zomaar een willekeurige startup, Haiku heeft het legendarische Y Combinator-programma doorlopen. Y Combinator is berucht voor het helpen opstarten van enkele van de meest innovatieve merken die we vandaag de dag kennen, zoals Dropbox en Airbnb. Het is dus veilig om te zeggen dat Haiku iets van plan is.
In de podcast spraken we met Zack over de wereld van UI/UX Animation. Onderweg hoor je over Zacks achtergrond in de reclamewereld, hoe hij Haiku begon en hoe het is om een snel groeiende startup te leiden.
Haiku biedt onze podcast-luisteraars ook een korting op Animator. Deze kortingen worden beschikbaar tot 1 augustus 2019 Klik op de links hieronder om de korting te claimen. Hier zijn twee verschillende opties:
- 50% korting op drie maanden van een maandelijks plan (Bespaar $27)
- 25% korting op het eerste jaar van een jaarplan (Bespaar $45)
Nu uw nieuwsgierigheid is gewekt, laten we Zack begroeten...
ZACK BROWN SHOW NOTES
Wij nemen verwijzingen uit onze podcast en voegen hier links toe, zodat u zich op de podcastervaring kunt concentreren.
- Zack Brown
- Haiku animator
MENSEN/STUDENTEN
- Thomas Street
- Paul Graham
RESOURCES
- Schets
- Y Combinator
- Inspecteur Ruimtetijd
- Lottie Podcast Aflevering
- Eenheid
- Issara Willenskomer Podcast Aflevering
- Lottie
DIVERSEN
- Dreamweaver
- Vuurwerk
- Shake
ZACK BROWN TRANSCRIPTIE
Joey Korenman:
Ik moet iets bekennen. Ik ben echt geïnteresseerd in wat er gebeurt in de UI en UX ruimte met betrekking tot motion design. Het is een gebied dat lijkt te exploderen met coole projecten, kansen op werk, en nieuwe technologie die het gemakkelijker maakt om animatie te vertalen naar code. Echter, vanaf deze opname in 2019, is het nog steeds een soort van pijn in de kont om animatie te maken die gemakkelijk bruikbaar is ineen interactieve manier binnen apps.
Joey Korenman:
Onze gast van vandaag wil dat veranderen. Zack Brown, en ja dat is zijn echte naam, is de CEO en oprichter van een startup genaamd Haiku. Na het legendarische Y Combinator-programma te hebben doorlopen, hebben Zack en zijn team "Animator" gelanceerd, een app met het bescheiden doel om design en code te verenigen. Behoorlijk hoog gegrepen, maar ik geloof dat Haiku echt iets op het spoor is.
Joey Korenman:
Het Haiku team heeft een manier bedacht om animatie te implementeren die misschien wel een van de lastigste problemen van motion designers bij het werken aan apps oplost. Animator, waar ik mee gespeeld heb en dol op ben, laat je animeren en coderen in één interface die vervolgens die animatie op een zeer gelikte en flexibele manier kan implementeren voor ontwikkelaars. In dit interview gaan we dieper in op hoe Animator werkt en watmaakt het anders en efficiënter in de UI-ruimte dan pakweg After Effects.
Joey Korenman:
We praten ook over hoe Zack het bedrijf begon en een gloednieuwe animatie-app helemaal vanaf nul opbouwde. Het is een heel tof gesprek en ik denk dat het je een voorproefje geeft van het soort tools dat wij motion designers in de zeer nabije toekomst zullen gebruiken.
Joey Korenman:
Zack, het is geweldig om je op de School of Motion podcast te hebben. Heel erg bedankt dat je de tijd neemt en ik kan niet wachten om je hersens uit te pluizen.
Zack Brown:
Ja, mijn genoegen om hier te zijn, Joey. Bedankt dat ik mocht komen.
Joey Korenman:
Ja, geen probleem, man. Nou, het eerste wat ik je moet vragen over de naam. Ik vroeg onze School of Motion crew, ik zei, "Hey, Zack Brown van Haiku komt op," en alles wat ze wilden weten was hoe het is om een country muziek ster te zijn, dus krijg je dat vaak? Weet je wie de Zac Brown Band is?
Zack Brown:
Ja, het is veel werk om als beroemde muzikant bij te klussen terwijl je een bedrijf runt, maar op de een of andere manier lukt het me allemaal.
Joey Korenman:
Dat oude verhaal.
Zack Brown:
Maar inderdaad, het was een takelwagenchauffeur die me voor het eerst inlichtte over Zac Brown en hij zei: "Ik heb je handtekening nodig en oh, Zac Brown, ik heb je handtekening nodig. Ik maakte het, ik denk dat ik toen 20 was, ik had het 20 jaar van mijn leven gemaakt als Zack Brown en daarna moet je altijd klikken op "bedoelde je Zac Brown Band?".
Joey Korenman:
Precies, ja. Ik denk niet dat hij een K heeft, dus je kunt gewoon zeggen dat ik Zack ben met een K. Dat zal dingen ophelderen. Oh, dat is echt grappig. Iedereen die hier naar luistert, ik weet zeker dat ze nog niet super bekend zijn met je bedrijf en je app, maar dat zullen ze wel worden.
Joey Korenman:
Maar ik wilde beginnen met iets meer over u te weten te komen. Wat is uw achtergrond en hoe bent u uiteindelijk een softwarebedrijf begonnen dat een animatie-app bouwt?
Zack Brown:
Oké, ik ben mijn creatieve leven begonnen met drukwerk en fotografie, met Illustrator, Photoshop, dat soort programma's. Ik ben altijd al met computers bezig geweest sinds ik heel jong was en toen ik deze media aan het verkennen was, ontdekte ik het programma Flash, een prachtig stuk software, dat mijn brug werd naar programmeren.
Zack Brown:
In Flash kon je niet alleen tekenen met deze nog steeds unieke vector-ontwerpgereedschappen, maar je kon je ontwerpen ook versieren met code op een echt elegante en op zichzelf staande manier, dus daardoor begon ik echt met programmeren. Ik maakte al deze kleine spelletjes. De wereld was als het ware mijn oester. En dus ging ik computerwetenschappen studeren en daarna werkte ik een tijdje als software-ingenieur.over de hele linie, 3D rendering, distributieve systemen, een beetje AI, AR.
Zack Brown:
En een goede hoeveelheid UI, UX en daarna een bureau opgericht met de naam Thomas Street. We bestonden ongeveer zeven jaar, groeiden uit tot een behoorlijke omvang. We hadden klanten als Coca-Cola, DirecTV, toen verkocht ik dat. Ik reisde twee jaar na mijn twintiger jaren. Dat was een bewuste carrièrestap, geloof het of niet. Zo'n 40 landen doorkruist, wat talen geleerd, een tijdje gezeild, geprobeerd om...mijn leven als het ware verrijken.
Zack Brown:
En toen, kwam daar uit en richtte Haiku op en dat was in 2016. We bestaan al een tijdje.
Joey Korenman:
Wow, dat kunnen we allemaal begrijpen. Een bedrijf verkopen en twee jaar reizen. Dat is echt een gaaf verhaal, man. Ik wil daar een beetje in duiken. Dus, je zei dat je een agentschap begon, je deed werk voor merken als Coca-Cola en dat soort dingen. Wat voor soort werk deed je?
Zack Brown:
Het was over de hele linie, over het algemeen gericht op het overbruggen van de kloof tussen ontwerp en code, alsof dat onze black box was. Product consultants, denk ik. Dus, we gingen naar binnen, we verzamelden eisen met de verschillende belanghebbenden, we kwamen met ontwerpen, kregen die goedgekeurd, implementeerden de ontwerpen als software en dat end-to-end proces was ons brood en boter.
Zack Brown:
Dat is ook een beetje het begin van mijn persoonlijke begrip van het probleem om van ontwerp tot code te komen. Het is een rommelig probleem en er is nog steeds geen perfecte oplossing voor.
Joey Korenman:
Ja, dat is wat ik je wilde vragen, want zelfs nu en dit interview is een goede timing voor ons, omdat School of Motion bezig is met een beetje een design rebranding en we gaan het overal toepassen, op onze website en zo, we worstelen hier ook mee.
Joey Korenman:
We hebben al deze ideeën en we willen dat onze website op een bepaalde manier werkt en we zijn een animatie school, dus we willen dat dingen animeren. En zelfs nu, in 2019, is het nog steeds erg moeilijk om dat te doen, dus toen u dit bureau runde, hoe was dit proces? Het proces van het omzetten van ontwerp en ik neem aan ook animatie in code? Hoe was de stand van zaken toen?
Zack Brown:
Het was ongeveer hetzelfde als de huidige stand van de techniek, waarbij ontwerpers met digitale hulpmiddelen mock-ups maken van wat er in pixels zou moeten worden gebouwd, die ze dan doorgeven aan ontwikkelaars, wier taak het is om die pixels te bouwen tot andere pixels, maar de juiste pixels.
Joey Korenman:
Juist.
Zack Brown:
Juist en dat is weer de kern van het probleem. We gebruiken allemaal al digitale hulpmiddelen, maar onze workflows zijn onsamenhangend en die workflow is echt de kern van het probleem. Hoe brengen we die workflows samen?
Joey Korenman:
Ja en er is ook een totaal ander ... Ik probeerde een ander woord te bedenken dan "paradigma", omdat het zo flauw klinkt, maar dat is het woord dat ik toepasselijk vind. Wanneer motion designers typisch denken in termen van in wezen lineaire storytelling. Het gaat er op deze manier uitzien, omdat ik het op deze manier animeer en het zal elke keer zo afspelen.
Joey Korenman:
Maar als je het hebt over een app, nou het gaat animeren naar een andere staat, maar dan kan het terug animeren. Als je terug gaat en de kleur van de knop kan veranderen afhankelijk van een voorkeur. En er zijn al deze dingen die nu interactief zijn en afhankelijkheden hebben en dat soort dingen.
Joey Korenman:
Dus, is dat in wezen de reden dat er dit vertaalprobleem is tussen de hulpmiddelen die we gebruiken aan de kant van het motion design en de coderingskant?
Zack Brown:
Precies, ja. En er is geen tool met een voorbehoud, zet er een pin in, er is geen tool die je dat laat doen. Vroeger was er een. Dat is precies wat Flash je liet doen, opnieuw, door het mengen van ontwerp en code, je kon naar Frame 20 gaan en een vlaggetje in code zetten en nu, je bent wat je knop is rood in plaats van blauw. After Effects doet dat niet en After Effects is echt alleen maardie er nog is in de wereld van het motion design gereedschap.
Zack Brown:
Maar het is eigenlijk een vreemde laatste vijf, tien jaar sinds Flash feitelijk dood is, dat de wereld dit vacuüm voelt, omdat het vroeger een monopolie had en wanneer een monopolie sterft, is het gewoon een vreemde plek waar we ons in bevinden. Klinkt dat allemaal logisch?
Joey Korenman:
Ja, nee, dat doet het zeker en voordat ik me volledig op motion design ging toeleggen, heb ik ook in Flash geprutst en ik vond het geweldig dat je action script kon gebruiken en een hoop interactiviteit kon creëren tijdens het ontwerpen en het was echt een geweldig ding om te gebruiken.
Joey Korenman:
En om eerlijk te zijn, ik heb nooit helemaal begrepen waarom het zo'n nobele dood is gestorven. Heb je enig inzicht in wat het heeft gedood? En voor iedereen die luistert, Flash bestaat nog steeds. Het heet nu Animate. Adobe heeft het een nieuwe naam gegeven en het wordt veel gebruikt voor celanimatie, voor traditionele animatie, maar het wordt niet meer gebruikt zoals vroeger.
Joey Korenman:
Ik ben benieuwd of je weet waarom dat is, Zack.
Zack Brown:
Ja, ik heb een paar gedachten. Dus, het begin van het einde voor Flash was rond 2005 toen Adobe Macro Media overnam voor 3,4 miljard dollar en dat geld was in wezen allemaal voor Flash. Macro Media had andere producten in de line-up, zoals Dream Weaver en Fireworks, maar Flash was echt, het was het kroonjuweel. Het draaide op elk apparaat, het diende op dat moment de helft van de internetadvertenties, het was de go-to...platform voor het maken van spellen.
Zack Brown:
Als je je flash games en flash cartoons herinnert, het was de ruggengraat, de infrastructuur ruggengraat voor YouTube en in het algemeen, video op het web. Het is gemakkelijk om dit allemaal te vergeten, maar Flash was een enorm succes, en dus betaalde Adobe er terecht een enorm bedrag voor en toen kwam mobiel. De iPhone was een soort vlaggenschip voor de mobiele, smart phone revolutie en mobiel doodde Flash samen met de hulp vanSteve Jobs en het hele business model van de app store, waarvan een gigantisch deel van de inkomsten uit games komt.
Zack Brown:
En gratis spelletjes op het web staan zeker haaks op betaalde spelletjes via de app store en zijn poortwachter. En er zijn ook een hoop technische redenen. De codebase was op dat moment 15 jaar oud, het had allerlei verschillende leiders meegemaakt en door de overname bleven sommige mensen niet in de buurt. Niemand kende de codebase echt.
Zack Brown:
Dat gecombineerd met Adobe's DNA en wat ik zou noemen effectief wanbeheer van Flash, het was deze perfecte storm die leidde tot zijn dood.
Joey Korenman:
Wow.
Zack Brown:
Ja.
Joey Korenman:
Ik bedoel, het is echt triest en ik weet het niet. Er zijn vreemde parallellen die je kunt trekken uit dat verhaal en andere dingen die vergelijkbaar zijn, bedrijven die worden overgenomen en dan langzaam, langzaam stikken. Er was een echt, echt krachtige, geweldige compositing app genaamd Shake, het was een soort voorloper van Nuke, wat nu de standaard visuele effecten tool is.
Joey Korenman:
En Apple kocht Shake en toen stierf het als het ware in de wijnstok en daar was ook veel woede over, dus het is geen ongewoon iets. Goed, dus mijn volgende vraag, waarvan ik denk dat we er nu wel genoeg omheen gedanst hebben, is dat uw bedrijf, Haiku, een tool bouwt genaamd Animator en we gaan er diep in duiken, maar om iedereen een overzicht te geven, wat is Animator? En wat is deprobleem dat het probeert op te lossen?
Zack Brown:
Zeker. Ik denk dat After Effects een goed referentiepunt is. After Effects werd 26 jaar geleden voor het eerst uitgebracht, in 1993, dus het is old school en het is een motion graphics tool specifiek voor film en TV en dat is het altijd geweest. Stel je eens voor dat After Effects vanaf de grond was opgebouwd, maar met het doel van motion design voor software en gebruikersinterfaces in plaats van filmmaken.
Zack Brown:
En er zijn enkele belangrijke verschillen tussen die media, dingen als interactiviteit, integratie met code bases, dingen als versiebeheer. Die zorgen bestaan niet helemaal in de film en TV wereld.
Joey Korenman:
Juist.
Zack Brown:
Veel gebruikers vergelijken ons met de analogie tussen Sketch en Photo Shop en Haiku Animator en After Effects: het is nieuwer, het is speciaal gebouwd voor UI-animatie, het is schoner en toegankelijker, vooral voor mensen die voor het eerst met motion design beginnen.
Joey Korenman:
Perfect. Ja, ik denk dat het de perfecte beschrijving is en ik heb ermee gespeeld en het is erg leuk om te gebruiken en iedereen die After Effects gebruikt zal meteen begrijpen hoe het werkt. Er is een hele andere kant aan Animator die niet echt bestaat in After Effects en daar wil ik het over hebben, maar ik wil horen hoe je deze app eigenlijk hebt gebouwd, want ik denk dat jij en ik elkaar een jaar geleden hebben ontmoet bijen op dat moment was de app in beta en heb je er veel functies aan toegevoegd en ontwikkeld.
Joey Korenman:
En ik ben altijd nieuwsgierig naar hoe je zoiets doet, zo'n ingewikkeld stuk software bouwen. Dus, misschien kun je het hebben over hoe je de eerste versies van de app hebt ontwikkeld. Was je het zelf aan het coderen? Had je een team, hoe werkte dat?
Zack Brown:
Nogmaals, het hele verhaal gaat terug naar dat bureau en het overbruggen van die kloof tussen ontwerp en code en het begrijpen van dat probleem. Dat is eigenlijk het begin van het Haiku verhaal. Ik denk dat mijn persoonlijke carrière rond dit probleem draaide op een paar verschillende plekken, verschillende banen. En onderweg ontmoette ik mijn medeoprichter. We werkten samen bij een vorig bedrijf en hij zag het probleem ook en dus begonnen we...uit, we zijn opgericht in juni 2016.
Zack Brown:
De eerste zes maanden waren nogal experimenteel, hij was in Philadelphia, ik in SF, dus eigenlijk alleen videogesprekken, voicechat, Slack, en versiebeheer en heen en weer en iets uitvinden. En het duurde meer dan een jaar voordat we iets hadden dat nuttig was voor wie dan ook. Want het begon min of meer in een wetenschappelijke labsetting. Zoals oh, wat als we dit zouden doen, wat als we dat zouden doen? Dat is een soort...van het begin, gewoon veel experimenteren, brute kracht, verkenning, en dan brachten we onze eerste investering tegen het einde van 2016.
Zack Brown:
En toen begonnen we te denken, ik denk dat we dit ding te gelde moeten maken, laten we er een echt nut in bouwen, laten we een gebruiksmogelijkheid vinden waar mensen om geven en uiteindelijk voor willen betalen en zo is het geëvolueerd.
Joey Korenman:
Cool en een van de dingen waar ik echt nieuwsgierig naar ben is het feit dat je bent toegelaten tot het Y Combinator programma. En ik weet niet of iedereen die luistert weet wat dat is. Iedereen in de tech wereld weet van Y Combinator, maar in de motion design wereld zijn er vast mensen die dat niet weten.
Joey Korenman:
Kunt u uitleggen wat Y Combinator is en waarom u zich voor dat programma heeft aangemeld?
Zack Brown:
Dus, YC, Y Combinator, YC, is een startup accelerator. Wat ze doen is startups en oprichters interviewen die ze veelbelovend vinden en dan, degenen die ze accepteren, verbinden ze met middelen en verzorging, in wezen voor het verhogen van risicokapitaal en het spelen van het startup spel. En ze investeren zelf een beetje geld, maar je neemt YC niet voor het geld, want ze zijn nogal duur. Ze nemen een grote...brok eigen vermogen.
Zack Brown:
Er zijn tegenwoordig veel verschillende startup accelerators, maar YC is een van de originelen, de OG's als je wilt.
Joey Korenman:
Juist.
Zack Brown:
En ik heb hier een lijst, enkele andere portfolio bedrijven zijn Air Bnb, Stripe, Cruise, Dropbox, Coin Base, Instacart, Reddit, Twitch TV en de lijst gaat maar door. Het is alsof al deze IPO's op dit moment gebeuren. YC klaagt helemaal niet.
Joey Korenman:
Ze hebben een goed oog voor talent.
Zack Brown:
Dat doen ze. Ze hebben ook een merk en dus solliciteren veel mensen en hun toelatingspercentage is lager dan dat van Harvard, ongeveer vier keer lager. Dus als je via YC gaat, krijg je een soortgelijk stempel van geloofwaardigheid, zoals oh YC zegt dat ze goed zijn, dus blijkbaar zijn ze goed.
Zack Brown:
Dat is zo waardevol als referenties ooit zijn en tenminste in Silicon Valley werkt het zo, denk ik.
Joey Korenman:
Ja, dat is echt, echt cool eigenlijk. En ik wil ook horen over de ervaring, maar ik wil een beetje meer graven, want dit is iets waar ik over heb nagedacht en ik heb gesproken met andere ondernemers en School of Motion, tot nu toe, heeft geen investeerders. Het is volledig bootstrapped, maar ik heb erover nagedacht.
Joey Korenman:
Ik heb met investeerders gepraat en u weegt de voor- en nadelen daarvan af, dus ik ben benieuwd wat voor u de doorslag gaf om kapitaal weg te geven in plaats van het zelf op te bouwen.
Zack Brown:
Een deel ervan gaat terug naar de experimentele begindagen van het wetenschapslab, waar we iets revolutionairs wilden uitvinden en op het moment dat we werden toegelaten tot YC, hadden we geen pad naar winstgevendheid. We hadden nog geen geld verdiend. We deden dat pas een jaar nadat we werden toegelaten tot YC, dus er was gewoon geen pad naar bootstrapping, niet met dat huidige traject.
Joey Korenman:
Juist.
Zack Brown:
We hadden een beetje vrienden en familie en oprichterskapitaal verzameld, dus we hadden als het ware al wat VC bijeengebracht, we stratelden ons de vraag of we onze weg wilden veranderen en ons wilden richten op het verkrijgen van iets kleins dat geld opleverde of dat we wat meer wilden verzamelen en vanaf het begin voor iets grootser of ambitieuzer wilden gaan, wat VC als muziek in de oren klinkt.
Zack Brown:
Ja, op het moment dat we bij YC kwamen, hadden we ongeveer vijf maanden starttijd, wat misschien genoeg is om een startkapitaal te verwerven in de Valley, maar het is moeilijk te verkopen als je science fair technologie hebt en nog geen kapitaal. Dus kozen we YC om die reden, naast een aantal andere redenen en persoonlijk was ik erg blij met de ervaring.
Joey Korenman:
YC is de beroemdste startup accelerator ter wereld en Paul Graham is een genie en Paul Graham, voor wie die naam niet kent, is een van de oprichters van YC en heeft een geweldige blog met veel wijsheid.
Joey Korenman:
Maar ja, wat doet dat programma eigenlijk voor een bedrijf als het uwe?
Zack Brown:
Ik moet eerst zeggen dat YC, toen we doorgingen, we stapten eind 2017 in, gingen begin 2018 in, het is heel anders dan in 2005 toen ze begonnen. Toen ze begonnen, dat is echt zoals de legendarische cohorten zijn toen ze begonnen, de Twitch TV's en Reddits en Air Bnb's en tegenwoordig, het is dat maar dan opgeschaald.
Zack Brown:
YC beschouwt zichzelf ook als een startup, en dus is hun doel om te schalen. En toen wij doorgingen, waren er ergens tussen de 100 en 200 bedrijven in de lichting tegen 10 of zoiets in de eerste lichting. Heel anders, heel andere ervaring. Dat gezegd hebbende, ik ging naar een grote universiteit en een van de dingen die ik leerde op de universiteit, een beetje de harde manier in het begin, was dat er een ton vanmiddelen beschikbaar, maar als je achterover leunt in plaats van erin, krijg je die middelen niet.
Zack Brown:
En iemand anders zal ze krijgen en jij komt er als het ware doorheen. Maar als je je uitstrekt en de middelen grijpt...
Zack Brown:
Maar als je de middelen van een grote universiteit en een grote Y Combinator proactief aanwendt, dan haal je er veel uit. En ik denk dat ik nu 30 jaar oud ben. Ik wil iets met mijn leven doen, en ik had het geluk dat ik wist dat het beter is om te leunen en die middelen aan te spreken. En als gevolg daarvan heb ik het gevoel dat we er veel uit hebben gehaald, zoals netwerken,mentorschap, gewoon advies over de hele linie. Ik heb het over netwerk gehad, maar dat is echt een groot deel ervan. Onder die 200 bedrijven konden we veel connecties maken en mensen met wie ik nog steeds contact heb. En het YC netwerk is ook, ze hebben een interne gemeenschap waar je contact kunt opnemen met elke andere YC oprichter. Het vermeldt het e-mailadres en telefoonnummer. Dus als ik dat wilde, kon ik...kon de oprichter Dropbox voor Airbnb vermoedelijk raken als ik daar een goede reden voor had. Maar dat netwerk is een groot stuk van YC.
Joey Korenman:
Oh, dat is echt interessant. En er zijn enkele overeenkomsten. Ik wil School of Motion niet vergelijken met YC, maar we hebben een alumni netwerk dat waarschijnlijk het meest waardevolle deel van de ervaring van het nemen van een van onze lessen is geworden. En het was een soort van onverwachte ding in het begin, hoe waardevol het eigenlijk bleek te zijn. Dus dat maakt veel zin voor mij. Dus laten we in de werkelijkeapp, Animator. En iedereen die luistert, we gaan linken naar de website, Haiku's website, en u kunt downloaden. Ik denk dat er momenteel een 14 dagen gratis proefversie van Animator is, en er zijn tutorials op de site. Veel goede informatie.
Joey Korenman:
Er zijn dus andere animatie-apps in ontwikkeling, en er lijken veel apps in het algemeen te worden ontwikkeld, web-apps en ook native apps, om te proberen het webontwerp en het app-ontwerp te vergemakkelijken. Dus wat is het unieke aan Animator?
Zack Brown:
Het unieke aan Animator is het feit dat het bedoeld is voor code bases. Het is motion design dat naar de productie gaat. Dus code is een eerste klas burger, zowel binnen de app, als uw bronbestand, als u denkt aan een .PSD voor Photoshop, als dat soort bronbestand. Het bronbestand voor Animator is rechttoe rechtaan code, met de hand bewerkbare code. Dus elke keer dat u iets verplaatst op het podium of de seteen Tween op, het leest en schrijft eigenlijk code terwijl het dat doet. En dat is heel bewust, zodat het super makkelijk te integreren is met code bases.
Joey Korenman:
Dus laat me je dit vragen. Want, en ik ben hier niet zo goed in, dus vergeef me als ik dit afkraak, maar in After Effects hebben we Bodymovin, die je After Effects comp neemt, en er zijn een heleboel beperkingen als je het gebruikt, maar in het algemeen, als je vormlagen en dat soort dingen gebruikt, spuugt het een JSON bestand uit. Dus het spuugt code uit. Dus hoe is dit anders dan wat Bodymovin isdoen?
Zack Brown:
Ja. Ik herinner me dat Lottie uitkwam in 2017. Dat was toen we het motion design traject voor Haiku, destijds Haiku voor Mac, nu Haiku Animator, al hadden ingezet. Ik heb het altijd super inspirerend gevonden. Ik heb wat persoonlijke bezwaren tegen After Effects, zoals je je kunt voorstellen, vooral als tool voor UI's, voor software. Bodymovin en Lottie zijn eromheen ontworpen,gebouwd rond reverse engineering van het After Effects bronbestand. Dus die JSON blob die je uit Bodymovin krijgt is de vorm van het After Effects bestandsformaat.
Zack Brown:
Persoonlijk, als ik me motion design voor software voorstel, zoals je al zei, Joey, is interactiviteit cruciaal, zoals de mogelijkheid om van kleur te veranderen of te reageren op tikken, of om op een andere manier van deze toestand naar die toestand over te gaan dan van die toestand naar de volgende toestand. Hoewel dat logica vereist. In computerwetenschappelijke termen, het vereist turing volledigheid. En je hoeft alleen maarkan dat niet met After Effects.
Joey Korenman:
Juist.
Zack Brown:
Juist. Dus dat is het grootste verschil, dat we zowel het voorrecht als de ongelofelijke last hadden om de auteurstool van de grond af op te bouwen, de After Effects vervanger, zo je wilt. Dat stelde ons in staat om een code formaat te ontwerpen dat bedoeld was voor code in plaats van er achteraf voor aangepast te worden.
Joey Korenman:
Dat is een heel goede uitleg. En omdat ik Animator een beetje gebruikt heb, doet het me veel denken aan de manier waarop Flash werkt. En het is echt interessant. Het valt me op dat je dezelfde terminologie gebruikt als Flash, Tween en stage en dat soort dingen. In After Effects gebruiken we andere woorden. Maar je hebt in wezen een comp, en je hebt lagen, en je kunt stukjes code...op die lagen die ervoor zorgen dat ze reageren op bepaalde dingen en reageren op de lay-out, en je kunt responsieve dingen opzetten. En het is echt, echt cool. Dus wat zijn enkele van de ... misschien kun je ons enkele voorbeelden geven van hoe je een tool als Animator kunt gebruiken om dingen te doen die moeilijk te doen zijn op andere manieren.
Zack Brown:
Nogmaals, uitgaande van de premisse dat Animator het doel heeft om de kloof tussen motion design en code te overbruggen, is de echte kracht die je binnen handbereik hebt code, zoals de magie van code. En dus heeft Animator een paar manieren waarop je kunt coderen binnen de app. Dit is ook een fundamenteel verschil met After Effects. En er zijn drie manieren waarop je kunt coderen. We hebben deze constructies genaamd expressies, die zijn zeerzoals After Effects' uitdrukkingen met een twist. Het zijn in wezen Excel spreadsheet functies. Dus op dezelfde manier dat je een som van cellen A3 tot A14 in Excel kunt nemen door gewoon gelijk aan som te schrijven [onhoorbaar 00:27:15], die mooie kleine uitdrukking, kun je hetzelfde doen in Animator, maar reageren op, bijvoorbeeld, muispositie of een aanraking, een tik. Klinkt dat logisch?
Joey Korenman:
Ja, dat klinkt logisch.
Zack Brown:
Oké. En dan de andere manier, dus dat is simpel bedoeld, maar ook erg krachtig. Het kan functioneel, reactief programmeren. En je kunt die expressies toepassen op elke eigenschap. Dus ik kan positie X van een van mijn elementen laten overeenkomen met de muis van de gebruiker X, en ik kan positie Y laten overeenkomen met de muis van de gebruiker Y, en ik kan de schaal laten lijken op een sinusfunctie van bijvoorbeeld mijn tijdlijnpositie en de muis van de gebruiker Y, als...dat is logisch. Dus je kunt beginnen met het creëren van deze, echt makkelijk te schrijven, maar echt krachtige soorten interacties. En zeker, dat soort creatieve empowerment is waar Flash echt, echt in uitblonk, en wat de wereld mist, toch?
Joey Korenman:
Ja. En welke taal gebruik je als je in Animator codeert?
Zack Brown:
JavaScript.
Joey Korenman:
Oh, perfect. Oké, dus als je gewend bent aan After Effects expressies, weet ik zeker dat delen ervan identiek zijn. En ik neem aan dat er wat aangepaste dingen zijn die jullie hebben uitgebreid in JavaScript om Animator-specifieke functies toe te voegen?
Zack Brown:
Precies, ja.
Joey Korenman:
Ik probeer te denken aan een algemeen gebruik voor dit. Dus bijvoorbeeld, als je een gedrag op je website wilt van een personage, en je wilt dat de pupillen van de ogen je volgen, zoals het volgen van de muis. Je kunt dat namaken in After Effects, en dan zal een ingenieur moeten uitzoeken hoe dat te doen. Maar in Animator, kun je eigenlijk gewoon dat gedrag bouwen en het dan doorgeven?
Zack Brown:
Ja, precies. De rendering engine in Animator is open source, ten eerste, en ten tweede, het is precies dezelfde rendering engine die wordt gebruikt als je het op het web draait, precies hetzelfde. Dus preview mode is letterlijk preview mode. Het is hetzelfde. En dat komt neer op het bronbestand dat code is. Als je een expressie schrijft, wat je ook schrijft zal worden geëvalueerd in preciesop dezelfde manier in Haiku Animator als op de website.
Joey Korenman:
Ik bedoel, dus dat is een van de grootste verschillen tussen Animator en andere apps zoals dat en After Effects, is dat je in After Effects de luxe hebt van, je kunt animeren wat je wilt en het zal moeten renderen, maar de persoon die het gaat zien hoeft het niet te zien renderen. Als je het live doet zoals het gebeurt op het web of in een app, is het live. Dus ik ben benieuwd, hoehoe ga je daarmee om, gewoon in het algemeen denk ik, zelfs als een app ontwikkelaar, hoe ga je om met het feit dat je gebruikers misschien dingen willen animeren die niet echt in real time kunnen gebeuren? Is dat een probleem?
Zack Brown:
Ja, dat is het zeker. Wat je maakt als je iets maakt in Haiku Animator is software. Echt waar, wat je maakt is software. En je doet het met een combinatie van visuele hulpmiddelen, en als je wilt, code. Maar het eindresultaat is software. Nu, als je software maakt, is een van de inherente zorgen waar je je bewust van moet zijn, de prestaties. En als een ontwikkelaar gaat en...een for-lus schrijft die disk AIO zodanig blokkeert dat een computer vastloopt, dat is iets wat een programmeur tijdens het testen moet uitzoeken en moet oplossen zodat er geen grote perf bug in hun software zit. Precies hetzelfde met Haiku Animator. Je kunt 5.000 stippen gaan animeren die alleen maar stuiteren, en je zult zien dat het langzamer wordt. En als maker van software is het jouw verantwoordelijkheid om ervoor te zorgen dat het correct werkt.
Joey Korenman:
Ja. Dat is iets waar je nooit over na hoeft te denken. Ik bedoel, je moet er aan de voorkant over nadenken als je dingen bouwt in After Effects, gaat dit te lang duren om te renderen, maar als het eenmaal gerenderd is, is het klaar. Het is een totaal andere manier van denken. Dat is echt interessant.
Zack Brown:
Nu dat gezegd is, Lottie wel, Bodymovin erft diezelfde zorg omdat het tijdens de uitvoering wordt geïnterpreteerd. Dus als je 1.000 stippen hebt die in After Effects stuiteren, kruipen ze ook in Bodymovin.
Joey Korenman:
Juist. Ja, dat is echt, echt interessant. Oké. Dus ik probeer met een ander voorbeeld te komen. En een van de dingen die ik me herinner in Flash was, dat je deze uitgebreide rollover toestanden kon hebben. Zoals laten we zeggen, dus we doen deze ontwerp opfrissing nu op School of Motion, en ik weet niet wanneer deze aflevering uitkomt, maar als je ernaar luistert, kan het al opMaar laten we zeggen dat we de thumbnails op onze site, die onze blogberichten en tutorials en podcasts tonen, opnieuw aan het maken zijn.
Joey Korenman:
Dus laten we zeggen dat we een uitgebreide rollover-toestand willen, waarbij je erover rolt, en de titel van het ding een beetje groeit, en dan wordt de afbeelding zelf opgeschaald binnen de grenzen van de miniatuur, en dan transformeert dit kleurverloop, de opaciteit ervan. En dan als je er met de muis overheen gaat, gebeurt er iets ... als je er met de muis vanaf gaat, neem me niet kwalijk, iets anders. De manier waarop ikvan plan was om dit in After Effects te doen, en het dan gewoon aan de ontwikkelaars te geven, misschien met iets als Inspector Spacetime zodat zij mijn easing curves en dat soort dingen hebben, en dan moeten zij dat implementeren. Dus als ik zou besluiten om dit in Animator te doen, hoe zou de workflow er dan uitzien? Hoe zou ik mijn artwork binnenhalen, en zijn de tools er om een soort vanen dat laten werken?
Zack Brown:
Ja, zeker. Nu is er code nodig om te doen wat je beschrijft. En wij denken dat het moet. Om echt die onbeperkte expressiviteit te krijgen die je wilt van, nou als ik hier met de muis heen ga, zou dit moeten gebeuren. Nogmaals, misschien ben ik ouderwets, misschien ben ik gewoon een zuurpruim, maar vanuit al mijn informatica-kennis en wat al niet, geloof ik dat code niet verdwijnt.
Joey Korenman:
Ik ben het met je eens.
Zack Brown:
En dus de manier waarop je dat in Haiku Animator zou kunnen doen is dat je één tijdlijn gebruikt. Het lijkt erg op Flash. Je gebruikt één tijdlijn, je hebt verschillende regio's die de verschillende acties hebben. Dus frame één tot 80 kan je muis over zijn, en frame 81 tot 120 zal je muis uit zijn. We volgen een component model met Haiku Animator, dus wat je maakt is verpakt als een component, eerste klas ondersteuning voorReact en Angular en View. Hopelijk gebruik je een van deze op je...
Joey Korenman:
We gebruiken React, ja.
Zack Brown:
Oké. We ondersteunen ook vanilla JavaScript als je als het ware tot op het bot wilt gaan. En dus krijg je een React component uit Haiku Animator die je een verwijzing geeft naar de Haiku Animator API waar je, vanuit React land, bijvoorbeeld met de muis over, met een React muis over, de tijdlijn kunt scrubben van nul tot 80, of ga naar en speel frame nul af, of ga naar en speel frame 81 af. Dus de ontwikkelaar'seigenlijk degene die uiteindelijk aan de touwtjes trekt, maar u zet als het ware het podium op met Animator.
Joey Korenman:
Dat is super cool. Oké, dus dit komt misschien in het onkruid, luisteraar, dus mijn excuses, maar ik ben echt nieuwsgierig hiernaar, en ik wil het echt begrijpen. Dus dat is heel logisch voor mij, en als iemand die luistert Flash heeft gebruikt, dat is precies wat je zou doen. Je zou zeggen op muis over, ga naar frame 20 en speel af tot frame 40, op muis verlaten of wat het ook was. En je...In feite had je al je animaties op een tijdlijn en je speelt verschillende frame ranges af. Nu is mijn vraag, en trouwens, ik ga mijn ontwikkelaars hier naar laten luisteren, omdat ze het veel beter zullen begrijpen dan ik, en ze gaan een hoop coole ideeën krijgen.
Joey Korenman:
Maar dit is de vraag die ik heb, Zack. Dus als ik een component ontwikkel van, dit is hoe een thumbnail eruit ziet en hoe het je weet. En ik neem aan dat de visuele ontwikkeling zal gebeuren in iets als Sketch. En dan brengen we dat in Animator, ik zou animeren hoe ik wil dat de component reageert met de muis, en misschien op de klik gebeurt er iets anders. Maar dan is het eigenlijke kunstwerk...die wordt weergegeven in die thumbnail moet dynamisch zijn, toch? Dus creëert dat niet nog steeds het probleem dat de ontwikkelaar in die code moet duiken en het uit elkaar moet halen om de juiste thumbnail op de juiste plaats in te voegen, of is er ook een betere manier om dat te doen en dat proces gemakkelijker te maken?
Zack Brown:
Ja. Oké. Dus leren van Flash, nogmaals, ik voel me een beetje als een gebroken record, maar een van de dingen die Flash verkeerd deed was, het was een soort zwarte doos, een doodlopende weg, waar je eenmaal Flash op je website hebt, zeg maar, je komt er nooit meer uit. Die doos met pixels behoort tot Flash, en God snelheid als je wilt proberen er iets in te veranderen. Je moet de Flash IDE openen en wat veranderingen aanbrengen enwat logica toe te voegen, en te worstelen met hun API voor het doorgeven van gegevens, enzovoort, en het was een grote puinhoop.
Zack Brown:
In Haiku Animator hebben we een begrip van een plaatshouder waar je bij het schrijven kunt zeggen, hier is een rechthoek binnen deze superrechthoek die ik maak in Haiku Animator. Deze rechthoek is van de ontwikkelaar. Ik heb geen idee wat hier in komt, maar ik kan het animeren. Ze heten affiene transformaties, schaal, positie, rotatie, scheefheid, al die transformaties. Je kunt dat animeren...placeholder en dan kan de ontwikkelaar in code de inhoud invoeren. Dus in React zou dat eruit zien als een child component, of in HTML is het iets in een div. Dat is onze oplossing voor dynamische inhoud in Haiku Animator, en hoe het eruit ziet voor de eindontwikkelaar is rechttoe rechtaan React. Er zijn geen salto's of iets speciaals. Je geeft gewoon inhoud door als een child van de HaikuReact component.
Joey Korenman:
Dat is super cool. Oké. Dus een van de dingen die ik las in de documentatie en zo, is dat... omdat we een beetje van dit gedaan hebben op onze website. We hebben animaties die min of meer gewoon ingebakken zijn. Maar dan hebben we bepaalde kleine animaties als je met de muis over iets gaat dat we soort van prototypes, en dat soort dingen. En het probleem is dan als we besluiten om te veranderen...dat, is het nogal wat om terug te gaan en het te repareren. Het is niet zoals kopiëren, plakken, nu is het bijgewerkt. Dus hoe ga je om, en ik weet niet of ik deze term juist gebruik, maar versiebeheer, wanneer je een nieuwe versie hebt van de mouse over status van onze thumbnails? Is er een eenvoudigere manier om het te implementeren nu jullie het bedacht hebben?
Zack Brown:
Ja, inderdaad. Dit was een van de kernpunten... opnieuw, als ik terug ga naar mijn dagen als agent, en zie hoe moeilijk het is om niet alleen het ontwerp in code te implementeren, maar om het vervolgens te herhalen. Dat is waarschijnlijk waar 80% van de inspanning in zit, het herhalen. Nu heb je dit ontwerp als code geïmplementeerd, nu is er een nieuw ontwerp dat eigenlijk de eisen een beetje verandert, en nu moet wat in code was ontworpenNu is dit andere stuk kapot. Alle problemen die voortkomen uit iteratie, dat is waar het oplossen van workflow, ik denk dat dat de heilige graal is voor het oplossen van workflow.
Zack Brown:
En onze benadering van Haiku Animator is opnieuw, gebaseerd op het componentenmodel, uw componenten zijn in versie. Dus als u een project maakt in Haiku Animator en u drukt op de publicatieknop, krijgt u versie 0.0.1 van dat component, en u kunt dat in een code base zetten. Wij integreren met NPM voor de wereld webwereld, voor alle ontwikkelaars in de webwereld om daarmee vertrouwd te zijn. Dus u hoeft alleen maarNPM installeert die Haiku Animator component op versie 0.0.1, en je kunt aan de slag.
Zack Brown:
Nu kan de animator, motion designer of ontwikkelaar, wie Haiku Animator ook gebruikt, teruggaan en latere wijzigingen aanbrengen, de assets bijwerken vanuit Sketch, bijvoorbeeld, die doorspoelen naar Haiku Animator, en opnieuw publiceren, en nu heb je versie 0.0.2. En alles wat je hoeft te doen vanuit de code is die component bijwerken naar versie 0.0.2 en je bent live. Dat is het. Dus zo hebben we dat opgelost.is door te vertrouwen op een combinatie van versiebeheer en package managers. Het is allemaal vrij technisch, en een mooie manier om het samen te vatten is, we integreren met ontwikkel tools op dezelfde manier dat we integreren met ontwerp tools, zoals Sketch en Photoshop, Illustrator.
Joey Korenman:
Dus als ik het goed begrijp, werkt het ongeveer hetzelfde als Flash, maar het is veel gemakkelijker te implementeren en bij te werken en te gebruiken voor een hele app en een heel platform. Dus ik ben echt enthousiast om er weer mee te gaan spelen, want dit is echt, zoals ik al zei, perfecte timing voor ons. En ik ben echt enthousiast, ik hoop echt dat veel van jullie die hier naar luisteren de 14-daagse demo gaan downloaden. Alsals je dit soort werk doet, probeer deze app dan eens, want het zou echt, echt cool zijn om te zien wat een paar echt goede motion designers kunnen bedenken. En ik wilde je hierover vragen, want ik heb steeds meer van dit soort gesprekken.
Joey Korenman:
Het is bijna alsof deze twee werelden beginnen samen te smelten. Je hebt motion design en je hebt UX. En ze bewegen allebei naar elkaar toe, en nu is er genoeg overlapping waar tools als deze levensvatbaar beginnen te worden. En jij lijkt een soort van uniek omdat je dit vanaf het kruispunt deed. Je maakte prototypes en implementeerde deze dingen voor klanten. Dus ben je een animator? Hoe heb jeWeet je welke gereedschappen je in Animator moet zetten? Want ik opende het de eerste keer, terwijl ik er niets van wist, en er zijn key frames en er is een grafiek editor, zoals een animatie curve editor, die eigenlijk heel leuk is om te gebruiken, en een laag-gebaseerd compositie systeem, en het was allemaal gewoon logisch. Dus hoe heb je besloten welke functies je erin wilde zetten?
Zack Brown:
Dus ik zou zeggen dat ik door omstandigheden een animator ben.
Joey Korenman:
Daar hou ik van.
Zack Brown:
Zeker geen grote. Ik heb wel wat ervaring opgedaan toen ik jonger was, dat F woord weer, Flash. En dus het idee van sleutelframes en tijdlijnen, eenmaal [onhoorbaar 00:42:03] door mijn...
Zack Brown:
Het idee van keyframes en tijdlijnen. Weet je, ooit [onhoorbaar 00:42:04] in mijn jonge geest zijn me bijgebleven in mijn volwassen geest. Het korte antwoord is gebruikers, onze gebruikers zijn de experts en weet je, het is een algemene wijsheid in de wereld van het creëren van producten om uit te zoeken wat je gebruikers willen en je bouwt het. Dus, de Curve editor bijvoorbeeld, hebben we onlangs gelanceerd. Het product bestaat al sinds2006 en 2019 was het moment waarop we eindelijk de Curve editor lanceerden na verzoeken, verzoeken, verzoeken van gebruikers. Maskeren is een functie die we momenteel niet ondersteunen en waar mensen om schreeuwden. Dus ik verwacht dat het binnenkort komt.
Zack Brown:
Zo ontdekken we het. De experts vertellen het ons en wij nemen het over.
Joey Korenman:
Juist omdat er veel dingen zijn die After Effects gebruikers altijd doen. Je weet wel, een laag gebruiken als een masker voor een andere laag, paden die een lijn hebben die langs het pad animeert. Dat soort dingen waren... Eerlijk gezegd zijn zelfs de gereedschappen in After Effects om sommige van die dingen te doen erg oud en kunnen ze een beetje bijgewerkt worden, en het is leuk om te zien...is er een kans om met gebruikers te praten en uit te vinden wat hun leven makkelijker gaat maken.
Joey Korenman:
Dus wat voor soort gebruikers vind je die eigenlijk met Animator werken? Zijn het motion designers, of zijn het UX designers die animatie nodig hebben?
Zack Brown:
Het is beide. Dus nogmaals, zoals Sketch toegankelijker is dan Photoshop of Illustrator, hebben we gemerkt dat er een heel segment gebruikers is die motion design leren, misschien voor het eerst een keyframe tijdlijn paradigma gebruiken, en ze zijn op weg naar de races met Haiku Animator. Terwijl we de app ontwikkelen, hebben we ook documentatie ontwikkeld zoals een helpcentrum, allerlei dingen. Duswe hebben tutorials. Dus we hebben goede bronnen voor mensen die voor het eerst beginnen met motion design.
Zack Brown:
We zien ook doorgewinterde motion designers die de waarde van het schip naar de productie waarderen. Of de waarde van, "Voeg een beetje code toe." Iets wat je niet kunt doen in After Effects. Weet je, fundamenteel is het een unieke plek in de markt voor deze oplossing, en het gaat allemaal terug naar het vacuüm van Flash.
Zack Brown:
Dus ja, en dan het andere deel van die vraag: bedrijven in alle soorten en maten, van Fortune 5 tot agentschappen en freelancers, en ook ontwikkelaars gebruiken het ook. Of zoals front-end een soort eenhoorns ... Eenhoorns halen er zeker het meeste uit omdat ze het volledige scala aan ontwerpfuncties en het volledige scala aan codefuncties hebben, maar eigenlijk gebruiken alle strepen het.
Joey Korenman:
Ik wilde u vragen omdat veel van onze luisteraars en studenten eerst motion designers zijn, en sommigen van hen beginnen net met After Effects Expressions. En dus was ik gewoon benieuwd of u enig idee heeft hoe de leercurve is voor animators om Animator te gaan gebruiken, Haiku Animator. Ik ga Haiku Animator zeggen om het makkelijker te maken.
Zack Brown:
Dat is prima, ja.
Joey Korenman:
Ja, hoe is de leercurve voor animators die het gebruiken. Hoeveel code zullen ze moeten leren? En wat moet de leercurve verwachting zijn?
Zack Brown:
Oké dus ik zou aanraden om te beginnen met Expressions. Als je ooit Excel of Google Sheets hebt gebruikt, dan heb je waarschijnlijk wel eens een spreadsheetformule gebruikt, en dan ben je voorbereid op Haiku Animator. Iets de muis laten volgen is net zo makkelijk als een som maken in Excel, en het geeft veel voldoening als je het doet. Erg, denk ik, het is een afgezaagd woord, maar het geeft veel kracht om dat te zien gebeuren.
Zack Brown:
Ik zou zeggen dat als je een motion designer bent die aan de slag wil met code, dit de perfecte tool voor je is. Dit is grotendeels waarom we het gebouwd hebben. Nogmaals, om die kloof tussen motion design en code te overbruggen. Dus tussen de bronnen die we beschikbaar hebben en de code editor ingebouwd in de app, zou het een goede manier moeten zijn om aan de slag te gaan.
Joey Korenman:
Dat is uitstekend. Dus laten we het hebben over de algemene stand van zaken van dit ding dat we noemen... Ik weet niet eens hoe het heet. De kruising van UX en motion design. Dus weet je, Animator lost een aantal pijnpunten op die al jaren bestaan. Ik herinner me een aflevering van deze podcast, we hadden Salih en Brandon van Airbnb die twee van de jongens waren in het team dat Lottie bouwde.
Zack Brown:
Ja, ik hou van die jongens.
Joey Korenman:
Ja, ze zijn geweldig. En weet je, ze waren echt instrumenteel in het me laten begrijpen wat deze pijnpunten zijn, en ik dacht dat Lottie langs zou komen en ze allemaal zou oplossen, maar elke keer als ik met iemand praat zeggen ze, "Nee, ze zijn nog niet opgelost." Het is nog steeds erg pijnlijk om motion design om te zetten in code.
Joey Korenman:
En de manier waarop animatoren dat aanpakken lijkt echt heel slim, en ik denk zeker dat je iets op het spoor bent, maar wat zijn enkele andere dingen die moeten worden aangepakt om dit proces echt gestroomlijnd en efficiënt te maken? Weet je, ik bedoel, omdat het gewoon de wereld van codering en de wereld van motion design is, ze zijn vrij gescheiden op dit moment. En zelfs een nam als Animator, weet je, je hebt nog steeds...een ontwikkelaar nodig hebben om dit te implementeren, toch? Zoals, je kunt een component bouwen, maar is diezelfde persoon dan in staat om die component te implementeren? Is dat zelfs iets waar we naar moeten streven? Dus ik ben benieuwd wat jouw mening is over wat andere dingen zijn die de komende jaren kunnen veranderen om dit proces nog beter te maken?
Zack Brown:
Als we het over meerdere jaren hebben, denk ik dat veel mensen zich afvragen wat ontwerpers over x jaar zullen doen, of wat ontwikkelaars over x jaar zullen doen. Op basis daarvan denk ik dat het misleidende idee dat het over een paar jaar hetzelfde zal betekenen. Dat ontwikkelaar vandaag hetzelfde betekent als over een paar jaar, toch?
Zack Brown:
Dit is waarom ik graag denk aan ... Ik noemde eerder een paar minuten geleden wat je doet met Haiku Animator is het maken van software. Het maakt ons niet uit of je een ontwikkelaar bent. Het maakt ons niet uit of je een ontwerper bent. Je maakt software. Dat is het. Dus mijn mening is dat over een paar jaar, het maakt niet echt uit wat je titel is, maar we zullen allemaal samen software bouwen. En ik wijs graag op waar...dit is al gebeurd in een parallelle industrie, in de spelindustrie.
Zack Brown:
Iedereen die Unity 3D heeft gebruikt, iedereen die betrokken is geweest bij dat ecosysteem, bouwt spellen. Je bouwt software. En als je Photoshop gebruikt om je texturen te maken, die op de 3D-modellen in Unity worden gezet, maak je software via Photoshop. Je kunt teruggaan en die textuur veranderen en het wordt doorgespoeld naar de software, en het wordt in productie genomen.
Zack Brown:
Unity heeft het workflow probleem opgelost tussen motion designers... Er is een tijdlijn en keyframe animatie systeem in Unity, texture editors, riggers, 3D modelers, en ontwikkelaars. Ze bouwen allemaal hetzelfde in Unity. En dus is dat wat ik denk dat de toekomst is van het maken van software als het ware, en dat is onze kijk. Dat is onze speeltuin, dat is onze wereld is de wereld van het creëren van...software. Het maakt niet uit wat je titel is of zelfs wat je achtergrond is, maar als we ons werk goed doen door workflows te verenigen, bouwen we allemaal samen software.
Joey Korenman:
Dat is prachtig. Ik heb tranen in mijn ogen, man. Dat was echt welsprekend.
Joey Korenman:
Oké, dus ik sprak hierover met Issara Willenskomer van UX in Motion, en momenteel is het nog steeds het wilde westen in termen van de tools die mensen gebruiken om animatie uit te voeren in een app. En er zijn een miljoen verschillende manieren om het te doen, en het model dat Animator gebruikt lost dat misschien op, maar gebeurt er enige vorm van standaardisatie? En nogmaals, dit is niet mijn expertise, maar van wat ik begrijp,Animator is een code die ... het is in wezen een react component, wat, vergeef me als ik me vergis, maar het is gebaseerd op javascript, toch? Het is een soort smaak daarvan, toch?
Zack Brown:
Ja.
Joey Korenman:
Oké cool. Dus, zal dat werken met ... en dus als je een website of een app bouwt op basis daarvan, dat is geweldig, maar wat als je dat niet doet? Wat als je ... Ik wou dat ik een rolodex van coderingstalen had. Wat als je Ruby of iets dergelijks gebruikt? Moet er meer standaardisatie zijn, denk ik? In het algemeen, om dit probleem te laten verdwijnen, is dat nog steeds een probleem?
Zack Brown:
Absoluut, ja. Als we het hebben over workflows, is standaardisatie waar het om draait. Dat is waarom Unity is geslaagd, omdat het een standaard is geworden. De helft van alle spellen, de helft. Letterlijk één op de twee spellen voor elk platform is gebouwd op Unity. Voor een groot deel omdat het een standaard is geworden.
Zack Brown:
Er zijn enkele standaarden die samenkomen. Lottie is een geweldig voorbeeld in de motion design ruimte. En weet je, ik noemde enkele bedenkingen over de technische kern van Lottie, namelijk dat het een zeer, zeer steile weg is om Lottie interactief te maken. Zeer moeilijk. Alleen al vanwege het kernformaat.
Zack Brown:
Wat Lottie heel goed heeft gedaan is mindshare bereiken en een standaard worden en dat is een enorme stap voorwaarts geweest voor motion design als gemeenschap, als wereld. Dus Lottie is een standaard geworden. We sprongen vrij snel op die trein. Haiku Animator was de allereerste tool op de markt, buiten After Effects, die Lottie export ondersteunde. Dus nogmaals, in onze missie om workflows samen te brengen, zijn wezich daar scherp van bewust, van die opkomende norm.
Zack Brown:
Maar ik bedoel, we kunnen op een paar verschillende manieren denken aan animaties zoals ze betrekking hebben op software. Een daarvan is het atomische kleine doosje, zoals een .gif of een video of een Bodymovin animatie goed voor een laadspinner of een element binnenin een knop dat wanneer je op de knop klikt, opnieuw begint, zoals een laadspinner. Het begint te draaien.
Joey Korenman:
Juist.
Zack Brown:
Weet je, je opent de Airbnb app, het huis van Lottie. Je opent de Airbnb app, en je krijgt dit leuke kleine dansende, [onhoorbaar 00:52:57] Airbnb logo. Beetje zoiets als ... Dus dat is één manifestatie van beweging in software. De andere is grootschaliger zoals lay-out animatie.
Joey Korenman:
Juist.
Zack Brown:
Die standaardisatie heeft niet plaatsgevonden. Dat is puur wild west. Meer dan wild west. De enige manier om dat soort animatie te doen is met code, momenteel, en veel van dat probleem is het feit dat het implementeren van een lay-out animatie in het web heel anders is dan het doen voor iOS. Het is heel anders dan het doen voor Android. Het is heel anders dan het doen voor Samsung smart TV. Dus het is een grote,lelijk, uitdagend probleem.
Zack Brown:
Zonder al te veel weg te geven, het Haiku team werkt aan iets in deze ruimte. Maar ik denk dat het de moeite waard is om dat onderscheid tussen die twee soorten beweging in software aan te geven.
Joey Korenman:
Juist. En laat me je dit vragen omdat dit eigenlijk vanmorgen pas ter sprake kwam, en ik denk dat er nog steeds veel verwarring is over wat Lottie is. Ik denk dat aan de ontwikkelingskant, het veel meer begrepen wordt dan aan de motion design kant. Iemand in ons Slack kanaal zei vanmorgen, "Oh kijk, Airbnb maakt een animatie app." En ik had zoiets van nee, dat is niet wat het is.
Joey Korenman:
Dus van wat ik begrijp, vertaalt Lottie in wezen wat Bodymovin en ook wat animator. Je weet wel, de code die het uitspuugt, het vertaalt dat in iOS of Android. Die talen. Dus het klinkt alsof wat echt moet gebeuren om het universeel en gemakkelijk te maken is dat er een soort van universele vertaler moet zijn, weet je, en is dat iets wat je denkt dat een bedrijf als Haikuop zich moeten nemen, of is daarvoor een veel universelere inspanning van Apple en Google en Samsung nodig om een manier te creëren voor een universeel formaat?
Zack Brown:
Dus allereerst, nogmaals, we werken aan iets dat nu topgeheim is, gehuld in mysterie, maar we zullen het binnenkort aankondigen. Dat is het spelen met cross-platform standaardisatie.
Joey Korenman:
Juist.
Zack Brown:
Weet je, persoonlijk als een scrappy startup kerel, denk ik niet dat dit uit Google moet komen, maar het moet zeker door Google op een gegeven moment worden aangenomen om een standaard te worden.
Zack Brown:
Dan weer, een succes scenario, zoals ik het zie, is 50% marktaandeel. Dat is prima. Dat is wat Unity deed. Ze doen geen pijn. Je gaat nooit iedereen tevreden stellen. Vooral in een technische discipline ... [onhoorbaar 00:55:47] was in de crash product van technische disciplines van programmeurs van verschillende talen en ontwerpers met behulp van verschillende ontwerp tools, en motion ontwerpers van verschillende strepen. Je vermenigvuldigtAl die verschillende combinaties, je gaat nooit iedereen tevreden stellen met één standaard of één tool, en dat is helemaal prima. Maar iets dat kan resoneren en het probleem kan oplossen, zoals de basisproblemen van genoeg mensen, om een standaard te worden op de manier zoals Unity dat is, ik denk dat dat helemaal mogelijk is.
Zack Brown:
En ik denk niet dat dat uit een van die grote bedrijven moet komen. Je weet wel, bevooroordeeld, maar persoonlijke kijk erop.
Joey Korenman:
Ja. Erg cool. Ja, ik ben enthousiast voor je om te onthullen en op het podium te komen in een zwarte coltrui en iedereen te laten zien wat die functie is.
Joey Korenman:
Dus ik heb nog een paar vragen voor je, en je woont in San Francisco, je zit in de tech bubble. Je hebt het YC ding gedaan en zo.
Zack Brown:
Zeker weten.
Joey Korenman:
En dus stel ik me voor dat je in contact staat met veel tech bedrijven. Ik weet zeker dat je mensen kent bij de grote, wat is de afkorting die men nu gebruikt? FAANG.
Zack Brown:
FAANG, ja.
Joey Korenman:
... met twee As, ja, ja. Je weet wel, Facebook, Apple ...
Zack Brown:
Amazon.
Joey Korenman:
Eigenlijk nee wacht, het is Facebook, Apple, ja Amazon juist, dan Netflix en Google.
Zack Brown:
Ik denk dat Microsoft daar ook thuishoort, maar het is eigenlijk dat Silicon Valley [onhoorbaar 00:57:00].
Joey Korenman:
Juist. Het is alsof de coole kinderen de ... Maar goed, dus je weet, en je gebruikers zijn zowel motion designers als UX designers en alles daartussenin. Dus ik ben benieuwd, gewoon vanuit jouw perspectief, hoe de vooruitzichten op werk eruit zien aan de westkust voor de animator die een beetje code kent of de coder die een beetje animatie kent? Van waar ik zit in Florida, lijkt het alsof het booming is,maar ik ben er niet, en ik ben benieuwd wat je ter plaatse ziet.
Zack Brown:
Zeker, ik zie ook een hausse. Het idee van UX als differentiator is echt... het is nu volledig ingeburgerd op dit punt dat de kloof oversteekt, als je die kent. Hoe dan ook, het is... iedereen en hun moeder en grootvader is zich ervan bewust dat differentiëren op UX een groot verschil maakt voor de vooruitzichten van een bedrijf op succes. En beweging is vastgesteld als een belangrijk onderdeel daarvan.
Zack Brown:
En terug naar Lottie en dergelijke, het toegankelijk maken ... het echt gemakkelijk maken om een prachtige animatie in je app te zetten, het is een big deal. Dus ja, motion ontwerpers die ... Motion ontwerpers voor code, motion ontwerpers voor code bases, motion ontwerpers voor software. Zeker, we zien dat booming hier.
Joey Korenman:
Dat is geweldig. Nou, waarom eindigen we hier niet mee? Animator is al een heel erg coole app en echt heel erg krachtig, en we gaan er opnieuw naar linken. Ik stel voor dat iedereen ermee gaat spelen. Of je dit soort werk nu wel of niet doet, de kans is groot dat je dat in de toekomst gaat doen, want ik denk dat Zack gelijk heeft, iedereen en hun moeder wil nu animatie op hun website en in hun app.
Joey Korenman:
Als je Animator vergelijkt met After Effects, dat volgens mij 25 of 26 jaar oud is, zijn er natuurlijk veel functies die Animator nog niet heeft, en er is nog geen 3D-camera of iets dergelijks.
Zack Brown:
Geen camera.
Joey Korenman:
Wat is je visie voor de toekomst van de app en eerlijk gezegd ook van het bedrijf?
Zack Brown:
Onze bijna dwaze ambitie... Weet je, we moeten voor de sterren schieten. Een deel daarvan is Silicon Valley en VC backed. Een deel daarvan is gewoon blinde ambitie als het ware. Persoonlijk, zoals op een existentieel niveau, maar ik zie een kans om ontwerp en code te verenigen. Juist? Iedereen in ons team doet dat. Om die workflows te verenigen om, bijvoorbeeld, dat marktaandeel te bereiken dat Unity heeft.
Zack Brown:
Dus onze bedrijfsmissie is "Het revolutioneren van software creatie door het verenigen van ontwerp en code". Dat is het grote schot voor de boeg, en de manier waarop we op de markt kwamen met ons eerste product was het opvullen van de leegte die Flash achterliet van motion design dat naar productie wordt verscheept. En dat dekt die eerste use case van motion in software die ik noemde. Die atomaire soort animaties. En Animator laat...je gaat verder dan dat met dingen als plaatshouders en de code API.
Zack Brown:
Maar er is meer aan de hand, en we zien interessante trends opkomen, zoals ontwerpsystemen waarvan het verklaarde doel is het ontwerp op dezelfde manier te systematiseren als code. Ideeën als versiebeheer, ideeën als componenten, en dat begint echt de aandacht te trekken. Vooral in de onderneming, waar de behoefte aan grote consistentie ertoe heeft geleid dat miljoenen en miljoenen en miljoenen dollars worden besteed aanin het creëren van ontwerpsystemen. Dus dat kan een deel van de puzzel zijn. Dat is iets wat we in de gaten houden.
Zack Brown:
Wat ontwerpsystemen negeren is precies dezelfde overdracht van ontwerp naar code. Nu kun je een ontwerpsysteem maken in je ontwerpgereedschap, en je hebt dit prachtige abstracte idee van, "Hier is mijn typografie," en, "Hier zijn mijn kleuren." Maar je moet dat nog steeds met de hand implementeren in code. Het erfde hetzelfde ... die ruimte erfde hetzelfde probleem dat de traditionele ontwerpoverdrachtdeed. Dus dat is een probleem dat we goed in de gaten houden.
Zack Brown:
Ja, beantwoordt dat je vraag?
Joey Korenman:
Ja, ik denk verenigen, ontwerpen en coderen. Het is een vrij ambitieuze taak, maar ik weet het niet. Alleen al uit de paar interacties die ik met je heb gehad, Zack, denk ik dat jij en het team het aankunnen. En ik kijk er echt naar uit om te zien waar dit heen gaat.
Zack Brown:
Dank je, Joey. Bedankt dat ik vandaag mocht komen.
Joey Korenman:
Kijk naar Animator bij Haiku.ai. Ik wil Zack echt bedanken voor zijn komst en voor zijn goede uiteenzetting over de uitdagingen waarmee animators en ontwikkelaars worden geconfronteerd als het gaat om het implementeren van animatie in apps. Animator is nog vrij nieuw, maar het is al een vrij leuke app om te gebruiken, en ik denk dat het een echte kans heeft om de manier te veranderen waarop we dingen animeren die uiteindelijk interactief zullen zijn op eenwebsite of een mobiele app of iets anders.
Joey Korenman:
Zorg ervoor dat u geabonneerd bent op deze podcast, zodat u op de hoogte blijft van nieuws uit de industrie en nieuwe tools zoals Animator. En als u nog meer kennis wilt, ga dan naar SchoolofMotion.com om een gratis account aan te maken en onze Motion Mondays nieuwsbrief te ontvangen. Het is een korte e-mail die u kunt lezen tijdens uw extra grote gewone Dunkin' Donuts koffie, en hij houdt u op de hoogte van alles wat u moet weten...bewust van in motion design.
Joey Korenman:
En dat is het voor deze aflevering. Ik hoop dat je het leuk vond, en vrede.