11 april 2019 3 minuten

Waarom wij onze websites in Sketch ontwerpen

#digital design
Julie Color Sm

Na jaren Photoshop gebruikt te hebben voor het ontwerpen van websites stapte ik eind 2018 over naar Sketch op aanraden van mijn collega Edith. Ondertussen zijn we een aantal maanden verder en heb ik Sketch volledig onder de knie. Sinds ik Sketch gebruik kan ik veel vlotter werken en is het vormgeven van websites veel minder omslachtig geworden.

Sketch? Wat is dat? En voor wie is dat?

Sketch is een vector based design applicatie voor Mac waarmee je op een heel efficiënte manier mobiele apps en websites kan ontwerpen. De krachtige functies, de vele externe plugins en de intuïtieve interface zorgen ervoor dat je heel doeltreffend te werk kan gaan.

Iedereen die geïnteresseerd is in design kan Sketch gebruiken. De interface is heel eenvoudig opgebouwd en daardoor zeer gebruiksvriendelijk. Aan de hand van de online handleiding leer je snel bij.

De minimalistische maar krachtige interface

Sketch_design

Toen ik in Photoshop websites ontwierp was het gebruik van twee beeldschermen geen overbodige luxe. Werken in Sketch op één enkel scherm is geen enkel probleem omdat je in Sketch, in tegenstelling tot Photoshop, geen gebruik kan maken van zwevende panelen. Je werkruimte is veel overzichtelijker, wat het ontwerpen ook heel aangenaam maakt.

De structuur is eenvoudig opgebouwd, zo heb je aan de linkerkant in het programma een overzicht van je artboards en de oplijsting van je verschillende lagen, bovenaan heb je een toolbar die je volledig zelf kan samenstellen en helemaal rechts vind je het infovenster en de eigenschappen van je geselecteerde laag.

Sketch is vector based

Vectorvspixel

Net zoals Adobe Illustrator is Sketch vector based. Concreet wil dit zeggen dat alle vormen geschaald kunnen worden zonder aan scherpte in te boeten. Als we kijken naar Photoshop weet je dat het belangrijk is steeds voorzichtig te zijn om geen onscherpe of gepixelde vormen te krijgen.

In Sketch ontwerp je zelf scherp voor retina of grote schermen. Je hoeft je dus nooit meer zorgen te maken tijdens het exporteren van diverse elementen.

Weg met Layer comps, welkom artboards

Artboards

Bij het ontwerpen van websites in Photoshop maakte ik altijd gebruik van layer comps, hiermee kan je gemakkelijk switchen tussen de ontwerpen van verschillende pagina’s. Bij Sketch kan je alle artboards van de verschillende pagina’s eenvoudigweg naast elkaar plaatsen. Zo krijg je een handig overzicht en verlies je geen tijd door te renderen.

Eenvoudig elementen hergebruiken over de pagina’s heen

Sinds ik gebruik maak van Sketch in de plaats van Photoshop heb ik al heel veel tijd uitgespaard.

Via Sketch kan je je voorgedefinieerde stijlen en symbolen opslaan. Dit zorgt ervoor dat wanneer je één iets wijzigt aan je symbool of paragraph style je dit over het volledige design heen aanpast. Wens je dus bijvoorbeeld die ene knop toch in het felblauw te plaatsen? Dan is dat mogelijk binnen een aantal seconden, bij Photoshop is dit een heel wat omslachtiger werkje.

Daarnaast is het ook mogelijk om tussen de symbolen te switchen. Wil je toch liever gebruik maken van een secondary button als call-to-action? Geen probleem, dan switch je dit vlug even.

Nooit meer wachten

Het designen van een website in Photoshop staat gelijk aan grote bestanden en dus ook lange wachttijden bij het wijzigen van sommige elementen.

In Sketch gebeurt het renderen van je files pijlsnel en bovendien nemen de files ook weinig ruimte in op je computer.

Exporteren naar Invision

Het is altijd al een issue geweest, hoe kan je op een heldere manier aan je klanten je design project tonen? Wel, via de export mogelijkheid naar Invision hoef je je nooit meer zorgen te maken. Via Invision krijgt de klant een eenvoudig overzicht van hoe zijn design er zal uit zien. Je kan ook links plaatsen op de buttons om een indicatie te geven van welke pagina’s met elkaar gelinkt zijn.

Er zijn twee mogelijkheden om tussen je pagina’s links te leggen. Enerzijds kan je dit direct in Sketch doen via de Craft plugin en zo synchroniseren met Invision, anderzijds kan je via de Craft plugin je design exporteren naar Invision en via de website je links leggen.

Bonus: Handige plugin voor inclusive design

Starck

Starck

Starck is een plugin waarin je kleurenblindheid en contrast kan simuleren. Aan de hand van deze plugin kan je kijken of je design toegankelijk en inclusief ontworpen is.

Colorblind-simulation

Photoshop voor fotobewerking

Uiteraard is Photoshop niet helemaal uit mijn toolkit verdwenen. Ik vind het nog steeds belangrijk om alle fotobewerkingen in Photoshop uit te voeren. Sketch is hier naar mijn mening geen goede tool voor.

De 7 voordelen van Sketch tegenover Photoshop

  1. Je werkt vectorieel, je verliest dus nooit kwaliteit
  2. Het neemt niet veel ruimte in op je computer
  3. De tool werkt veel sneller, heeft amper tijd nodig voor het renderen
  4. Het gebruik van symbolen en styles zorgt ervoor dat je in een mum van tijd wijzigingen kan aanbrengen
  5. Exporteren van CSS voor development
  6. Het built-in grid systeem
  7. Het is veel goedkoper

Ontdek wat wij in Sketch gemaakt hebben!

Bij Digital Pulse geven we uw website vorm en staan we aan de basis van uw online succes. Naast een aantrekkelijk design zorgen we aan de hand van een doordachte strategie ook voor meer online conversies.

Ontdek welke bedrijven reeds in zee gingen met ons

Portfolio bekijken

Stay updated!
Nieuwsbrief

Schrijf je in voor onze nieuwsbrief

Wil je op de hoogte blijven van de laatste digitale trends, tips & tricks, interessante events en seminaries? Schrijf je dan in voor onze nieuwsbrief.

Schrijf mij in!