Design Tools 102

Leonie Jonk
6 min readApr 6, 2016

--

Craft : part 1

De eerste tool die ik ga testen is Craft. Een sprong in de diepe wateren van plugins. Craft is niet zomaar een plugin namelijk, maar een verzameling plugins. Hierdoor kan deze eerste review meteen in 2 gehakt worden. Nu deel 1: de introductie.

Wat is het?

De Craft plugins zijn samen ontwikkelt om je workflow niet gewoon te verbeteren maar te ‘superchargen’. De meeste plugins draaien om het integreren van Real Data in het ontwerp proces. Op deze manier willen ze de designer ontlasten van de taak van het zoeken, bedenken en toepassen van data om hun ontwerpen realistisch te maken.

Voor wie is het?

Craft lijkt zich te richten op UI designers in de breedste zin. Zowel visual designers als interaction designers kunnen blij de vingers strekken met de plugins van Craft en zo zeeën van tijd besparen.

Natuurlijk kleven aan een tool als Craft wel potentiële nadelen. De integratie van een basis set content die we allemaal kunnen (zullen?) gebruiken, vanuit dezelfde bronnen, maakt alles makkelijker en sneller. Maar zou dit niet een bepaalde uniformiteit tot gevolg kunnen hebben? Door het gemak lopen we het risico een vleug van de unieke en zorgvuldig ontwikkelde of verzamelde content kwijt te raken.

Is een digitaal product immers niet een som van zijn content-vormige delen?

De plugins

Photos

De photo plugin zorgt ervoor dat je gemakkelijk foto’s kunt toevoegen aan je ontwerp vanuit verschillende bronnen. Zoals :
- Lokaal map (voor je eigen afbeeldingen)
- Dropbox map (voor die handige map met foto’s die je van de klant hebt gekregen)
- Gratis foto’s via Unsplash (zelfs te selecteren per categorie of kleurstelling)
- Via een web URL (zoals google image search)

Hoe? Nou zo
1. selecteer het element dat je wilt opvullen
2. kies de afbeelding via de bron die je wilt gebruiken
3. Magic ✨

Als je meerdere elementen aanblikt dan vult Craft slim alle elementen met de afbeeldingen uit jouw geselecteerde bron.

Type

Er was een tijd waarop typografie in digitale producten niet de belangrijkste rol had. Maar door het verbeteren van de techniek is typografie net zo’n grote rol gaan spelen op digitaal als het ooit in print deed.
Toch is de aard van digitale data wel anders dan bij print, het is namelijk in zijn aard veranderlijk en flexibel. Het bedenken van allerlei content is omslachtig en tijdrovend. Hierom kun je via Type content toevoegen.

Hoe? Nou zo
1. Selecteer een tekst item
2. Kies een type data, zoals : Header — Weekdag — Email — Steden — etc.
3. De voorgeprogrammeerde content wordt ingeladen in de tekst items.

Maar dat is niet alles! Je kunt namelijk zelf ook een custom action toevoegen. Hier kun je dus bijvoorbeeld een lijst met auto-merken toevoegen als je bezig bent met een auto wegshop. De data kan dan automatisch in je tekst items ingevuld worden.

Je kunt ook live content laden vanuit websites.

Hoe? Nou zo
1. Selecteer een tekst item.
2. Kies een type data, zoals : Header — Weekdag — Email — Steden — etc.
3. Klik op Web.
4. Klik op het type data item (bijvoorbeeld een header).
5. De content vanaf de website wordt geplaatst in je geselecteerde tekst-items.

Keihandig! Als je met echte data wilt werken.

Duplicate

Ken je dat? Je wilt een lijst met content items. Je hebt een foto, een naam, wat extra tekst. Dus je kopieert als en malle al die lagen, sleept ze omlaag en begint opnieuw. Hierna pas je nog even alle content aan en voila! Het heeft je maar veel te veel tijd gekost om een lijst te maken.

Met de duplicate functie hoeft je niet meer zo te klooien. Voortaan kun je een verzameling items selecteren en deze met duplicate herhalen zoveel je wilt. Een specifieke hoeveelheid keren (5, 25?) of tot een bepaalde ruimte is opgevuld. Je kunt ook nog de gutter instellen tussen de items en het past automatisch nog de content aan ook, zodat jij dat niet meer hoeft te doen.

