Embedded Files
Wat is een wireframe?
Een wireframe is niets anders dan een schematische weergave van een website of van een webpagina. Bij het ontwikkelen van een website maken we zowel een wireframe voor de website als een wireframe voor een pagina. De homepage is bij ons altijd uniek en hier maken we dan ook een apart wireframe voor. Designers en webbouwers kunnen in een later stadium aan de slag met de “bouwtekening” van de site.
Vaak wordt een wireframe verward met een prototype. Echter is er wel degelijk verschil tussen een prototype en een wireframe. Een wireframe is bedoeld om te kijken naar de functionaliteit en de inhoud (content) en dus nog niet op een strak uiterlijk. Een wireframe toont de lay-out van de pagina’s binnen een site zonder stijl, kleur of grafische elementen. Een wireframe heeft als doel om de structuur van de informatie die de site biedt met bijbehorende inhoud en navigatiefuncties (knoppen, pijlen, etc), en hoe deze elementen samenwerken, te laten zien.
Een voorbeeld van een wireframe
Hoe maak je nu zo’n wireframe? Allereerst is het belangrijk om voldoende informatie te hebben voor een zo compleet mogelijk wireframe. Vervolgens ga je aan de slag met pen en papier. Je maakt simpelweg een schets van hoe de website er globaal uit moet komen te zien. Uiteindelijk wordt zo’n wireframe gedigitaliseerd door middel van een tool. Je kunt gebruik maken van bijvoorbeeld Word, Powerpoint, Adobe XD, al moet daarbij gezegd worden dat dit slechts een hulpmiddel is om een wireframe netjes op te maken. Het belangrijkste deel is natuurlijk hetgeen wat uitgedacht moet worden.
Hoe maak je een wireframe?
Er zijn verschillende manieren om een wireframe te maken. Uiteraard kan je ze zelf tekenen met behulp van pen en ruitjespapier. Daarnaast zijn er ook een aantal programma’s die je hierbij kunnen ondersteunen. Ik heb hieronder vier programma’s kort te beschreven waarmee wij zelf ervaring hebben. Uiteraard zijn er veel meer programma’s, maar dat gaat iets te ver voor deze introductie in wireframes.
Enkele tips voor het maken van Wireframes
Bij het maken van een wireframe voor je website zijn de volgende tips wel handig:
Wees herkenbaar met de elementen in een wireframe. Als je een bepaald type knop gebruikt voor een actie, gebruik dan altijd die knop voor acties. Dit zorgt er voor dat je website al snel prettig en makkelijk in gebruik is voor de eindgebruiker.
Herhaal jezelf niet teveel! Zorg dat je eenmalig een menu opbouwt en de basisstructuur en dat de overige wireframes hierop gebaseerd zijn. Mocht dan toch halverwege de navigatie van je site veranderen dan is dit snel over te nemen in alle wireframes.
Zorg ervoor dat je goed georganiseerd te werk gaat. Doordat er veel versies van de wireframes gemaakt worden is het belangrijk goed de verschillende versies bij te houden (bijvoorbeeld met versie- of datumnummers).
Maak je vooral niet druk over uitlijning, zorg er eerder voor dat dit er niet teveel in zit. Dit voorkomt dat de discussie zich verplaatst van inhoud naar opmaak.
Enkele software programma's om wireframes mee te maken:
Microsoft Word
Met Microsoft Word kun je prima een wireframe maken voor je website. Dit programma is breed verkrijgbaar en jullie hebben allemaal een licentie via school. Met word kun je met 'het invoegen van vormen 'heel makkelijk wireframes maken op een blad. Je kunt er met tekstvakken ook makkelijk notities bij voegen.
Microsoft Powerpoint
Het mooie van Powerpoint is dat bijna iedereen het op zijn computer heeft staan en het programma is niet moeilijk te gebruiken. Voor powerpoint heeft Yahoo een bestand samengesteld met alle webbasiselementen erin, als je daar gebruik van wil maken. Dit scheelt een hoop tekenwerk! Een andere tijdsbesparing is het aanmaken van Masterdia's met de basis-layout, zodat je deze eenvoudig kan aanpassen. Een groot nadeel van Powerpoint is dat het veel werk kost om te maken, maar ook om aan te passen.
Adobe Indesign
Veel designers gebruiken Indesign (of Illustrator) om Wireframes mee te maken. Dit programma biedt veel tekenmogelijkheden en ook kun je eenvoudig schuiven met elementen. Je moet Het programma dan wel hebben en enige ervaring met dit programma om hier snel een opzet mee te kunnen maken.
Page updated
Google Sites
Report abuse