Waarom Bram afgelopen jaar meer dan 70 designs met Sketch ontwierp

Geschreven door Bram op 30/01/2017

Als webdesigner volg ik andere ontwerpers op de voet, via Twitter, blogs of door naar conferenties te gaan. Zo vond ik onder meer inspiratie in Munchen en Lissabon.  

Innovatie in webdesign zit hem vaak in trends, stijlen en smaken. Qua tools en programma’s was er jarenlang maar 1 echte optie: Photoshop. Was. Want sinds het Nederlandse Bohemian Coding de Mac-applicatie Sketch op de markt bracht, is er een alternatief op de markt dat aan een flinke opmars bezig is.

Ik probeerde de demo van Sketch een klein jaar geleden uit. Ondertussen heb ik meer dan 70 designs in Sketch gemaakt. Het is het eerste programma dat ik open als ik aan mijn werkdag begin. Ik leg hieronder uit waarom Sketch een uitstekend programma is voor webdesigners die user experience hoog in het vaandel dragen.

Sketch is razendsnel en vederlicht

Nadat ik de applicatie voor het eerst geïnstalleerd had, maakte ik een Photoshop-design 1 op 1 na. Wat me meteen opviel: Sketch bevat minder functionaliteiten. Dat lijkt een nadeel, maar het zorgt ervoor dat Sketch razendsnel loopt. 

Het programma start snel op en elke bewerking verloopt soepel. Dat maakt het een plezier om mee te werken. Photoshop bevat ontelbaar veel meer functionaliteiten – waarvan ik uiteindelijk maar een fractie nodig heb – waardoor het altijd wat log aanvoelt. Ook de bestanden die ik met Sketch maak, zijn een pak kleiner dan de gigantische psd’s die je niet zomaar naar iemand doorstuurt.

What you see is what you get

Zelfs na jaren ervaring met Photoshop, loop ik weleens verloren in de vele layers en effecten van het programma. Sketch is op dat vlak veel eenvoudiger en intuïtiever. Het technische werk wordt daarmee tot een minimum beperkt. Ik kan mij meer toeleggen op wat ik graag doe: designs maken die er goed uitzien en gebruiksvriendelijk zijn.

Met Sketch bespaar ik tijd

Sketch werd specifiek ontworpen om UX-webdesigners sneller te doen werken. Wat de ontwikkelaars heel goed begrepen hebben, is dat wij veel pagina’s ontwerpen die min of meer dezelfde stijl hebben en veel gelijke elementen bevatten. Terwijl in Photoshop elke pagina in een aparte file zit, behoudt Sketch het overzicht over alle pagina’s in een handig overzicht. Dankzij enkele handige features waar ik hieronder dieper op inga, ontwerp of pas ik snel designs aan.

Artboard: alle pagina’s binnen handbereik

Met Sketch werk je projectmatig. Je ziet alle pagina’s van een webdesign in 1 overzicht. Je behoudt het overzicht over de hele flow en je verliest geen tijd aan het openen en laden van aparte files.

Symbolen: stijlelementen aanpassen over verschillende pagina’s heen

Het is een tijdrovende taak om vaak terugkerende stijlelementen aan te passen en al helemaal als die verspreid zijn over verschillende psd-files. De oplossing van Sketch: Symbols. Elk stijlelement sla je op als een symbool. Door het symbool aan te passen, ben je zeker dat de aanpassing op elke pagina gebeurt. Heel handig om te gebruiken voor footers, cta-blokken, headers, enzovoort.

Lay-out settings: altijd perfecte grids en uitlijning

Via Lay-out settings tover je in een mum van tijd perfecte rasters op je werkblad. Je stelt in hoeveel kolommen je wil, en hoe breed de gutter moet zijn, en je krijgt perfect uitgelijnde grids.

Text styles: consistent font-gebruik

Fonts en kleuren van titels pas je aan en sla je op als text style. Net zoals in een tekstverwerkingsprogramma kopieer je makkelijk stijlen naar andere titels.

Perfecte integratie met InVision

Nog tijdwinst: je kan je Sketch-files opslaan in InVision waarna het programma alle pagina’s uit je artboard extraheert. Je verliest geen tijd meer door jpeg-bestanden te exporteren. En als je iets aanpast in Sketch, wordt die aanpassing gesynchroniseerd in InVision. Zo zien onze klanten altijd de laatste versie van mijn designs. Bekijk hoe je je Sketch-bestanden moet opslaan in je InVision-map.

Ook voordelen voor de slicer

Als webdesigner werk ik nauw samen met Steven, die mijn designs slicet. Voor hem is het een voordeel dat Sketch vectorieel is. Hij kan iconen opslaan als vectorafbeelding en ze geschikt maken voor desktop- en retinaschermen. Zo spaart hij een aantal bewerkingen uit.

Ook voor hem is het een voordeel dat alle pagina’s in 1 file zitten. Dat kan ook met Photoshop, maar dat eist bijzonder veel werkgeheugen van zijn laptop waardoor hij trager moet werken.

Enkele handige plug-ins die ik graag gebruik

Zoals gezegd zijn de functionaliteiten van Sketch beperkt tot een minimum. Vind je dat iets te karig? Dan kan je nog altijd een van de vele plug-ins installeren en de applicatie meer naar je hand zetten. Deze plug-ins vind ik alleszins een must:

  • Sketch Runner: Deze plug-in zorgt ervoor dat je alles via shortcuts bedient. Ik werk veel sneller op die manier.
  • Prism: Deze plug-in genereert een kleurenoverzicht met alle kleuren die gebruikt werden in de designs, compleet met kleurcodes. Heel handig voor de slicer.
  • Align To: Dankzij deze plug-in aligneer je heel eenvoudig objecten. Je versleept ze over je werkblad en een rode lijn geeft aan waar je het object perfect parallel met andere objecten plaatst.

Wat nu met Photoshop?

Je zou dit artikel verkeerdelijk kunnen lezen als een scheidingsverklaring aan Photoshop. Oude liefde roest niet. Photoshop blijft het meest complete designprogramma dat er is. Als ik foto’s moet bewerken, gebruik ik bijvoorbeeld nog steeds Photoshop. Bovendien heeft de nieuwste versie van Photoshop features gekregen die aan Sketch doen denken. De concurrentie heeft de ontwikkelaars bij Adobe op scherp gezet. 

Geschreven door
Bram Lodens

Webdesigner. Ontwerpt webpagina’s, maar spreekt ook een aardig mondje programmeertaal. Liep de Marathon van Amsterdam in 3:30:12.

Plaats een reactie

Reageer op dit artikel

Wordt niet weergegeven op de website.