Gebruikerservaring (UX) is de manier om de kloof te dichten en ervoor te zorgen dat uw ontwerp converteert. Marketeers denken vaak liever alleen aan websites in termen van ontwerp of conversies. Met een wireframe kun je de paginalay-out en gebruikersstromen testen om precies te zien hoe de nieuwe website zal werken en om mogelijke fouten te identificeren die uiteindelijk conversies kunnen voorkomen. In dit bericht zullen we kijken naar het voorbeeld van een website wireframe met een ontwerp en een tool om mee te werken.
Website draadframe
De primaire functies en navigatie van een nieuw website-ontwerp worden in kaart gebracht met behulp van een website-wireframe. Voorafgaand aan het nadenken over visuele ontwerpcomponenten zoals inhoud en kleurenschema's, biedt het inzicht in de functionaliteit van de site. Het team kan een wireframe van een website gebruiken als een praktische projectkaart om te zien waar alles naartoe gaat als ze gerelateerde taken voltooien.
Sommige ontwerpers of klanten zouden in de verleiding kunnen komen om deze stap van het proces over te slaan, omdat ze denken dat het tijdrovend en onnodig is. Wireframing gaat echter over zelfvoorbereiding en een goede voorbereiding kost tijd. Werken zonder strategie duurt echter doorgaans langer en vergroot de kans dat een project volledig mislukt.
Waarom een wireframe maken voor een website?
Een website wireframe kan om een aantal redenen worden gemaakt, maar de belangrijkste is dat het u in staat stelt om elke kans te vinden en te grijpen om de functionaliteit, bruikbaarheid en het gemak van uw site te verbeteren om uw klanten tevreden te stellen. Het kan ook een verbeterde communicatie tussen leden van uw ontwerpteam vergemakkelijken en vroege input van klanten mogelijk maken.
Hoe u een eenvoudige website-wireframe bouwt
#1. Bepaal het doel van de website.
U zult het handig vinden om het doel van uw website te kennen voordat u de pen op papier zet om een wireframe op te stellen. Ook al lijkt het misschien duidelijk dat u het verkeer zoveel wilt verhogen als uw server aankan, bedenk toch wat u al die bezoekers wilt laten bereiken wanneer ze op uw site zijn.
#2. Herken de gebruikersstroom.
Zodat iedereen in uw team weet hoe bezoekers met elke pagina op uw website moeten omgaan, helpen wireframes u bij het identificeren en evalueren van gebruikersstromen. Deze fase omvat het schetsen van elk mogelijk toegangspunt dat een bezoeker zou kunnen gebruiken om uw startpagina te bereiken voordat u een paar belangrijke toegangspunten selecteert om een reisstroom tot stand te brengen.
#3. Bepaal de grootte van het wireframe van uw website.
Afhankelijk van de grootte van het scherm waarvoor u ontwerpt, moeten uw wireframes verschillende formaten hebben. De grootte van schermen op mobiele apparaten, tablets en desktopcomputers kan variëren, om nog maar te zwijgen van het feit dat het venster van een desktopcomputer kan worden aangepast. Gebruik pixels in plaats van inches of punten om de meest nauwkeurige specificaties voor uw wireframe te verkrijgen.
#4. Begin met het ontwerpen van de wireframes van uw website.
Het is tijd om een wireframe te maken om uw gebruikersstroom weer te geven. We raden aan om gestippeld papier of rasterpapier te gebruiken om de uitlijning te behouden als u met een pen op papier schrijft. Dit maakt het eenvoudiger voor u om de fysieke versie van uw wireframe om te zetten in een digitale versie.
#5. Bereken de conversiepunten.
Nadat u uw wireframes hebt geschetst, moet u precies definiëren hoe de gebruiker elke fase moet doorlopen. De gebruiker vindt de processen misschien niet gemakkelijk te volgen alleen omdat u de stappen voor hen hebt uiteengezet.
#6. Weg met onnodige stappen.
Iteratieve wireframing is een procedure. Wireframes die klaar zijn voor productie, kunnen zelden in één schetsronde worden gemaakt. Het is u misschien opgevallen dat sommige webpagina's niet nodig zijn en kunnen worden geconsolideerd zodat de gebruiker op minder links hoeft te klikken.
#7. Krijg invoer met betrekking tot het draadframe.
Voordat uw website live gaat, doorloopt hij meerdere testrondes en aanpassingen, maar het is nog steeds een goed idee om in een vroeg stadium input te krijgen over uw wireframes. Krijg input over de stroom zelf door samen te werken met uw ontwerp- en ontwikkelingsteams, eventueel intern personeel en klanten.
Voorbeeld van Website Wireframe
Hieronder vindt u de beste wireframe-voorbeelden voor websites om uw verbeelding te prikkelen en u te helpen de wireframing-methode vast te stellen die voor u werkt. Het voorbeeld van website wireframe omvat:
#1. Schets Website Wireframe
Sommige programmeurs beginnen hun schetsen op papier of een whiteboard. Voordat we ons echt zorgen maken over grafische functies, demonstreert deze eenvoudige, met de hand getekende methode een fundamenteel idee.
#2. Gedetailleerd handgetekend draadframe
Met de hand getekende wireframes hoeven niet per se eenvoudig te zijn. Om een nauwkeuriger ontwerp te maken, kunt u naast potlood en papier ook een liniaal gebruiken.
#3. Low-fidelity draadframe
Uw eerste conceptontwerp wordt verbeterd met behulp van low-fidelity wireframes, die digitaal worden gemaakt en dingen weergeven in eenvoudige inhoudsblokken. Bij het beslissen welke grafische elementen moeten worden ontwikkeld en welke tekst moet worden geschreven, zijn low-fidelity wireframes cruciaal.
#4. Low-Fidelity mobiel draadframe
Vergeet niet dat er ook wireframes worden gemaakt voor uw mobiele apps en responsieve websites. Aangezien mobiele gebruikers vaker dan ooit tevoren websites bezoeken, wireframen veel ontwerpers zelfs eerst de mobiele versie.
#5. Hoogwaardig draadframe
Met digitale tools kunt u een high-fidelity wireframe maken dat gedetailleerder illustreert zonder een overmatige hoeveelheid grafische elementen te produceren. Het resultaat is een aantrekkelijker uiterlijk zonder de noodzaak van tijdrovend ontwerpwerk dat tijdens het beoordelingsproces zou kunnen worden genegeerd.
Website Wireframe-ontwerp
Een webdesignproject begint met het maken van wireframes. Na wat onderzoek te hebben gedaan, wat inspiratie te hebben opgedaan en het met de klant eens te worden over een zakelijk doel, zet je deze kennis om in een wireframe.
Voorbeelden van wireframe-ontwerp voor websites
Laten we verder gaan met enkele visuele voorbeelden nu u bekend bent met wat een wireframe is en waarom het cruciaal is. Het is je misschien opgevallen dat er verschillende typen wireframes zijn. Is de een superieur dan de ander? Niet altijd; het hangt allemaal af van de fase waarin uw ontwerpproject zich bevindt. Beginnen met schetsen en van daaruit verder gaan is helemaal OK.
#1. Wireframe-schetsen
Hoe ervaren je ook bent als ontwerper, er zijn momenten waarop het simpelweg eenvoudiger is om pen en papier te pakken en te beginnen met schetsen om die eerste ideeën snel naar buiten te brengen. Je kunt ze zo slordig of ordelijk zo nauwkeurig maken als je wilt.
#2. Low-fidelity Wireframe-voorbeelden
Om de informatie en ontwerpelementen te verdelen over de 12 kolommen in dit wireframe-voorbeeld, heeft de ontwerper een raster gemaakt. Het bespaart u later tijd als u de rasterstructuur vaststelt voordat u begint met ontwerpen. Hier is een eenvoudig low-fidelity draadframe dat de locatie van het logo, de heldenfoto en ondersteunende afbeeldingen laat zien met behulp van voornamelijk lijnen en omlijnde vakken. De hoofdtekst wordt weergegeven in een kader met een lichtgrijze tint.
#3. High-fidelity Wireframe-voorbeelden
Het detailniveau in high-fidelity-mockups neemt toe naarmate u dichter bij het uiteindelijke ontwerp komt. Op dit moment kunnen de kopteksten en subkopieën echte inhoud bevatten, hoewel de hoofdtekst nog steeds een tijdelijke aanduiding kan zijn.
Bekijk dit high-fidelity wireframe-model van een mobiele gebruikersreis om de details te zien. Het is een geweldige tijd om inhoudelijk en organisatorisch vóór het ontwerpen te zijn. In dit high-fidelity wireframe-voorbeeld worden grafieken en kaarten gebruikt om cruciale tijdlijninformatie over te brengen.
Website Wireframe-tool
We hebben onze topselecties samengesteld voor de meest effectieve beschikbare wireframing-apparatuur.
#1. Adobe XD Website Wireframe-tool
Sinds de eerste release in 2016 is Adobe XD ongelooflijk populair geworden, en terecht. Deze tool is uitstekend geschikt voor samenwerking, prototyping en wireframing. Het is een hulpmiddel om naar te kijken als je met anderen samenwerkt. Met keuzes om interacties te ontwikkelen, heeft Adobe XD mogelijkheden voor alles, van een snelle schets tot een high-fidelity wireframe, zodat je de gebruikersstroom kunt nabootsen! Als het gaat om 3D-beeldlagen, heeft de automatische animatiefunctie van de tool de zaken eenvoudiger gemaakt.
#2. Miro Website Wireframe-tool
Met name voor brainstormsessies, interactieve presentaties, design thinking workshops en soortgelijke activiteiten is Miro een enorm nuttig en geliefd hulpmiddel. De toepassingen houden daar echter niet op! Het heeft wireframing-mogelijkheden en is een ongelooflijk flexibele tool! Teams kunnen de functies videochat, achtergrondmuziek en oproepen gebruiken. En zelfs dat is nog maar het begin.
#3. Mockplus Website Wireframe-tool
Mockplus is een tool voor snelle wireframing en prototyping waarmee ontwerpers snel interactieve wireframes voor websites en mobiele apps kunnen bouwen. Met deze tool kunnen ontwerpers vroege ontwerpconcepten delen en testen op desktops en mobiele apparaten. Mockplus doet er alles aan om u alleen de tools te geven om uw wireframe te ontwikkelen en helpt u bij uw ontwerpen met een grote verscheidenheid aan vooraf geïnstalleerde componenten, pictogrammen, gebruikersinterfaces en sjablonen. Het is ook eenvoudig om wireframes te maken die realistischer zijn als er een volledige set interacties en animaties is. Het is ook een samenwerkingstoepassing waarmee uw hele team aan hetzelfde project kan werken.
#4. Wireframe.CC Website Wireframe-tool
Een ongecompliceerde, eenvoudige en eenvoudig te gebruiken tool voor wireframing van mobiele websites en apps. Deze webgebaseerde wireframe-tool is vrij eenvoudig te gebruiken omdat de lay-out vergelijkbaar is met het maken van objecten op papier, ze uitknippen en in uw ontwerp plakken. Dankzij Wireframe.cc was het ongelooflijk eenvoudig om van je muis een veelzijdige tool te maken. Schets eenvoudig het gewenste formulier op een leeg canvas en kies het uit de 9 alternatieven die worden weergegeven op de werkbalk die verschijnt. De ontwerpsjablonen die worden aangeboden door Wireframe.cc zijn eenvoudig, met opties voor mobiel landschap, mobiel verticaal en webpagina.
#5. Wireframe-tool voor Figma-website
Een cloudgebaseerd ontwerpplatform dat perfect is voor teamdeling en samenwerking. Hoewel veel ontwerpers Figma gewoon gebruiken vanwege de fantastische prototyping en grafische ontwerpfuncties, zouden niet veel ontwerpers het gelijkstellen aan wireframing. Toch biedt deze ontwerptool u de flexibiliteit om vrijwel elk gewenst ontwerp te produceren, inclusief low- tot high-fidelity wireframes. De ontwerpgerichte methodologie van Figma maakt het een uitstekende tool voor het snel wireframing van concepten door processen te vereenvoudigen die typisch uitdagend zijn.
Een website-wireframe maken
Het kan veel moeite kosten om een wireframe te maken, vooral als de testfase niet succesvol is. Maar als u van tevoren tijd besteedt aan het oplossen van UX-fouten, vergroot u de kans op succes van uw site op de lange termijn. U kunt aan de slag door de onderstaande stappen voor het maken van een website-wireframe te volgen.
#1. Monteer de Wireframe-tools
Wireframes kunnen respectievelijk handmatig of digitaal worden gemaakt. Als u voor de eerste optie kiest, heeft u alleen pen en papier nodig om aan de slag te gaan. Voor brainstormdoeleinden beginnen sommige ontwerpers met een "low-fidelity" papieren wireframe en produceren daarna een "high-fidelity" digitale versie. Het beschikt over een gebruiksvriendelijke, op groepen gebaseerde wireframing-interface die uitstekend geschikt is voor teams en zakenmensen die realtime communicatie nodig hebben. Het is echter alleen in staat tot statische wireframing.
#2. Bestudeer uw doelgebruikers en UX-ontwerpen.
Het is nuttig om wat onderzoek te doen voordat u begint met het opstellen van uw wireframe. U moet beginnen met het identificeren van uw doelmarkt. Dit kan u helpen bij het bepalen welke aspecten van uw website het meest moeten worden benadrukt, zodat bezoekers kunnen vinden wat ze nodig hebben. Onderzoek doen naar UX-designtrends en best practices is ook een goed idee. Dit kan u informatie geven over zaken als menu-indelingen, waar uw logo en andere belangrijke merkcomponenten moeten worden geplaatst, en inhoudsindelingen. Als het op deze kenmerken aankomt, geven gebruikers de voorkeur aan websites die zich aan conventies houden.
#3. Kies uw ideale gebruikersstromen.
De route die een bezoeker aflegt om een bepaalde taak op uw website uit te voeren, wordt de 'gebruikersstroom' genoemd. Ter illustratie: één gebruikersstroom op een e-commercewebsite kan van een productpagina tot het einde van de afrekenprocedure zijn. U kunt voor elk mogelijk doel de meest eenvoudige gebruikersstroom maken door de belangrijkste acties uit te zoeken die gebruikers op uw website moeten uitvoeren. Door uw website gebruiksvriendelijk en aantrekkelijk te maken, verbetert u de gebruikerservaring.
#4. Maak nu uw eerste wireframe.
U kunt beginnen met het opstellen van uw wireframe nu u uw bronnen en essentiële gegevens hebt verzameld. Onthoud dat het doel van deze oefening niet is om een afgewerkt website-ontwerp te maken. U overweegt alleen UX, of hoe u een pagina ontwerpt die eenvoudig te gebruiken en te begrijpen is. Daartoe moeten de functies en indelingen in uw wireframe relevant zijn voor hoe bezoekers uw website zullen gebruiken en gebruiken.
#5. Bruikbaarheidstesten zijn een goede manier om uw ontwerp te testen.
Nadat u uw eerste wireframe hebt voltooid, moet u testen. Hierdoor kunt u beoordelen of het gelukt is om de UX en gebruikersstromen te schetsen die het meest eenvoudig en natuurlijk zijn voor uw website. Er zijn talloze benaderingen om een wireframe voor een website te maken.
#6. Uw Wireframe kan een prototype worden
Het is tijd om je wireframe om te zetten in een prototype nadat je het hebt getest en het optimale UX-ontwerp voor je website hebt bepaald. Prototypes bevatten enkele fundamentele functionaliteit in tegenstelling tot statische wireframes, waardoor u gebruikersstromen nauwkeuriger kunt testen.
Is wireframing onderdeel van UX of UI?
UX-ontwerpers gebruiken de techniek van wireframing om het big data-beheer van hun ontwerp voor een webpagina, app of product te specificeren en te organiseren.
Wat moet worden opgenomen in een website-wireframe?
- Logo.
- zoekvak.
- Paneermeel.
- Kopteksten.
- Navigatie
- Lichaamsinhoud.
- Koppelingen om te delen.
Hoe ziet een website-wireframe eruit?
Eenvoudige zwart-witlay-outs, 'wireframes' genaamd, specificeren de precieze afmetingen en locaties van de pagina-elementen, functies, conversiezones en navigatie van uw website. Ze missen kleur, lettertypeselecties, logo's of andere ontwerpkenmerken die afbreuk zouden doen aan de structuur van een site.
Wat zijn de 2 soorten wireframes?
- Low-fidelity-draadframes.
- Wireframes van gemiddelde kwaliteit.
- Hoogwaardige wireframes.
Gerelateerde artikelen
- WAT IS EEN WIREFRAME: webdesign, mockup, UX en verschil
- OKR-SOFTWAREVERGELIJKING: vergelijk 10 beste OKR-software in 2023
- Operationele cashflow: gebruik en toepassingen
- FREELANCE GRAFISCH ONTWERPER: definitie, salaris, cv en werk
Referenties
