Introductie

Design Tools: Adobe XD

Introductie

• CSS heeft als design-taal alle mogelijke opties bepaald wat je op het web kan behalen van design.
• Adobe XD werd gebouwd op de huidige mogelijkheden van CSS.

Ergens logisch: Je wilt niet iets designen, die niet te bouwen valt.

Introductie

• Wanneer je de principes van HTML en CSS verstaat, kan je veel sneller designen in Adobe XD
• -- of --
• Als je Adobe XD onder de knie hebt, zal je ook een inzicht krijgen in de verschillende layout mogelijkheden van CSS

User Interface

Design Tools: Adobe XD

User Interface

Properties panel

Libraries en layers

Tip: Open "libraries"-panel

Shift + CTRL + Y

Shift + CMD + Y

Tip: Open "layers"-panel

CTRL + Y

CMD + Y

Artboards

Design Tools: Adobe XD

Artboards

• Alles wat je tekent binnen XD zal op een artboard liggen.
• Een artboard bootst een fysiek toestel na zoals een smartphone, laptop, etc
• Net zoals op een fysiek toestel zal er een deel van de website zichtbaar zijn, en de rest pas na het scrollen.

Artboards

Artboards

Tip: Creer een Artboard

In design modus, klik "A"

Shapes

Design Tools: Adobe XD

Vrij tekenen

Tip: Tekenen met een perfecte aspect ratio

Hou de Shift toets ingedrukt tijdens het tekenen

Perfecte aspect ratio

Tip: Tekenen met symmetrie

Tijdens het tekenen

ALT ingedrukt houden

"Option" ingedrukt houden

Tekenen met symmetrie

De polygon

De pen tool

Design Tools: Adobe XD

De pen tool

Iedere shape dat je kan tekenen in XD bestaat in essentie uit een aantal coördinaten dat via wiskundige formules aan elkaar gelinkt zijn.

In XD kan je deze coördinaten en hun onderlinge verbinding volledig aanpassen.

Tip: Bekijk de coördinaten v/e shape

Dubbelklik op een shape

Versleep de coördinaten

De curve tussen coördinaten

Al deze coördinaten staan met elkaar in verbinding, dit kan zowel een simpele rechte lijn zijn, maar ook een curve.

Je kan deze curve volledig zelf gaan aanpassen door met de handles te slepen

Curve aanpassen

Curve aanpassen

Je zal zien dat rondom een coördinaat dat de handle aan de tegenovergestelde kant perfect symmetrisch mee gaat.

Dit heeft als nut dat deze curves zo mooi mogelijk in elkaar overgaan.

Tip: Curve aan 1 kant van het coördinaat aanpassen

Tijdens het slepen

ALT ingedrukt houden

"Option" ingedrukt houden

Curve aanpassen aan 1 kant

Extra coördinaat toevoegen

Starten vanuit 1 coördinaat

Lagen positioneren

Design Tools: Adobe XD

Positionering

Wanneer we objecten op ons artboard willen herpositioneren hebben we onze "select"-tool nodig.

In mensentaal:

In XD heb je in principe altijd een tool geselecteerd, de "select"-tool geeft je je gewone muis-pointer in principe terug

Pointer

Tip: Switch naar de Select-tool

Druk de "V" toets in

Aligneer meerdere lagen

Tip: Meet de afstand tussen lagen

Selecteer de eerste laag

ALT ingedrukt houden

"Option" ingedrukt houden

Ga met je muis over de 2de laag

Afstand meten

Tip: Perfect horizontaal of verticaal verslepen

Versleep een laag terwijl je de "Shift"-toets ingedrukt houdt

Gecontroleerd verslepen

Tip: Laag dupliceren

Versleep een laag en houd

ALT ingedrukt

"Option" ingedrukt

Laag dupliceren

Guides gebruiken

Kleuren

Design Tools: Adobe XD

Kleuren

Kleuren

XD weet dat je kleuren gaat hergebruiken, als je dat ten minste eerst laat weten aan XD.

Later ga je hier heel veel tijd mee uitsparen.

Kleuren

Kleuren

Kleuren

Enkel kleuren die op het web mogelijk zijn, zullen ook beschikbaar zijn in XD.

Typografie

Design Tools: Adobe XD

Typografie

Je kan in XD verschillende soorten tekstvakjes maken.

Ofwel de grootte van het tekstvak valt samen met de grootte van de font.

-- of --

Meer consistenter: De grootte van het tekstvak heeft geen invloed op de grootte van het font.

