Web- en applicatieontwerp
Wat is webontwerp?
Bij een systeem waar je zelf de hele dag in werkt, gaat dat verder dan een mooi kleurtje. Denk aan een overzicht met twaalf filters, een formulier van vier stappen, of een lijst met achtduizend regels. Precies daar loopt het spaak als niemand het vooraf heeft uitgetekend. Het grootste deel van het werk is bepalen wat er weg mag. Wat overblijft, lees je in een oogopslag.
Wij maken een webontwerp met jouw eigen inhoud erin. Dus geen grijze vulteksten en geen foto van een lachende dame met een koptelefoon, maar je echte producten, je echte bedragen en die ene klantnaam van drieënveertig tekens. Daar sneuvelt een ontwerp op. Dat wil je weten voordat het gebouwd is, niet erna.
Waarom eerst tekenen goedkoper is
Een webontwerp kost tijd voordat je iets ziet draaien. Dat voelt als oponthoud en het is precies het tegenovergestelde. Een keuze die je op papier maakt, kost een fractie van diezelfde keuze halverwege de bouw.
Je weet vooraf wat je krijgt: Je ziet elk scherm voordat we beginnen, op een laptop en op een telefoon. Wat jij goedkeurt, is wat er komt. Geen verrassingen op de dag van de oplevering.
Minder meerwerk tijdens de bouw: Een scherm omgooien in een tekening kost een uur. Datzelfde scherm omgooien als het gebouwd, gekoppeld en getest is, kost al gauw een week. Wij maken die uren liever aan de voorkant.
Een ontwerp dat gebouwd kan worden: Onze tekenaars en onze bouwers zitten in hetzelfde team. Er komt dus geen plaatje uit dat prachtig is, maar vastloopt zodra er echte gegevens in staan.
Schermen die ook vol nog kloppen: We proberen het webontwerp uit met je langste productnaam, je grootste bestelling en je meest mislukte foto. Houdt de indeling dat vol, dan houdt hij het ook vol als je assortiment verdubbelt.
Voor wie is dit
Webontwerp verdient zich terug zodra er meer dan een paar schermen zijn, en meer dan één iemand er iets van vindt. Herken je dit?
- Je hebt wel iemand die kan bouwen, maar niemand die bepaalt hoe het eruit moet zien
- Je krijgt bij elke oplevering net iets anders dan je in je hoofd had
- Je site is in stukjes gegroeid en elke pagina ziet er nét even anders uit
- Je systeem doet alles wat het moet doen, maar je collega's vinden er niets in terug
- Je moet akkoord krijgen van mensen die geen technische tekening kunnen lezen
Wat je krijgt
- Een tekening van elke pagina die er echt toe doet, met jouw eigen teksten en foto's erin
- Een klikbare versie, zodat je de route door je site zelf kunt lopen alsof hij al bestaat
- Van elk scherm ook een telefoonversie, want daar komt meestal het meeste bezoek vandaan
- Kleuren, letters en knoppen vastgelegd, zodat een nieuwe pagina er volgend jaar nog bij past
- Ook het lege scherm, het scherm met een foutmelding en het overvolle scherm, niet alleen het perfecte plaatje
- Een controle of alle tekst genoeg afsteekt tegen de achtergrond, zodat het ook leesbaar is voor wie slecht ziet
Hoe we het bouwen
Eerst uitzoeken wat mensen komen doen. We beginnen bij de vraag waarvoor bezoekers of collega's je site openen, en in welke volgorde ze dat doen. Die lijst bepaalt het menu en de schermen, niet andersom. Vaak blijkt een flink deel van de wensenlijst in de praktijk bijna nooit gebruikt te worden. Dat scheelt meteen schermen.
Dan tekenen. We beginnen bij het scherm dat het vaakst bekeken wordt. Je krijgt het webontwerp in twee of drie rondes te zien en je reageert per ronde. Zo werken we nooit zes weken door op een aanname die niet klopt.
Dan overdragen aan de bouw. Het webontwerp gaat niet als plaatje naar de bouwers, maar als kant-en-klare bouwstenen. Wat wij tekenen, gebruiken zij letterlijk. Daardoor lijkt het gebouwde scherm niet een beetje op de tekening: het ís de tekening.
Wat kost webontwerp?
Wat een webontwerp voor een website kost hangt af van het aantal schermen. Zit er een systeem met veel eigen schermen achter, dan loopt het op, omdat elk scherm zijn eigen regels heeft.
De prijs hangt vooral af van het aantal schermen dat écht anders is. Veertig pagina's die op drie mallen draaien, kosten minder dan acht schermen die alle acht iets anders doen. Ook het aantal mensen dat meebeslist telt mee, want elke extra ronde is zo een week.
Na livegang lopen hosting en onderhoud door. Wil je het webontwerp daarna blijven uitbreiden, dan kan dat met een vast aantal uren per maand.
Waarom Mediavisie Web
Wij tekenen en bouwen zelf, met eigen mensen. Er zit geen bureau tussen dat een mooi plaatje aflevert en daarna vertrekt. Dezelfde mensen die jouw schermen tekenen, zien ze later ook echt online staan.
Wat we maken is van jou. Ga je volgend jaar met iemand anders verder, dan neem je de bouwstenen gewoon mee. Dus niet een map met plaatjes die niemand meer open krijgt.
Bij elke oplevering draaien er automatische controles die nalopen of alles nog werkt en of de site ook met alleen een toetsenbord te bedienen is. Dat zit dus in het webontwerp ingebakken, en niet in een lijstje dat na livegang blijft liggen.
Waar je op moet letten
Een webontwerp repareert geen onduidelijke teksten. Staat er nu tekst op je site waar niemand doorheen komt, dan ziet die tekst er straks mooier uit en leest hij nog steeds niet. Reken dus op een paar dagen eigen tijd om koppen en teksten te herschrijven. En de rondes waarin jij reageert liggen echt bij jou: blijft een ronde drie weken liggen, dan schuift de oplevering ook drie weken op.
Waarom dit geld kost
Dezelfde woorden, ander scherm
Hieronder staat twee keer precies dezelfde tekst, geen woord verschil. Schakel om en kijk hoe lang je erover doet om te zien welk project je aandacht nodig heeft.
Lopende projecten
- Portaal voor verwijzers Zorggroep Noordveld € 18.400 Wacht op akkoord
- Koppeling planning Kabelnet Oost € 6.250 In productie
- Opleidingszoeker Opleidingshuis Midden € 11.900 In productie
- Onderhoud en hosting Thuiszorg Eemdal € 480 Loopt door
- Schaal Het belangrijkste is het grootst. Nu is alles even hard.
- Groepering Wat bij elkaar hoort staat bij elkaar, met ruimte ertussen.
- Eén accent Precies één ding vraagt om actie. Kleur is geen versiering.
De techniek eronder
Alle techniekWaar we het mee bouwen.
-
Ontwerp
Figma
Waar het ontwerp begint en waar je meekijkt. Componenten sluiten aan op wat we daarna in code bouwen.
-
Ontwerp
Storybook
Elk onderdeel los te bekijken en te testen, inclusief de staten die je op de site zelden tegenkomt.
-
Opmaak
CSS
Eigen variabelen voor kleur, ruimte en typografie. Eén plek aanpassen verandert de hele site mee.
-
Opmaak
Sass
Waar een project er al op draait. Nieuwe sites bouwen we met eigen CSS en variabelen, dat is inmiddels genoeg.
-
Beweging
GSAP
Voor animatie die iets uitlegt in plaats van iets opvult. Respecteert de instelling voor minder beweging.
-
Beweging
Lenis
Rustiger scrollen zonder het scrollgedrag van de browser te breken. Uit zodra iemand minder beweging heeft ingesteld.
Werkwijze
Hoe we het aanpakken.
Van het eerste gesprek tot doorbouwen na livegang. Vier fases, en je weet bij elke fase wat er af is en wat er nog komt.
-
1 tot 2 weken
Uitzoeken
Wat er moet komen en wat er al ligt
We brengen in kaart welke systemen mee moeten, wie het straks beheert en waar het vorige traject op vastliep. Daar komen de uitzonderingen boven water die later de planning bepalen.
Lees verder over Uitzoeken -
Eén week
Afbakenen
Van wensenlijst naar een plan met een prijs
We knippen het werk in stukken die los opgeleverd kunnen worden, en zetten er een prijs en een volgorde op. Daarbij spreken we af wat er in de eerste versie zit en wat later komt.
Lees verder over Afbakenen -
6 tot 12 weken
Ontwerpen en bouwen
Eerst de schermen, dan de techniek eronder
Je kijkt vanaf de eerste week mee op een testomgeving. We leveren in rondes op, te beginnen met het deel dat het meeste werk uit handen neemt, zodat je stuurt op wat je ziet.
Lees verder over Ontwerpen en bouwen -
Doorlopend
Doorbouwen
Na livegang begint het pas
Updates, bewaking en nieuwe functies, met een vast aanspreekpunt dat je project kent. We meten wat er gebruikt wordt, en dat bepaalt waar we het volgende kwartaal aan werken.
Lees verder over Doorbouwen
Zo ziet dat er in de praktijk uit
Alle casesVeelgestelde vragen
Iets anders vragenWij hebben al een huisstijl. Kunnen jullie daarmee werken?
Graag zelfs: dat is het makkelijkste startpunt. We vertalen wat er ligt naar een interface: welke kleur waar werkt, hoe de typografie zich gedraagt op een klein scherm, en wat er nodig is aan onderdelen die in een huisstijlhandboek nooit staan. Foutmeldingen, tabellen, lege lijsten.
Ontwerpen jullie elk scherm?
Nee, en dat is bewust. We ontwerpen de schermen waar de beslissingen vallen plus de losse onderdelen waar de rest uit is opgebouwd. Daarna staat een nieuw scherm er vanzelf goed in plaats van dat het opnieuw bedacht moet worden, en dat scheelt jou geld.
Krijgen we de ontwerpbestanden?
Ja. Het ontwerp is van jou, inclusief de bronbestanden en de componenten. Wil je later met een andere partij verder, dan kan dat zonder dat er iets opnieuw getekend hoeft te worden.
Wij werken onder andere voor
Aan de slag
Iets te bouwen?
Vertel wat er moet komen. We denken mee over techniek, haalbaarheid en wat het kost, ook als het plan nog niet rond is.