10 redenen waarom Adobe XD perfect is om snel en gemakkelijk een webdesign te maken

Deze blog moet door iedereen gelezen worden die soms (of vaak) een webdesign moet maken. Het maakt niet uit of je ondernemer, webdesigner, grafisch ontwerper, marketeer of iets anders bent: Adobe XD verhoogt het werkgemak van iedereen die website-ontwerpen uit zijn hoge hoed moet toveren.

Ik leg je uit wat Adobe XD is en wat het absoluut niet is. En ik geef je tien redenen waarom Adobe XD perfect is om snel en gemakkelijk een webdesign te maken.

Wat is Adobe XD?

Adobe XD is een geweldig ontwerpprogramma voor mensen die zich bezig houden UI-ontwerp, UX-ontwerp, prototyping, responsive website-ontwerp en meer. Je maakt in mum van tijd een gedetailleerde schets van een website (of van een app, mocht je je daarmee bezig houden).

Eigenlijk doet het woord ‘schets’ het eindresultaat geen eer aan, want creaties in Adobe XD zien er net zo overtuigend en compleet uit als een reeds gerealiseerde website.

Deze hyperactieve jongeman demonstreert perfect wat je kan bereiken met Adobe XD:

 

Wat is Adobe XD niet?

Met Adobe XD kan je NIET een werkende website bouwen. Je kan slechts het ontwerp maken. Met dit ontwerp moet je dus nog steeds naar een programmeur stappen die het zaakje kan uitwerken tot een functionerende website.

 

Mijn 10 redenen waarom ik Adobe XD fantastisch vind

Goed, nu we hebben vastgesteld wat Adobe XD wel en niet is, kunnen we kijken naar de redenen waarom XD mijn weapon of choice is voor webdesign.

1. Adobe XD is uit te breiden met plug-ins

Adobe XD is op zich al een behoorlijk compleet programma, maar dankzij plug-ins kan je er eindeloos functionaliteiten aan toevoegen. Wil je bijvoorbeeld in je ontwerpen iconen plaatsen van (ik noem maar iets) een koffiebeker, een verkeerslicht en een bord pasta? Dan download je gewoon een plug-in die duizenden iconen bevat, waaronder die van een koffiebeker, een verkeerslicht en een bord pasta.

Of wil je plaatsvervangende teksten tonen in de tekstvakken? Dan download je een plug-in die ieder tekstvak volpropt met lorem ipsum.

Er zijn ontelbare plug-ins voor Adobe XD en stuk voor stuk maken ze je (designers)leven makkelijker. Adobe vertelt er zelf iets meer over in onderstaande video.

 

2. Adobe XD is automatisch responsive

Wikipedia omschrijft responsive webdesign als volgt:

Het ontwerp van een responsive website schaalt mee met de afmetingen van een scherm, zonder in te leveren op leesbaarheid van tekst of bruikbaarheid van de gebruikersinterface.

Niet ieder ontwerpprogramma is echter responsive, en dat maakt het moeilijk om in te schatten hoe een webdesign er op bijvoorbeeld een smartphone of tablet uit gaat zien.

Gelukkig is er Adobe XD, waar je ontwerp zich zo vlekkeloos aanpast aan afwijkende beeldschermformaten dat je niet eens bemerkt dat het gebeurt!

 

3. Adobe XD creëert kleinere bestanden dan Photoshop

Wanneer je een project opslaat in XD, resulteert dit in kleinere bestanden dan in bijvoorbeeld Photoshop, wat een ander programma is dat vaak wordt gebruikt om webdesigns in te maken. Dit heeft meerdere voordelen:

  • Het is makkelijker om een XD-bestand te versturen, bijvoorbeeld via e-mail;
  • Een XD-bestand laadt sneller wanneer je het opent;
  • Jouw XD-bestanden zullen heel wat minder kostbare gigabytes in beslag nemen op jouw computer.

 

4. Adobe XD staat het toe om ontwerpen snel online te delen

