Een onmisbare tool voor webdesigners

Sinds Adobe een aantal jaar geleden stopte met het doorontwikkelen van Fireworks zijn wij geleidelijk overgestapt op het gebruiken van Sketch. In korte tijd is dit product uitgegroeid tot een onmisbare tool voor webdesigners verspreid over de hele wereld. Ook voor ons is het niet meer weg te denken. Ik vertel graag iets over een nieuwe feature die in mijn ogen de huidige workflow van design teams drastisch kan gaan veranderen én verbeteren: Sketch Libraries. Als bonus was Pieter Omvlee, oprichter van Bohemian Coding, bereid een aantal vragen te beantwoorden over deze nieuwe release.

Om te snappen wat Sketch libraries zo belangrijk en bijzonder maakt, is het goed om te weten wat symbols zijn. Ben je bekend met dit principe, scroll dan door naar Sketch Libraries.

Laten we als voorbeeld voor een symbol een button nemen. Voordat er überhaupt iets als symbols of styles bestonden, betekende het maken van een button voor een designer het volgende:

1. Maak een vorm (bijvoorbeeld een rechthoek)
2. Bepaal de kleur van het vlak en eventueel de kleur en dikte van de rand
3. Plaats tekst in de rechthoek, inclusief de uitlijning en stijl daarvan
4. Indien wenselijk nog wat andere visuele effecten zoals een schaduw.
5. Is dit naar tevredenheid? Dan groepeer je alles tot een geheel en maak je wat varianten voor verschillende statussen (hoe ziet de button eruit als hij ingedrukt is of inactief, etc.)

 

Had je deze button nog ergens nodig op dezelfde of een andere pagina? Dan maakte je een kopie. Voor elke button met dezelfde stijl, maar een andere tekst of grootte, moest je steeds een kopie maken en deze handmatig aanpassen.

Zoals je begrijpt allemaal behoorlijk omslachtig en wanneer iemand besloot dat toch de kleur overal iets anders moest zijn of een ander lettertype gebruikt worden, dan betekende dit dat je overal alles handmatig kon gaan aanpassen. Geen CSS dus voor designers.

De introductie van symbols en van shared styles (voor tekststijlen) maakte dit al een stuk makkelijker. Ben je tevreden met een button, dan maak je er een symbol van. Dit symbol gebruik je zo vaak als je maar wil. Mocht er in de loop der tijd een verandering nodig zijn, dan pas je het in 1 symbol aan en worden alle kopieën van dat symbol automatisch geüpdatet. Symbols hoeven niet alleen kleine elementen als buttons of tekstvelden te zijn. Je kunt ook van headers en footers symbols maken en die hergebruiken. Het op een slimme manier toepassen van deze techniek en nested symbols (symbols in symbols) maakt de workflow van designer veel consistenter en efficiënter.Er was echter nog één belangrijke spelbreker: er was geen manier om symbols uit het ene bestand te koppelen aan dezelfde symbols in een ander bestand. Kortom, als je met meerdere designers aan een grote opdracht werkt – verspreid over meerdere bestanden – dan was er nog geen (native) oplossing om de symbols te synchroniseren. Besluit Jan dat een button toch afgeronde hoeken moet hebben, dan moet Piet hiervan op de hoogte gebracht worden en deze wijziging handmatig doorvoeren.

Bij een Sketch Meetup in Den Haag vorig jaar kregen de bezoekers al een eerste glimp van het shared library systeem waar de ontwikkelaars van Bohemian mee bezig waren en nu kunnen we dankzij de nieuwe versie van Sketch (v47) er eindelijk mee aan de slag. Ik kan je nu al zeggen dat het geweldig is!

Libraries zijn sketchbestanden waarin de designer symbols kan plaatsen die door meerdere gebruikers gebruikt kunnen worden in andere documenten. Wanneer je een symbol in een library aanpast, worden wijzigingen in dat symbol ook doorgevoerd in alle andere bestanden waarin hetzelfde symbol voorkomt (als de gebruiker dat wil tenminste).

Een library maken is eigenlijk niets anders dan het maken van een gewoon Sketch bestand met symbols. Er hoeft dus geen speciaal librarybestand gecreëerd te worden. Nieuw is dat je nu, wanneer je een regulier ontwerpbestand opent of aanmaakt, in de instellingen van Sketch kunt selecteren of je gebruik wil maken van een library en zo ja welke. Het kunnen er ook meerdere tegelijk zijn. Dat is handig als je bijvoorbeeld een library met standaard iOS componenten gescheiden wilt houden van een library met je eigen custom symbols.

