Sketch en Invision

Van design naar klikbaar prototype met Sketch en InVision

Bij Elephant zijn we constant op zoek naar manieren om het ontwerpproces zo efficiënt mogelijk te maken. We gebruiken verschillende tools die ons hierbij helpen. Tot onze persoonlijke favorieten behoren Sketch en InVision. Wat zijn dit precies voor tools en hoe gebruiken we ze bij Elephant?

Sketch

Jarenlang werd Photoshop door UX designers als dé tool of the trade gezien voor het ontwerpen van websites en interfaces. Dit ondanks het feit dat Photoshop nooit met het oog op interface design ontworpen is. Het is van oorsprong namelijk een tool om foto’s mee te bewerken, en daar kun je het tot op de dag van vandaag nog steeds uitstekend voor gebruiken.

Toch werd Photoshop tot voor kort veelvuldig gebruikt om user interfaces en websites te ontwerpen. Dit simpelweg omdat er geen volwaardig alternatief beschikbaar was dat wél vanuit een user interface perspectief ontwikkeld is. Dit is waar Sketch om de hoek komt kijken.

Voorbeeld van Sketch

Sketch is een Mac-applicatie, met klem ontworpen voor web en interface designers. Het zit vol met goede tools die je als ontwerper nodig hebt om op een efficiënte manier gelikte ontwerpen te maken. Wij zijn in ieder geval fan!

De voordelen van Sketch

  • Artboards
. In Sketch kun je per pagina meerdere Artboards aanmaken. Zo kun je bijvoorbeeld met verschillende Artboards voor elke pagina een versie voor mobiel, tablet en desktop ontwerpen zonder dat je hiervoor een aparte pagina hoeft aan te maken. Op deze manier blijft je bronbestand overzichtelijk.
  • Objecten structureren en groeperen
. Het structureren en groeperen van alle objecten binnen je canvas in Sketch werkt erg eenvoudig. Je kunt verschillende objecten namelijk selecteren en met één klik groeperen. Zo voorkom je dat je bronbestand onoverzichtelijk wordt.
  • Symbols. Elementen die op meerdere pagina’s in dezelfde vorm terugkomen, zoals een header en footer, kun je in Sketch omzetten in een Symbol. Wijzigingen aan een Symbol worden direct doorgevoerd op alle plekken waar deze gebruikt wordt. Dat scheelt tijd en verkleint de kans op fouten.
  • Linked Styles
. Als je voor het web ontwerpt, is het belangrijk dat alle paragrafen, kopteksten, buttons en andere elementen in grote lijnen dezelfde opmaak krijgen. Met behulp van Linked Styles zorg je ervoor dat alle paragrafen met dezelfde Linked Style dezelfde opmaak blijven houden.
  • Combinatie van vectoren en pixels. 
Sketch biedt de mogelijkheid  om zowel met vector-elementen als met vaste pixels te werken. Je kunt dus probleemloos elementen, zoals buttons, uitrekken en schalen zonder dat de kwaliteit ervan verloren gaat.

Hoe wij Sketch gebruiken

Elk project in Sketch starten we met het aanmaken van een Styleguide. Hierin definiëren en ontwerpen we alle elementen die we gaan gebruiken. Denk hierbij aan typografie, kleuren, tekststijlen, buttons, formulierelementen en tabellen. De styleguide bevat dus een overzicht van hoe elementen eruitzien en hoe ze zich gedragen. Niet alleen voor de ontwerper is dit handig, maar zeker ook voor de developer.

Styleguide in Sketch

Nadat de Styleguide is opgezet en de belangrijkste elementen zijn vormgegeven, starten we met het ontwerpen van het eerste scherm. In veel gevallen is dit de homepage. Dit gebeurt meestal op basis van een of meerdere schetsen op papier of op basis van een wireframe.

Voor elke te ontwerpen pagina maken we een Sketch Page aan. Afhankelijk van het type project maken we per pagina drie Artboards aan: Mobile, Tablet, Desktop. Met een Artboard creëer je als het ware een afgebakend gebied binnen het oneindige canvas van Sketch. Door de pagina’s in één document voor verschillende schermgroottes en apparaten te ontwerpen, zorgen we ervoor dat onze developers een goed beeld krijgen van hoe het ontwerp zich moet gaan gedragen op verschillende schermen.

En dan: InVision

Nadat we een aantal schermen hebben ontworpen, wordt het tijd om ze te presenteren aan de klant. Om de flow van de website en uitgewerkte interacties te laten zien, combineren we de statische schermen tot een klikbaar, interactief prototype. Op deze manier zetten we onze designpresentatie meer kracht bij en krijgt de opdrachtgever meteen een goed beeld van hoe de website gaat werken. Voor het klikbaar maken van de ontworpen schermen gebruiken we de prototypingtool InVision.

Voorbeeld van Invision

Van statisch naar interactief

Met InVision combineren we binnen enkele minuten onze statische ontwerpen tot een interactief prototype. We maken hiervoor gebruik van Invision Sync: een tool die de schermen uit ons Sketch bronbestand automatisch in InVision laadt. Elke update aan het ontwerp in Sketch wordt hierdoor direct doorgevoerd in InVision. De schermen in InVision zijn hierdoor altijd de meest recente.

Zodra alle schermen in InVision staan, maken we alle buttons en links klikbaar en zorgen we ervoor dat deze naar de juiste pagina’s verwijzen. Ook hover effecten, dropdown menu’s, fixed elementen en scroll to’s voegen we via InVision toe om ervoor te zorgen dat de beleving van de klant optimaal is.

Dan plannen we een demo in om samen met de klant het prototype door te lopen. Tijdens deze demo lichten we toe welke keuzes we hebben gemaakt en waarom. Na afloop sturen we onze klanten een InVision-link, zodat zij het prototype op hun gemak nog eens kunnen bekijken.

Feedback verzamelen

Meestal komt er op de eerste ontwerpen nog wel wat feedback, zowel van de klant als van andere Elephant teammembers die het design bekijken. Na de demo laten we daarom alle betrokkenen de InVision comment tool gebruiken om opmerkingen te plaatsen. Op deze manier verzamelen we alle feedback op één centrale plek.

Van dichtbij meemaken hoe wij Sketch en InVision voor jouw project inzetten?
Neem contact met ons op en vertel ons over jouw project!