Waarom we bij Netvlies overgestapt zijn van Photoshop naar Sketch

Onlangs hebben we bij Netvlies de keuze gemaakt om, na 16 jaar, afscheid te nemen van Adobe Photoshop en over te stappen naar Sketch als belangrijkste tool voor het ontwerpen van onze online projecten. In dit blog leg ik uit hoe we met Sketch efficiënter werken en wat de belangrijkste voordelen én nadelen zijn van Sketch t.o.v. Photoshop.

Wat is Sketch?

Sketch is een designprogramma voor de Mac, met een sterke focus op ontwerp voor online projecten. Het bestaat sinds 2008 en komt zowaar van een Nederlands bedrijf.

De laatste maanden las ik op Medium en Twitter veel enthousiaste verhalen van andere ontwerpers over Sketch en op basis van die verhalen had ik enorm veel zin gekregen om het eens uit te gaan proberen. De uitdaging was natuurlijk wel dat zoiets tijd kost en dat die schaars is.  Ik besloot het daarom uit te gaan testen en dit meteen goed te doen door het in te zetten binnen een project waar ik op dat moment mee bezig was. Dit was een intranet voor een groot advocatenkantoor waar we momenteel aan werken bij Netvlies (omdat dit project momenteel nog niet gelanceerd is, heb ik in dit blog andere projecten gebruikt als voorbeeldafbeeldingen).

Wat zijn de belangrijkste voordelen van Sketch t.o.v. Photoshop?

Photoshop is van oorsprong een beeldbewerkingsprogramma, dat lange tijd ook de meest geschikte tool was voor het ontwerpen van online projecten. Ooit was Fireworks even de hoop in bange dagen voor ons type ontwerpers, maar Adobe stopte met die ontwikkeling.

Omdat Photoshop een tool is die door veel soorten ontwerpers en fotografen wordt gebruikt, heeft het ook ontzettend veel opties waar je als online ontwerper geen gebruik van zult maken. Daarbij is het ontwerpen van een interface voor meerdere schermformaten niet de focus van Photoshop, terwijl Sketch dit perfect ondersteunt door gebruik te maken van artboards die je per schermformaat kunt gebruiken. En natuurlijk is alles wat je ontwerpt in Sketch vector based, met grote voordelen voor de bestandsgrootte en schaalbaarheid!

Hieronder heb ik, aan de hand van mijn ervaringen, een aantal concrete voorbeelden opgesomd van dingen die me blij maken in Sketch:

1. Sketch spreekt meer de taal van front-end development

Als online ontwerper werk ik bij Netvlies veel samen met front-end developers. Sketch sluit veel meer aan bij hoe front-end, design vertaalt naar CSS. Het instellingenmenu (de inspector) aan de rechterzijde zorgt daar voor een groot deel voor. Als je bijvoorbeeld een knop gaat maken, dan stel je de radius in van de hoeken, de kleur etc., maar wat je ook instelt, je weet dat het in code te maken is.

2. Vector based

Schermen met een hoge resolutie zijn wel haast de standaard geworden, iedere moderne smartphone heeft er een, iedere tablet, maar ook al steeds meer laptops. Wat dus fijn is aan Sketch, is dat het vector based is, waardoor je oneindig kan schalen en de bestandsgrootte over het algemeen klein blijven. Photoshop blijft toch een pixel based programma en is in die zin minder geschikt om te gebruiken als programma.

3. Snel materiaal exporteren

Een van de fijnste onderdelen voor mij is het exporteren van materialen in Sketch. Binnen een paar klikken exporteer je je materiaal naar je gewenste bestandsformaat. Waarbij Sketch al meteen denkt aan de verschillende type schermen (highres). Als je in PNG wilt exporteren kun je zo de highres versies aanklikken en exporteren. Je kunt natuurlijk ook kiezen voor JPG ,TIFF, SVG, EPS of PDF. Ondanks dat Photoshop daar ook aan gewerkt heeft bij de laatste versies, werkt dat daar toch minder snel.

4. Automatisch opslaan en versiebeheer

Sketch is een programma dat draait op Mac OS X, dat heeft daardoor als bijkomend voordeel dat het gebruik maakt van Apple’s standaard versiebeheer. Al je wijzigingen worden automatisch opgeslagen en geback-upt. Bij Photoshop kwam het wel eens voor dat het vastliep en dat je alleen de laatst opgeslagen versie terug kon halen.

5. Sneller

Sketch werkt sneller dan Photoshop. Vermoedelijk doordat de software compacter is en de bestandsgroottes kleiner zijn, maar ook de workflow draagt daar aan bij. Maar ook wat ik al aangaf,  bijvoorbeeld even snel afbeeldingen exporteren voor je front-end collega, dat voelt nu niet meer als een vervelend klusje, maar iets wat in een paar tellen gedaan is.

6. Mirror mode: bekijk je ontwerp direct op mobiele apparaten

