College 3 - UX Design 2024 PDF

USER EXPERIENCE DESIGN COLLEGE 3 WIREFRAMES Een wireframe is een eenvoudige, schematische weergave van een webpagina of app-scherm, bedoeld om de structuur en lay-out van een ontwerp te laten zien zonder afleidende visuele details. HET BELANG VAN WIREFRAMES 1. Visualiseren van ideeën: Concre...

USER EXPERIENCE DESIGN COLLEGE 3 WIREFRAMES Een wireframe is een eenvoudige, schematische weergave van een webpagina of app-scherm, bedoeld om de structuur en lay-out van een ontwerp te laten zien zonder afleidende visuele details. HET BELANG VAN WIREFRAMES 1. Visualiseren van ideeën: Concreet maken van structuur, lay-out en gebruikersflow. 2. Verbeteren van samenwerking: Creëert een gedeelde taal voor teams en stakeholders. 3. Besparen van tijd en kosten: Vroege identificatie van fouten voorkomt dure herzieningen. 4. Focus op UX: Richt zich op functionaliteit zonder afleiding van visuele details. 5. Basis voor prototypes en ontwikkeling: Helpt bij het bouwen van prototypes en efficiënt ontwikkelen. BELANGRIJKE KENMERKEN Grijstinten en eenvoudige vormen (rechthoeken, cirkels, lijnen). Focust op functionaliteit en gebruikersflow. Geen kleuren, afbeeldingen, of visuele stijlen. ELEMENTEN VAN WIREFRAMES Headers en Footers: Header: Bevat logo, navigatie en zoekfunctie. Footer: Links naar contactinformatie, privacybeleid, en social media. Navigatiebalken: Helpt gebruikers makkelijk door de interface te bewegen. Kan horizontaal (bovenaan) of verticaal (zijbalk) worden geplaatst. Contentgebieden: Tekstvakken: Plaatsen voor koppen, paragrafen, en lijsten. Placeholders voor afbeeldingen: Grijze vakken of icoontjes om afbeeldingen aan te geven. Call-to-Actions (CTA's): Knoppen zoals “Nu kopen” of “Inschrijven”. BEST PRACTICES FOR WIREFRAMES 1. Houd het eenvoudig en duidelijk Gebruik eenvoudige vormen en tekst (bijv. lijnen, rechthoeken, dummytekst). Focus op functionaliteit in plaats van visuele stijl. 2. Gebruik consistentie in design Zorg voor uniformiteit in lay-out, zoals vaste posities voor knoppen en menu’s. Herhaal elementen die vaker voorkomen, zoals kopteksten of footers. 3. Focus op de gebruikersflow Begeleid de gebruiker logisch door de interface. Zorg dat belangrijke acties, zoals een CTA-knop, opvallen.. SOORTEN WIREFRAMES 1. Laagfideliteit Wireframes (Lo-fi) 2. Hoogfideliteit Wireframes (Hi-fi) Kenmerken: Kenmerken: Eenvoudig en schetsmatig. Gedetailleerd, met visueel realistische lay- Gebruik van lijnen, vakken, en dummytekst outs. zoals "Titel hier". Inclusief exacte afmetingen, lettertypen en Geen visuele details (kleur, afbeeldingen). basis interacties. Voordelen: Voordelen: Snelle iteratie en lage drempel. Geschikt voor presentaties aan stakeholders. Ideaal voor brainstormsessies. Legt een solide basis voor prototypes.  Waarom Papieren Wireframes? 1. Snelheid: PAPIEREN WIREFRAMES Je kunt binnen enkele minuten een idee schetsen. Ideaal voor brainstormsessies. Papieren wireframes zijn eenvoudige schetsen op 2. Toegankelijkheid: papier die de basisstructuur van een digitale Geen technische kennis of tools nodig; alleen interface tonen. Ze worden vaak gebruikt in de eerste papier en een pen. fase van het ontwerp om snel ideeën te visualiseren 3. Iteratie: en itereren zonder het gebruik van software. Gemakkelijk om meerdere versies te maken en ideeën te vergelijken. 4. Focus op functionaliteit: Door geen kleuren of visuele details te gebruiken, richt je je volledig op de structuur en gebruikersflow. OPDRACHT 1 Ontwerp een Portfolio Homepage Doel: Maak een wireframe voor de homepage van een persoonlijk portfolio voor een designer of ontwikkelaar. Specificaties: De pagina moet bevatten: Header: Naam/logo, navigatieknoppen (bijv. “Over mij,” “Projecten,” “Contact”). Introductiesectie: Een korte tekst over de persoon (“Hallo, ik ben [naam]”) en een foto. Projectsectie: 3 projectvoorbeelden met titels, afbeeldingen, en een knop: “Bekijk meer.” Footer: Contactinformatie en links naar sociale media. OPDRACHT 2 Maak de Wireframe in Figma Doel: Zet je papieren wireframe van de productpagina om in een digitale wireframe in Figma, zodat je een professionelere en meer verfijnde versie kunt maken. Tips: Begin met eenvoudige vormen en zorg dat de structuur klopt voordat je verder gaat met details. Gebruik placeholders (bijvoorbeeld "Lorem Ipsum" voor tekst) om tijd te besparen.  Kenmerken van Hi-fi Wireframes: 1. Gedetailleerde visuele elementen: Inclusief kleuren, lettertypen, afbeeldingen en HOOGFIDELITEIT (HI-FI) WIREFRAMES stijlen. Realistische weergave van hoe de interface eruit zal zien. Hoogfideliteit (Hi-fi) wireframes zijn gedetailleerde 2. Nauwkeurige lay-out: ontwerpen die er sterk uitzien als het uiteindelijke Elk element wordt met precieze afmetingen en product. Ze bevatten nauwkeurige lay-outs, visuele posities weergegeven. elementen, en soms zelfs interactieve componenten. Geschikt voor presentaties aan stakeholders. Hi-fi wireframes worden gebruikt om het ontwerp en 3. Interactiviteit: de gebruikerservaring (UX) realistischer weer te Vaak bevatten Hi-fi wireframes klikbare geven. knoppen en eenvoudige interacties. Wordt soms gecombineerd met een prototype. 4. Focus op gebruikerservaring en branding: Laat zien hoe het ontwerp aansluit bij de visuele identiteit van het merk. Testen van gedetailleerde interacties en esthetiek. PROTOTYPING Een prototype is een simulatie van het eindproduct dat het productteam gebruikt om te testen voordat ze middelen inzetten om het daadwerkelijke product te bouwen. Het doel van een prototype is om ideeën te testen en te valideren voordat ze met belanghebbenden worden gedeeld en uiteindelijk de definitieve ontwerpen doorgeven aan technische teams voor het ontwikkelingsproces. HET BELANG VAN PROTOTYPING 1.Testen van interactiepatronen: Laat zien hoe knoppen en menu's werken. Zorgt ervoor dat gebruikers eenvoudig door het product kunnen navigeren. 2.Feedback verzamelen: Gebruikers en stakeholders ervaren het product alsof het klaar is. Maakt het gemakkelijker om gerichte feedback te krijgen over lay-out, gebruiksgemak, en flow. 3. Iteratief verbeteren: Prototypes kunnen snel aangepast worden op basis van feedback. Dit proces helpt om een product te perfectioneren vóór ontwikkeling. OPDRACHT 3 Maak een Prototype Doel: Ontwerp en prototypeer een Projectenpagina en een Projectpagina die consistent zijn met de Portfolio Homepage. 1. Specificaties Projectenpagina: Overzicht van minimaal 6 projecten. Elk project bevat: afbeelding/icoon, titel, korte beschrijving, knop “Meer informatie.” Header en footer consistent met de Portfolio Homepage. Projectpagina: Details van één project: Grote afbeelding of video. Titel en gedetailleerde beschrijving. Knoppen: “Terug naar projecten” en “Volgend project.” VRAGEN?