Design · UX · Prototyping
Design en wireframing voor websites en apps
Een goed ontwerp is geen plaatje, maar een afspraak over wat je bouwt. Bij Yousource ontwerpen we elke website, webshop en app eerst als klikbaar ontwerp. Zo zie je vooraf hoe het werkt, voeren we de discussies op papier in plaats van in code, en weet het development-team precies wat er gebouwd moet worden.
Waarom eerst wireframen en ontwerpen?
Een wijziging in een ontwerp kost minuten, dezelfde wijziging in een gebouwde site kost uren. Door de structuur, de inhoud en de interactie eerst vast te leggen voorkom je dat er halverwege de bouw nog fundamentele vragen opduiken: welke pagina's zijn er, wat is de belangrijkste actie, hoe gedraagt het menu zich op mobiel?
Daarnaast maakt een ontwerp een project bespreekbaar voor iedereen in je organisatie, niet alleen voor wie technische specificaties kan lezen.
Het proces in vijf stappen
1. Doelen, doelgroep en inhoud
We beginnen met de vraag wat de website of app moet opleveren en voor wie. Daaruit volgt de informatiestructuur: welke pagina's of schermen, welke content en welke acties.
2. Wireframes
Grijze, schematische schermen die alleen indeling en prioriteit tonen. Ze zijn bewust niet mooi, zodat de feedback over de inhoud en de flow gaat. Voor apps tekenen we ook de belangrijkste gebruikersflows, zoals registreren, zoeken of afrekenen.
3. Visueel ontwerp
Op basis van de goedgekeurde wireframes werken we het design uit in je huisstijl, of ontwikkelen we die verder. We ontwerpen mobiel en desktop, met echte of realistische teksten in plaats van opvultekst.
4. Klikbaar prototype
De schermen worden aan elkaar gekoppeld tot een prototype dat je op je eigen telefoon kunt doorklikken. Dat is het moment waarop onduidelijkheden zichtbaar worden die op een statisch beeld verborgen blijven.
5. Overdracht
Na akkoord leggen we componenten, toestanden en gedrag vast, zodat de bouw zonder giswerk kan beginnen.
De rol van Figma
We ontwerpen in Figma, omdat ontwerp, prototype, feedback en overdracht daar in één bestand samenkomen. Maar Figma is een gereedschap, geen dienst: de waarde zit in de keuzes over structuur, inhoud en gebruiksgemak. Wil je meer weten over hoe we de tool inzetten, met componenten, variabelen en auto layout, lees dan onze pagina over Figma.
Feedback die het project vooruit helpt
- Wijs één beslisser aan die feedback van collega's bundelt.
- Reageer direct in het ontwerp met opmerkingen op de plek waar het over gaat.
- Benoem het probleem ("bezoekers zien de prijs niet") in plaats van de oplossing ("maak het rood").
- Beoordeel wireframes op structuur en designs op uitstraling, niet andersom.
Overdracht naar WordPress, web en apps
Omdat ontwerp en development bij ons in één team zitten, ontwerpen we met het platform in gedachten.
- WordPress: we vertalen het ontwerp naar herbruikbare blokken of templates, zodat je team zelf pagina's kan samenstellen zonder het ontwerp te breken. Zie WordPress website laten maken.
- Webapplicaties: componenten in het ontwerp sluiten aan op componenten in code, inclusief lege, laad- en foutschermen.
- Mobiele apps: we houden rekening met platformconventies, aanraakdoelen en schermformaten. Zie mobile apps.
Benieuwd naar het resultaat? Bekijk bijvoorbeeld de cases van De Suite en MIRA Quality, of alle projecten.
Veelgestelde vragen
Wat is het verschil tussen een wireframe en een design?
Een wireframe laat structuur en prioriteit zien zonder kleur, beeld of definitieve teksten. Het design voegt de visuele identiteit toe: typografie, kleur, beeld en details. Door eerst de structuur af te spreken, gaan feedbackrondes over het design niet meer over waar iets staat.
Krijg ik toegang tot het Figma-bestand?
Ja. Je kijkt mee via een deellink, kunt direct in het ontwerp reageren en het bestand hoort bij de oplevering.
Kan ik alleen een ontwerp laten maken zonder development?
Dat kan. We leveren dan een ontwerp en componentenset op die door een ander team te bouwen is. Wel adviseren we de bouwers vroeg te betrekken, zodat het ontwerp aansluit op het gekozen platform.
Hoeveel feedbackrondes zijn er?
Dat spreken we per project af in de offerte. Belangrijker dan het aantal is dat feedback gebundeld en bij één beslisser terechtkomt; dat voorkomt rondes die elkaar tegenspreken.
Eerst zien, dan bouwen?
Vertel ons wat je wilt bereiken; we laten zien hoe we het ontwerptraject voor jouw project inrichten.