Typografie

Typografie

XD weet dat je bepaalde typografische stijlen gaat hergebruiken in XD, als je dat ten minste eerst laat weten aan XD.

Later ga je hier heel veel tijd mee uitsparen.

Typografie

Typografie

Nieuwe font installeren

XD is een onderdeel van Adobe, die via je account lettertypes kan aan-of uitzetten.

Nieuwe font installeren

Groeperen

Design Tools: Adobe XD

Groeperen

Groeperen

Tip: Groepeer 2 lagen

Selecteer 2 lagen

CTRL + G

CMD + G

Tip: Ongroeperen

Selecteer de groep

Shift + CTRL + G

Shift + CMD + G

Tip: Layer binnenin een group selecteren

Dubbel klikken op een group

Nu kan je wel je layer selecteren

Control + klik

Command + klik

Tip: Layer binnenin groups selecteren

Masken

Design Tools: Adobe XD

Masken

XD laat toe om met een shape een andere laag te gaan maskeren (eng: masken)

Masken

Componenten

Design Tools: Adobe XD

Componenten

Componenten in Adobe XD zijn eigenlijk groups dat je opnieuw wilt gebruiken

Componenten

Component kan je copy / pasten, en ze zullen nadien nog altijd aan elkaar gelinkt zijn!

Componenten

Hoe gaat dit nu in zijn werk?

De eerst component zal de main component worden. 

Alle componenten die gekopieerd zijn, zullen instances worden die luisteren naar de veranderingen op de main component

Componenten

Alle aanpassingen dat je maakt op de main component, zal ook doorgevoerd worden op alle instances indien niet overschreven.

Bij instances kan je bepaalde aspecten overschrijven zonder dat deze een invloed hebben op de master component

Componenten

Componenten

Het is een good practice om main componenten niet op een artboard bij te houden maar ernaast.

Zo behoud je een overzicht waar je main componenten staan.

Componenten

Omdat componenten een essentieel onderdeel zijn van hoe je XD kan gebruiken hebben ze dit ook voorzien in de interface.

Componenten

Tip: Maak een component

Selecteer een group

Control + K

CMD + K

Componenten

Wanneer je externe UI kits download zal je vaak een hele reeks componenten aantreffen die je simpelweg kan slepen op je artboards hieruit.

Componenten

XD helpt je visueel te kunnen onderscheiden welk component de main is, en welke instance reeds overschreven is.

Interacties

Design Tools: Adobe XD

Interacties

Eerst heb je dus een group van layers gemaakt die bijvoorbeeld heel goed in elkaar zit.

Daarna heb je gezegd dat dit herbruikbare componenten mogen zijn binnen Adobe XD.

En nu gaan we daar nog een stapje verder mee!

Interacties

In CSS kunnen bepaalde elementen interactie ondersteunen door bijvoorbeeld aanklikbaar te zijn.

In XD gebeurt dit aan de hand van states!

Interacties

Enkel componenten hebben states, dus zorg er best voor dat je de states toevoegt aan de main component!

States worden gedefinieerd in 3 stappen

Interacties

1. Voeg mogelijke states toe aan een component

Interacties

2. Voorzie een ander uitzicht voor iedere state.

Interacties

3. Bepaal de verschillende interacties

Interacties

Laat je inspireren door de component States kit:

https://www.adobe.com/products/xd/features/ui-kits.html

Group padding & background

Design Tools: Adobe XD

Group padding & background

XD gebruikt een combinatie van background en padding om elementen van witruimte te voorzien.

Group padding & background

Als de group padding gebruikt

+

Als de onderste layer binnen die group een shape is die groot genoeg is

= Zal die shape als achtergrond gebruikt worden van die group

Group padding & background

Tip: Pas de padding visueel aan

Selecteer de group of een layer in die group

Hou de letter "S" (van spacing) ingedrukt terwijl je met je muis de padding visueel versleept.

Group padding & background

Wanneer je de background wilt aanpassen van een group, moet je dit doen op de shape die als achtergrond gebruikt wordt binnen die group

Gebruik niet de fill op de group-layer

Group padding & background

Group border

Wanneer je een border wilt toevoegen aan een group, moet je dit doen op de shape die als achtergrond gebruikt wordt binnen die group.

Gebruik niet de border op de group-layer, want dan geef je ieder element binnen die group een border.

Group border

Stacken in een group

Design Tools: Adobe XD

Stacken in een group

Stacken in een group

