Inhoud
1. Waaruit bestaat een functioneel ontwerp? Terugblik
2. Wat zijn wireframes?
3. Wat komt er in een wireframe?
4. Voor wie maak je een wireframe?
5. Wireframe-schets
6. Low fidelity wireframe
7. High fidelity wireframe
8. Regels voor het maken van een wireframe
9. Waarom mobile first? 
10. Opdracht 13: Wireframe
11. Voorbeelden van een wireframe

Richard Slakhorst

---

1. Waaruit bestaat een functioneel ontwerp? Terugblik

A. Een functioneel ontwerp is een methode om een aankoopproces of een dienst vanuit het perspectief van de klant te visualiseren.
B. Het beschrijft de ervaringen van een klant gedurende de reis die een klant maakt om zich te oriënteren of een product of dienst aan te schaffen, en beschrijft voor de rest alle functionaliteiten van het de web-app-webshop.
C. Het ene functioneel ontwerp (FO) is uitgebreider dan het andere. Het verschilt namelijk per type opdracht wat er in het functioneel ontwerp (FO) moet komen. Daarom is er niet één juist format voor een Functioneel ontwerp (FO).

Wel bestaat een functioneel ontwerp (FO) meestal uit ten minste de volgende elementen:
1. Doelgroeponderzoek
2. Doelen van de website voor gebruikers en de onderneming (User Story’s)
3. Structuur van website (flowchart)
4. Uitwerking functionaliteiten per pagina gedetailleerd (Wireframes)
5. Input voor design en techniek (Basis Styletile)
6. Interaction ideeën (interaction design) (interactive mockups?) (Prototype)

---

2. Wat zijn wireframes?

Wireframes zijn een visueel hulpmiddel bij het ontwikkelen van een website en/of een mobiele-app-webshop of ander mediaproduct. Ze kunnen gezien worden als bouwtekeningen: een visuele weergave in grijsschaal van de structuur en functionaliteit die op een website en/of app-webshop aanwezig zijn. Wireframes worden gedetailleerd per pagina uitgewerkt.

Wireframes worden vroeg in het ontwikkelingsproces gebruikt om de basisstructuur en de basisfunctionaliteit van een pagina vast te stellen voordat het visuele ontwerp en de content (inhoud) worden toegevoegd. In de praktijk worden wireframes en de bijbehorende functionaliteit en het visueel design vaak in één adem gecreëerd. Wil je echter de hoogst mogelijke kwaliteit, dan is het wenselijk om deze twee processen gescheiden te doorlopen en te maken.

---

3. Wat komt er in een wireframe?

In de wireframes worden zaken vastgelegd als navigatie, indeling en inhoud.
Een wireframe geeft een idee over:

A. Content
Wat wordt er gepresenteerd op een pagina?
In een wireframe geef je aan waar tekst, plaatjes, video’s, iconen, animaties geplaatst worden. Alle functies die nodig zijn voor 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.

B. Structuur
Waar komen de individuele onderdelen van de website of app terug (in de interface en
de navigation design, maar ook in de globale layout)? Maak bij het tekenen van een wireframe zoveel mogelijk gebruik van Grid.
Informatiehiërarchie: in welke vorm worden de verschillende content-elementen georganiseerd en gepresenteerd? Belangrijke teksten geef je groter weer dan minder belangrijke koppen. Belangrijke content wordt boven aan de pagina gepresenteerd.

C. Functionaliteit
Hoe gaat de website en/of app werken en hoe gaat deze zich gedragen, en met welke functies (zoals bijvoorbeeld een video player etc.)?

D. Snel een concept testen
Het mooie van wireframes is daarnaast dat je snel een concept kunt toetsen, niet alleen om te kijken of het idee goed is uitgewerkt, maar je krijgt ook een eerste indruk of het op het gebied van gebruiksvriendelijkheid voldoet.

---

4 Voor wie maak je een wireframe?

Hoe gedetailleerd je een wireframe tekent, is afhankelijk voor wie je deze maakt:

Jezelf: 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. In zo’n geval wil je voor jezelf een goede kwaliteitsborging.

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.

UX-ontwerper: Een UX-ontwerper is gespecialiseerd in het ontwerpen van waardevolle gebruikerservaringen. Wireframes maken op basis van gebruikerservaring is een methode voor het verhogen van de loyaliteit en tevredenheid van klanten. Het verbetert de bruikbaarheid en het plezier van de interactie tussen de klant en de site, de appwebshop of een ander mediaproduct.

Back-end Developers: “Back-enders” willen 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 typen 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, of het responsive of adaptive is en wat er gebeurt met de content (blijft deze gelijk of verandert deze van vorm/inhoud etc.).

Gebruikers: Wireframes worden ook gebruikt bij gebruikerstesten. Hiervoor is meestal 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 projectmanagers, creative directors, klanten, aandeelhouders, salesmanagers enzovoorts. Zij gebruiken wireframes voornamelijk om te zien of aan de eisen van de opdracht voldaan wordt. Zo willen ze weten of alle gevraagde elementen erin zitten, of het resultaat past bij hun beeld van de gebruiker, of het past binnen hun productlijn, binnen het budget. Hun vragen gaan van het praktische ‘kan ik ermee werken?’ tot het meer abstracte als bijvoorbeeld “is het vernieuwend genoeg?’.

---

5. Wireframe-schets

• Schetsen
– Snel, experimenteel
– Goed voor feedback

---

6. Low fidility wireframe

– Alleen contentblokken
– Blokdiagrammen

