Inhoud
1. Een digitaal interactief klikbaar prototype
2. Andere interactieve prototype experience design tools
3. Wat is Figma (Experience Design)?
4. Waarom prototype met Figma?
5. Waarom maak je een klikbaar prototype?
6. Hoe werkt Figma?
7. Figma basis kennis
8. Figma Handige links.
9. Figma interactie tutorials zoek woorden.
10. Oefening 1 frame to frame
11. Oefening 2 Creating components
13. Opdracht Figma klikbaar prototype Pizza
Richard Slakhorst
1. Een digitaal interactief klikbaar prototype
Een digitaal interactief klikbaar prototype te maken. Daarvoor gaan we gebruik maken van een digitale experience design (XD ) tool
Figma bied je een end-to-end-tool om ervaringsontwerpen op schaal te creëren en stroomlijnt de samenwerking met klanten (doelgroep en opdrachtgever) in de ontwerpfase.
Je evalueert je ontwerp door middel van testen, samen met je doelgroep, totdat je ontwerp succesvol is bij de doelgroep.
2. Andere interactieve prototype experience design tools
• Abobe XD Deze gebruiken we niet meer op school
• Axure
• Sketsch
• Figma (Deze gebruiken we op school)
3. Wat is Figma (Experience Design)?
Met Figma kun je snel prototypes ontwerpen van websites en webapplicaties. Met Figma kan je interaction en navigatie design en de user interface (UI) ontwerpen, door een prototype te maken met alle mogelijke grafische onderdelen. Het is makkelijk om een user interface (UI) te importeren uit Photoshop, Sketch, Illustrator en zelfs Adobe after effects.
Het programma stelt je eenvoudig in staat om snel digitale interactieve producties te ontwerpen, waarbij je direct interactiviteit en de user experience kunt testen op een smartphone of tablet. Daarnaast biedt Figma met dit programma de mogelijkheid om online te publiceren, zodat je de productie kunt delen en laten testen door wie je maar wilt.Zo kan de productie daardoor sneller en efficiënter gerealiseerd worden.
Workflow >>
4. Waarom prototype met Figma?
Het resultaat van je werk kan je op elk moment live testen, met je doelgroep op je computerscherm of een mobiel toestel (Download de Figma app). Ten slotte kan je in de module SHARE de ontwerpen op verschillende manieren delen met je opdrachtgevers en docenten en zo live feedback ontvangen, verbeteringen aanbrengen, een project laten valideren en het dan uiteindelijk doorsturen naar ontwikkelaars en je docent.
A. Innovatieve ideeën maken
Je maakt een innovatief idee waardoor je ideeën tot leven komen zoals User experience of gebruikerservaring met maar één doel: de bezoeker van je website-app de beste beleving laten ervaren op je website of app, en déze doelgroep specifiek.
B. Interaction en navigatie design ontwerp
Je kunt je interaction en navigatie ontwerpen en testen.
C. Overtuig anderen
Met een prototype heb je een tastbaar, werkend product. Hiermee overtuig je anderen veel sterker dan met een idee. Met enkel een powerpoint kom je er niet meer.
D. Verklein de risico’s
Verklein de risico’s van fouten in de productontwikkeling: krijg sneller feedback over mogelijke fouten en verkeerde aannames.
E. De gebruikerservaring testen
Een doordacht UXD-design zal je een knappe Return On Investment (ROI) opleveren.
5. Waarom maak je een klikbaar prototype?
Waarom is klikbaar prototyping zo belangrijk in het ontwerpproces? Jouw ontworpen interface, website of app kan nog zo mooi zijn en zelfs bovenaan in Google staan: dat maakt je website nog niet automatisch een succes. Stel je voor: duizenden bezoekers van wie er niet één in actie komt door te bellen, mailen of bestellen.
Dit kan je voorkomen door je website eerst te ontwikkelen als een paper prototype.
Je test op een snelle manier
– De Usability en gebruikerservaring van gebruikers van jou ontwerp.
– Interaction design ideeën
– Navigation design ideeën
– Interface design ideeën
• Je kan snel direct verbeteringen aanbrengen zonder tijd en geld te verspillen.
• Je leert wat echt belangrijk is voor de gebruiker/ klanten.
• Klanten en opdrachtgevers worden heel laagdrempelig betrokken (Co-create).
• Werk samen met andere designers tegelijkertijd in hetzelfde bestand. Perfect voor designs
teams op afstand.
• Het is snel, effectief en goedkoop.
• Het is extreem praktisch en voegt direct waarde toe.
De gebruikerservaring testen
De gebruikerservaring zorgt ervoor dat je conversies verhogen. Een doordacht UXD-design zal je een knappe Return On Investment (ROI) opleveren. Onthoud dat een ervaring steeds verandert. Mensen bevinden zich in een andere fase van het aankoopproces of zijn gewoon op zoek naar iets helemaal anders. Ook de trends veranderen soms zodanig dat we een heuse ommekeer moeten realiseren. Al deze zaken hebben invloed op je User Experience Design. Blijf niet stilstaan en evolueer samen met je doelgroep en klanten mee. Zorg in iedergeval dat je bezoekers een positief gevoel en ervaring overhouden aan hun website-app bezoek. Vaak resulteert dit in terugkerende bezoekers en uiteindelijk… in een klant die vaak en graag terug komt naar jouw website-app en dat kun je uit testen met een prototype met Figma.
Je kunt op elk onderdeel van het schema “Fundamentals User Experience Design” een klikbare prototype-test maken, daar waar het geïntrigeerd kan in relatie met alle onderdelen van het schema. Dit heeft de voorkeur, maar je kunt ook altijd losse onderdelen testen.
6. Hoe werkt Figma?
Je weet meer dan je denkt. Als je al een beetje kennis hebt van de andere programma’s, is het vrij gemakkelijk om met dit programma overweg te kunnen. Het plaatsen van teksten werkt bijvoorbeeld hetzelfde als bij Photoshop en Illustrator, maar ook zonder enige kennis kun je aan de slag. Figma is simpel vormgegeven en dus overzichtelijk, in tegenstelling tot de andere Adobe-programma’s.
De meeste interactie kun je maken met deze onderdelen:
– Components
– interactions triggers
– animation
7. Figma basiskennis
Figma basiskennis
Je kunt ook onderdelen terug zoeken, loop hier even door heen.
Aan de slag met Figma stap voor stap leren. Alles wat je moet weten om te kunnen werken met Figma
8.Figma Handige links.
User interface kits kunnen handig zijn
Ui kit figma
9. Figma interacties tutorials zoekwoorden.
Verschillende Figma interactie tutorials zoek woorden
De kunst is om het juiste zoekwoord te vinden om een interactie te maken in Figma Als je eenmaal het juiste zoekwoord hebt, dan is het makkelijke om de juiste tutorial online te vinden. Hier heb je een aantal basis zoek namen om tutorials, te vinden
Hamburger menu Figma
Dropdown menu figma
Button hover state figma
Pop up/overlay figma
Search bar
Tab bar figma
Anchor Links figma
keyboard overlay figma
10 Oefening 1 frame to frame
Maar de oefening
Tutorial frame to frame
Downloads bestand
Klik hier voor bestand
11 Oefening 2 Creating components
Maak de oefening
Tutorial Creating components
Downloads bestand
klik hier voor bestand
13. Opdracht Figma klikbaar prototype Pizza
13 Opdracht Figma prototype pizza app
Figma klikbaar prototype Pizza app
Na dat je oefening 1 (frame to frame) en oefening 2 (Creating components ) hebt gedaan
Ga je een klikbaar interactief prototype maken met minimaal 4 interacties met het softwareprogramma Figma
Maak van de schets Wireframe pizza die je kunt vinden bij de bestanden een prototype in Figma. Bestudeer eerste de schets Wireframe Pizza en ga die met echte meegeleverde plaatjes de prototype maken in Figma.
Gebruik deze 3 interacties minimaal in je Prototype en + 1 eigen gekozen interactie dus in totaal 4 interactie in je pizza app
Tip:! 1> Hoe voeg ik een plaatje toe in Figma? Klik hier voor Tutorial
Tip:! 2> Hoe maak een frame voor iPhone 16 pro ? Klik hier voor Tutorial
Interactie 1
Tutorial hover knop
Interactie 2
Tutorial Animatie knop
Interactie 3
Tutorial overlay
Interactie 4
Zelf kiezen (zoek online) zie Kopje >>> 9. Figma interacties tutorials zoekwoorden
De werk bestanden
Download workflow pizza bestellen bestanden
Voorbeeld pizza app klik hier
! Let op ! Beoordelingscriteria
Beoordelingscriteria
1. Je koppelt alle wireframes die zijn geschetst aan elkaar, met de meegelverde content zodat je heen en terug kunt klikken met knoppen vanuit de pagina’s of vanuit het menu.
2. Minimaal 4 interacties exclusief Linking artboard die is standaard
3. Het ontwerp is voor Mobiel: rechtop formaat iPhone 16 Pro 402 x 874> of langer
let op! User experience design een fijne gebruikerservaring voor de gebruikers
INLEVERWIJZE
1. Je levert een sharing linkje van je bestand ( klik hier voor tutorial).
2. Je levert orginele bestand in Via safe as local document
3. Je maakt een xd filmpje van het klikbare prototype met alle interacties.
RESULTAAT
Een goed werkend klikbaar prototype in een Adobe XD-bestand en een filmpje.
Wireframe schets.
