Je leert snel en doordacht een web- of app-interface te ontwerpen, te variëren, te delen en te testen, en daarbij je taken als ontwerper (solo of binnen een team) uit te voeren. De vorm waarin je dat doet reikt van het opzetten en aanleveren van visuele ideeën zoals wireframes, mock-ups en prototypes, tot een design-system met alle technische specificaties en materialen voor developers.

‍Als moderne UX-designer of visual designer ben je méér dan een zelfstandige ontwerper die in zijn eentje aan een fraai ontwerp werkt. Je neemt deel aan een continue wisselwerking tussen marketeers, managers, developers, testers en gebruikers. Je taken sluiten aan bij allerlei stadia van het proces, dus je tools moeten net zo flexibel inzetbaar zijn. Figma stelt je daartoe in staat. Het is een relatief nieuw programma voor het ontwerpen van schermen, interfaces en flows, voor websites en apps.

Je begint met een schetsmatige opzet van de 'flow' van een website of app. Welke belangrijke onderdelen en/of functies gaat de website of app aan de gebruikers bieden? Hoe verloopt de navigatie? In dat stadium wordt er nog weinig gepraat over de concrete vormgeving, maar ga je wireframes maken en delen. Dat helpt om alle ideeën en gedachten een grove gestalte te geven.

Gaandeweg dat proces groeit dan ook de behoefte aan een concreter visueel concept, waarbij de stijl duidelijker wordt. Je leert allerlei functionele en decoratieve elementen toe te voegen en nauwkeurig uit te voeren, zoals logo's, iconen, knoppen, menu's, achtergronden en andere beelden. Maar je gaat ook beseffen hoe herhalende elementen, stijlen, teksten, typografie en –niet te vergeten– interacties, transities en animaties een belangrijke rol spelen in het totale UI-design.

Samenwerken

Je begint in Figma dus met de schetsmatige fase van grove wireframes en eenvoudige navigaties, en gaat dan meestal verder met het uitvoeren naar een fraaie mock-up en een werkend prototype met interactie en animaties. Daarmee test je het gebruik en verfijn je het ontwerp, totdat iedereen het er over eens is wat door de developers gemaakt moet worden. Figma laat je de ontwerpen makkelijk testen, delen en bespreken met anderen.

De training laat je kennis maken met al deze fasen en aspecten. Bijna spelenderwijs rol je in dit nieuwe vakgebied en leer je de ontwerp-stadia van een website of app in wording én de dynamiek van teamwork. Want een website of app bedenk, ontwerp en maak je niet in je eentje. Omdat je nauw samenwerkt met anderen, is het snel kunnen delen, bespreken en aanpassen van je ontwerpen essentieel. Sterker nog: Figma biedt uitstekende mogelijkheden om zelfs tegelijk met anderen in een ontwerp te werken.

Uiteindelijk leer je hoe je van je ontwerp de materialen en specificaties overdraagt aan developers, zodat deze kunnen worden verwerkt tot een technisch werkende website of app.​

In de cursus komen bepaalde principes en (on)mogelijkheden van HTML, CSS, JavaScript en andere ontwikkel-technieken af en toe ter sprake, maar er wordt géén aandacht besteed aan het coderen of programmeren ervan.

Inleiding

• Kennismaking met de werkomgeving (online en desktop)
• Starten bestand, begrijpen hiërarchie (Pages, Frames, Layers)
• Samenwerken aan een eenvoudig wireframe (rapid prototype)

Vormgeving en interactie

• 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)
• 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, etc.

Presenteren, delen en samenwerken

• 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

De training is een constante afwisseling tussen wat uitleg, een voorbeeld bekijken, begrijpen en dan zelf gaan doen. Uiteraard is er altijd gelegenheid tot het stellen van vragen en andere verzoeken. En afhankelijk van de beschikbare tijd, kan er méér aandacht worden gegeven aan extra uitleg, meer voorbeelden en nog meer oefeningen.

Zowel fysiek als online te volgen.

Deze training is op veel manieren in te richten:

• in een klas met andere deelnemers (fysiek of online);
• één-op-één of in een groep met één of meer collega's;
• binnen een bedrijf of met andere ZZP-ers, of een mix;
• in een vergaderruimte op de (thuis)werkplek, of online.

Het meest voor de hand liggend is de klassikale vorm, waarbij je fysiek of online aanwezig bent, samen met andere deelnemers. Maar neem gerust contact op met mij of een van mijn partners voor meer informatie over andere mogelijkheden.

Deze training is schaalbaar van een halve dag (1 dagdeel) tot twee dagen (4 dagdelen), afhankelijk van je eigen niveau, tempo, de gewenste diepgang en mate waarin je onderwerpen wil oefenen.

Deze training kan je bij een van mijn vaste trainingpartners in Amsterdam, Utrecht, Rotterdam of Breda volgen.

De training kan ook op je eigen locatie (in een vergaderruimte, op je werkplek of bij je thuis) of elders worden georganiseerd, bijvoorbeeld in een Seats2meet-vestiging. Neem daarvoor contact met mij op.

Ervaring of affiniteit met andere grafische software is vereist.

Er is géén kennis of ervaring met coderen of programmeren vereist.

NB: de training wordt in het Nederlands gegeven, maar houd er wel rekening mee dat de software en veel jargon Engelstalig is, en naar veel Engelstalig studiemateriaal wordt verwezen.

Bij de meeste opleidingscentra staat een Mac of PC voor je klaar. Maar als je je eigen desktop of laptop gaat gebruiken of meenemen (thuis, in-company, online of fysiek), houd dan even rekening met onderstaande:

Voor deze software en training is een goede computer (desktop of laptop) nodig, liefst met een groot of extra scherm, zodat je voldoende ruimte hebt voor het overzien van alle vensters en bestanden (en eventueel de presentatie als je de training online volgt).

Voor het gebruiken van Figma is een account nodig, met eventueel een betaald abonnement. De gratis versie kent uiteraard beperkingen, maar je kan de training er absoluut voldoende mee volgen. Zorg er ook voor dat je de wachtwoorden van je systeem weet, voor het geval je eventueel speciale voorzieningen zoals plug-ins wil installeren.

Projecten uit Figma kun je direct testen op mobiele apparaten, dus houd je smartphone en/of tablet bij de hand en zorg ervoor dat je ook de wachtwoorden van je App Store(s) weet.

Je ontvangt een hand-out van de getoonde slides (voor je aantekeningen), en er wordt veelvuldig verwezen naar allerlei publicaties, diverse artikelen en blogs.

Verder worden o.a. Figma-tutorials en andere online hulpbronnen gebruikt, zodat je later veel onderwerpen online kunt nalazen en herhalen.

Na afloop van de training ontvang je een certificaat van deelname.

Wil je je (foto)beelden beter voorbereiden en/of nauwkeuriger leren werken aan (vector)illustraties, dan kan je ervoor kiezen om vooraf of nadien nog een training Adobe Photoshop en/of Illustrator te doen. Maar beide zijn niet essentieel voor het (leren) werken met Figma.

Heb je interesse in UX Design in het algemeen, dan kan je talloze andere trainingen volgen die hier prima op aansluiten, bijvoorbeeld alle trainingen die met UX of UI of digital/visual design te maken hebben. Of de UX Workshops, waarin je leert wat er aan een visueel ontwerp vooraf gaat.

Tot slot kan de training in HTML, CSS en JavaScript heel nuttig zijn, voor als je wat meer begrip wilt krijgen van web-technieken.