Search

Author

Nick Goossens

De opkomst van SVG animations

Iedereen weet dat leuke animaties op een webpagina (zolang ze met mate gebruikt worden) een pagina zeer hard kunnen opfleuren en dat het data-vriendelijk om SVG’s te gebruiken wanneer het voordelig is. Maar wat de meeste mensen niet weten is dat deze leuke animaties eigenlijk een hel zijn om te programmeren. Of toch, dat was het toch tot de opkomst van CSS3 en zijn compatibility met SVG’s. Zo sprak Benjamin De Cock in zijn toespraak “A yummy pinch of CSS in your SVG” op het Kikk-festival. We gaan even dieper in op de evolutie en toepasbaarheid van animaties in websites.

cssanimation
Voorbeeld van een css + svg animatie

Van JS tot CSS

Nog heel recent werden animaties alleen gedaan in pure Javascript, met de requestAnimationFrame functie om specifiek te zijn. Dit os een goede manier te zijn om heel specifieke animaties te krijgen en controle te hebben maar de code zelf is zeer ingewikkeld om te schrijven en nam veel tijd in beslag. Maar plots was daar Robert Penner en de opkomst van SVG2, wat ervoor zorgde dat geometrische properties simpel konden geïmplementeerd worden in CSS. De combinatie van de twee vormde dus de ultieme brug tussen CSS en Javascript. CSS werd gebruikt voor animaties en Javascript alleen nog maar om DOM te manipuleren. Ten slotte is er ook nog altijd de Web Animations API dat ervoor zorgt dat je animaties interactief kunt maken.

Wanneer gebruik je wat?

Meneer De Cock sloot zijn presentatie nog af door proper op te lijsten wanneer je welke code het beste gebruikt.

Ten eerste: gebruik altijd CSS wanneer het mogelijk is
CSS animaties zijn op dit moment de makkelijkste om te gebruiken, maar maak er dan ook gebruik van. De combinatie van CSS en SVG’s zijn dan ook niet alleen makkelijk om te gebruiken maar zijn ook super licht om te downloaden. Zo voorkom je dat je pagina extra tijd neemt om te downloaden en ook dat iemand zijn data limiet op zijn smartphone erdoor jaagt.

Ten tweede: gebruik Web Animations API voor interactiviteit
Als je meer wilt dan gewoon een icoontje dat van kleur verandert wanneer je erover hovert dan is het het beste om voor WA API’s te gaan. Zo kan je makkelijk met keyframes de interactiviteit van je animatie besturen.

Ten derde: gebruik requestAnimationFrame als je grote animaties wilt controlleren
Ondanks dat het een “ouderwetse” en moeilijke methode is blijft het nog altijd de beste om te gebruiken wanneer je nog meer controle nodig hebt dan bij de vorige twee methodes. RAF is en blijft en zeer specifieke methode en is dus nog atlijd zeer bruikbaar.

 

Probeer hier zelf eens te animeren met CSS en SVG.

Het internet is je canvas

Met de opkomende technieken en extra’s van HTML5 is het mogelijk geworden om via het element je eigen creatieve kant te tonen en online interactieve games, visualitaties en video’s te maken. Nu iedereen die ook al een beetje af kent van Rich Media Development kent wist dit al. Maar er zijn mensen die Canvas tot het uiterste testen en zo wondermooie of leuke webpages maken. Het handige is dat dankzij deze mensen hun geëxperimenteer er nieuwe deuren voor ons, multimediastudenten, open gaat.

Bekijk dus de website en doe maar inspiratie op. De meeste werken hebben vaak ook een link staan naar hun source dus dan kan je daar bekijken hoe ze het allemaal geflikt hebben. Maar vergeet niet: copy paste niet zomaar de code van iemand. Dit is en blijft plagiaat.

throughthedark.gif
Dit is mijn persoonlijk favoriet.

They Make Awesome Sh

Althans dat zeggen ze op hun website. We Make Awesome Shit is een klein mensen die heel veel dingen doen. Van websites tot installaties en van social media campagnes tot digital products. Ze hebben al gewerkt met vele grote bedrijven zoals Coca Cola, Facebook, Microsoft maar ook met veel grote muzikanten, iets waar ze op hun site toch ook wel graag de nadruk op leggen. Zo hebben ze bijvoorbeeld Samsung al geholpen met hun app “Shoreditch Studio”, wat een handige app is om makkelijk en snel door NFC je gsm op een CD-hoes te leggen en zo een demo te beluisteren van wat er op de CD staat. Of Calvin Harris geholpen met het launchen van zijn nieuwe album door een app te maken waar je kon luisteren naar dat album maar alleen als was aan het dansen!

