Adobe XD als design tool, ook onze cursisten zijn fan
3 november 2021
Ontwerp jij nog steeds websites in Photoshop, Illustrator of godbetert in InDesign? We snappen het best, het is je vergeven. Designers houden vaak vast aan de tools waar ze vertrouwd mee zijn. Maar een plank doormidden zagen, doe je ook niet met een boormachine.
De wereld van webdesign en development is enorm geëvolueerd in de laatste tien jaar. Volwassen geworden, zou je kunnen zeggen. Principes en werkmethodes zoals UX en UI design hebben vaste voet aan de grond gekregen en de gereedschappen om dit werk aan te pakken zijn gevolgd.
Out with the old (Photoshop), in with the new (Adobe XD)
Sketch was de eerste app die een moderne UX/UI design methodiek ondersteunde, nadien voorbijgestoken door InVision en nu Figma. Adobe is zelf niet bij de pakken blijven zitten en bracht met Adobe XD een gereedschap op de markt dat nauwlettend de noden van de UX wereld volgt en elke maand een update krijgt. Beschik je over Adobe Creative Cloud? Dan heb je Adobe XD nu dus al in je gereedschapskist zitten. Geen reden om het niet uit te proberen dus!
User Experience?
Een website ontwerpen is geen kwestie van alle informatie op de pagina zetten en mooi vormgeven. Het web is een wereld waar de gebruiker een interactie aangaat met je informatie. Of je de gebruikerservaring vormgeeft of niet, ontstaan doet ze sowieso. Dat op zich is al reden genoeg om de gebruikerservaring of User Experience vorm te geven.
Wat bedoelen we met de gebruikerservaring vormgeven?
Wel, een aantal zaken zijn bepalend voor het succes van je site/app:
1. hoe je een bezoeker ontvangt;
2. de wijze van navigatie tot gezochte informatie;
3. hoe taken uitgevoerd worden op je website/app.
Wel, een aantal zaken zijn bepalend voor het succes van je site/app:
1. hoe je een bezoeker ontvangt;
2. de wijze van navigatie tot gezochte informatie;
3. hoe taken uitgevoerd worden op je website/app.
Een mooi ontwerp is niet onbelangrijk maar secundair aan het gegeven van de gebruikerservaring.
Stel: je bezoekt een site waar je iets kan kopen. Dan is de wijze waarop je bezoeker producten vindt, ze aan je winkelwagentje toevoegt, de gebruiker zich registreert en betaalt van essentieel belang voor het succes van je webshop.
UX gereedschap?
De hierboven genoemde gereedschappen stellen je als designer in staat om deze gebruikerservaring niet louter esthetisch vorm te geven. Veel belangrijker is dat ze je toelaten om functionerende prototypes te bouwen die je kan laten testen door de eindgebruiker. Zo ontwerp je een interactief prototype en kan je deze na het testen bijschaven en optimaliseren. Gereedschappen zoals Photoshop, Illustrator of InDesign kunnen dit gewoonweg niet.
Eens je je site of app helemaal geoptimaliseerd en uitgewerkt hebt, is het tijd om dit over te dragen aan developers die op basis van dit prototype sneller en efficiënter kunnen coderen.
Dat dit een gunstig effect op de workflow heeft, is wel heel duidelijk.
Dat dit een gunstig effect op de workflow heeft, is wel heel duidelijk.
Interactief prototype van een mobiele website voor een restaurant. De klant kon zijn site meteen ervaren op zijn eigen smartphone. Dit prototype werd ook voorgelegd aan potentiële klanten om de usability te testen.
Kiezen voor Adobe XD?
De UX tools die vandaag aan de top staan bieden in wezen gelijkaardige functies en mogelijkheden wat de UX workflow betreft. Omdat de keuze van tool geen kwestie van persoonlijke smaak is, maar vaak van belang is voor een heel team van ontwerpers moet je er wel even over nadenken.
We stoten op tal van voor- en nadelen wanneer we de tools gaan vergelijken. Waarom dus voor Adobe XD kiezen?
- het is GRATIS*
- beschikbaar voor Mac en PC
- biedt ongekende integratie met de andere Adobe tools en Creative Cloud
- wordt razendsnel ontwikkeld en bijgestuurd door Adobe
- ondersteunt Real Time samenwerking voor teams
- én biedt uitstekende sharing opties voor feedback en testing
*Wie een gratis Adobe ID aanmaakt kan Adobe XD installeren. Enige beperking is het hosten van projecten in de Cloud. Je kan er slechts 1 in de Cloud plaatsen om samen aan te werken met anderen.
"Adobe XD is een geheel nieuwe ervaring en een zeer prettige. Tijdens de opleiding werden goede vergelijkingen met de andere Adobe applicaties gemaakt waardoor ik me snel thuis voelde in XD."
Design System
“A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.”
Dit zit native ingebouwd in Adobe XD. Het assets paneel laat je toe om een bibliotheek van tekststijlen, kleuren en componenten aan te leggen en te onderhouden. Aanpassingen aan deze elementen worden doorheen heel je design aangepast. Bovendien kan je andere XD projecten koppelen aan een bibliotheek waardoor je diverse projecten in verschillende files snel kan ontwerpen en er visuele aanpassingen kan op doorvoeren.
Hand-Off
Na het UX/UI design proces is het tijd om de developers aan het werk te zetten. Met een eenvoudige publish for development geef je developers toegang tot een interactief prototype in de browser waaruit ze supersnel kleuren, stijlen, afbeeldingen en zelfs CSS code kunnen kopiëren.
"We hadden XD al zelf eens uitgeprobeerd maar de opleiding gaf ons een dieper inzicht in hoe we XD in teamverband kunnen gebruiken. De grootste impact merkten we vooral in onze samenwerking met developers. We krijgen geen vragen meer over het design en development gaat denk ik 10x sneller dan voordien!"
Meer weten over Adobe XD?
Neem deel aan een van onze 2-daagse Adobe XD trainingen om het totale plaatje van Adobe XD te ontdekken. Werk je nog steeds met de klassieke design tools? Dan zal er een heel nieuwe wereld voor je opengaan.
"Michael kent zijn theorie, weet hoe het er in de praktijk aan toe gaat en kan zijn kennis goed overbrengen. Hij gaf een duidelijke uitleg over XD, die hij perfect wist te kaderen binnen een bredere webdesign context. Het was erg handig om te werken met een door ons gekozen praktijkvoorbeeld en dankzij allerlei tips & tricks kunnen we nu zelf aan de slag."
Geschreven door Michael
Talent Academy Supervisor
Sinds 2011 is Michael in dienst als Adobe Certified Instructor - Design & Lay-out Solutions, wat betekent dat hij steengoede opleidingen geeft. Daar kunnen zowel onze klanten als onze medewerkers over getuigen. Samen met HR zorgt hij ervoor dat elk personeelslid de nodige bijscholing en opleiding krijgt. Voor onze klanten stelt hij praktische klassikale of maatwerktrainingen samen waarin hij de nadruk legt op workflow en een correct én efficiënt gebruik van Adobe software.
Daarnaast staat hij in voor het onderhoud van de IT infrastructuur, draagt hij zijn steentje bij in het aanwervingsproces van nieuwe consultants en ontfermt hij zich - samen met marketing en overige trainers - over de content en huisstijl van Talent Academy.