XD-wireframe/flowchart

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

P4 Interactief

XD

Wireframe

Flowchart

Klassikaal uitleg over wireframe / flowchart / website elementen

Praktische opdracht:

4.01 & 4.02

> Extra theorie en praktische opdracht via teams 

Epub deadline vandaag

• Maschary
• Soufian
• Mike
• Kay-Anne
• Khunaz
• Nehir
• Muhammed
• Aanis (ID bestand inleveren)

Soorten websites en extensies

Onderdelen van website leren

Wireframe en flowchart

Web Design

Website Ontwerpen

Laat de leerlingen nadenken over deze vraag en proberen tot een antwoord te komen a.d.h.v dit plaatje.

Functioneel ontwerp is een ontwerp met jouw ideeën en afspraken met jouw opdrachtgever over de te ontwerpen website. Belangrijk is wel dat je alles vraag aan je opdrachtgever. Van lettertype tot kleur gebruik

Web design

In web- en applicatiedesign gebruiken we wireframes om een klant te laten zien:

1. Welke layout de site zal hebben;
2. Hoe je door een deze website of applicatie gaat navigeren;
   
3. Wat de knoppen en links op een website doen.
   

Website lay-out

Een website bestaan uit verschillende elementen:

• Header
• Footer
• Body
• Navigatie: menubalk of
  hamburgermenu

Daarnaast zijn er interactieve elementen:

• Slideshow / video / muziek
• Hyperlink
• Call to action

Opdracht 1 (4.04)

Website-elementen aangeven.

Ik heb een printscreen gemaakt van Steam.
Omcirkel op de print de website elementen aan.

Schrijf erbij om welk element het gaat. 

• Header / footer
• Navigatie / dropdown
• Body
• Slideshow / video / afbeeldingen
• Call to action 
• Hyperlink

opdracht: Wat hoort waar?

Logo

Subpagina's

Een afbeelding

Stukje tekst 

Titel

Hoe maak je een website?

                    Flowchart                                                    Wireframe

Wat is een Wireframe?

Een wireframe is simpelweg een schets die de basisstructuur van een webpagina. Het doel is om de rest van het ontwerpproces te begeleiden.

Zoals het ontwerp van een huis start met een bouwtekening, begint het ontwerp van een website met een wireframe.

Per pagina teken je een wireframe.

Nóg een goed voorbeeld, maar mist goede info over navigatie en pagina-namen

• Wat is belangrijk?
  Staat dat duidelijk in beeld?

• Gebruik herkenbare patronen

• Ontwerp alleen voor wat je nodig hebt

Wireframe

low fidelity wireframe

• Potlood en papier
• In paar minuten gemaakt
  
• Makkelijk aan te passen
• Bij wijze van spreken "op de achterkant van een servetje"

medium fidelity wireframe

• Ziet er netter uit
• Minder makkelijk aan te passen.
• Kan digitaal zijn, liefst nog met potlood.
  

High fidelity wireframe

• Ziet er professioneel uit.
• Moeilijker aan te passen.
• Afspraken over design moeten vooraf heel duidelijk zijn.

Navigeren

In een wireframe is het belangrijk dat het navigeren van de site erin staat. 

• Waar gaan de links naar toe;
• Wat doen de buttons; Geef deze ook een kleur
• Zijn er andere interactieve dingen op de site; Laat dit duidelijk zien
• Noteer de namen van je pagina's.
  

Goed voorbeeld van low fid. wireframe

Regels voor een goed wireframe

• Werk op papier;
• Alleen de belangrijkste knoppen, links en invulvelden;
• Alleen de belangrijkste woorden/titels, maar geen teksten;
• Afbeelding als vakje met een kruisje er in / video's met playbutton;
• Geef je pagina's een naam, en laat zien hoe je navigeert met een lichte andere kleur.
  

Hoe zou deze wireframe verbeterd kunnen worden?

Wireframe Tip!

Als je langer dan 20 minuten bezig bent met 1 wireframe, dan ben je waarschijnlijk te precies of gedetailleerd bezig!!!

Het moet wel netjes / recht getekend zijn!

Opdracht 2 (4.05)

Wireframe maken 

Je gebruikt hiervoor ook Steam als basis. 

Teken op een A4/A3. 

• Denk aan de juiste elementen,
• Tekst = streepjes / afbeelding = vierkant met kruis. 
• Denk aan titels / belangrijke tekst

• Werk met potlood
  
• Werk met netjes of met lineaal
• Geef knoppen / interactiviteit aan met een andere kleur.

Flowchart

Een flowchart is een overzicht van alle pagina's die op een website komen en hoe je erdoor heen navigeert. 

Er zit hiërarchie in. Begin met de homepage en voeg de 1e lijns-pagina's toe. Verbind deze met pijlen om de navigatie tussen de pagina's te tonen. Voeg vervolgens subpagina's toe onder de relevante pagina's. 

Schrijf bij de pagina's wat het is en je kan ook minimaal aangeven wat er opkomt. 

Opdracht 2 (4.07)

Flowchart maken

Je gebruikt hiervoor ook Steam als basis. Teken op een A4/A3.

• denk aan de juiste elementen,
  
• denk aan de hiërarchie
• schrijf bij de pagina's wat het is en je kan ook minimaal aangeven wat er opkomt. 

• werk met potlood
• werk met lineaal
• geef "terugkeer"'-pijlen of "doorklik"-pijlen aan met een andere lichtere kleur