Adventure

Mijn persoonlijke favoriet is Madeon’s Adventure Machine. Om mee te helpen met de launch van Madeons recenste album “Adventure” hebben zij dus een soort online programma gemaakt waar je kan rond spelen met de samples en liedjes dat Madeon zelf gebruikt heeft in zijn nieuwe album. Ook kunnen mensen die een Ableton Launchpad hebben deze inpluggen en zo super simpel online DJ spelen dankzij de WebMIDI API die ze gebruikt hebben. Speel er zelf eens mee rond en je kan makkelijk door gewoon de URL te kopiëren je resultaat delen met iedereen die je wilt!

madeon.JPG

Interactief Verleden

Een paar jaar geleden herdachten we de start van de Eerste Wereldoorlog. Daardoor stonden natuurlijk al de geschiedenisleerkrachten te springen om met hun leerlingen naar één of ander museum te gaan en net zoals elke andere middelbare student was ik daar ook slachtoffer van. We gingen naar het In Flanders Fields museum, een museum dat in Ieper ligt en dat specifiek gefocust is op de Eerste Wereldoorlog. Iedereen behalve de leerkrachten zelf keken er natuurlijk tegenop. Maar wat we niet wisten is dat er eigenlijk een interactief gedeelte aan het museum zat.

Toen we uiteindelijk aankwamen kregen we een wit, plastic armbandje aan dat moest lijken op een klaproos, een symbool dat nog altijd vaak wordt gebruikt wanneer men over WO1 spreekt. In het museum zaten ook andere klaproos icoontjes, als je daar tegen je armband hield dan werd er een video fragment geactiveerd dat een anekdote of een testimonial uitbeeldde. Zo werd ons saai uitstapje al iets interessanter want zo kregen wij als student ten minste een iets actievere ervaring.

Maar laten we eerlijk zijn, gewoon een armbandje tegen een houten
bordje houden is over het algemeen nog
altijd niet spetterend interactief. Vooral als de videofragmenten zelf niks interactief hadden. Als ze 1116bijvoorbeeld al een klein vraagje op het einde van elke fragment zouden zetten dan konden ze mensen al wat meer betrekken. Vooral als er dan op het einde je score wordt bijgehouden van hoeveel vragen je juist had of niet of hoeveel vragen je al beantwoord had. Zo wordt het al een kleine competitie of een zoektocht naar wie al de vragen kan vinden en wie ze de beste score had. In ieder geval: het was een goede poging tot het interactief maken van een museum maar het kon zeker meer uitgediept worden.

 

Oost, Howest, More best

How Howest wasn’t won

Op de website van Howest (www.howest.be) is er een overdosis aan kleur aanwezig. Ondanks dat hun logo zelf uit (licht)blauw bestaat zijn er duidelijke massa’s meer kleuren aanwezig op de website zelf. Verschillende tinten geel, paars, blauw, noem maar op. Dit brengt over het algemeen een zeer onduidelijke en chaotisch zicht over. Nu, kleurgebruik is niet het enige wat deze website enorm druk maakt. Ook het missen van een duidelijke hiërarchie in elementen zorgt ervoor dat mensen een overdosis aan informatie binnen krijgen en moeite hebben om makkelijk hun weg kunnen vinden op de website. Howest kan dus zeker nog een les leren in web design.

howest.gif

Less is More

Thomas More daarentegen heeft een huisstijl die ze niet alleen in hun logo houden maar waar ze dus ook gebruik van maken op hun website, zoals het hoort. Het contrasterend oranje en blauw zorgt ervoor dat ze makkelijk elementen kunnen accentueren waar het nodig is. Ook stimuleert oranje mensen om actief en sociaal te zijn. Samen met het blauw, dat productiviteit stimuleert, maken ze een mooie combinatie van kleuren dat de website de indruk doet geven dat ze een zeer actieve hoge school zijn.

Vervolgens is de structuur van de homepagina ook vele beter dan die van Howest. Zo worden namelijk aparte onderwerpen onder elkaar gestoken en niet naast elkaar, zoals bij Howest het geval was. Men kan zo dus makkelijker navigeren door de website.

thomasmore.JPG

