Hoe ligt WP Brothers een stap voor met Sketch en Zeplin?

Een belangrijk moment in proces van website bouwen is de overdracht van het ontwerp van designer naar developer. Zodra het plaatje klaar is, moet alles worden omgezet naar code, en dat is uiteraard niet zo gepiept. Hoewel designers en developers prima met elkaar overweg kunnen, spreken zij wel een andere taal; die van pixels en die van enen en nullen. Als er geen aandacht wordt besteed aan deze overdracht, gaat er een hoop lost in translation.
sketch

Hoewel we intern vaak nog geloven dat het beter kan, zien we bij extern aangeleverde ontwerpen hoe wij bij WP Brothers voor liggen op de concurrentie. Wij denken dat dit niet alleen komt door Sketch en Zeplin, maar ook door de sterke focus op de samenwerking tussen ons ontwerpteam en front-endteam en de vele stappen die we afgelopen jaren al hebben gezet.

Ontwerpproces verweven met Sketch

Ons ontwerpproces is inmiddels verweven met Sketch. In Sketch beginnen we elk ontwerp namelijk met ons basis ‘Design system’: een soort doos lego met kleine en grote blokjes die we op allerlei manieren in elkaar kunnen klikken. Hierin hebben we kant-en-klare componenten en elementen gemaakt waarmee we snel een structuur kunnen neerzetten op basis van de inhoud, websitestructuur en doelen van klanten. 

Met behulp van handige plugins kunnen we deze structuur vervolgens gemakkelijk aanpassen en invullen. Zo besteden we minder tijd aan het herhalen van hetzelfde element, zoals een knop perfectioneren en juist meer tijd aan het nadenken over de doelen van gebruikers. Dit zorgt ervoor dat we ook in kleinere projecten slimme websites kunnen creëren die niet alleen mooi zijn, maar ook gewoon heel goed werken. Lees in ons andere blog hoe we hier ook paper prototyping voor inzetten.

Sketch zelf blijft ook constant ontwikkelen en in combinatie met de externe plugins zorgt dit voor een flexibel programma dat goed kijkt naar ontwikkelen in de markt en wensen van gebruikers. Zo kunnen we tegenwoordig ontwerpen maken waar elementen zich automatisch aanpassen aan de content. Denk bijvoorbeeld aan een knop die groter wordt als er meer tekst in wordt gezet, of een lijstje met menu-items die allemaal netjes dezelfde afstand van elkaar hebben. 

Elementen passen zich in Sketch automatisch aan aan de content

Overdracht naar developers

Om dan weer even terug te komen op het begin van het verhaal: de overdracht van een ontwerper naar een developer. ‘Vroeger’ was dit een flinke klus, die veel eiste van zowel ontwerper als developer. Wanneer een ontwerper een website klaar had moest hij of zij deze in allerlei losse stukjes gaan knippen en dit aanleveren aan de developer. Vervolgens moest deze ontwerper per onderdeel uitleggen hoe groot dit uiteindelijk precies op de website moest worden en hoe elementen zich tot elkaar zouden verhouden. 

Gelukkig gebruiken wij bij WP Brothers al een tijd een aantal handige tools om de kloof tussen ontwerp en frontend te dichten. Zo maken wij klikbare prototypes van onze ontwerp in inVision, zodat klanten en developers kunnen zien hoe wij onze ontwerpen in de praktijk graag zien werken. 

Klikbaar prototype in Invision

Zeplin als tool voor samenwerking

De belangrijkste tool die wij gebruiken is echter Zeplin. Dit programma is voor ons de ideale tool voor samenwerking en overdracht van ontwerp naar development. Zie het als de Google Translate voor ontwerpers en developers. Vanuit Sketch kunnen ontwerpers bestanden direct uploaden naar de cloudomgeving van Zeplin. Daar kunnen developers de ontwerpen bekijken en becommentariëren. 

De grootste truc zit in de achterkant van Zeplin: alle informatie die developers nodig hebben kunnen zij uit het ontwerp halen. Elk element kan los worden aangeklikt en daarbij is van alles zichtbaar: van grootte van element, afstand tot andere elementen tot en met schaduwen en kleuren. Bovendien is ook helder in te zien welke algemene tekst- en kleurstijlen door het ontwerp heen worden gebruikt. 

Zo is het snel te zien als er foutjes en oneffenheden zijn, en is de stijl gemakkelijk en consequent door te voeren, wat zorgt voor een gebalanceerde en rustige website. Verder is ook de overdracht van ‘assets’, zoals iconen, foto’s en logo’s een eenvoudig klusje geworden. In plaats van handmatige exports door ontwerpers is het slechts een kwestie van definiëren in Sketch welke elementen de developer moet kunnen downloaden. De developer kan vervolgens in Zeplin gemakkelijk de juiste plaatjes downloaden, op de manier die hij/zij wil: van vector SVG tot transparante PNG.

Onlangs is ook de functie van componenten toegevoegd, iets dat feilloos aansluit op ons design system, dat ook opgebouwd is uit vaste componenten. Developers kunnen hiermee zien welke componenten op welke plek worden herhaald & kunnen componenten geïsoleerd van het volledig ontwerp bekijken. Dit geeft de developer veel meer ruimte om ook zijn eigen legodoos te bouwen, waarmee hij of zij dus ook weer super gestructureerd kan werken aan websites die netjes in elkaar zitten en gemakkelijk kunnen worden uitgebreid.

Nieuwe functie 'componenten' in Zeplin

Andere werkwijze met Zeplin & Sketch

Uiteraard blijft een goede samenwerking tussen ontwerp en front end belangrijk: we gooien het niet zomaar over de schutting. Maar met Zeplin als tolk tussen pixels en enen en nullen verloopt de praktische overdracht soepel. Er kan meer worden overlegd tussen ontwerpers en developers over de werking van de website en haar functionaliteiten, dan over de grootte en kleur van een knopje. 

Al met al zorgen de tools Sketch en Zeplin dus voor een totaal andere werkwijze die veel gestructureerder is en een hoop tijdrovend, herhaald werk wegneemt. Dit geeft ons veel meer tijd om tijdens een project na te denken over hoe we op een slimme manier kunnen zorgen voor meer conversie en een betere gebruikerservaring. En dat is wat je wilt: niet alleen mooie plaatjes maken, maar dingen ontwerpen die écht werken. Minder focus op fabrieksmatige productie en meer op het bereiken van business goals en user goals dus!  

Hulp nodig?

Zoek je hulp bij het maken van een goed gestructureerd website ontwerp of bij het overdragen van een ontwerp naar development op een goede manier? Of zoek je een partij die jouw ontwerp kan bouwen? Dan is WP Brothers de perfecte partner. Door onze grote ervaring in ontwerp en frontend development en onze soepele samenwerking tussen deze afdelingen kunnen we je helpen bij diverse uitdagingen. Neem gerust contact op, zeker als je in de regio Utrecht of Rotterdam zit.

Sjors van Elst

Neem contact op met Freek
Altijd te bereiken via
Contact opnemen?

Whitepaper

Hoe maak je een goede website?

Download whitepaper

He Marketeer,

Waar dien je rekening mee houden als je een nieuwe website gaat realiseren? Wij helpen je graag. 

Groeten WP Brothers