In CSS plaats je "display: flex;" op de parent van de elementen dat je naast elkaar wilt plaatsen.

In Adobe XD gebeurt dit ook op de parent (lees: group) en noemt dit "stacking".

Stacken in een group

Stacken in een group

Een eerste voordeel van het gebruik van stacking is dat de layers binnen je group meteen uitgelijnd zijn.

Stacken in een group

Een 2de voordeel is dat je veel sneller elementen van volgorde kan veranderen.

Stacken in een group

Er staat ook geen limiet op hoeveel elementen je wilt stacken (stapelen).

Stacken in een group

Een laatste voordeel is ook dat layers kunnen groeien in hoogte of breedte.

Tip: Pas een margin of padding aan

S + slepen over de witruimte

Bibliotheken

Design Tools: Adobe XD

Bibliotheken

Hoe werken bibliotheken nu eigenlijk in Adobe XD?

Favoriete-website design systeem.xd

Libraries

• Kleuren
• Typografie
• Componenten

Bibliotheken

Hoe werken bibliotheken nu eigenlijk in Adobe XD?

Favoriete-website design systeem.xd

Libraries

• Kleuren
• Typografie
• Componenten

Bibliotheken

Lagen positioneren (extra)

Design Tools: Adobe XD

Lagen positioneren (extra)

In XD kan je er voor kiezen om grids of columns te gebruiken als helper-tools. Dit zijn gekende manieren om sneller te kunnen werken.

Let wel op: Columns zijn slechts een tool, en geen heilige graal in je design.

Lagen positioneren (extra)

Repeat Grid

Design Tools: Adobe XD

Repeat grid

Repeat grid

Scrolling & positioning

Design Tools: Adobe XD

Scrolling & positioning

• Een artboard stelt de ruimte voor dat een website of applicatie zal krijgen op een fysiek toestel
• Net zoals op een fysiek toestel zal je ook kunnen scrollen
• Op een fysiek toestel noemt de zichtbare ruimte de "viewport"

Scrolling & positioning

Scrolling & positioning

Net zoals op het web kan je er ook voor zorgen dat sommige elementen fixed staan in de viewport

Scrolling & positioning

Scrolling & positioning

Je kan ook scroll-bare groups maken binnenin een artboard, zonder dat deze de algemene scroll beïnvloed.

Scrolling & positioning

Interactions & triggers

Design Tools: Adobe XD

Interactions & triggers

In het web kan je zowel klikken op een link om

• naar een andere pagina te gaan
• maar ook om binnen de pagina te scrollen (Anchor-links)

Interactions and triggers

Interactions and triggers

Overlay transitions

Design Tools: Adobe XD

Overlay transitions

• Bij interactions, kan je niet enkel naar een andere artboard navigeren
• Je kan er ook voor kiezen om een ander artboard met transparantie "over" een artboard leggen.
• Zo kan je een overlay menu prototypen bijvoorbeeld

Overlay transitions

Overlay transitions

Vervolgens kan je het transparante artboard met het menu linken vanuit een menu-toggle component!

Overlay transitions

Overlay transitions

Auto-animate

Design Tools: Adobe XD

Auto-animate

Met auto-animate kan je lagen met dezelfde layer-naam automatisch laten animeren

Tip: Wanneer je een artboard dupliceert, dan zullen alle lagen de exact zelfde naam behouden!

Auto-animate

Auto-animate

Auto-animate

Drag gestures

Design Tools: Adobe XD

Drag-gestures

Drag gestures kunnen leuk zijn, en kunnen gebruikt worden voor een soort van carousel die op de achtergrond met auto-animate werkt

Drag-gestures

Plugins/addons

Design Tools: Adobe XD

Plugins/addons

XD is uitbreidbaar gemaakt. Zo kan de community zelf XD uitbreiden door zelf plugins te bouwen.

Plugins/addons

Plugins/addons

• Icons4Design: Snel icoontjes vinden
• UIFaces: Snel profielfoto's vinden
• Tool kit
  • Gratis foto's vinden van op "UnSplash it"
  • Snel Lorem ipsum tekst genereren en invullen

Co-editing

Design Tools: Adobe XD

Co-editing

Co-editing

1)

Co-editing

2)

Co-editing

Enkele zaken die kunnen foutlopen:

• Dit werkt enkel met bestanden in de cloud.
• Inviteer de juiste accounts (soms lang, soms korte mail-adressen)
• Gebruik de laatste versie van Adobe XD