Wireframes
Wireframes zijn een visueel hulpmiddel bij het ontwikkelen van een website of -applicatie. Ze kunnen gezien worden als bouwtekeningen met een overzicht van de verschillende functies en elementen die op een website aanwezig zullen zijn. Wireframes zijn prototypes van de functionaliteit van een app of website.
In de wireframes worden zaken vastgelegd als navigatie, indeling en inhoud, zonder gebruik te maken van een grafisch ontwerp. Het grote voordeel is dat alleen op de inhoud gefocust wordt en niet op het grafisch aspect (en of het ‘mooi‘ is of niet).
Een wireframe geeft een idee over:
- Content: Wat wordt er gepresenteerd in de interface
In een wireframe geef je aan waar tekst, plaatjes, video’s, iconen, animaties geplaats worden. Alle functies die nodig zijn voro het uitvoeren van de user story's moeten terug te vinden zijn in de wireframes. Gebruik hierbij zoveel mogelijk relevante teksten in bijvoorbeeld de koppen en gebruik de juiste menunamen. - Structuur: Waar komen de individuele onderdelen van de website/app/programma terug in de interface.
Maak bij het tekenen van een wireframe zoveel mogelijk gebruik van grids - Informatie hiërarchie: In welke vorm worden de verschillende content elementen georganiseerd en gepresenteerd.
Helangrijke teksten geef je groter weer dan minder belangrijke koppen. Belangrijke content worden boven aan de pagina gepresenteerd - Functionaliteit: Hoe gaat de interface werken/ zich gedragen.
Voor wie maak je wireframes?
Hoe gedetailleerd je een wireframe tekent, is afhankelijk voor wie je het maakt:
- Jijzelf: Er zijn verschillende situaties denkbaar waarin jij de enige persoon bent die met de wireframe gaat werken, bijvoorbeeld wanneer je in een klein bedrijf of als freelancer meerdere taken op je moet nemen en de wireframe niet gecommuniceerd word aan een externe klant. In dit geval hoeft de wireframe niet persé heel gedetailleerd te zijn en zijn jou schetsen ongeacht hoe ze er uit zien voor jou duidelijk en dus in principe al voldoende.
- Visueel Ontwerpers: visueel ontwerpers gebruiken de wireframes als basis voor het ontwerp. Soms betekent dit dat de wireframes nog geheel terug te vinden zijn in het ontwerp. Goede communicatie tussen de Visueel Ontwerper en de Interactie-/ UX Designer geeft veelal het beste resultaat.
- Back-end Developers: Een “Back-ender” wil voornamelijk weten met welke functies, structuur, gedrag en soorten content ze rekening moeten houden. Zij kunnen in principe genoeg met low fidelity wireframes zolang deze 3 onderdelen maar duidelijk worden. Ze gebruiken de wireframes vooral om een duidelijk beeld te krijgen van de verschillende type elementen die ze moeten coderen.
- Front-end Developers: In principe hebben "front-enders" het meeste aan high fidelity wireframes waarin alle 5 genoemde onderdelen van een wireframe volledig zijn uitgewerkt en duidelijk naar voren komen. Zo is het voor een front-ender bijvoorbeeld van belang wat de animaties zijn en hoe lang ze precies dienen te duren, wat er gebeurt op kleinere beeldschermen, is het responsive of adaptive en wat gebeurt er met de content; blijft deze gelijk of veranderd de vorm/inhoud etc.
- Gebruikers: Wireframes worden gebruikt bij gebruikerstesten. Hiervoor is meestel een high fidelity wireframe nodig.
- Klanten, collega's en andere betrokkenen: Naast de collega’s die vrij direct met je wireframes aan de slag gaan, heb je vaak ook te maken met project managers, creative directors, klanten, aandeelhouders, sales-managers enzovoorts. Zij gebruiken wireframes voornamelijk om te zien of aan de eisen van de opdracht voldaan worden. Zitten alle gevraagde elementen erin, past het bij hun beeld van de gebruiker, past het binnen hun productlijn, past het binnen het budget, kan ik er mee werken tot aan de meer abstracte vragen als: “Is het vernieuwend genoeg?”.
Het mooie van wireframes is daarnaast dat je snel een concept kunt toetsten, niet alleen om te kijken of het idee goed is uitgewerkt, maar ook of het op het gebied van gebruiksvriendelijkheid voldoet.
Low fidility wireframe
Het tekenen van een wireframes
De eerste versies van een wireframe worden altijd geschetst.
De schetsen kun je digitaal uitwerken.
Het meest gebruikte programma voor het maken van wireframes is Axure. Axure biedt goede online tutorials.
Er zijn ook een aantal (gratis) online wireframe-tools zoals gliffy en Mockingbird. In onderstaande video wordt gebruik gemaakt van Mockingbird.
Nog beter is een wireframe te maken met behulp van html! Je kunt dan de css aanpassen voor de verschillende devices.
Oefening 1
- Op deze website vind je meer informatie over wireframes en tools waarmee je wireframes kunt maken. Probeer een van de online tools en teken het wireframe van de home-pagina van de site 9292.nl.
- Download en installeer de free trial van Axure. Je moet voor Axure betalen. Bevalt het programma goed, dan is er ook een gratis studentenlicentie aan te vragen bij http://www.axure.com/edu.
- Volg de tutorials van Axure.
- Maak een functioneel aanklikbaar prototype met behulp van Axure van de site http://ronhairstudio.nl/ of van http://www.daportarevia.nl/. Je maakt gebruik van:
- 960 grid
- masters
- dynamic panels
- interactions
- Bouw het wireframe van de homepage van Google in html/ css.
Er zijn ook templates te vinden voor de verschillende Adobe- en Officepprogramma's zodat je deze kunt gebruiken voor het maken van wireframes.
- Ga naar de site speckyboy.com en download een template voor een Office-programma en voor een Adobe-programma.
- Gebruik de template voor Office voor het maken van het wireframe van de home-page van http://speckyboy.com/ (alleen boven de "vouw")
- Gebruik een template voor Illustrator voor het maken van een wireframe van de onderstaande contactpagina.
- Kijk ook naar de site mockupstogo.mybalsamiq.com en download de pdf met de template voor webapps & sites.
