Inhoud
1. Een digitaal interactief klikbaar prototype
2. User Interface 
3. Wat is Figma (Experience Design)?
4. Waarom prototype met Figma?
6. Waarom maak je een klikbaar prototype?
7. Figma basis kennis
8. Figma Handige links.
9. Figma Tutorials.
10.De Opdracht: Figma klikbaar prototype

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. We kiezen voor Figma. 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. User Interface 

Wat is User Interface design? (UI)
De User Interface (UI) is de gebruikersomgeving van software. Het is de voorkant van een website of app. Wanneer je naar een website navigeert of een mobiele app opstart is alles wat je ziet de User interface (UI)..
Waarom is een goede UI belangrijk?
Een goede User Interface maakt deel uit van een goede User Experience. Door de UI aantrekkelijk en gebruiksvriendelijk te maken zorg je voor een betere ervaring voor jouw gebruikers.

Kijk hier voor >>> Wat is een user interface styleboard ook al weer
Kijk hier voor >>> 1 UI Trends
Kijk hier voor >>> 2 UI Trends
Kijk hier voor >>> Mobile User Interface
Kijk hier voor >>> 1 Mobile design pattern gallery
Kijk hier voor >>> 2 Mobile design pattern gallery
Kijk hier voor >>> 3 Mobile design pattern gallery

Skeuomorphism user interface

---

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 
Create prototypes
Figma Tutorials

---

8. Figma Handige links.

User interface kits kunnen handig zijn 
Ui kit figma

---

9. Figma Tutorials.

Verschillende Figma interactie tutorials
De kunst is om het juiste zoekwoord te vinden om een interactie te maken in Adobe XD. Als je eenmaal het juiste zoekwoord hebt, dan is het makkelijke om de juiste tutorial online te vinden. Hier heb je een aantal basis tutorials, die handig zijn om te gebruiken. 

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 Basis oefening

Oefening 1 frame to frame

Maar de oefening 
Tutorial frame to frame
Downloads bestand
Klik hier voor bestand

---

 Oefening 2 Creating components

Maak de oefening
Tutorial Creating components
Downloads bestand
klik hier voor bestand


Denk aan de deze interacties die heb je al geleerd
Interactie 1
Tutorial hover knop
Interactie 2
Tutorial Animatie knop
Interactie 3
Tutorial overlay

---

11. Opdracht prototype festival app

---

Voorbeeld