UI (User Interface) opleiding

UX Academy is een UX expertise centrum!

Maak flows en interfaces in Figma:

leer de fijne kneepjes van het vak met de meest populaire prototypetool van dit moment. Leer daarna denken vanuit design tokens en design systems en werk effectiever samen. Het eindresultaat is een interactief prachtig visueel ontwerp in Figma!

Deze intensieve opleiding is een combinatie van de Figma training en de UI training. Je mindset, het UX werkproces en vaardigheden: wat zijn jouw leerdoelen? Deze opleiding is bedoelt voor mensen die al iets van het vak weten, maar de theorie en tools missen. 

​

4 trainingsdagen, verspreid over 4 weken

Aantal deelnemers in training: 4-6 vol=vol

Doelgroep:

• Voor juniors en mediors in het digitale domein

• Front-end developers, product owners, business-analysten

• Visual designers, grafisch ontwerpers, user interface ontwerpers, beginnende UX Designers

• Online marketeers/conversie-specialisten, webredacteurs.

• Informatieanalisten, functioneel ontwerpers

PROGRAMMA

Dag 1

10.00-17.00 Figma uitleg: waar zit wat en waarom?

• Inleiding

• Kennismaking met de werkomgeving (online en desktop)

• Starten bestand, begrijpen hiërarchie (Pages, Frames, Layers)

• Samenwerken aan een eenvoudig wireframe (rapid prototype)

• Indeling a.h.v. een Layout Grid (kolommen en marges), Guides

• Invoegen van vormen (lijnen en vlakken) en beelden (maskers)

• Kleuren (vulling en lijn), pipet, verlopen, effects (Shadow, Blur)

• Vormen tekenen met het bijzondere Vector Network (path/paint)

• Gebruiken van populaire UI-elementen (iOS, Android, Windows)

(Huiswerk 2 van c.a uur)

​

Dag 2

10.00-17.00 Figma zelf gaan toepassen

• Tekst toevoegen (auto-width/height, fixen), typografie instellen

• Objecten uitlijnen en groeperen, Autolayout, Constraints, Resize

• Slimmer werken d.m.v. Styles en Assets (Components, Variants)‍

• Meer formaten makkelijker aanmaken m.b.v. Responsive Resize

• Navigaties, scrolls, overlays, hovers, transities, (micro)animaties

• Speciale features zoals Font Agent, Plugins, Thumbnails

• Integratie met andere populaire software en bestandstypen

• Anderen uitnodigen voor samenwerken, tekst en audio-chat

• Delen van Libraries, Templates, instellen/gebruiken van versies

• Voorbereiden en maken van Style Guide en/of Design System 

• Presenteren, in een browser of de mobile app, met hotspot-hints

• commentaren, feedback verzamelen, ook via andere platformen

• Exporteer frames, materialen, en design-specs voor developer

​

Dag 3

10.00-12.30 Visual Design

• Wat is visual design?

• Je rol als visual designer in een team

• Je werkwijze

• Kleurgebruik, ruimtegebruik; hoe ontwerp je user focus?

• Veelgemaakte fouten in visual design

• Gestalt Principles 

• Wetten, regels, standaarden: herhaling, contrast, uitlijning

• Kleurgebruik, witgebruik

​13.00-17.00 Visual design toepassen

• Responsive/Adaptive Design in visual design

• Populaire layout-grids/stijlen, trends, pattern Libraries

• Navigatie ontwerpen: Menubalken, buttons, en andere interactie elementen ontwerpen

• Typografie en tekstblokken

• Content vormgeven: videos, afbeeldingen, animaties

• Huisstijlgidsen vs. UX styleguides 

• Design tokens 

• Design systems

• Het stappenplan: hoe interface ontwerpen vanuit een huisstijlgids

• Oefening: ontwikkel een digitale huisstijlgids vanuit een interface ontwerp

(Huiswerk 2 van c.a uur)

​

Dag 4

10.00-12.30 Huisstijlgidsen​

• Huisstijlgidsen vs. UX styleguides 

• Design tokens 

• Design systems

• Het stappenplan: hoe interface ontwerpen vanuit een huisstijlgids

• Oefening: ontwikkel een digitale huisstijlgids vanuit een interface ontwerp

​

13.00-17.00 Aan de slag

• Oefening: maak een visueel ontwerp na in een tool naar keuze.

• Oefening: Je krijgt wireframes en die zet je om naar een mock-up

• Je visual design testen