Tot nu toe nog steeds niet veel spannends, maar het magische vindt plaats wanneer jij of iemand anders een symbol, dat in een library staat, aanpast en opslaat. In het bestand waar hetzelfde symbol gebruikt wordt, verschijnt nu rechts boven in het scherm een kleine melding dat er een wijziging is in een symbol. Zodra je hier op klikt zie je van alle symbols waar wijzigingen zijn gemaakt de oude versie en de nieuwe versie en heb je de keuze om de wijziging door te voeren of niet. Super!

Wanneer je je library op Google Drive of in Dropbox zet, kun je deze breed delen in je organisatie of team. Dit betekent dus dat er makkelijker door meerdere mensen gewerkt kan worden aan het bouwen van een design language of styleguide. Kleine aanpassingen kunnen gemakkelijk gepusht worden naar je pagina-ontwerpen.

Het gebruiken van libraries is dus heel erg simpel en vergt eigenlijk nauwelijks aanpassingen. Dat betekent niet dat er nog het een en andere verbeterd zou kunnen worden:

• Het probleem blijft dat je niet met meerdere menen tegelijk je librarybestand kunt aanpassen. Sketch Libraries is dus geen Git voor designers.
• Wanneer je symbolen bewerkt buiten de context van je paginaontwerp en de grootte van individuele symbolen aanpast, dan kan je design behoorlijk aangetast worden wanneer je de symbolen update in je werkbestand. Door handig gebruik te maken van de ‘auto-layout’ plugin kan dit deels voorkomen worden, maar loop na het updaten van symbolen uit een library dus altijd nog even al je artboards langs om te checken of verticale en horizontale uitlijningen nog wel kloppen
• Libraries werken op dit moment dus alleen met symbolen en niet met styles. Wil je op een centrale plek dus ook je kleuren en tekststijlen beheren, dan zal je ook van die elementen nested symbols moeten maken. Enkele out of the box design libraries die te downloaden en/of te koop zijn, maken gebruik van deze structuur, maar zijn daardoor ook vrij complex wanneer je ze wil aanpassen.
• De melding dat er een aanpassing is kan makkelijk over het hoofd gezien worden. Deze zou wat mij betreft wat meer in your face mogen zijn.

 

What’s next?

Met deze nieuwe feature zet Bohemian weer een enorme stap in de ontwikkeling van Sketch tot het ultieme webdesign platform (iets wat het in mijn ogen al bijna is). Tijdens meetups is meerdere malen gebleken dat de mensen achter Bohemian zich vooral bezighouden met het optimaliseren van Sketch op het gebied van designen. Prototypen of animeren laten zij tot nu toe bewust over aan andere platformen of door makers van externe plugins. De gedachte hierachter is dat je niet in alles even goed kan zijn en dus beter je energie kan stoppen in je core business. De toekomst zal moeten uitwijzen of de eindgebruikers er net zo over denken nu Adobe XD steeds krachtiger wordt en wél een aantal van die mogelijkheden in hun design tool hebben gestopt. Het tijdens dit schrijven aangekondigde InVision Studio lijkt ook de strijd serieus aan te gaan en combineert dus ook meerdere functionaliteiten in één design tool. In hoeverre dit een bedreiging is voor Sketch moeten we voorlopig nog even afwachten.

Op het gebied van ‘collaborative design’ zet Sketch nu dus grote stappen (en voelen ze wellicht de hete adem van Figma in hun nek?). Gedeelde libraries is voor gebruikers echt iets om blij van te worden, maar we lopen nog achter op developers als het gaat om een betrouwbaar versiebeheersysteem. De belangrijkste kandidaat om dit probleem op te lossen is Abstract. Het team achter Abstract heeft een (betaald) platform gecreëerd dat het mogelijk maakt om samen aan 1 bestand te werken, verschillende versies van elkaar af te splitsen en deze later weer samen te voegen. Net zoals developers dat doen met Git. Momenteel werkt dit nog niet perfect samen met de Libraries van Sketch, maar dat is iets wat wij zeker in de gaten gaan houden en zullen gaan testen in de nabije toekomst.

Naar aanleiding van deze belangrijke release van Sketch heb ik Pieter Omvlee een aantal vragen gesteld per e-mail. Gelukkig was hij ondanks een drukke agenda rondom de release bereid ze te beantwoorden en dat wil ik uiteraard graag met jullie delen.

Hoe bijzonder is deze update voor jullie zelf geweest? En was dit nog niet revolutionair genoeg om er gelijk v50 van te maken?

 

Omvlee: Het is zonder twijfel de grootste update van het jaar ja. Wat dat betreft zou het de v50 titel waard zijn geweest, maar dat hebben we dus bewust niet gedaan. We zijn dus een jaar of wat geleden afgestapt van de 3.x vs 4.0 release dans. Dat was vooral ingegeven door de wens om updates uit te kunnen brengen wanneer we willen en niet dingen hoeven op te sparen voor een betaalde update. Dus heel bewust kan elke update nu iets groots (of kleins) bevatten. We willen vermijden dat mensen denken dat v50 eigenlijk 5.0 is en dus een betaalde update.

 

