Je UX / UI design kan niet zonder een solide development basis. Frontend en Backend is waar wij in uitblinken. Neem snel en vrijblijvend contact op om jouw project te bespreken.
Keer vrijblijvend sparren met Milan, één van onze experts?
Wij zijn experts in het bedenken en realiseren van geweldige gebruikservaringen. Dat is waarvoor we ‘s morgens ons bed voor uitkomen. En hoewel een goede UX (User Experience) of een frictieloze UI (User Interface) goed moet worden ontworpen, is het uitwerken van een goede frontend en backend minstens zo belangrijk. Sterker, vaak loopt de implementatie spaak op het omzetten van een ontwerp naar techniek. En omdat wij beiden aanbieden, is het afbreukrisico laag.
Wat is frontend development?
Letterlijk vertaald is frontend de ‘voorkant’. De voorkant van nu.nl bijvoorbeeld, de manier waarop je je internetbankieren gebruikt, of een app op je telefoon. Allemaal voorbeelden van wat wij een frontend noemen.
Frontend (of soms geschreven als front-end) is de term die in ons vakgebied wordt gebruikt voor het omzetten van een design naar iets wat een (eind)gebruiker daadwerkelijke kan gebruiken. Omdat een website interactief is, kan je niet zomaar een statische afbeelding tonen aan je klanten. Het ontwerp moet dus zo worden vertaald, dat een browser (zoals Chrome, Microsoft Edge, of Safari) deze goed kan tonen op verschillende apparaten en schermformaten.
Frontend als verlengstuk van je organisatie
Veel organisatie hebben zelf backend development in huis. Developers die dagelijks bezig zijn websites en applicaties in de lucht te houden en door te ontwikkelen. Maar – niets ten nadelen van backenders – meestal vereist goede frontend toch een ander soort techneut. Namelijk één die ook veel affiniteit heeft met ontwerp.
Voor bedrijven en instellingen die zelf een development-team hebben, ontwikkelen wij vaak een complete frontend of een blokkendoos met componenten en templates, die vervolgens door de in-house ontwikkelaar geïmplementeerd kunnen worden. We bundelen deze 'blokjes' in een component library, die we via Storybook beschikbaar maken voor het team. Wij blijven hier het liefst nauw bij betrokken. Niet om ons ermee te bemoeien, maar juist om ervoor te zorgen dat we samen een zo optimaal eindproduct neerzetten. Zo borgen we de geweldige gebruikservaring. Zie ons als verlengstuk van je eigen organisatie.
Wat is backend development?
Een backend (van het Engelse back end) is de motor achter elke website en applicatie. Daarmee is het verantwoordelijk voor het verwerken en afhandelen van de data die door de applicatie stroomt. Nadat een gebruiker een formulier invult, moet die informatie natuurlijk ergens opgeslagen worden. Misschien gaat er wel een mail de deur uit als bevestiging, of zetten we de informatie door naar een ander systeem. Denk bijvoorbeeld aan een CRM of ERP.
Eigenlijk zorgt backend development ervoor dat de juiste data, op de juiste plek verwerkt wordt, door de juiste persoon. Daarvoor is het belangrijk dat we jouw business snappen én weten hoe gebruikers een applicatie het liefst gebruiken. Toevallig is dat nu net wat wij leuk vinden!
Onze development aanpak
Om een ontwerp te vertalen naar een goed werkende site of applicatie hebben we een bewezen aanpak die we volgen.
01.
Component Storming
Frontend development is een relatief jong vakgebied. Veel bestaande softwareontwikkelmethoden zijn daarom niet goed toe te passen binnen het frontend. Dat terwijl frontend juist heel belangrijk is voor een internetbureau zoals dat van ons. Daarom ontwikkelden we onze eigen werkwijze voor het in de steigers zetten van een frontend binnen onze projecten: Component Storming. Meer weten? Lees het blog over component storming.
02.
Tailwind CSS
Het opmaken van een website of applicatie gebeurt door middel van een technologie die CSS heet. Elke browser kan er mee overweg! Maar het schrijven van schaalbare CSS is een vak apart. Onze frontend developers zijn groot fans van Tailwind CSS. Een methode die gebaseerd is op utilities class. Benieuwd wat dit inhoudt en wat dit voor de klant betekent? Lees on artikel over hoe Tailwind on 20% aan ontwikkeltijd.
03.
Component libraries met Storybook
Bij Pixelpillow zijn we systeemdenkers. We houden van het bouwen van systemen die makkelijk uitbreidbaar zijn en die zorgen voor consistente gebruikerservaring. Door een ontwerp op te delen in verschillende 'blokjes' kunnen we snel schakelen en voorkomen onze frontend developers wildgroei. Deze blokkendoos vertaalt zich door naar een component library. Op zoek naar meer informatie over component libraries? Lees verder hier ons blog over hoe je kosten kunt besparen met een design system.
04.
Single-page applications
Traditionele webapplicaties bestaan uit losse pagina, waarbij de gebruiker zit te wachten op het laden van een nieuwe pagina. Dat is dus niet heel interactief. Single-page applicaties verplaatsen het 'opbouwen' van de pagina van de server naar de browser. Alleen de relevante informatie wordt nog heen-en-weer gestuurd. Dit zorgt voor een snellere applicatie én een betere gebruikerservaring.
05.
API-first development
Een duidelijke scheiding tussen frontend en backend zorgt voor beter onderhoudsarm applicaties en meer flexibiliteit. Daarom kiezen we voor 'API-first' development. We ontwikkelen het backend en frontend los van elkaar en sluiten deze op elkaar aan met een API. Dit is een voorafgesproken communicatielaag waar data over verstuurd wordt. We werken met verschillende smaakjes, van Swagger/OpenAPI Specification, tot JSON:API en natuurlijk GraphQL.
Maatwerk applicatie of website
Wanneer wil je nu een maatwerk applicatie en wanneer een website? Soms is het verschil niet helemaal duidelijk. Een webapplicatie is toch ook een website? Gelukkig ben je bij ons voor beiden aan het goede adres!
Websites zijn voornamelijk informatie. Wil je gebruikers informeren over de diensten en producten die jouw organisatie aanbiedt? Dan doe je dit via je website. Hier kan je een uitgebreid productassortiment delen, een configurator of keuzehulp aanbieden, of verkooppunten weergeven. Een website is gekoppeld aan een Content Management Systeem (CMS), waar je zelf content in kan beheren. Technisch gezien ligt de focus dan vaak op frontend development.
Ben je op zoek naar het automatiseren van bedrijfsprocessen, of wil je jouw klanten toegang geven een eigen omgeving? Dan praten we over maatwerk applicaties. Denk aan een klantportaal, of misschien wel een systeem om jouw binnendienst te ondersteunen. Bij de ontwikkeling van webapplicaties komt naast frontend development ook backend development om de hoek kijken.
Op zoek naar een development-partij die ontwerp begrijpt?
Omdat we zelf veel aandacht geven door UX Research en User Interface design, zijn we in staat om je site of software een technisch solide basis te geven, én zorgen we ervoor dat je klanten een gebruiksvriendelijk product kunnen gebruiken, waardoor je je businessdoelen bereikt.
Onze frontend developers zetten de ontwerpen om in gebruikersinterfaces die je daadwerkelijk kan gebruiken.
Ze voegen interactiviteit toe en zorgen dat het ontwerp goed weergegeven wordt in verschillende browsers en beeldformaten. Daarnaast koppelen ze frontend aan het backend, via een API.
Wat is backend development?
Het backend verwerkt alle data die door de applicatie stroomt. Onze backend developers zorgen ervoor dat de data op een uniforme manier wordt opgeslagen en verwerkt. Ook wordt er gekoppeld wordt met bestaande systemen, zoals een CRM of ERP.
Wat is Tailwind CSS
Tailwind is een 'utility-first' framework dat het mogelijk maakt om grote frontend systemen op een efficiënte manier op te bouwen. Het zorgt voor betere overdraagbaarheid tussen frontend developers en maakt het makkelijk om het ontwerp precies zo implementeren als bedoeld.
Wat is een API?
Een API is een afgesproken manier om data uit te wisselen tussen twee systemen. Bijvoorbeeld tussen een frontend en een backend.
Wat is het verschil tussen frontend en backend?
Het frontend is het gedeelte van een website of applicatie dat de gebruiker daadwerkelijk ziet. Het zijn de knoppen waar je op drukt en de invoervelden die je vult.
Het backend is het systeem hier achter. Wanneer je een actie uitvoert in het frontend, belandt deze uiteindelijk in het backend.
Wat is een Component Library?
Om er voor te zorgen dat onze ontwerpen en applicaties makkelijk uit te breiden zijn, delen we het ontwerp op in individuele componenten. Deze 'blokjes' vormen samen een component library. Eigenlijk is dit dus een grote blokkendoos waar je weer nieuwe pagina's mee kan bouwen.
Wat is Storybook?
Een component library is niks zonder Storybook. Binnen Storybook vind je een overzicht met alle beschikbare componenten en hoe deze gebruikt kunnen worden. Dat maakt het voor een frontend developer makkelijk om te zien welke componenten er allemaal al beschikbaar zijn.
Bedankt voor je bericht. We nemen zo snel mogelijk contact met je op.
😱
Oeps. Het lijkt erop dat bovenstaande velden niet helemaal goed zijn ingevuld. Zou je het nog eens willen controleren en opnieuw willen proberen? Kom je er niet uit? Bel dan 038 750 3491.
