Een web-wireframe is een eenvoudige visuele gids om u te laten zien hoe een webpagina eruit zou zien. Het suggereert de structuur van een pagina, zonder gebruik te maken van afbeeldingen of tekst. Een wireframe van een website zou de volledige sitestructuur weergeven - inclusief welke pagina's naar waar verwijzen.
Web wireframes zijn een geweldige manier om uw ontwerpwerk te starten. En hoewel het mogelijk is om complexe wireframes met enorme hoeveelheden detail te maken, kan uw planning beginnen met een servet en een pen. De sleutel tot het maken van goede wireframes is om alle visuele elementen weg te laten. Gebruik kaders en lijnen om afbeeldingen en tekst weer te geven.
Dingen om op te nemen in een draadframe van een webpagina:
- vakken voor primaire grafische elementen
- plaatsing van koppen en subkoppen
- een eenvoudige lay-outstructuur
- oproepen tot actie
- tekstblokken
Hoe een eenvoudig web-wireframe te bouwen
Maak een webframe draadframe met behulp van een stuk papier dat u handig vindt. Hier is hoe ik het doe:
- Teken een grote rechthoek - dit kan de hele pagina zijn of alleen het zichtbare gedeelte. Ik begin meestal met het zichtbare deel en breid het uit om elementen onder de vouw te plaatsen.
- Schets de lay-out - zijn het 2 kolommen, 3 kolommen?
- Voeg een box toe voor een header-afbeelding - Teken over uw kolommen als u wilt dat het een enkele header boven de kolommen is, of voeg het toe waar u maar wilt.
- Schrijf "Headline" waar u uw H1-kop wilt hebben.
- Schrijf "Sub-Head" waar je H2 en lagere headlines wilt hebben. Het helpt als je ze proportioneel maakt - h2 kleiner dan h1, h3 kleiner dan h2, etc.
- Voeg in dozen toe voor andere afbeeldingen
- Voeg toe in navigatie. Als u tabbladen plant, tekent u alleen vakken en schrijft u 'navigatie' over de top. Of zet opsommingslijsten in de kolommen waar u de navigatie wilt. Schrijf de inhoud niet. Schrijf gewoon "navigatie" of gebruik een lijn om tekst weer te geven.
- Voeg extra elementen toe aan de pagina - identificeer wat ze zijn met tekst, maar gebruik niet de daadwerkelijke inhoudstekst. Als u bijvoorbeeld een call-to-action-knop rechtsonder wilt gebruiken, plaatst u daar een vak en labelt u dit 'call to action'. Schrijf niet "Koop nu!" in die doos.
Als je eenmaal je eenvoudige draadframe hebt geschreven, en je moet er niet meer dan 15 minuten over doen om er een te schetsen, laat het aan iemand anders zien. Vraag hen of er iets ontbreekt en voor andere feedback. Op basis van wat ze zeggen, kun je nog een draadframe schrijven of degene behouden die je hebt.
Waarom Paper Wireframes het beste zijn voor eerste concepten
Hoewel het mogelijk is om wireframes te maken met programma's zoals Visio, moet je voor je eerste brainstormsessies op papier blijven. Papier lijkt niet zo permanent, en veel mensen gaan ervan uit dat je het in 5 minuten hebt samengegooid en dus niet aarzelen om je goede feedback te geven. Maar wanneer je een programma gebruikt om mooie wireframes met perfecte vierkanten en kleuren te maken, loop je het risico verstrikt te raken in het programma zelf en uren te spenderen aan het perfectioneren van iets dat nooit live gaat.
Paper wireframes zijn gemakkelijk te doen. En als je het niet leuk vindt, verfrommel je het papier gewoon, gooi het in recycling en pak een nieuw blad.