Tijdens de meetup in Den Haag vorig jaar waren er van veel deelnemers vragen als “Wanneer kunnen we in Sketch prototypen?”, “Komt er ook een animatie mogelijkheid?”, “Wordt collaborative design een nieuwe optie?”, etc. Kortom, mensen wilden eigenlijk een soort tool van jullie die Flinto, Figma, Principle, InVision en Sketch combineert, een haast onmogelijke taak. In mijn ogen niet geheel onterecht was jullie reactie daarop dan ook dat ontwikkelaars vooral zich moesten focussen 1 van deze dingen ipv alles te willen kunnen en dat Sketch bouwers van plugins en koppelingen tussen verschillende applicaties toejuicht. In hoeverre sta je nog steeds achter dit standpunt en sluit je daarmee inderdaad één of alle van die hierboven genoemde mogelijkheden uit?

 

Omvlee: Daar sta ik nog steeds achter. Inderdaad het combineren van alle bovenstaande tools is een schier onmogelijke taak. Je krijgt dan een gedrocht van een app waar de beginner niet meer mee uit de voeten kan. Wat je ziet gebeuren is dat iedereen een klein beetje om zich heen grijpt; Marvel en Framer hebben bijvoorbeeld hele simpele teken tools, maar dat valt in het niet bij wat Sketch heeft bijvoorbeeld. Ik denk dat wij nog steeds het beste kunnen blijven focussen op Sketch. Libraries is daar een goed voorbeeld van denk ik, als je dat goed wilt doen moet je dat echt diep in het app integreren. Ik denk dat we daar beter onze focus op leggen dan op Prototyping.

 

Het merendeel van de laatste updates en ook die van v47 draait om het steeds verder optimaliseren van Sketch en het ondersteunen van de workflow van individuele gebruikers en design teams. In dat licht lijkt wat Abstract doet met hun ‘Git for Design’ iets wat jullie met extra interesse bekijken en zo zijn er wel vaker functionaliteiten geweest die door 3rd parties al eerder gelanceerd werden (Craft library bijvoorbeeld). Hoe bepalen jullie wat er wel en niet een native Sketch feature zou moeten worden? Is dat een natuurlijk proces met een democratisch besluit van wat bovenaan de to do list staat of is er een soort filosofie of set gouden regels waaraan iets moet voldoen om in aanmerking te komen?

 

Omvlee: Bepalen wat wel en niet in Sketch hoort gaat vooral op gevoel. Er is een core groep van 3-4 mensen die Sketch door en door kennen en samen bepalen we wat wel past en wat niet.

 

Hoe groot is jouw persoonlijke inbreng nog bij het bepalen van ‘the next big feature’ bij de doorontwikkeling van Sketch?

 

Omvlee: Mijn persoonlijke inbreng is nog steeds even groot als hij altijd was. Als onderdeel van die core groep ben ik nog steeds een groot onderdeel van bepalen wat er wel en niet in gaat, en in welke volgorde.

 

Voor zover je er iets over kunt zeggen, hoe zie je de toekomst van Bohemian (meerdere tools wellicht?) en Sketch voor je? Is er bijvoorbeeld een punt waarop je zou zeggen als dit en dit er ook nog in zit dan is het product ‘af’?

Omvlee: Sketch geeft ons genoeg werk zou ik zo denken! Sketch is nooit ‘af’, maar ik denk wel dat we op een punt zullen komen waar alle belangrijke features erin zitten. Ik bedoel, toen we Sketch 2.0 uitbrachten wisten we dat er zeker een half dozijn grote features waren die ontbraken. Die worden langzaam ingevuld nu. Er zal altijd werk te doen blijven, maar ik denk dat het belangrijk is om te herkennen wanneer het programma ‘af’ is, en nog 10 grote features zouden het de nieuwe Photoshop maken waar ze 3D, timelines en de kitchen sink in hebben gegooid. Of kijk naar Microsoft Office. Volgens mij was Word voor 90% van de gebruikers wel zo’n beetje ‘af’ voor het jaar 2000… Dat punt herkennen is misschien lastig als je er zelf middenin zit…

 

Alvast bedankt voor het nemen van de tijd! Ik hoop dat er snel weer een Meetup komt in Den Haag en ben uiteraard zéér benieuwd naar wat de volgende grote stap gaat zijn in de doorontwikkeling!

 

Omvlee: Geen probleem. Mochten we het bedrijf weer bij elkaar brengen in Den Haag voor een meetup dan zal een user meetup er vast weer bij horen.