Les 6: Wireframes

Voorbereiding

  • 👩🏻‍💻 📖 Lees en bekijk de video's uit het hoofdstuk Wireframing uit de reader.
  • 👩🏻‍💻 📖 Neem de opdracht voor het beroepsproduct door.

Lesprogramma

Doelen

Je leert:

  • Een User eXperience (UX)-ontwerp maken van een website, in toenemende mate van detail, met behulp van wireframes.
  • Hoe UX een samenspel is van grafisch ontwerp, interactieontwerp en ontwerpen voor gebruikersvriendelijkheid.
  • De vereisten aan een website (zowel functioneel als kwalitatief) vertalen naar UX-ontwerp.

Wireframes

Doel: bekend raken met wireframes en het uitwerken van de casus.

Materialen: potlood/pen, papier, liniaal, schaar, lijm.

👩🏻‍🏫 Klassikaal ontwerp maken voor de homepage (~20 min.)

De casus staat uitgelegd in het beroepsproduct. De docent legt deze kort uit aan de hand van een aantal voorbeelden. Om te starten beginnen we met samen kijken naar de user story KL-01 (zie casus).

Aan de hand van deze user story kunnen we bepalen hoe dit uitgewerkt kan worden met bijvoorbeeld een homepage.

  • Wat voor elementen heeft een homepage nodig?
  • Waar moet je naartoe kunnen navigeren?
  • Welke typen acties wil je kunnen uitvoeren?

👷🏼 Opdracht 1: Van specificatie naar lo-fi (~60 min.)

Na het maken van de homepage, neem je de andere user stories door. Let erop dat niet elke user story gelijk staat aan een nieuwe pagina. Werk dan de casus uit naar een low-fidelity ofwel een lo-fi wireframe om de structuur en flow te bepalen van de website.

Denk dan aan verschillende scenario’s, bijvoorbeeld:

  • Gebruiker moet zich kunnen aanmelden
  • Gebruiker is wachtwoord vergeten
  • Ingelogde gebruiker kan overzicht zien met films

👷🏼 Opdracht 2: Test de lo-fi-ontwerpen van medestudent (~20 min.)

Werk de lo-fi-ontwerpen uit als ‘paper prototype’ voor een desktop device, zodat een andere student het kan testen.

Voordat je de wireframes laat testen, bereid je een aantal dingen voor:

  1. Maak een lijst van taken die de gebruiker mag uitvoeren.
  2. Zorg er voor dat de papiertjes klaar liggen, zodat je ze kan vervangen of veranderen.
  3. Geef geen tips over waar knoppen zitten.
  4. Maak notities.
  • Voldoen de ontwerpen aan de specificatie?
  • Waar missen er nog onderdelen?
  • Welke onderdelen vind je onduidelijk?

👷🏼 Opdracht 3: Implementeren van 1e wireframe (~30 min.)

Na alles getest te hebben is het nu tijd voor de code.

Om te beginnen met je beroepsproduct open je de nieuwe Github Classroom opdracht die wordt verstrekt door je docent.

Zorg er voor dat je Projectstructuur klopt.

Voordat je nu je wireframe in HTML gaat overnemen markeer de relevante onderdelen in de wireframe. Welk stuk wordt de main, nav of header bijvoorbeeld.