We were Gents and Wijs, but now you can call us Duke & Grace.

2Ghent

Foreestelaan 1
9000 Ghent

Brussels

Antwerpselaan 40
1000 Brussels

Deze post is gearchiveerd.

Ga naar onze recente blogposts


2 mei 2013 - Story

This is my workflow. There are many like it, but this one is mine.

Als webdesigner en front-end developer heb je een uitgebreide workflow. Van een eerste design over bouwen van de front-end tot het opleveren van een geoptimaliseerde site, geschikt voor alle devices.

Zoals de titel al zegt beschrijf ik hieronder mijn workflow: hoe pak ik een project aan en welke tools en software gebruik ik in mijn proces. Gericht op de lezer van deze  blogpost, maar ook nuttig voor mezelf. Het is altijd goed om eens stil te staan bij je eigen manier van werken, om te zien of het beter en sneller kan.  

Style tiles

Complexere sites beginnen voor mij met style tiles. Style tiles geven het design een eerste richting. Hierin bepalen we het kleurgebruik, de lettertypes, de witruimte en stijl van interface-elementen. Het dankbare aan style tiles is dat we in samenspraak met de klant snel verschillende iteraties kunnen maken om tot een resultaat te komen dat kan dienen als basis voor het uiteindelijke design. Om de style tiles te maken duik ik natuurlijk in Photoshop.

Designing with code

Jarenlang was voor mij de volgende stap om een eerste pagina te ontwerpen in Photoshop. Meestal op basis van een 12 kolommen-grid voor de resolutie die op dat moment het meest gebruikt werd. Maar die resolutie bestaat niet meer. Daarom begon ik onlangs met designen in de browser, designing with code.

Dit is een grote aanpassing in mijn workflow en werkwijze maar biedt wel voordelen. Ik win tijd door vroeger aan de code te beginnen en omdat ik sneller iets interactief heb is het ook gemakkelijker om te zien of een bepaald idee werkt.

Chopstick

Bij Wijs zijn we momenteel bezig met het schrijven van ons eigen responsive CSS Framework: Chopstick.
Chopstick werkt op basis van de CSS preprocessor Sass wat ons de mogelijkheid geeft om variabelen te gebruiken, classes te nesten, mixins te schrijven en zoveel meer.

We hebben een settings.scss file waarin we de kleuren, lettertypes en breakpoints voor media queries bepalen. Deze variabelen gebruiken we dan doorheen de verschillende Sass-files die de opmaak van de modules bepalen. Verandert er een kleur, dan moet dit maar op 1 plaats aangepast worden. Om de Sass code te compilen in een css file gebruiken we Codekit.

Sublime

Ik werk al enkele jaren als front-end developer en heb dus ook al heel wat editors getest en gebruikt. Momenteel werk ik al enkele maanden met Sublime Text 2 en deze heeft zoveel features dat ik er een aparte blogpost over zou kunnen schrijven. Enkele van mijn favorieten zijn goto anything, package control, multiple cursors en de distraction free mode. Volg ook zeker @SublimeTxtTips op Twitter om op de hoogte te blijven van de laatste tips ‘n tricks.

Niet alleen zit Sublime Text vol handige functionaliteiten, het is ook supersnel. Opstarten, switchen tussen projecten, zoeken in al je projectfiles,... Het gebeurt bijna instant. En omdat het (designer)oog ook wel wat wil, ziet Sublime Text er ook nog eens slick uit met een handige theme switcher.

Versioning

Voor version control gebruiken we Git op onze eigen github server. Om met deze server te communiceren zweren velen bij de command line maar omdat ik niet vies ben van een GUI gebruik ik Gitbox. Misschien zitten er te weinig functionaliteiten in voor sommigen maar voor mij is het voldoende om te pullen en pushen, branches te maken en te mergen en om een overzicht te houden van de verschillende commits.

Testing, and then some

Testen is niet de volgende stap, testen zit in alle vorige stappen verweven.
Een duidelijk voorbeeld hiervan is de navigatie in een site. Deze kan soms heel wat menu-items bevatten. Een mogelijke oplossing is om het menu om te vormen tot een dropdown op mobile. Tijdens het bouwen hiervan test ik regelmatig of de navigatie niet alleen technisch werkt maar ook of hij werkt. Is het handig is voor de gebruiker om te navigeren op zowel smartphone, tablet als desktop?
Verder staat mijn laptop vol met alle gekende browsers en draait er een Virtualbox die alle PC versies voor zijn rekening neemt.

Conclusie

Het is een cliché maar de webwereld verandert en evolueert constant en mijn workflow is daar ook onderhevig aan. Dat maakt het ook zo interessant. In vergelijking met 5 jaar geleden is mijn workflow compleet anders, en ik kan niet wachten om te zien wat de mogelijkheden zullen zijn in de toekomst. Misschien design en bouw ik mijn sites dan wel met Google Glass of Leap Motion. Misschien ook niet, maar een mens kan dromen.

Tom Hudders

Tom Hudders

Designer

Share this insight on

It's time to stop scrolling and start making.

Let's get in touch

Call us +32 9 335 22 80