De programma’s die ik gebruik voor een webdesign project

welkeprogrammasfreelance

Men zegt weleens dat als je een webdesigner bent dat je alleen je computer nodig hebt en dan kan je al aan de slag. Dat klopt wel een beetje, maar toch komt daar meer bij kijken dan alleen het hebben van een computer. Lange tijd heb ik gebruik gemaakt van een aantal standaard programma’s maar sinds het toepassen van de volgende programma’s merk ik een duidelijke efficiëntie boost terwijl ik net de basis hiervan onder knie heb, dus ik zal zeker niet terug gaan naar mijn oude methodes. Dus vandaag een sneak-peak in de programma’s die ik voor ieder webdesign project gebruik. Mensen noemen mij weleens nerd maar ik vond dat altijd wel meevallen, maar na het schrijven van dit artikel is dat gevoel wel een beetje veranderd. Dus een kleine waarschuwing: lots of nerdy-talk ahead!

Illustrator en Photoshop

Het hebben van een grafisch programma is een vereiste als je webdesigner bent. Naast het Adobe pakket zijn er nog een hoop andere programma’s te vinden waarvan sommige ook gratis zijn, maar nog altijd gaat mijn voorkeur uit naar Illustrator en Photoshop. Ik werk hier al zo lang mee dat ik deze twee programma’s niet kan missen.

illustrator1Alle logo’s ontwerp ik standaard in Illustrator om ervoor te zorgen dat ik ze in ieder gewenst formaat kan schalen zonder kwaliteitsverlies. Daarnaast kan ik het logo makkelijk opslaan in diverse bestandsindelingen zodat ik meerdere opties kan aanbieden aan de klant. Wanneer zij voor een logo ontwerp bij mij komen lever ik standaard het logo in een Illustrator bestand aan, alsmede een JPG en PNG versie (zowel in 300DPI kwaliteit als in 72DPI). De JPG en PNG bestanden worden zowel in kleur, als een volledig zwart en wit versie opgeleverd. Dit om er voor te zorgen dat de klant genoeg opties heeft om te gebruiken voor verschillende doeleinden.

photoshopPhotoshop gebruik ik voor overige designelementen die niet zozeer voor drukwerk nodig zijn, dus alleen voor gebruik op het internet. Ik maak bijna al mijn designs in Photoshop en stuur deze als een mock-up (een statische versie van een design) naar de klant toe ter goedkeuring.

Ook maak ik in Photoshop alle afbeeldingen die ik voor mij blog gebruik. Een tijd geleden is er een nieuw online programma gelanceerd om gratis mock-ups te maken, namelijk Canva. Ik heb dit mogen proberen toen het nog niet voor iedereen openbaar was en was er toen al erg tevreden over, maar ik wil zeker een keer mijn uitgelichte afbeeldingen met Canva ontwerpen om te kijken of dat misschien nog makkelijker gaat.

WAMP Server

WampServer-logoWamp is een software-pakket dat het mogelijk maakt om van je computer (deels) een webserver te maken. Door middel van WAMP kan ik een WordPress installatie offline op mijn computer draaien en dus ook offline aan mijn freelance projecten werken. Alleen wanneer ik een plugin wil installeren zou ik een internetverbinding nodig moeten hebben of wanneer ik mijn project gelijk wil publiceren, alhoewel ik dat nog steeds liever op de ouderwetse manier doe, namelijk met FTP.

WordPress Starter Thema

In de tijd dat ik net met WordPress begon te werken heb ik meerdere bestaande thema’s volledig aangepast, waardoor ik zo de WordPress syntax leerde begrijpen. Uiteindelijk heb ik aan de hand van die thema’s en door diverse tutorials te volgen een eigen starter thema voor mijzelf ontworpen wat ik als basis gebruikte wanneer ik van design wilde wisselen. Ik paste dit volledig aan door elementen te herplaatsen en styling toe te voegen. Uiteindelijk is dit na jaren geëvolueerd tot het thema wat ik voor ieder freelance project gebruik. Eigenlijk staan er alleen de basiscoderingen van WordPress is met enige styling die ik, vooral nu in combinatie met SASS/SCSS, zeer gemakkelijk kan aanpassen.

