Kun je een mockup omzetten naar een website?
Een mockup omzetten naar een website gaat niet met één druk op de knop. Er bestaan functies die code uitspugen, maar die uitvoer is als startpunt onbruikbaar.
Wat wel werkt, is de mockup gebruiken als opdracht voor de bouwer.
Dan is het naslagwerk in plaats van bron.
Waarom automatisch omzetten niet werkt
Een ontwerp kent geen gedrag: het weet niet wat er gebeurt bij een langere tekst, een smaller scherm of een ontbrekende afbeelding.
Meer daarover lees je bij breakpoint.
Wat de uitvoer oplevert
Vaste maten en een berg regels die niemand kan onderhouden. Bij de eerste wijziging begin je opnieuw.
Meer daarover lees je bij design system.
Wat wel goed werkt
Kleuren, maten en afstanden overnemen uit het ontwerp, en de afbeeldingen exporteren. Dat scheelt echt tijd.
Meer daarover lees je bij figma.
Mijn vuistregels
- Gebruik de mockup als opdracht, niet als bron.
- Neem kleuren en afstanden letterlijk over.
- Exporteer beeld op de juiste maat.
- Bouw op je eigen sjabloon of thema.
Die laatste levert een site op die je over een jaar nog kunt aanpassen.
Bij een paginabouwer
Daar bouw je het ontwerp na met de blokken die je hebt. Kleine verschillen zijn onvermijdelijk en meestal geen probleem.
Meer daarover lees je bij hero.
Wat je vooraf afspreekt
Hoe letterlijk de bouw het ontwerp volgt. Een verschil van enkele pixels is normaal; een andere indeling niet.
Meer daarover lees je bij hoe je feedback geeft op een mockup.