Gebruiksvriendelijk Streamingsites

De website die op dit moment het meest bekend staat voor streamen is twitch.tv. Door de plotse explosie in populariteit van eSports (zoals League of Legends, CS:GO, Overwatch, enz.) is deze site mee in populariteit gestegen. Maar wist je dat vroeger (rond 2007) de meest gebruikte streaming site livestream.com was? Deze site werd vroeger door jongeren voor dezelfde doeleinden gebruikt: het streamen van games, films, tekenen, noem maar op. Maar dankzij de eerdergenoemde boom van Twitch schakelde een groot deel van Livestreams doelgroep over naar zijn concurrent. Gelukkig bleef Livestream niet bij de pakken zitten en heeft daardoor ook zijn doelgroep meer gefocust op professionals, bedrijven en conferenties. Samen met zijn update in doelgroep heeft Livestream ook direct de oude layout (die je nog altijd in al zijn “glorie” hier kunt vinden: https://secure.livestream.com/myaccount/channels) verandert naar degene die ze nu gebruiken. Maar nu blijft de vraag: hoe gebruiksvriendelijk zijn ze en stemmen ze goed af op hun doelgroep?

Twitch.tv

Zoals eerder gezegd is Twitch een site dat vooral bedoeld is voor gamers en voor grote game events. Dat wordt met de hoofdpagina direct duidelijk omdat je direct face-to-face staat met een livestream die op dat moment is aan het spelen en veel kijkers heeft. Zo kom je direct te weten wat er op Twitch te doen valt en of er op dit moment misschien iets belangrijk te doen is of niet. Vervolgens als we naar beneden scrollen dan kan de kijker makkelijk een spel aan klikken dat hem interesseert en zo een lijst van streamers browsen totdat hij iemand heeft gevonden dat hem of haar leuk lijkt. Vervolgens zijn er op de homepagina nog meer filters en dit is eigenlijk Twitch zijn sterkste punt. De gebruiker kan heel snel met weinig klik- en scrollwerk op het kanaal komen dat hij of zij wilt bekijken.

Eigenlijk ligt de focus van Twitch dus duidelijk op de kijkers zelf. De homepagina is volledig op hun gericht want zij kunnen er super makkelijk in navigeren. Maar wat betekent dat voor streamers zelf? Nergens wordt er op de homepagina iets geadverteerd of in de spotlight gezet over zelf te streamen wat spijtig is. Want mensen die sneller weten hoe ze kunnen streamen zijn vele sneller gemotiveerd om ook te gaan streamen en zo meer gebruik te gaan maken van de website. Je komt pas zelf echt in contact met het feit dat je kan streamen eens dat je ingelogd bent. En zelfs dan nog moet je nog even zoeken naar hoe alles in elkaar zit.

In een notendop: Twitch focust zich heel hard op de kijkers in plaats van de streamers zelf. Dit is deels goed omdat er zo een belangrijk deel van de Twitch gemeenschap al een goede ervaring heeft bij het vinden en bekijken van kanalen maar dit zorgt er ook voor dat de streamers zelf wat worden verwaarloost. Als ze een grotere focus op streamers zouden leggen en hun zo meer zouden aanspreken dan zouden mensen sneller gemotiveerd zijn om zelf ook te beginnen met streamen en zo de website levend houden.

twitch.gif

Livestream.com

Nu over naar de meer volwassen concurrent van Twitch. Voordat ik start met de het bespreken hoe gebruiksvriendelijk de site is wil ik toch even zeggen dat deze site qua uiterlijk prachtig ontworpen. Moderne layout, zeer mooie kleurkeuze en alles komt ook zeer persoonlijk over. Maar dat terzijde.

Livestream zit eigenlijk aan de andere kant van het mes. Zij focussen zich vooral op het verkopen van hun producten voor mensen dat willen streamen waardoor het al moeilijk wordt om de livestreams zelf te vinden. Natuurlijk is dat geen al te goede eerste indruk. Wanneer een gebruiker moeite heeft om hetgeen te vinden waarvoor hij eigenlijk je product zou willen kopen dan kan men zich al heel snel de vraag stellen of het het eigenlijk wel waard is.

Om even dieper in te gaan op het feit dat ze hun navigatie een beetje hebben opgeofferd voor een betere verkoop wil ik even wijzen naar de drie bovenste woordjes: Broadcast, Capture en Discover. Ze zijn bedoelt om mensen te interesseren door een soort “slogan” te vormen maar hierdoor is het niet meer duidelijk wat ze betekenen. Zo is Broadcast eigenlijk maar gewoon info over het bedrijf zelf, Capture is productinfo en Discover zijn de livestreams zelf. Ook is het lange telefoonnummer dat rechts staat hun manier om te zeggen dat dat de link is naar de contactpagina. Origineel is het wel maar mensen gaan er minder snel op drukken omdat het anders is.

livestream.gif

Bekende site, slechte registerpagina

Telegram en Tumblr zijn beide twee bekende websites/applicaties die gebruikt worden om sociaal te zijn met andere mensen. Alles goed en wel maar hoe makkelijk is het om een account te maken en hoe veilig is het? Dat zal ik hier bespreken.

Telegram

Dit is een applicatie/website die net zoals Messenger vooral bedoelt is voor de gsm. Daarom gebruikt het je gsm-nummer om je account te identificeren. Slim idee als men het vooral op hun smartphone gebruikt maar niet zo slim als je ook nog een desktop applicatie en je ook via de website kan chatten. Wat als je geen smartphone of gsm hebt maar de meerderheid van je vrienden wel op Telegram zijn aan het chatten met elkaar? Hoe zou je dan ooit kunnen inloggen en meedoen met hun? Basically niet. Nu, toegegeven: de meerderheid van de mensen heeft nu wel ondertussen een gsm dus snel zal dat probleem niet voorkomen.

Maar daar blijft het niet bij. Omdat ze letterlijk alleen een telefoonnummer en de code vragen die naar dat nummer (of naar een eerder bevestigde Telegram applicatie waarop je ingelogd bent) wordt verstuurd is dit ook niet veilig! Als iemand je gsm gestolen heeft of je nog ingelogd staat op een ander openbaar apparaat dan kan iemand zonder moeite met hun eigen toestel inloggen op jouw account. Je kan ook geen wachtwoord of extra vraag instellen op je account wanneer je voor de eerste keer inlogt dus kort gezegd is Telegram een zeer onveilig platform om te chatten met andere mensen. En ten slotte kan je ook geen e-mail account linken aan je account. Dus als er iemand inlogt met een apparaat dat de applicatie niet gewent is zal je dat dus niet snel te weten komen.

Kort samengevat: omdat Telegram alleen maar een telefoonnummer en een code aanvragen is het ten eerste niet voor iedereen toegankelijk en ten tweede niet veilig omdat je account daardoor super toegankelijk is en er geen tweede optie voor beveiliging is.

Tumblr

Tumblr is een site dat eigenlijk een beetje de lovechild is van Pinterest of Twitter is. Je kan er komen om inspiratie op te doen maar tevens ook om (bekende) mensen te volgen die grappige dingen, fragmenten van je favoriete series posten, enzovoort. Maar hoe goed is hun registratiepagina.

We komen aan op de hoofdpagina, wat eigenlijk ook tegelijkertijd de inlogpagina is. Er staat een duidelijke “registreer” knop, dus natuurlijk klikken we daarop en komen we op de volgende pagina. Hier begint de miserie een beetje.tumblr

Waar klikken we nu op? Dit is een registratiepagina met een overload aan informatie. Stel je voor dat je nieuw bent op de site, waar zou je dan op klikken? Er is een zoekbar, zes cirkels die iets indiceren maar je weet niet wat, er zijn links naar de applicatie, één of andere “hoboslumgullion” heeft iets geplaatst maar dat is ook super vaag, je kan “aan te slag gaan” en je aanmelden. Welke van de opties zou je pakken? Nu, ze zijn slim geweest om nog de twee meest logische opties in het midden van de pagina te plaatsen en de juiste optie nog in het blauw te zetten. Maar inhoudelijk kunnen beide knoppen hetzelfde betekenen. Want ja, je wilt aan de slag met Tumblr maar je wilt je ook aanmelden dus er is nog altijd ruimte voor twijfel mogelijk.

tumblr2Anyway, we drukken op “aan de slag” en we komen, na een minuutje te liggen gokken, op de registratieform. Over het algemeen is het een redelijk normaal registratieform, niks daar er speciaal aan opvalt maar toch kan er misschien een ding of twee beter aan. Nu gaan we wel een beetje muggenziften maar ik vind het persoonlijk altijd beter als ik steeds mijn wachtwoord moeten bevestigen door het een tweede keer in te vullen. Want als je op deze form nu één keer je wachtwoord verkeerd invult dan ga je de volgende keer wanneer je inlogt er problemen mee hebben wat liefst niet de bedoeling is. Vervolgens vind ik het persoonlijk niet nodig om “geslacht” zelfs te plaatsen op als ze het zelfs niet gebruiken op de website zelf. En ten slotte mist er een heel belangrijk iets: de username. Hoe gaan mensen je herkennen? Moet je straks nu gewoon nog apart je username instellen op de website zelf? Dit zijn extra clicks en is extra moeite voor de gebruiker. Het zou vele gemakkelijker zijn als alles gewoon direct op één pagina stond. Dan is alles in één keer al gedaan en kan de gebruiker direct starten met browsen.

Speculatief Design

Wist je dat de J.J. Abrams, de regisseur van Star Trek, zeer revolutionair was in zijn ideeën over hoe de toekomst er ging uit zien? Wie had er in 1966 ooit gedacht dat bijvoorbeeld dat plastic plaatje met een scherm op van Captain Kirk iets ging zijn dat bijna iedereen in 2016 zou hebben? Naast de tablet komen er ook andere concepten naar voor in de serie, zoals bijvoorbeeld: de 3D-printer, een VR-bril en zelfs het microfoontje dat nu ondertussen inbegrepen is bij elk paar oortjes. Als Abrams nu nog een designer was en geen regisseur dan waren dit allemaal prachtvoorbeelden van speculatief design en dat is waar ik het nu ga over hebben.

14695532_199623747142106_8009007384085267694_n

Voor de mensen die denken van “tiens, die term heb ik al eerder gehoord”, dat kan zeker en vast! Het was namelijk het onderwerp van de Talking Lunch met Arno Geens van vorige woensdag. Maar wat is speculatief design nu eigenlijk? Speculatief design is het ontwerpen met de ogen naar de toekomst maar met de middelen van nu. De missing link maken tussen wat we nu hebben en waar we naar toe willen. De stap tussen tablets en hologrammen, om als een snel voorbeeld te geven.

Elon Musk

Een goed actueel voorbeeld van een speculatieve designer is Elon Musk. Hij is de geniale
ontwerper van de Tesla, één van de meest bekende elektronische auto’s van vandaag de dag.

how-elon-musk-started-infographic-700x466Hetgeen wat de Tesla zo speciaal maakt is dat het lijkt op een normale auto. Klinkt als een oxymoron maar wanneer je kijkt naar andere elektronische auto’s dan begrijp je wel wat ik bedoel. Nu, Musks ideeën stoppen niet daar. Hij is van plan om het hele systeem van het verkeer omver te werpen. Hij zou auto’s compleet elektronisch en onpersoonlijk willen maken. Dat je gewoon op staat, naar buiten gaat en dat daar een nieuwe auto staat. Die brengt je automatisch naar je werk (hij rijdt dus uit zichzelf, manueel besturen hoeft niet), zet je af en rijdt door naar de volgende klant.

Hierdoor zouden bussen niet nodig zijn, file’s zouden minimaal zijn, men zou het nut van verkeersborden in twijfel kunnen trekken, verkeersagressie zou verminderen, de bekleding en infrastructuur van auto’s zouden compleet moeten herdacht worden en nog meer positieve zaken. Nu er zouden natuurlijk ook problemen komen, zoals het feit dat bijvoorbeeld auto’s massaal gehackt zouden kunnen worden (het is al gebeurd bij een Tesla) omdat de auto’s allemaal op één netwerk zitten, bugs kunnen ook altijd voor komen en auto’s zouden weg vallen als statussymbool.

Denk speculatief

Klinkt het abstract? Doen de hersenen al pijn van alles waar je rekening mee moet houden? Goed! Want dat vind ik persoonlijk het interessantste aan speculatief design. Het is zo filosofisch en er zijn zoveel branches waar je op moet letten (zoals ecologie, economie, de maatschappij, enzovoort). Speculatief design is dus eigenlijk iets waar je altijd mee kunt rekening houden wanneer je nog eens iets ontwerpt. Hoe kun jij dat stapje verder gaan? Hoe kun je out of the box denken? Hoe kan jij het verschil maken bij het ontwerpen en maken van websites, apps of installaties? Denk erover na de volgende keer dat je iets ontwerpt en misschien word jij de volgende Elon Musk!

Create a free website or blog at WordPress.com.

Up ↑