Git – Versiebeheer

git-logo-smallAls je weleens een WordPress thema zelf heb gemaakt weet je dat je op een gegeven moment zoveel aanpassingen hebt gedaan, dat je dit niet meer kan behouden en na zoveel keer CTRL+Z kan je bepaalde aanpassingen ook niet meer ongedaan maken. En daar sta je dan met een versie die niet meer klopt. Je kan dan altijd nog opnieuw de coderingen invullen maar makkelijker is om een programma te hebben die deze wijzigingen behoudt. Dat is Git. Door middel van dit programma wordt alles bijgehouden wat ik aan het doen ben in mijn project en wanneer nodig teruggaan naar een eerdere versie om bepaalde aanpassingen ongedaan te maken.
GitHub-Mark
Je kan je Git project koppelen aan GitHub zodat je daar je bestanden kan delen met bijvoorbeeld andere webdesigners. Stel dat je een eigen plugin voor WordPress schrijft en dat je deze graag wilt testen voordat je hem officieel publiceert, dan kan je jouw project op GitHub plaatsen. Jouw coderingen staan openbaar zodat andere coding-geniuses deze kunnen analyseren en feedback op geven. Ideaal!

Git werkt wel samen met een taskrunner zoals bijvoorbeeld Gulp.

Gulp – Task runner

gulpGulp is een programma dat verschillende taken verricht die bepaald zijn in een door mij aangemaakt bestand. Gulp runt deze taken alleen op het moment dat ik dat aangeef. Klinkt misschien een beetje vaag, maar door middel van Gulp kan ik bijvoorbeeld mijn SASS/SCSS naar CSS laten herschrijven, bestanden ordenen, comprimeren, laten herschrijven in schonere codes, bepaalde codes specificeren voor verschillende browsers zonder dat ik alles handmatig hoef te schrijven… Gulp kan zoveel dat ik misschien nog maar 1% hiervan onder de knie heb, maar wat ik nu toepas versneld het gehele designproces zo goed dat ik echt niet meer zonder kan.

SASS/SCSS in Sublime Text

sassVaarwel CSS, Hallo SCSS! is een artikel wat ik eerder heb geschreven. Ik schrijf niet meer CSS zodat we dat gewend zijn, ik maak gebruik van SASS om functies te bepalen. Een aantal voorbeelden hiervan zijn het gebruik van variabelen, elementaire wiskunde operators, nesting, mixins etc. Zo kan ik door middel van één regel in SASS (bijv. box-shadow) een schaduw geven aan een element, waarbij in je CSS alle prefixes worden ondersteund. Dit zorgt ervoor dat jouw codes hetzelfde ingelezen worden door alle browsers en het voorkomt dat je eindeloos dubbel werk aan het doen bent. Hiervoor heb ik Gulp nodig want dit programma zorgt ervoor dat mijn SASS codes vertaald worden naar gewone CSS, omdat SASS niet ondersteund wordt door browsers.

sublime-logoIk gebruik Sublime Text, een text-editor speciaal voor code en markup, om mijn project te schrijven. Het voordeel van Sublime Text is dat ik extensies kan toevoegen die het schrijven ook nog eens makkelijker kan maken. Binnenkort hierover meer!

FTP – File Transfer Protocol

Filezilla1Wanneer mijn WordPress project helemaal klaar is gebruik ik een FTP programma om deze te uploaden naar de desbetreffende server van de klant. Op deze server voer ik nog enige testen uit om te kijken of alles naar behoren werkt, installeer ik plugins en zet ik het nieuwe thema online.

Dat was het – mijn lijst aan programma’s die ik standaard voor ieder webdesign project gebruik. Veel nietwaar? Nog even een opsomming met linkjes naar deze programma’s:

 

Geef een reactie