---

7 High fidelity wireframe

A. Gedetailleerde wireframes
B. Visuele weergave in grijsschaal
C. Beschrijving van inhoud en gedrag
D. Beschrijving van de functionaliteit (voor de ontwikkelaar)
E. Commentaar / opmerkingen
F. Begrijpelijk zonder uitleg
G. Een goede legenda met bijschrift (zie de nummers 1, 2, 3, 4 etc.)

Zie de legenda voor een bijschrift bij de nummers 1, 2, 3, 4 etc. Deze legt uit wat de onderdelen doen / betekenen.

---

---

8. Regels voor het maken van een wireframe 

1. Werk van klein naar groot: dus eerst het wireframe voor (staand) 
mobiel, dan pas voor pc of laptop.
2.Teken op ware grootte en/of in ware verhouding.
3. Maak voor elke pagina van het flowchart een wireframe (voor straks in de praktijk).
4. Begin binnen een pagina eerst met de grote vlakken (header, menu, content) en werk deze dan verder uit. Je geeft de positie aan van alle elementen van de inventarisatie (navigatie, header, kolommen, beelden, thumbnails…) door middel van kaders / vlakken.
5. Elementen als navigatie en logo komen op elke pagina op dezelfde plaats.
6. Een menu mag niet meer dan 7 links bevatten. Moeten meer links op een pagina geplaatst worden, dan moet je gebruikmaken van bijvoorbeeld submenu’s of sidebars.
7. Plaats de koppen in leesbare tekst. Geef van de broodtekst een korte samenvatting. Bij
langere teksten mag je faketekst gebruiken. Gebruik geen lappen tekst, wanneer je weet
dat er straks hooguit 3 regels komen te staan.
8. Geef de velden van formulieren weer met de juiste symbolen en geef de naam van het veld weer.

---

 9. Waarom mobile first?

Een klein scherm dwingt je te focussen op de meest belangrijke en relevante content. Heb je een wat groter scherm, zeg een tablet of laptop, dan kun je meer ‘nice to have’ content plaatsen. Een mobiele site hoeft dus niet dezelfde content te bevatten dan de de site voor een groter scherm.

De beperkte 3G databundels (met 4G is het niet veel beter. G5 is in Nederland nog niet uitgerold, alleen langzame G5 ) dwingen nog steeds tot snel laadbare pagina’s.
The need for speed blijft actueel.

---

---

10. Opdracht 10: High fidelitity wireframe

De opdracht
Wireframes zijn een visueel hulpmiddel bij het ontwikkelen van een website en/of een mobiele app-webshop. Ze kunnen gezien worden als bouwtekeningen: een visuele weergave in grijsschaal van de structuur en functionaliteit die op een website en/of app-webshop aanwezig zijn. Wireframes worden gedetailleerd per pagina uitgewerkt

Klikbare Wireframe in Figma
Maak de klikbare wireframe in Figma Maak in Figma de klikbare wireframe van alle pagina’s met alle onderdelen/stappen
Waarin je alle user story’s hebt verwerkt. De klikbare wireframe in Figma is interactief dus er hoeft nu geen legenda met bijschrift bij.
De onderstaande pagina’s zijn “clickable” verwerkt  

Deze pagina,s moeten verwerkt worden
1. Landing pagina home
2. Nieuws op het festival
Nieuws van de dag: Er zijn minimaal 3 nieuwsitems ontworpen. Minimaal één item is clickable
3. Programma pagina artiesten/ gezelschappen/ voorstellingen
Artiesten: Laat minimaal 3 verschillende artiesten/ gezelschappen/ voorstellingen zien minimaal Één artiest gezelschappen/ voorstellingen is clickable
4. Blokkenschema podia
laat het blokkenschema van minimaal één dag zien. Het blokkenschema bevat een timetable en podia. Je kunt in de timetable op minimaal één artiest klikken voor meer informatie 
5. Plattegrond waar&wat
Neem de originele plattegrond over voor de locatie van podia, eetgelegenheden etc
6.Bestel tickets/ Muntjes/Merchandise pagina
7. Contact
8.Jou eigen idee pagina?
 
Stap. 1 Maak eerste van alle pagina’s een globaal de layout schetsen op papier Download hier >>> Grid voor Mobile  verwerk suggesties teksthiërarchie 1 Chapeau. 2 Heading/titel. 3 Intro. 4 Broodtekst. 5 Streamer. 6 Tussenkopjes. en 7 video. 8 geluid. 9 foto.
Stap. 2 Denk na over de User Interface (UI)-onderdelen 1. Hamburger menu 2. Knop (aan/uit) 3. Knop <mouseover> mousclick< 4. Vorm-elementen (texturen & patronen).
Stap. 3 Bedenk/onderzoek welke interacties/widgets je wilt gebruiken voor je app die je gaat bouwen in Figma
Stap. 4 Oefen via tutorials de gekozen interacties eerst in een los Figma bestand
Stap. 5 Ga je schetsen uitwerken in Figma en maak er een klikbare low fidelity wireframe van ( zet je grid aan in Figma) Zie voorbeeld klik
Stap. 6 Maak ook een verzameloverzicht van de pagina’s op een A3.

DOWNLOAD HET BESTAND
HANDIG
Checklijst_festival-app

11. Voorbeelden van een wireframe

Voorbeeld Klikbare Wireframe in adobe XD

Verzameloverzicht Klikbare Wireframe in adobe XD

---

2

Dit is een klikbare Wireframe Goed