Wireframes

Admin
Aug 3, 2017
4 min read

Een website wireframe wordt ook wel de blauwdruk van een website genoemd. Een handleiding met daarin het geraamte van de website.

Bij het maken van een wireframe beslis je waar ieder element uit de website het best tot zijn recht komt. Een wireframe laat zien hoe de pagina layout eruit komt te zien, hoe de elementen verdeelt zijn binnen de pagina en hoe de navigatie binnen de pagina komt. Tijdens het wireframen hoef je geen rekening te houden met typografie, stijlen, kleuren of afbeeldingen. De focus ligt bij het maken van een wireframe vooral op functionaliteit, gedrag en de prioriteiten van content.

Inhoud blog: - Uitleg over het maken van wireframes.

- Uitgewerkte wireframes.

Wat heb je nodig om wireframes te maken: - De site indeling die je gemaakt hebt uit mijn vorige blog - De sitemap

In welk programma maak ik wireframes? Je kan in verschillende programma's wireframes maken, het is maar net waar jij zelf fijn mee werkt. Persoonlijk maak ik het liefste wireframes in Illustrator wanneer ik veel tijd heb, wanneer ik minder tijd heb doe ik het gewoon met pen en papier. Ik gebruik Illustrator omdat ik hier snel in kan werken en ik bekend ben met alle tools.

Je hebt ook speciale programma's om in te wireframen. Ik heb er zelf geen ervaring mee, maar ik geloof best dat sommige van deze programma's fijn kunnen zijn voor als je iets makkelijks wilt en niet fijn werkt in Illustrator. Hier een linkje naar een website die een top 20 heeft gemaakt van de beste wireframe tools.

Hoe begin ik?

Ik heb in Illustrator altijd al een basis staan om direct te kunnen beginnen met wireframen. Ik heb een rechthoek met een zwarte outline gemaakt die de website moet voorstellen en deze opgedeeld in grijs/witte stroken. Hierdoor kan ik nauwkeuriger en netter onderdelen plaatsen. Een voorbeeld hiervan hieronder.

Tijd om te beginnen. Hou het document waar je de site indeling heb genoteerd bij de hand en neem deze als basis om je wireframes te maken.

Begin altijd bij het begin, dat betekend het maken van de wireframe voor de homepagina en begin aan de bovenkant van de template: de header.

Er zijn verschillende manieren om een wireframe te maken. Ik gebruik zelf voornamelijk de Rectangle tool (rechthoek) (sneltoets: U) om onderdelen aan te geven. Ik maak rechthoeken die doorzichtig zijn met een zwart/grijze outline. Zelf vind ik het ook fijner om wel wat onderscheid te maken tussen onderdelen door ze een andere kleur grijs te geven of door rechthoeken in te vullen, omdat het voor mij dan in 1 oogopslag duidelijk is wat alles betekend. Dit hoeft niet, je kan ook gewoon 1 soort rechthoek vormgeving pakken (als het maar duidelijk is voor jezelf en eventuele collega's).

Wireframen Onderaan de pagina heb ik een gallery toegevoegd met daarin de stappen van de wireframe voor de homepagina. Ook staat er een linkje naar alle wireframes die ik gemaakt heb om te bekijken als voorbeeld (deze zijn ook betere kwaliteit). Mijn wireframe kan je er nu bij pakken waardoor onderstaande uitleg duidelijker wordt.

Je begint bovenaan de pagina bij de header. Wanneer ik kijk op mijn lijstje van 'Onderdelen per template' weet ik precies wat ik hier kwijt moet. Je hebt veel verschillende manieren voor het opmaken van een header en die keuze ligt volledig bij jezelf. Voorbeeld: je kan het logo in de header plaatsen of er juist onder, links/rechts of midden, of het logo in een apart blokje naast de header. Hier kan je al over nadenken tijdens het wireframen.

Ik heb de volgende vormgeving keuzes gemaakt om onderdelen aan te duiden binnen mijn wireframe: 1. Belangrijke knop: In een wit gevulde rechthoek met donkere outline en naam. 2. Secundaire knop: Alleen de naam. 3. Waar een afbeelding moet komen: Een lichtgrijze kruis. 4. Titel of grote tekst: Dik donker ingevulde rechthoek. 5. Body tekst: Dunne licht grijs gevulde rechthoek. 6. Navigatie: donker gevulde Pijlen (navigatie bolletjes: kleine licht grijs gevulde blokjes) 7. Invul boxjes: Wit gevulde rechthoek met donkere outline. Het is nu gewoon een kwestie van je onderdelen plaatsen en daar ben je helemaal vrij in. Zelf denk ik ook al een beetje na hoe ik de onderdelen ga vormgeven. Neem als voorbeeld dat ik de pijlers/opleidingen over de visual heb geplaatst en een foto aan de bovenkant heb en de naam van de opleiding eronder. Het kan heel goed zijn dat wanneer je dit uiteindelijk ontwerpt het totaal niet werkt. Dat maakt niet uit, want een wireframe is een blauwdruk en geen plan dat je letterlijk moet overnemen wanneer je het zo bedacht had. Dus als je in deze fase twijfelt over of iets wel gaat werken of niet, moet je het gewoon los laten en het aanzien bij het vormgeven van de template.

Tips: - Hou bij het wireframen er rekening mee dat je hier al keuzes kan maken of je een onderdeel full screen in beeld wilt of dat het een bepaalde breedte heeft. In mijn wireframe zie je dat de header, visual en slider full screen zijn en dat de rest een max breedte mee krijgt.

- Ik zet altijd aan de rechterkant van de wireframe precies neer wat het onderdeel is. Als je kijkt naar mijn wireframe en dan naar de 3 blokken onder de opleidingen, de 2 blokken aan de rechterkant zijn niet meteen duidelijk. Daarom plaats ik naast de wireframe de tekst: over hku, agenda, nieuws. Hierdoor is het voor jou en je collega's duidelijk wat er in deze onderdelen moet komen. - Probeer efficient te werken door onderdelen te kopieren en te plakken wanneer zij hetzelfde zijn. Stop niet teveel tijd in de vormgeving van je wireframe, dat het duidelijk is is het belangrijkste.

- Wanneer je een strook hebt met daarin 3 verschillende blokken (zoals bij mij tekst, agenda blok en nieuws blok naast elkaar), zorg er dan voor dat ieder blok even breed is en er evenveel tussenruimte zit (tenzij je er bewust voor kiest dat 1 onderdeel groter dan de rest is).

Hier nogmaals de link naar mijn wireframes.