Sketch vs Photoshop

Sinds ongeveer een jaar werk ik met Sketch by Bohemian Coding. Voor wie Sketch niet kent: het is een Mac-applicatie voor interfaceontwerp. Voordat we met Sketch gingen werken, gebruikten we bij Studio Wolf voornamelijk Adobe Photoshop, een tool die de meesten van jullie waarschijnlijk wel kennen.

Nadat we een jaar lang geen Photoshop hadden gebruikt (voor interfaceontwerp, welteverstaan) werden we gevraagd om voor een project Photoshop te gebruiken, omdat een klant dat zo wenste (voornamelijk omdat hun technische afdeling geen Sketch gebruikt).

Ik dacht bij mezelf: “Ik gebruik al meer dan 10 jaar Photoshop, dus dit zou geen probleem moeten zijn, toch?” Maar daar had ik het mis. Photoshop frustreerde me na meer dan een jaar met Sketch te hebben gewerkt. Terugvallen op Photoshop deed me beseffen wat de ware kracht van Sketch is: creatieve snelheid en flexibiliteit met artboards.

Artboards

Een Sketch-bestand bestaat uit één of meerdere artboards. Je kunt een artboard vergelijken met een stuk canvas. Sketch stelt je in staat om meerdere artboards (zonder beperkingen qua grootte) in één bestand te plaatsen. Dit is erg handig als je zowel je desktop- als mobiele ontwerpen in één bestand wilt onderbrengen.

Stel je voor dat ik een productoverzicht in Sketch heb gemaakt. Ik ben behoorlijk tevreden met het resultaat, maar wil snel het verschil zien tussen diverse contrasten en witruimtes. Ik dupliceer mijn artboard, plaats het naast het andere, pas mijn contrasten en witruimte aan en zo kan ik in een oogwenk het verschil zien, zonder mijn bestand in een nieuw venster in Photoshop te hoeven openen, het op te slaan als een ander bestand, te bewerken en te vergelijken.

Als je je verschillende versies in aparte bestanden hebt, wordt het een stuk lastiger om snel een overzicht te krijgen van het ontwerpproces. Ik maak soms wel tot 10 verschillende versies en Sketch biedt me de mogelijkheid om de verschillen snel in één bestand te vergelijken. Omdat ik geloof dat het proces een van de belangrijkste aspecten van design is, waardeer ik deze functie enorm.

De artboard-functionaliteit in Sketch maakt het ontwerpproces zichtbaarder en duidelijker. Ik kan snel kopiëren, wat ontwerpideeën uitproberen en deze met de klant bespreken.

Tijdens het project waarin de klant verzocht de ontwerpen in Photoshop te maken, ontwierp ik eerst een paar concepten in Sketch en werkte ik ze vervolgens verder uit in Photoshop. Hierdoor kon ik mijn creativiteit en flexibiliteit behouden, zonder de klant teleur te stellen door geen gebruik te maken van Photoshop.

Nog een paar dingen in Sketch die mijn dagelijkse ontwerpwerk opfleuren

1. Lettertype-rendering. Sketch komt qua lettertype-rendering bijna gelijk in de buurt van een browser. Dit lijkt misschien een klein detail, maar voor de ontwerper heeft dit een enorme impact tijdens het ontwerpen.
2. Vector. Sketch is volledig vector-gebaseerd (net als Illustrator). Een van de belangrijkste voordelen hiervan is dat ik niet twee keer zo groot hoef te ontwerpen, zoals vaak wel het geval is in Photoshop.
3. Exporteren. De exportfunctie om artboards, lagen of groepen te exporteren is fantastisch. Selecteer en exporteer, zo eenvoudig als wat. Klein bijzaakje: de export voor SVG (voor SVG-sprites) werkt niet altijd zoals gehoopt, waardoor ik soms terugval op Illustrator.
4. Bestandsgrootte & prestaties. De bestandsgrootte van Sketch-bestanden blijft relatief klein (tussen 1 en 10 MB), terwijl Photoshop bij grote projecten snel richting 100 MB gaat. De prestaties van Sketch op mijn MacBook Air zijn uitstekend en zonder haperingen.
5. Maskers. Werken met maskers in Sketch is snel en flexibel. Wil je meerdere vulverlopen over elkaar heen leggen? Geen enkel probleem!

Omdat het niet allemaal rozengeur en maneschijn kan zijn, wil ik ook een nadeel van Sketch benoemen. Als ik een laag wil selecteren en verplaatsen terwijl er een andere laag boven ligt, pakt het programma automatisch de bovenste laag. Dit leidt af en toe tot wat frustratie op kantoor. Als je een oplossing hebt voor dit nadeel, laat het me dan weten!

Sketch on!

— Dit bericht is oorspronkelijk geschreven op de Studio Wolf blog.