Je maakt in XD snel en eenvoudig een testversie van je ontwerp, wat je voor verschillende nuttige doelen kan gebruiken:

  • Designreview:
    • Alle feedback wordt op 1 plaats verzameld, namelijk in jouw testversie;
    • Men kan opmerkingen plaatsen op het design (zoals dat ook kan in bijvoorbeeld een PDF).
  • Gebruikerstest:
    • Je krijgt het gevoel dat je gewoon op een website bent;
    • Het is leuk om als klant op deze manier je website al te bekijken nog voordat deze gebouwd is.

Hieronder een paar woorden van Adobe zelf over deze functionaliteit.

 

5. In Adobe XD kunnen meerdere personen aan een project werken

Werk je met meerdere personen aan een ontwerp? Dankzij XD zijn de tijden voorbij waarin iedere persoon een eigen versie van het ontwerpbestand had en je achteraf moest zien wijs te worden uit al die verschillende versies.

In Adobe XD kan je simpel met meerdere mensen in één bestand werken, zelfs al bevindt de andere persoon zich 1000 kilometer verderop.

 

6. Adobe XD heeft een prototypeweergave met werkende knoppen

Ik heb dit al een beetje aangekaart bij punt 4, maar het verdient zijn eigen vermelding: in Adobe XD kan je testversies exporteren van je ontwerp die aanklikbaar zijn. Je kan dus gewoon in het websiteontwerp op knoppen klikken en op onderliggende pagina’s komen zoals dat ook in een echte website kan.

Dit is ideaal om te testen of de gebruikerservaring van de website deugt. (En laten we eerlijk zijn, het is ook gewoon erg leuk.)

 

7. Adobe XD heeft live previewfunctie voor smartphones

Wil je weten hoe jouw websiteontwerp eruit ziet op een smartphone? Sluit met een USB-kabel je smartphone aan op je pc en bekijk je creaties op je GSM-scherm dankzij de Adobe XD mobile app.

Zie je iets in je ontwerp dat niet goed werkt op je mobiele telefoon? Pas het aan op je computer en je ziet het real time veranderen op je GSM! Op de website van Adobe lees je een uitgebreide instructie hoe dit alles werkt. Onderstaande video maakt ook een en ander duidelijk.

 

8. Een ontwerp in Adobe XD is makkelijk om te zetten in een werkende site

Goed, makkelijk is misschien te veel gezegd; ‘redelijk makkelijk’ zou een betere omschrijving zijn. Hoe dan ook, het omzetten van een XD-ontwerp in een werkende site is een stuk makkelijker dan met andere programma’s:

  • Alle gebruikte XD-elementen kan je downloaden en gebruiken in de website;
  • Kleuren zijn gemakkelijk te kopiëren (wanneer je op een element klikt krijg je de Hex-code te zien);
  • Je krijgt direct een lijst met alle gebruikte lettertypes, kleuren en grafische elementen;
  • Wanneer je op een element klikt krijg je heel wat informatie te zien over het element:

– Stijlen (in het geval van tekst krijg je het lettertype, uitlijning, afstand, interlinie…);

– De afmetingen (hoogte, breedte, x-waarde, y-waarde en rotatie);

– De kleur en ondoorzichtigheid (bij vormen ook de afgeronde hoeken);

– De tekst;

– De CSS-code.

 

9. Adobe XD is gratis te gebruiken

Er bestaat een betaalde versie van Adobe XD, maar je kan een zeer compleet pakket gratis downloaden en gebruiken. Zelfs voor de mensen die twijfelen of XD iets voor hen is, bestaat er geen reden om het gewoon een keer uit te proberen.

 

10. Adobe XD is makkelijk in gebruik

Adobe XD is een bijzonder intuïtief stuk software, wat betekent dat je geen lange instructies hoeft te leren om ermee aan de slag te kunnen. Natuurlijk zal je wel een beetje leerwerk moeten doen om het programma écht goed onder de knie te krijgen, maar niets staat je in de weg om als leek te experimenteren.

Mijn collega, die copywriter is en meestal weinig voeling heeft met grafische ontwerpprogramma’s, somde de gebruiksvriendelijkheid van Adobe XD laatst kort en krachtig op:

‘Zelfs ik kan ermee werken!’