4 Designtools aanbevolen door onze eigen designers (part I)

Het gebruik van handige tools in je design process bespaart je over het algemeen veel tijd en dat werkt natuurlijk een stuk prettiger. Welke tool gebruiken wij om onze prototypes eenvoudig mee te delen of welke tool is het beste om fonts te downloaden? We hebben aan onze eigen designers gevraagd welke tools zij het liefste gebruiken zodat we deze tips voor jou op een rijtje kunnen zetten. Lees verder om meer te weten te komen over de vier design tools: Sketch, Anima, Google Fonts en InVision.

1. Sketch

De één kiest voor Adobe XD de ander gaat voor Figma. Wij binnen Social Brothers kiezen voor Sketch, omdat hier veel plugins beschikbaar voor zijn die het leven van een designer een stuk makkelijker maken. De focus binnen het programma ligt op het vormgeven van user interface. De komst van Workspace maakt het tegelijk werken in één document ook mogelijk.

Als designer moet je steeds meer rekening houden met allerlei verschillende ontwerp formaten voor bijvoorbeeld mobiele apparaten en retina-displays. Met Sketch is het makkelijk om de afmetingen en pixels van je ontwerp aan te passen, wat onnodig werk voorkomt. Het is gemakkelijk om binnen het programma de afmetingen en verhoudingen te zien die er nodig zijn om te kunnen werken op een ‘grid’. Sketch helpt onze designers om netjes te werken in de grid. 

De tool geeft de mogelijkheid om oneindig functies zoals het gebruik van schaduwen, en randen in te voegen. Daarnaast heeft Sketch een Export All Feature. Omdat alles in de tool vector-based is, kan je jouw designs makkelijk exporteren in JPG, PNG, PDF en optioneel ook nog in twee formaten. 

‘Eigenlijk is Sketch drie tools in één: een tool voor interface, wireframing en voor illustratie-elementen zoals logo’s en vectors.’

2. Google Fonts

Google Fonts is een handige gratis tool waarbij je gemakkelijk verschillende lettertypes kunt downloaden voor jouw teksten. In totaal biedt Google Fonts welgeteld 405 verschillende lettertypes aan. Veel WordPress thema’s bieden al verschillende Google Fonts aan zodat je deze kunt gebruiken in jouw teksten. 

Google Fonts is een budgetproof tool, het geeft je eenvoudig de kans om gebruik te maken van verschillende lettertypes. Via de website kan je verschillende lettertypes vinden en vervolgens downloaden om te gebruiken in jouw uitingen. 

Eigenlijk wijst het platform zich vanzelf. Een handige tip: wanneer je op de naam van een font klikt word je geleid naar de overzichtspagina. Hier kan je alle varianten van jouw lettertype vinden zoals cursief, bold, etc. Als je op deze pagina naar beneden scrollt, zie je het kopje ‘Populair Parings’ staan. Dit is een interactief overzicht waarin andere lettertypes worden weergegeven die goed matchen met jouw gekozen lettertype. 

‘De font-bibliotheek van Google is zeer uitgebreid en kan door developers eenvoudig aangeroepen worden. Echter, daar waar Adobe XD bijna hetzelfde heeft moet je hier wel projecten aanmaken voordat je een font kan gebruiken.’

3. Anima

De plugin van Anima gebruiken wij voor het automatisch uitlijnen van elementen. Zo kan je met 1 druk op de knop elementen op een vaste afstand zetten en deze makkelijk herpositioneren.

Developers kunnen de ontwerpen zowel gebruiken als exporteren naar React/HTML-code. Dit scheelt veel werk, ze hoeven niet de gebruikersinterface opnieuw te coderen. Persoonlijk gebruiken onze designers de tool Zeplin voor de overdracht van designs (houdt onze pagina in de gaten want binnenkort vertellen we je meer over deze tool).

Het programma biedt een revolutionaire functie, het houdt alle ontwerpen op één plek, waardoor het de partijen in staat stelt om wijzigingen aan te brengen met behulp van code of ontwerp tools. Handig voor beide partijen!

‘Onze favoriete functie van Anima? ​​Het automatisch uitlijnen van elementen. Zo kan je met één druk op de knop elementen op een vaste afstand zetten en deze gemakkelijk herpositioneren.’

4. InVision

InVision is een handige tool om de designs van prototypes te presenteren. InVision is een online omgeving waarin ontwerpen bekeken kunnen worden. Zo kan je een linkje sturen om de ontwerpen in de browser te zien. Wanneer je de ontwerpen via een browser bekijkt, lijken deze het meeste op de versie die uiteindelijk ook online komt.Ze zijn visueel dus meer representatief dan een gewone pdf. Als je aanpassingen maakt in het design worden deze direct aangepast op InVision waardoor je design altijd up-to-date is. 

Daarnaast is het mogelijk om via InVision interactieve elementen toe te voegen. Hierdoor kunnen functionaliteiten worden nagebootst waardoor het design een vergelijkbare ervaring geeft als de uiteindelijke website. 

Ondanks dat de InVision sterk lijkt op de uiteindelijke website, zijn er nog duidelijke verschillen. InVision geeft namelijk een statische schets, dit betekent dat niet alle interactieve onderdelen zoals een button, menu of animaties zullen werken en nog later in de development fase toegevoegd moeten worden. Daarnaast ontbreken vaak de definitieve tekst en afbeelding nog. 

‘Tip van onze designers: Met de plugin Craft kan je eenvoudig via Sketch jouw ontwerp uploaden.’

Nu weet je alles over de vier designtools die onze designers gebruiken bij hun projecten. Benieuwd naar de andere design programma’s die te vinden zijn op hun desktop? Houd onze website in de gaten want snel komt er een part II: 4 Design Tools aanbevolen door onze eigen designers online met nog vier van onze aanbevolen design tools!

Als je ondertussen meer wilt weten over onze design diensten, check dan onze dienstenpagina.