Blog

Eindeloos veel mogelijkheden met Component Based Design

Naar het overzicht
Eindeloos veel mogelijkheden met Component Based Design

Vroeger was alles... slechter?

Van de beginjaren van het internet, tot ver daarna, was een website vaak niet meer dan een letterlijke vertaling van de bedrijfsbrochure. Je nam een webdesigner of Desktop Publisher (DTP’er) in de arm om jouw brochure in een online omgeving te plaatsen.

Deze designer was gewend om boeken, posters, briefpapier en brochures te ontwerpen voor een drukker. Bij het ontwerpen van de eerste websites lag het dan ook voor de hand om je design op te zetten in een eindeloze serie pagina’s. Allemaal tot in detail uitgewerkt.

En had de klant feedback? Of wilde je iets anders proberen? Dan moest je als webdesigner opnieuw door al die pagina’s heen, om op alle plaatsen het lettertype aan te passen. Dit proces, met verschillende feedbackrondes per pagina, nam (zoals je je kunt voorstellen) veel tijd in beslag. En sloop er een foutje in dat proces? Dan zorgde dat voor inconsistentie in kleurgebruik, styling of tone of voice. “Even snel iets aanpassen” kon dus eigenlijk niet.

Website Design Nu

Inmiddels is het gebruik van internet en websites een vast onderdeel van ons dagelijks leven. Internet is totaal geïntegreerd en algemeen geaccepteerd als medium. Voor veel organisaties is hun website al lang niet meer alleen een digitale brochure, maar een echte, digitale beleving van het merk. Of de core business waar het hele bedrijf op draait.

Nog steeds zijn veel websites op het principe van ‘pagina’s’ gebouwd. Ga maar na: er zijn nog steeds een vast aantal pages die altijd terugkomen: de ‘homepage’, ‘contactpagina’ en ‘over ons’ bijvoorbeeld.

Gelukkig is het designproces wel echt veranderd. We denken niet meer in hele pagina’s maar in componenten. Dit noemen we dan ook component based design.

Wat is component based design?

De naam zegt het al: met component based design ontwerp je componenten. Componenten zijn losse bouwstenen waaruit een pagina is opgebouwd. Denk aan een header, een footer, een call-to-action blok, een contactformulier, een tekstblok, een quote-blok met afbeelding, enzovoorts. Zie het als een grote doos met lego-steentjes. Door deze steentjes op elkaar te plakken en te combineren, ontstaan de mooiste bouwwerken. De mogelijkheden zijn eindeloos. Door ieder component afzonderlijk met de juiste aandacht te ontwerpen, zal het design en gebruik ervan overall verbeteren.

Waarom is component based design handig?

Een beetje website bestaat tegenwoordig uit duizenden pagina’s. Die pagina’s kunnen we nooit allemaal door een designer op pixelniveau laten ontwerpen. Laat staan hier handmatig wijzigingen op doorvoeren, wanneer er iets aangepast moet worden.

Met component design heb je daar geen last van. Wanneer je het design van een component aanpast, wordt dit direct op alle pagina’s waar dit component op terugkomt doorgevoerd.

  • Zo bewaak je snelheid en consistentie;

  • Je kunt sneller nieuwe dingen proberen en aan de klant voorleggen;

  • of A/B testen met gebruikers;

Zo wordt het design van de website steeds doelgerichter en een stukje beter. Samen met onze klanten bekijken we in de voorbereiding welke componenten minimaal nodig zijn. Door componenten te combineren, ontstaan weer nieuwe mogelijkheden. Klanten kunnen met de beschikbare componenten ook zelf nieuwe pagina’s samenstellen, zonder dat hiervoor eerst op detailniveau een design voor hoeft te worden uitgewerkt!

Componenten ontwerpen

Er zijn in de loop der jaren veel standaardconventies en best practices ontstaan. Deze worden in het component based design ook toegepast. Iedereen weet inmiddels hoe een contactformulier werkt, en verwacht hierbij ook een bepaald standaard gedrag. We hoeven dus niet steeds het wiel opnieuw uit te vinden, maar kunnen bij het ontwerpen van de componenten de meeste tijd steken in een optimale look & feel en zaken die echt het verschil maken voor onze klanten.

Componenten worden geoptimaliseerd voor het device waarop ze worden gebruikt. Zo zal een menu (navigatie-component) er op een smartphone totaal anders uit kunnen zien dan op een laptop of televisiescherm. Elk component heeft dus verschillende toepassingen en mogelijkheden. Samen kijken we naar de behoefte van de doelgroep en naar het gebruik. Dit is een continu proces, waarbij we componenten steeds verder optimaliseren.

Van design naar development

Component based design heeft als voordeel dat het ook eenvoudiger over te dragen is naar development. Elk component heeft zijn eigen ontwerp en kenmerken. Het bouwen van de website is hierdoor ook goed te faseren en te controleren. We splitsen de bouw op in verschillende deelopleveringen, waarbij we vooraf bepalen welke componenten we realiseren. In het CMS maken we voor veel terugkerende pagina’s vaste templates van componenten op, maar het mooie van component based design is dat je als klant in het CMS ook nieuwe varianten van pagina’s op kan bouwen door de beschikbare componenten ‘bij elkaar te klikken’ en te combineren.

Klant en Design

Met component based design zijn we in staat om de klant écht onderdeel te maken van het designproces. Geen ellenlange ping-pongtrajecten met talloze feedbackrondes en minuscule aanpassingen over verschillende pagina’s meer. Maar doelgericht werken aan een bepaald component. Het designproces verloopt daardoor veel sneller, is schaalbaar en voor iedereen ook echt leuker! 

Heb je zelf een design-uitdaging? Wil je voorbeelden van component based design bekijken? Neem dan zeker even contact op voor een kijkje in onze keuken!

Meer blogs lezen? Die vind je hier!

Meer weten Neem contact op

Sluiten
Je naam
Je dient je naam in te vullen
Email
Je dient een geldig e-emailadres in te vullen
Bedrijfsnaam
Bericht
Je dient een bericht in te vullen

Bedankt voor je bericht 💪

We hebben je bericht ontvangen. We zetten ons schap om je vraag zo snel mogelijk te beantwoorden.
LiveWall is je digitale bureau. Met een team van content ontwikkelaars, designers, app developers, webdevelopers en webdesigners maken we high end digitale producten.