Photoshop og Illustrator er kraftfulde designværktøjer til blandt andet billedbehandling og vektorgrafik.
Men måske har du bemærket, at når du skal producere designs og grafik til webdesign eller andre digitale løsninger, så starter problemerne?
Det er du ikke alene om, og den største årsag til de udfordringer, du møder, er, at disse to programmer ikke specifikt er blevet udviklet til disse typer af grafisk arbejde.
Adobe XD blev først lanceret under navnet ’Adobe Experience Design’. Sidenhen er programmet blevet utroligt populært blandt digitale designere, der arbejder med webdesign, app design, interaktive løsninger og digitale prototyper.
Adobe XD er programmet, som har de værktøjer, du har brug for, når du skal visualisere dine designs, inden der bliver investeret tid og penge i at bygge kode. Og netop derfor er Adobe XD det foretrukne program på dette område fremfor Photoshop og Illustrator.
I dette blogindlæg kan du læse mere om de bedste grunde til at tage et kig på Adobe XD allerede i dag, og vi kigger nærmere på særligt to funktioner i Adobe XD – nemlig Prototype Mode og Design mode.
Klik-og-træk funktionaliteten du kender fra f.eks. Photoshop, InDesign og Illustrator er selvfølgelig også en meget vigtig del i Adobe XD.
Klik-og-træk funktionaliteten gør det utrolig nemt at visualisere f.eks. dit app- eller webdesign ved at demonstrere brugeroplevelsen, hvordan det vil se ud til forskellige skærmstørrelser, UI/UX funktionalitet og meget mere – helt uden kode.
Du kan derfor bygge visuelle og inspirerende designs, der tydeligt demonstrerer designets intentioner og interaktionsmuligheder, og som du nemt kan overlevere til en udvikler eller et teknisk team for implementering.
Hvis du allerede har grundlæggende færdigheder i f.eks. Photoshop og Illustrator, har du fået et godt forspring i prototype-delen af Adobe XD, eftersom programmet bruger alle de velkendte værktøjer fra Creative Cloud programmerne.
På et 2-dages Adobe XD kursus hos Softworld får du hands-on undervisning i, hvordan du selv kommer i gang med UI og UX prototyper.
1. Design
Du kan enten bygge dit design direkte i Adobe XD’s design-del eller nemt importere grafik og skabeloner fra Photoshop.
2. Prototype – Tilføj wireframes og interaktivitet
Når du har dine designelementer på plads, kan du begynde at skitsere, hvordan dit design skal fungere i f.eks. en app eller på en hjemmeside.
3. Preview – Test og forhåndsvis dit design
Med Adobe XD’s prototype-del kan du teste, at interaktion og design fungerer som tiltænkt.
4. Share – Del designet og/eller prototypen
Prototype-delen har indbyggede funktioner for at dele din prototype så alle, der modtager linket nemt kan se, hvordan din designløsning fungerer og kan trykke sig videre i den interaktive løsning.
For at bygge en prototype med Adobe XD bruger du programmets to hoveddele; ‘Design’ og ‘Prototype’. ’Design’-delen er der, hvor du finder funktionalitet og værktøjer, der minder meget om Photoshop og Illustrator og er der, hvor du udfører trin 1 i processen.
Når du skal i gang med trin 2-4, skifter du over til ’Prototype’-delen og det er her, hvor det begynder at blive rigtig sjovt. Derfor dykker vi i dette blogindlæg nu ned i nogle af de mest interessante funktioner i Prototype-delen.
Design-modulet har nemlig nogle unikke webdesign værktøjer, såsom ’scrolling artboards’ og ’repeat grid’, som du ikke finder i Photoshop og Illustrator. Derfor kommer et par tips til Design-delen til sidst i blogindlægget.
Lad os nu demonstrere hvorfor Adobe XD er et fantastisk prototyping værktøj til UX og UI design:
Her ser du et eksempel på klik-og-træk funktionen til at bygge wireframes til dit design
Hvis du måske tænker, at Photoshops værktøjer allerede møder dine behov som webdesigner, og hvorfor du nu skal til at lære endnu et program, så vil vi her prøve at forklare, hvad der virkelig gør Adobe XD til et seriøst værktøj i en digital designers værktøjskasse.
Prototype-delen er nemlig der, hvor Adobe XD virkelig adskiller sig fra Photoshop og Illustrator
Når du åbner Prototype mode i Adobe XD, kan du nemt starte processen med at tage dine designs hele vejen fra idéfasen til en fuldt fungerende prototype.
En af de mest interessante funktioner i Adobe XD er, at du kan tage dine Photoshop-filer (f.eks. webdesign mockups) og åbne dem direkte i Adobe XD.
Dette gør at dine .psd filer automatisk bliver konverteret til interaktive XD filer og du kan gå direkte i Prototype mode og koble dine designelementer sammen.
Skitsér dine brugeres rejse fra start til slut
I Prototype-delen tilføjer du interaktivitet til dit design, så dine brugere kan opleve dit app- eller webdesign lige præcis sådan, som det er tænkt at skulle fungere.
Du kan vælge mellem en række overgange, tilføre funktionalitet til knapper og menuer og vælge, hvilken interaktion de forskellige designelementer skal have.
Der findes også brugerfladeskabeloner og grafikelementer til f.eks. Apple og Android, som du kan importere i Adobe XD, såsom en hjem-knap, batteriindikator og meget mere. Så hvis du designer en app til iPhone, kan du bruge færdige UI elementer, og du slipper for at bygge alt fra bunden af.
Du kan altid forhåndsvise dine ændringer via en ’live’ funktion, hvor du kan se, hvordan dit design fungerer på forskellige enheder og skærmstørrelser.
Der findes masser af både gratis og betalte ressourcer, hvor du kan hente UI kits og skabeloner for at komme hurtigt i gang.
Når du er klar til at dele eller publicere din prototype f.eks. med andre i designafdelingen eller en teknisk udvikler, gøres det nemt via et par klik. Dine designspecifikationer bliver derfor gjort tilgængelige for app designere eller kunder, så de kan se, hvordan designet ser ud og fungerer.
Du har også muligheden for at optage videosekvenser af en designgennemgang i Adobe XD, som du kan dele med relevante modtagere.
I Design mode finder du mange ligheder med de øvrige Adobe-programmer. Mange af værktøjerne er de samme som i Photoshop og Illustrator, men du finder også en række nye og smarte webdesign-specifikke værktøjer, som er unikke for Adobe XD.
Der er f.eks. en række muligheder for at vælge skabeloner, du kan komme godt i gang fra start med, og du kan vælge forskellige ’UI kits’ alt efter, hvad du designer til, f.eks. en iPhone eller en Android app.
Her ser du et eksempel på brugerfladen i Design-delen i Adobe XD
Du kan også bruge basis værktøjer som billedredigering eller penne værktøjet, og du kan designe simple ikoner. For mere kompleks grafik skal du nok alligevel tage turen over i Illustrator eller Photoshop for at få det helt rigtige resultat på dine grafikelementer.
Adobe XD støtter nem kopiering og brug af grafik på tværs af de øvrige Adobe programmer. Nedenfor følger en oversigt over smarte designværktøjer, der er unikke for Adobe XD.
Repeat Grid funktionen gør det super-nemt at bygge gentagne elementer med de samme størrelser, indhold, farver og mere.
Måske kender du allerede Artboards-værktøjet fra andre Adobe programmer. Forskellen i Adobe XD er, at du her får muligheden for at bruge ”Scrolling Artboards”, hvilket vil sige, at du kan vise f.eks. en side, som er længere end en skærmstørrelseslængde. Dette er brugbart, når du bygger komplekse designs og wireframes.
Denne funktion er ekstremt nyttig, når du skal designe gentagne elementer og indhold. Du kan vælge en gruppe af elementer, og derefter vil Repeat Grid funktionen ændre de individuelle elementer til et gentagende element. Herefter får disse elementer perfekt afstand, og hvis du vil ændre størrelsen på ét af elementerne ændres også de andre – helt automatisk.
At arbejde med placering af billeder og grafik bliver derfor utrolig nemt og sikrer, at du får et stilrent designresultat.
Så hvornår skal du bruge Adobe XD fremfor Illustrator og/eller Photoshop?
Det korte svar er, at du med Adobe XD kan bygge interaktive og visuelle prototyper af dine digitale designløsninger, som du nemt kan vise frem til kunden, chefen og webudvikleren.
Forhåbentlig er du i dette blogindlæg blevet lidt klogere på, hvad du kan med Adobe XD i forhold til de mere velkendte programmer i Creative Cloud.
Adobe XD er ikke ment til at skulle erstatte Photoshop og Illustrator, eftersom programmet har nogle designmæssige begrænsninger i forhold til de nævnte programmer.
Adobe XD fungerer bedst i en kombination med programmerne, hvor du udvikler ”pixel perfect” grafik i Adobes billed og grafik programmer og herefter bygger en imponerende og interaktiv prototype, der visualiserer dit UX design, brugerrejser, interaktivitet og udtryk på forskellige skærme og platforme – helt uden brug af kode.
I denne video kan du se en lille introduktion til, hvordan Adobe XD fungerer og hvad du kan bruge programmet til:
Hos Softworld kan du deltage på UX design kurser, hvor du møder certificerede Adobe-specialister og UX designere med lang erfaring.
På et kursus hos Softworld får du hands-on viden og undervisning i de mest populære grafiske og kreative programmer, emner og fagområder.
Udforsk tidsbesparende arbejdsgange med kunstig intelligens.
Lær at skabe dine egne illustrationer, logoer, ikoner og unikke grafikker.
Lær at designe grafisk materiale og tryksager i det populære program.
Lær at opbygge hjemmesider i det brugervenlige system.