Een hele slimme optie is de Mirror Mode. Hiermee kan je op je iPhone of iPad de Mirror app van Sketch installeren en zie je direct tijdens het ontwerpen wat het gevolg is voor je ontwerp. Pas je het aan in Sketch, dan zie je dit 2 seconden later ook op het scherm van je telefoon of tablet. Zo heb je echt een goed beeld van wat je aan het ontwerpen bent.

7. Symbols, Layer- en Text styles

Bij Photoshop heb je Smartobjects (die werken niet zo fijn) en bij Sketch heten dit Symbols. In elk bestand heb je een bibliotheek van Symbols, die je kan gebruiken voor iconen, labels, buttons en meer. Het mooie van de symbolen in Sketch is dat als je er eentje wijzigt (maakt niet uit waar in je document) hij het symbool op alle plekken in je document aanpast. Dus wil je je icoontje toch in een andere kleur? Pas het 1 keer aan en op al je pagina’s en artboards is het bijgewerkt.

Symbols

De layer en text styles lijken hier qua werking, veel op symbols, maar zijn zoals de naam al doet vermoeden van toepassing op stijlinstellingen van een laag of tekst. Ook hier is het zo dat als je bijvoorbeeld een H1 hebt ingesteld en deze ergens besluit aan te passen, dat deze ook overal aanpast.

Pro-tip: Categoriseer ze door voor de naam van je symbol (kan ook bij layer/text styles) een categorienaam te zetten gevolgd door een schuine streep. Bijvoorbeeld “Icon / vergrootglas”. Nu groepeert Sketch je symbolen.

8. Toolbox (apps)

De makers van Sketch hebben hun software opengesteld voor ontwikkelaars. Het is blijkbaar ook niet heel lastig om iets te maken want er is echt heel veel beschikbaar. Hierdoor zijn er allerlei handige extra (bijna altijd gratis) plugins die aanvullende functionaliteit bieden en je leven een stuk makkelijker maken. Ik ken ze lang nog niet allemaal, maar over deze ben ik in ieder geval al erg enthousiast: 

  1. Zeplin. Hiermee kan je je ontwerp supersnel delen met front-end developers. Zij kunnen vervolgens in de browser je ontwerp bekijken en daarin door eenvoudig met een muis over elementen te hoveren allerlei specificaties aflezen. Bijvoorbeeld: Marges, afstanden, kleuren, fonts, eigenlijk alles dat je zou willen weten om het om te kunnen zetten in HTML/CSS.

  2. Style inventory. Deze plugin genereert automatisch een kleurenpalet op basis van de kleuren die je in je document hebt gebruikt en ook een overzicht van je tekststijlen. Deze kun je vervolgens bijvoorbeeld in een styleguide verwerken of opleveren aan je front-end collega.

  3. Content Generator. Deze bied zoals de naam al zegt random content voor in je design. Denk hierbij aan profielfoto’s (m/v), namen (m/v), plaatsnamen, dummy teksten en ook verschillende tijdsindicatoren. Ideaal voor mockups.

9. Kosten.

Sketch kost $99 eenmalig per gebruiker (je krijgt korting bij meer gebruikers), terwijl Photoshop CC € 29,99 per maand kost

10. Learning curve

Het werkt erg intuitief. Na 2 dagen er echt mee gewerkt te hebben was ik er al helemaal aan gewend.

Nadelen

Gelukkig zou ik bijna zeggen, want anders lijkt het of wij het marketingbureau van Sketch zijn, zijn er ook nadelen :-). De belangrijkste nadelen die ik ervaren heb tot nu toe, waardoor ik nog weleens ‘terugval’ op Photoshop zijn:

  • Geen beeldbewerking mogelijk, waar ik inmiddels toch wel aan gewend was in Photoshop. Misschien een heel stom voorbeeld, maar ik mis bijvoorbeeld het gummetje in Sketch waar ik in PS weleens gebruik van maakte. Kortom, je zult nog een beeldbewerkingsprogramma ernaast nodig hebben. Maar ook hier zijn Photoshop-alternatieven voor te vinden.

  • Af en toe kom je nog bugs tegen (waarbij wel gezegd moet worden dat hier over het algemeen snel op gereageerd wordt in de Facebook community en er ook regelmatig updates worden gereleased)

  • Uitgebreide vectortekeningen maken doe ik nog liever in Illustrator, omdat het voor mij nog niet net zo fijn werkt als in dat programma. Simpele vectortekeningen maak ik daarentegen weer liever in Sketch.

Ook starten met Sketch?

Hier vind je een hoop meer informatie, tips en tricks over mijn nieuwe favoriete tool.

 Aanvullingen of vragen op dit artikel? Laat het me weten via jmichels@netvlies.nl. Of stuur me een berichtje op twitter @ditisjohan. Sharen van dit bericht wordt altijd op prijs gesteld 🙂

Medewerker foto
Waarom we bij Netvlies overgestapt zijn van Photoshop naar Sketch

Over Waarom we bij Netvlies overgestapt zijn van Photoshop naar Sketch