Een feestje. 🎉

(Waar haalt Craft die slimme content dan vandaan? Dat zal vast iets te maken hebben met die Type en Photos plugins.. Daar komen we tijdens het testen vast achter)

Styles

Craft levert ook een plugin die je kan helpen om op een gemakkelijke manier de stijlen in je ontwerp te interpreteren en op een overzichtelijke wijze te genereren. Volgens logica zou je denken dat text styles dan bijvoorbeeld afhankelijk zouden zijn van de text style die je in het document hebt ingesteld. Het is me dan wel een klein mysterie wat het voordeel is van deze Craft styles. “Na het aanpassen en syncen wordt de stijl door het hele document en alle artboards heen aangepast.” zegt Craft zelf. Ook kun je buttons toe voegen aan de style guide. De button wordt dan meteen veranderd in een Symbol, als deze dat niet al is.

Maar hoe is dit anders dan het instellen van een text style in Sketch en die veranderen? Of gewoon gebruik maken van Symbols en op die manier je document slopen wanneer je een foutje maakt en iets niet gedetached hebt? Ik bedoel, op die manier gemakkelijk je document updaten.

Een klein ogenschijnlijk voordeel van deze plugin lijkt te zijn dat je door het genereren van een style guide meteen ziet of je fouten maakt door je document heen en of je wel consistent bent. Misschien gebruik je 4x een net andere kleur geel terwijl je er eigenlijk maar 1 wilt gebruiken. Deze kun je dan snel gelijktrekken door het hele document heen.

Het voordeel van deze plugin is me nog niet helemaal duidelijk, vooral wanneer je het vergelijkt met de functies die Sketch al aanbied en de workflow verbetering beloftes van de overige Plugins. Hopelijk zal in het gebruik blijken wat het voordeel van deze plugin is.

Prototype

Dit is de plugin waar Craft het meest op lijkt in te zetten. Waar de andere 4 plugins workflow optimalisatie bieden door het gemakkelijk aanbieden en plaatsen van content springt de Prototype plugin meteen in het gapende gat dat op dit moment bestaat tussen Sketch en Invasion. Een plugin in Sketch waardoor je het ontwerp direct kunt prototypen!

Zoals ik het nu zie kun je met deze plugin je artboards en zelfs elementen op je artboards direct aan elkaar verbinden. In de video spot ik ook al de opties om gestures aan te passen en transities in te bouwen. Tot slot kun je het prototype meteen op je mobiel testen.

Ik sta te popelen om deze plugin te testen!

Jammer genoeg voor mij is deze plugin nog niet te testen omdat deze vandaag de dag nog COMING SOON is.

Verwachting

Als Craft zo fijn werkt als ze aangeven dan zorgt deze samenwerking er voor dat Sketch & Invision echt het all-round powerhouse wordt dat designers wensen.

Op de website van Craft zal de oplettende kijker de volgende zin tegenkomen :

“Get Styles, Type, Photos, and Duplicate — FREE.”

Alle signalen wijzen er op dat de Prototype plugin, die het geheel helemaal af zou maken, dus niet gratis gaat zijn.

Ik vraag me af wat de rol van Invision in dit geheel zal zijn. In de video verwijzen ze naar de samenwerking tussen Sketch, Craft en Invision. Maar als ik zo bekijk, is Invision niet echt meer noodzakelijk om te prototypen. Als Craft een slim verdienmodel voor de Invision makers betekent, zou Craft Prototype nog wel eens kunnen vervangen. Of wellicht levert de Motion en samenwerking-mogelijkheden van Invision nog wel genoeg aanvulling om Invision bestaansrecht te geven.

We zullen het zien, wanneer Prototype wordt gelaunched.

En nu?

Neem ik een maand (of een week? we’ll see) om Craft te testen in mijn eigen workflow en te kijken of het zijn beloftes waar kan maken. “Supercharging your workflow” belooft Craft. Ik ben benieuwd!

Time. Starts. Now. 🕰

--

--

Leonie Jonk

Visual UI designerd & Illustrator | Loves Friendly UI design, Books, Cats, Emojis, & believes we can and should build a better wold through design.