Case Study
SOFTWARE
Adobe XD
Photoshop
Sublime
Vanaf
NOVEMBER 2018
Webapp ontwikkeling/
The Invester
The Invester is een webapp met spelelementen. Het is een samenkomst van mijn langdurige design kennis i.c.m. mijn recenter geleerde front-end coderen.
Het idee achter de app is simpel, je hebt een aantal beurten en 1000 credits om te beginnen. De aandelenmarkt fluctueert in waarde per bedrijf in iedere ronde en het is aan jou om je credits zo goed mogelijk te investeren. Hierbij zijn er een aantal standaard factoren en een aantal verrassingselementen.
Als ervaren UX en UI Designer wilde ik het geheel logischerwijs zelf voorzien van een duidelijke en aantrekkelijke layout. Ik wilde dit echter wel vanwege de spelelementen ook speelser maken. De interface werd vanaf de start zo opgezet dat deze n.a.v. keuzes van de gebruiker en willekeurige gebeurtenissen aangepast kon worden. In de komende vernieuwingen wil ik dit nog veel verder uitbreiden, maar nu is het zo dat de grafische elementen veranderen naar gelang de waarde van de aandelen stijgt, daalt of gelijk blijft. Daarnaast reageert het ook op je saldo. Als dit niet volstaat zal dit visueel al snel duidelijk zijn en zo is de app ook visueel dynamisch en tegelijk duidelijker.
De app is uitgewerkt voor mobiele schermen omdat het vooral een toepassing is die je even lekker op de bank of in de bus voor een paar ronden speelt. De opzet is zo minimaal mogelijk zodat het zeer snel inlaadt, maar is wel voorzien van een strakke lay-out met kleurgebruik dat het spel ondersteund en tegelijk aantoont dat het een serieus product is.
De app is opgezet in HTML5, CSS3 en Javascript. Door gebruik te maken van JS kan iedere browser omgaan met de app en maakt het dus niet veel uit welk programma je voorkeur heeft. De app zal moeten draaien op iedere telefoon, tablet en laptop van de laatste 10 jaar en zeker op de toekomstige hardware/software.
Technieken
Design
Het design is deels op de bestaande aandelenmart gebasseerd, maar daarnaast vooral voorzien van een strakke/duidelijke layout voor de mobiele schermen
Javascript
Zodat iedere browser ondersteund moet worden en het project nog jaren onderhouden kan worden ben ik voor deze immens populaire front-end taal gegaan
Bodymovin/Lottie animaties
Deze animaties zijn in After Effects gemaakt en daar klaargezet voor het web. Deze reageren op de gebeurtenissen in het spel
HTML5 & CSS3
De algemene opmaak is zoals een kwalitatieve website opgezet, met op maat gemaakte HTML en CSS voor een layout die in iedere browser moet werken
Dynamische DOM aanpassingen
De Javascript is zo opgezet dat de interface naar aanleiding van de keuzes van de gebruiker en de dynamiek van de app zelf aangepast kan worden voor een complete ervaring