Hulpmiddelen bij het bouwen van een website Welke zijn handig?

Geplaatst op 4 september 2018

Bij de ontwikkeling van een website gebruik ik verschillende hulpmiddelen. Dit kunnen programma’s zijn, maar ook online tools of websites met code snippets. Soms surf ik rond of zoek op web design inspiration om zelf inspiratie op te doen. Op mijn iMac heb ik een ‘Inspiration’ folder waar ik zo nu en dan dingen op sla. Één keer in de zoveel tijd blader ik daar eens doorheen en schoon het op of vul de folder aan. Ook op Pinterest verzamel ik zogenaamde ‘pins’ met als onderwerp Webdesign & Front-end development.

Programma’s

Tot een paar jaar geleden gebruikte ik alleen de programma’s van Adobe. Voornamelijk Photoshop, voor het ontwerpen en Dreamweaver voor het html-en. Maar sinds een jaar gebruik daarnaast ik ook Sketch en Visual Studio Code.
In Sketch kan ik vrij gemakkelijk wire frames bouwen. Ik heb inmiddels een bibliotheek met allerlei soorten componenten die in websites gebruikt kunnen worden. Visual Studio Code ben ik gaan gebruiken toen ik Angular apps ging ontwikkelen. Dit programma heeft een hoop handige extensions (uitbreidingen) die het code kloppen zoveel makkelijker maken.

Online tools

Naast deze programma’s maak ik ook regelmatig gebruik van online tools. Bijvoorbeeld voor het bepalen van een kleurenpalet (als ik daarin vrij gelaten wordt). Adobe Color CC is dan heel handig. Weet je van één kleur dat je deze zeker wilt gaan gebruiken? Dan kan je met de color tool heel handig bijpassende kleuren zoeken. Ben je nog zoekende naar de juiste kleurencombinatie? Met de verkenner kan je zelf inspiratie opdoen.

Voor het bepalen van de te gebruiken lettertypes op de website, kijk ik bij voorkeur in de bibliotheek van Typekit of Google Fonts. Deze laatste bibliotheek geeft zelf een aantal suggesties als het gaat om lettertypes die gecombineerd kunnen worden. Maar je kan ook gebruik maken van bijvoorbeeld Fontjoy of Fontpair.co voor ‘fontpairing’ combinaties.

Voor CSS snippets zoek ik regelmatig verschillende online generators op, bijvoorbeeld CSS Arrow Please!, Ultimate CSS Gradient Generator voor achtergronden met een gradient of Box Shadow CSS Generator voor het maken van een box schaduw. Wil je meerdere CSS snippets laten genereren? Bezoek dan eens de CSS3 Generator. Of ben je opzoek naar CSS animaties? Check dan vooral Animate.css.

Diverse documentatie websites

Als HTML-er zal je ongetwijfeld gebruik maken van verschillende (CSS) frameworks. Ik werk veel met Bootstrap, maar ben ook bekend met Foundation of Material Design. Deze websites bezoek ik vaak om de documentatie te raadplegen, want de ontwikkeling van deze frameworks gaat gewoon door :). Zo blijf ik op de hoogte en kan eventueel websites upgraden naar een latere versie van het framework.
Af en toe kruist PHP mijn pad en als naslagwerk maak ik dan gebruik van php.net. Maar mocht ik echt tegen een probleem aanlopen, dan is er altijd nog Stack Overflow die antwoord heeft.

WordPress hulpmiddelen

Vanzelfsprekend neus ik ook regelmatig rond in de Codex van WordPress. WordPress heeft namelijk veel verschillende functies die gebruikt kunnen worden, dat het handig is om e.a. op te zoeken. Als ik een WordPress site bouw die extra velden of uitbreidingen nodig heeft, dan doe ik graag een beroep op de plugin Advanced Custom Fields. Met deze plugin kan je gemakkelijk extra velden toevoegen van verschillend formaat (tekst, nummer, hyperlink, e-mail, foto, galerij, etc…).

Over de auteur: Annemarie Hoose

Annemarie begon eind jaren 1990 met het ontwerpen van websites. Eerst in loondienst en vanaf 2013 als zelfstandig ondernemer zonder personeel (zzp'er) in Almere. Annemarie heeft een brede interesse in alles wat met het bouwen van websites te maken heeft. Ze is een autodidactische front-end developer met ook design skills. Daarnaast is ze nieuwsgierig en ze houdt graag haar kennis op peil door zelfstudie.

Waarom kiezen voor Hoose Webcreations? De voordelen op een rijtje

  • Enthousiaste zzp-er met liefde voor het vak
  • Klantgericht en meedenkend
  • Unieke website voor een mooie prijs
  • Duidelijke offerte
  • Nauwe samenwerking = maximaal eindresultaat
Contact opnemen