De lancering van de nieuwste digital design tool Invision Studio.

Foto van Andree

Geschreven door Andrée Lange

Opeens was hij er; de aankondiging van Invision Studio, het nieuwste speeltje van Invision op gebied van screen design. De veelbelovende teaser ging als een lopend vuurtje door de design wereld. En toen ik hoorde dat Invision een productpresentatie zou geven in de A’dam Toren, was ik er natuurlijk als de kippen bij en heb ik mij direct ingeschreven. Gelukkig heb ik hierdoor een plaats op de gastenlijst kunnen bemachtigen en mocht ik gisteren Invision Studio uit de eerste hand aanschouwen!

Productpresentatie Invision

Dat Invision Studio zoveel meer is dan zomaar een screen design tool werd mij tijdens de presentatie duidelijk. Wauw, wat was ik onder de indruk! Persoonlijk denk ik dat Invision Studio een zeer goede concurrent kan worden van Sketch, als het überhaupt al als concurrent gezien kan worden. Sketch gebruiken we bij Level Level voor al onze designs. Studio gaat voor mij persoonlijk (en ik denk voor vele andere Digital Designers) ’the missing link’ bieden in de huidige screen design tools; prototyping & animation. En best of all; de tool wordt gratis.

Invision Studio

Ik kan niet wachten om het te gaan gebruiken maar wat kan je eigenlijk allemaal gaan verwachten van Invision Studio?

Screen design tool

Net als bij Sketch is Invision Studio als screen design tool in te zetten. Studio zal dezelfde tools hebben die je als digital designer mag verwachten. Te denken valt aan de rectangle tool en andere shape tools zoals pentool, richt text editing etc. De basis om concepten om te zetten in visuele ontwerpen.

Responsive by nature

Waar wij bij Level Level natuurlijk vanuit de mobile first gedachte ontwerpen, zorgen wij ervoor dat onze ontwerpen er op verschillende andere devices goed uitzien. Studio maakt het responsive ontwerp proces een stukje makkelijker en maakt gebruik van elementen op basis van percentages. Door deze percentages in te zetten zijn deze blokken veel makkelijker schaalbaar en kan je de basis van je responsive ontwerp veel makkelijker opzetten.

Prototyping

Bij Level Level vinden we het belangrijk om soms een prototype van iets te maken; om een bepaald gedrag van een element op de website te testen, bijvoorbeeld hoe de navigatie of de bestelflow van een webshop zich gedraagt. Je zal in Studio direct je ontwerpen kunnen gaan prototypen. Zelf vond ik dit gedeelte aardig op Adobe XD lijken. (de nieuwste screen design tool van Adobe, die de concurrentie aan wilde gaan met Sketch). Je sleept namelijk visuele lijntjes van de ene naar de andere pagina, van het object dat je een actie wilt geven tot het doel. Door een simpele ‘trigger’ (tap, swipe etc.) en een transitie mee te geven, zorg je dat je een werkend prototype krijgt.

Motion Animation

Maar waar Studio, in mijn opinie, verder in gaat dan Adobe XD en Sketch is motion animation. Eindelijk wordt het mogelijk om micro animaties, die net die subtiele verfijning binnen je ontwerp bieden, zelf te kunnen prototypen. Met zo’n micro animatie kunnen we de eindgebruiker net wat meer beleving en context bieden op een website. Denk hierbij aan een kleine animatie die ontstaat wanneer je een product je winkelmandje in ‘klikt’.

In Studio is er ook een curve editor zodat je je animaties de ‘easing’ en daarmee verfijning kan geven die het nodig heeft. Persoonlijk haalt dit voor mij een groot obstakel weg in de communicatie tussen ontwerp en development. Wij, als designers, kunnen nu snel een animatie opzetten die daadwerkelijk door developers begrepen en gebouwd kan worden.

Voor meer achtergrond, over hoe je micro animaties je design kunnen optimaliseren, verwijs ik je graag door naar het het artikel ‘The principles of UX Choreography’ van Rebecca Ussai.

Design Systems

Sketch was er al een tijdje mee bezig: design libraries. Een design library stelt je in staat om een bibliotheek van ontwerp elementen aan te leggen en zo een eigen ‘Design Language’ te creëren. Met een team aan hetzelfde ontwerp werken wordt op deze manier makkelijker omdat je deze elementen centraal in een bibliotheek hebt staan. Als designer X een verandering aanbrengt aan het element, krijgt designer Y een melding dat het element is veranderd en of hij deze wil updaten. Zo kan je bijvoorbeeld makkelijker een besluit nemen om alle buttons in het ontwerp groen in plaats van rood te maken.

Design libraries in InVision Studio

Collaboration

Maar naast Invision Studio is er ook Invision zelf; we hebben het tenslotte over meer dan alleen een ontwerpprogramma. Invision gebruiken we al langer bij Level Level om ontwerpen aan onze klanten te presenteren en feedback te verzamelen. Freehand by Invision gebruiken we om interne design feedback van elkaar te vragen. De Inspect tool gebruiken onze developers om de nodige informatie uit ontwerpen te halen, zodat ze die om kunnen zetten in werkende code. Studio zal, zeker omdat het product ook van Invision is, naadloos aansluiten op Invision zelf. Van meerdere tools naar het gebruiken van één hele fijne tool.

De open bèta van Invision Studio wordt verwacht in Januari 2018. Bij Level Level kunnen wij in ieder geval niet wachten om met Studio aan de slag te gaan en zelf te ervaren hoe dit ons werk beter en makkelijker gaat maken!

Vertel ons meer over je plannen en ambities!

We zijn klaar om jullie online uitdaging op te pakken.