PROOF of CONCEPT & Technical justification + Design Martijn Muit - Digital Publisching Semester 4
BIOGRAFIE Inspiratie Ik ben als eerst rond gaan zoeken naar verschillende technieken. Hierbij kwam ik tot vele technieken uit waarvan ik snel een idee krijg wat voor soort iets ik wilde gaan maken. Ik wil een webbased product gaan maken. De bedoeling hierbij is dat je door een tijdlijn scrollt. Dit is verdeeld in hoofdstukken. De stijl waarin ik dit ga doen kun je hieronder zien: Stijl Ik wil deze stijl gebruiken voor meerdere redenen. Ten eerste kun je hierop makkelijk animeren. Ten tweede vind ik deze stijl gaaf eruit zien. Het lijkt me ook wel een uitdaging om zoiets te maken in het onderwerp dat ik heb gekozen voor mijn biografie. Zoiets heb ik nog niet eerder gemaakt. Onderwerp en hoe Als biografie wil ik iets anders pakken dan normaal. Ik zat te denken om een serie te pakken bijvoorbeeld Game of Thrones en die als flat design uit te werken. Hieraan allemaal animaties toevoegen door middel van bijvoorbeeld bodymovin of anime.js. Hierbij maak ik een tijdlijn van de serie, per seizoen. Voorbeeld hoe je flat design kan animeren: https://www.narrative.network/
TECHNIEKEN V1 Three.Js Three.js is een javascript library die gebruikt wordt om 3D computer graphics te animeren in de webbrowser. Het wordt ondersteund door WebGL. Ik heb dit type javascript library al een keer gebruikt tijdens semester 3 voor de vrije projecten weken. Hierbij heb ik een zonnestelsel gemaakt (bewegend). Hieronder kun je de link zien van dit product: http://i367933.iris.fhict.nl/three/oefen.html. Ik ben niet van plan om mijn biografie te maken door middel van Three.js. Dit omdat ik er al ooit mee heb gewerkt en liever een nieuwe soort library wil gaan proberen/oefenen. Anime.js Anime.js is een animatie library. Er wordt geprogrammeerd via javascript/html. Ik had dit type library nog niet eerder gezien dus ik vind het wel interresant om het te gaan gebruiken. De nadruk zit hier vooral op soepele bewegingen met vormpjes en morph effecten. Het sterke van Anime zit zich vooral in het scherpe/snelle/smooth effecten. Ik heb daarnaast naar voorbeelden gezocht, hierbij kwam ik op een smooth transition die geloopt is die ik nodig heb. Magic Animations Dit is ook een animatie library. Het heeft veel verschillende animaties, waarvan er vele vrij uniek zijn. Daarnaast kun je dit gemakkelijk implementeren door het CSS bestand te importeren. Deze korte animaties zou ik kunnen gebruiken voor bijvoorbeeld een button, hover en/of click. Bodymovin Tijdens de vorige Digital Publishing proftaak, waren we aan de slag gegaan met een script genaamd Bodymovin. Hiermee konden wij in after effects animaties maken en daarna exporteren als javascript files. In die files kon je dan ook nog alles aanpassen. Stel jij hovert ergens overheen dan komt die animatie die jjij hebt gemaakt in aftereffects. Daarnaast kun je de kleur of iets anders gemakkelijk aanpassen in de files. Ook al heb ik bodymovin ooit eerder gebruikt wil ik er nog meer ervaring in op doen. Ik kan er meer mee doen dan dat ik de vorige keer had gedaan en het past goed bij mijn type biografie. Sigil Epub Sigil is een gratis editing software voor e-books. Hierin gebruik je voornamelijk html en ligt de focus om een digital magazine/e-books te maken. Ik wil van mijn biografie onderwerp geen magazine van maken dus dan ga ik dit niet gebruiken. Daarnaast heb ik hier al eens eerder mee gewerkt en vond ik het niet veel aan. Het is daarnaast vrij makkelijk te gebruiken en qua moeilijkheid zit er niet veel in. Hiermee kan ik geen tools aan tonen. Codeertalen en waarop ik het publiceer Ik wil een webbased biografie maken. Dit ga ik niet maken in magazine/epub vorm maar in een webbased vorm. Mijn biografie is dan mogelijk te zien op een webbrowser voor pc/laptop/tablet/mobiel (als het lukt om het responsive te maken). Hierbij ga ik gebruiken maken van verschillende codeertalen en programma s: -Html/css -Javascript -Javascript frameworks -AfterEffects, Illustrator & Photoshop De technieken die ik hiervoor zal gaan gebruiken zijn: - Anime.js, voor de smooth transitions tussen bijvoorbeeld twee afbeeldingen. - Bodymovin, voor de wat meer ingewikkelde animaties. Die kan ik dan maken in After effects en dan renderen naar een javascript file. - Magic animations, dit ga ik gebruiken voor hover/click animations op bijvoorbeeld een button.
MoSCoW Must Haves Html/Css + Javascript want het wordt een webapplicatie. Animaties Tijdlijn (Dus bij mijn idee per seizoen) Informatie Flat Design Should Haves Hover Animations, dit kan door middel van Bodymovin One Page Social Media links Menu balk voor navigatie Photoshop gif animations Magic Animations voor bijvoorbeeld buttons Could Haves Responsive for mobile 3D Animations SVG Animations Won t Haves
COMPARISON MATRIX Responsive Jquery HTML 5 Werkt goed voor Flat Design Browsers Moeilijkheidsgraad Anime.js Bodymovin Magic Animations Velocity.js SVG Animation Snap.js Conclusie Nadat ik de MoSCow en de Comparision Matrix had gemaakt kwam ik erachter dat ik naar veel meer aspecten moest kijken dan alleen wat ik leuk vond of als eens gebruikt had. Zo kwam ik erachter dat bijvoorbeeld Magic animations een could have kan zijn en dus niet een hoge prioriteit voor mij is. Het past niet bij flat design en het werkt daarnaast niet in alle browsers. Daarnaast kwam ik ook uit op Snap.js. Dit past veel beter bij flat design omdat je daar leven geeft aan je svg afbeeldingen. Velocity.js lijkt heel veel op jquery en dan kan ik net zo goed Jquery gebruiken. Het is een best nutteloze javascript en wordt ook door meerdere mensen afgeraden. Ik heb dus de keuze gemaakt om voor de technieken Snap.js, bodymovin & Anime.js te gaan.
DESIGN INSPIRATIE
DESIGNED
PROCES IN FOTO S
REFLECTIE Proof of concept: http://i367933.iris.fhict.nl/got/demo.html Algemene reflectie: Ik vond dit een leuk project om aan te werken. Vooral omdat we zelf konden kiezen waarover we iets gingen maken en wat voor soort libraries jij hierbij wilde gaan gebruiken. Dit gaf me veel vrijheid en daardoor kon ik ook wat creatiever zijn. Met het resultaat ben ik best wel tevreden. Er zit sowieso verbetering in maar daar had ik niet genoeg tijd voor. Dit kwam vooral door de proftaak die zich mengden met dit project. Technical justification: Via een aantal matrixen was ik erachter gekomen welke libraries/frameworks ik ging gebruiken. Hierbij kwam bij mij Snap.js, Anime.js en bodymovin uit. Ik was tijdens het maken van mijn proof of concept gelijk aan de slag gegaan met bodymovin. Ik had hier al eens eerder mee gewerkt en wilde daar verder mee gaan werken. Dit ging erg goed en ik heb daarmee leuke animaties kunnen maken. Wat ik had gedaan was gaan designen in Illustrator. Hierin maakten ik verschillende flat designs en die importeerden ik later in AfterEffects. In AfterEffects gaf ik animaties toe aan verschillende layers. Hieruit kwamen verschillende animaties. Via bodymovin kan je die exportern in een div en json file. Zo heb ik die toen toegepast in mijn website. Omdat er ook stotytelling bij moest, wilde ik dit gaan toepassen door middel van Anime.js. Dit is een library die vooral gericht is op text animaties bijvoorbeeld. Dus voor de text wilde ik animaties gaan toepassen. Uiteindelijk heb ik hier niet veel mee gedaan alleen op de eerste text van de website. Dit kwam doordat de meeste tijd in het designen/bodymovin zat. Ik had naast bodymovin en Anime.js ook Snap.js opgeschreven. Later bleek dat dit totaal niet nodig was geweest. Dit had een soortgelijke uitvoering als bodymovin. Bij Snap.js geef je animaties aan je svg bestand. Ik had toen een keuze gemaakt tussen de twee en gekozen voor bodymovin. Design: Ik vond flat design altijd wel leuk/vet uit zien dus ik wilde daar iets mee gaan doen dit semester. Daarom had ik dit toegepast in mijn biografie. Ik heb een aantal tutorials bekeken op YouTube. Ik had de tutorials gevolgt en nagemaakt. Hiervan had ik de basiskennis geleerd hoe je met flatdesign moet werken. Toen ben ik dingen na gaan maken die ik kon vinden. Vanuit daaruit ben ik zelf gaan designen en kwamen de beste resultaten uit op de website. Wat is goed gegaan? - Design - Einddocument bijhouden. - Technical justification (tools). - Het eindproduct. Wat kan beter de volgende keer: - Storytelling in het product zelf. (Storytelling workshops was daarintegen wel goed, 8.5). - Beter bekijken welke libraries/frameworks je gaat gebruiken, dat ze niet hetzelfde doen. - Feedback vragen, dat had ik wat minder gedaan dit keer... - Proces bijhouden.