Als het gaat om het ontwerpen en ontwikkelen van websites is er aan handige tools absoluut geen gebrek. Of het nu gaat om het maken van een interactie of grafisch design, de technische implementatie of het plannen van een project, je zult niet snel met legen handen staan. Hieronder vind je een aantal tools die ikzelf bijzonder nuttig vind.
Plannen is vooruitzien
Stel je staat aan het begin van een web project. Tenzij je die handige buurjongen bent die in z’n uppie wel even een website in elkaar zet, zul je al snel iets van een planning willen maken. Natuurlijk zijn er betaalde tools zoals MS Project, maar voor het maken van een planning zul je meestal voldoende hebben aan een open-source alternatief GanttProject genaamd. De naam zegt het al, je kunt er Gantt diagramen mee maken. Maar ook een PERT diagram en een resource planning is zo gemaakt.
Functioneel design
Vervolgens maak je natuurlijk functionele schetsen van de website in de vorm van wireframes. Een geweldige tool daarvoor is Axure. Deze tool is niet gratis, maar is de investering meer dan waard. Het tekenen van wireframes is een kwestie van het slepen en plaatsen van webcomponenten (zoals radio buttons, check boxes, enz.). Extra bijzonder is dat je van de wireframes met het grootste gemak een klikbaar HTML prototype genereert, zodat je direct inzichtelijk maakt hoe de interactie binnen de website eruit gaat zien.
Tekstvlakken binnen de wireframes vul je vervolgens door gebruik te maken van de Blind Text Generator. Deze website genereert de veel gebruikte ‘Lorum ipsum’ teksten, maar je kunt ook kiezen voor alternatieve teksten van bijvoorbeeld Cicero of Kafka.
Fonts maken het verschil
Bij het maken van het grafisch design is Font Tester een handige website om te experimenteren met verschillende lettertypes. Natuurlijk kun je ook in Photoshop je typografie bepalen, maar dan zie je nog niet hoe de lettertypes er in (verschillende) web browsers uitzien en dan kun je nog weleens voor verrassingen komen te staan.
Kleuren & paletten
Ook voor het bepalen van kleuren zijn interessante hulpmiddelen beschikbaar. Zie je op een andere website een kleur die je mooi vindt, dan bepaal je met één klik de exacte kleurcode met de ColorZilla Firefox plugin. Deze kleurcode kun je vervolgens invoeren op de Color Scheme Designer website en op basis van die kleur wordt automatisch een compleet kleurenpalet voor je gegenereerd. Een andere leuke manier om aan een kleurenpalet te komen is door gebruik te maken van de ColorSuckr Firefox Plugin of de ColorSuckr website. Hier kun je onder andere een foto uploaden waarvan je de kleuren mooi vindt, en hieruit wordt vervolgens een kleurenpalet gedestilleerd.
Meten is weten
Heb je de behoefte om snel even te meten hoe groot bepaalde elementen op een website zijn, of in een Axure HTML prototype, gebruik dan de MeasureIt Firefox plugin. Selecteer een deel van het scherm en je ziet direct de bijbehorende afmetingen.
Taken & bugs
Als je website de ontwikkelingsfase ingaat, dan heb je wellicht de behoefte om taken toe te wijzen aan verschillende ontwikkelaars en te monitoren wat de voortgang is van het project. Een erg goede tool hiervoor is JIRA. Aangezien JIRA webgebaseerd is heeft iedereen in het ontwikkelteam te allen tijde een compleet beeld van de openstaande taken, verantwoordelijkheden en voortgang. Na de gratis trial periode moet een licentie betaald worden, maar voor grotere complexere ontwikkelprojecten verdien je dit snel terug.
Ook tijdens het testen van de website komt JIRA zeer goed van pas bij het rapporteren van de onvermijdelijke bugs. Vaak kun je makkelijker uitleggen wat het probleem is aan de hand van een screenshot van de web pagina. JIRA heeft een speciale feature waarmee screenshots makkelijk als afbeeldingen kunnen worden toegevoegd. En die screenshots maak je enorm snel en makkelijk met een geweldige tool; Jing. Hiermee selecteer je met het grootste gemak het relevante deel van je scherm. Teken er een pijl of kader bij, voeg eventueel wat tekst toe en kopieer het geheel naar je klembord of naar een URL, zodat je het resultaat makkelijk met anderen kunt delen.
De hier besproken tools vormen uiteraard slechts het tipje van de ijsberg, maar zijn wellicht toch bruikbaar voor je. Heb je zelf nog onmisbare aanvullingen? Laat gerust een reactie achter 
