ny-workshop-brand-design

Hvad kan Adobe XD? Her får du en gennemgang af programmet

    Hvornår skal du bruge Adobe XD fremfor Photoshop og Illustrator?

    blog-hvornaar-skal-du-bruge-adobe-xd

    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.

    Dette er også grunden til, at Adobe lancerede Adobe XD i 2016 under navnet ’Adobe Experience Design’. Sidenhen er programmet blevet utroligt populært blandt digitale designere, der arbejder med webdesign, appdesign, interaktive løsninger og digitale prototyper.

    Adobe XD er nemlig 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.

    Den bedste funktion i Adobe XD: Prototype Mode
    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å funktionen, der virkelig får Adobe XD til at skinne, nemlig ’Prototype Mode’.

    Prototype-delen i Adobe XD


    Nem klik-og-træk funktionalitet som du allerede kender

    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.

    Hvor nemt er det at bygge prototyper i Adobe XD?
    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å Softworlds helt nye UX kursus i UI og UX prototyper med Adobe XD får du også hands-on undervisning i programmet fra en certificeret Adobe Ekspert og erfaren UX designer. 



    xdblogpostheaderjan2019ctiny


    Her er fire grundlæggende trin i en prototype proces i Adobe XD:  

    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 wifreframes 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. 

    To hoveddele: 'Design' og 'Prototype'
    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.

    Du kan nemt skifte frem og tilbage mellem ”Design” og ”Prototype”
    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 for UX og UI design.


     

    XD wiringHer ser du et eksempel på klik-og-træk funktionen til at bygge wireframes til dit design

    Prototyping mode

    Hvis du måske tænker, at Photoshops værktøjer allerede møder dine behov som webdesigner, og hvorfor skal du så nu 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.

    Omdan Photoshop mockups til interactive XD-filer
    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.

    Ui-kits-og-skabeloner

    Der findes masser af både gratis og betalte ressourcer, hvor du kan hente UI kits og skabeloner for at komme hurtigt i gang


    Nem publicering og deling af din prototype 
    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.

    Skal du i gang med UX design og Adobe XD? 

    UI og UX design med Adobe XD

    På 2-dages kurset UI og UX prototyper med Adobe XD hos Softworld får du hands-on undervisning i, hvordan du selv kommer i gang med det populære UX program Adobe XD. Læs mere om kurset på dette link: 

    UI og UX prototyper med Adobe XD >>



    Design Mode

    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.

    Design-delen i Adobe XD
    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.

    XD-GIF-scrolling-and-repeat-grid

    Repeat Grid funktionen gør det super-nemt at bygge gentagne elementer med de samme størrelser, indhold, farver og mere. 

    Scrolling Artboards 
    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.

    Repeat Grid
    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.


    Konklusion: Adobe XD er et fantastisk værktøj for prototyping

    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.


    Hvad kan du gøre i Adobe XD?
    I denne video kan du se en lille introduktion til, hvordan Adobe XD fungerer, og hvad du kan bruge programmet til: 
     

     

    Skal du i gang med UX design og har brug for at lære grundlæggende teorier og metoder indenfor dette spændende område?

    Læs mere om Softworlds kursus UX design og digitale brugeroplevelser her >>

    Er du allerede kendt med UX teori og koncepter og har brug for at lære hands-on hvordan du bedst udnytter Adobe XD? 

    Læs mere om Softworlds kursus UI og UX Prototyper med Adobe XD her >>

     

     




    authorIcon Af Laura Reininger

    Laura er digital designer og online marketing specialist og har arbejdet tæt sammen med grafiske designere og bureauer i den kreative branche. Hun er Cand.IT og uddannet indenfor international markedsføring og oplevelsesdesign. Laura har også været kommunikationsansvarlig for en række kunstgallerier og design magasiner i Danmark og i udlandet.

    Seneste blogindlæg


    Kurser og workshops
    grafiske-kurser-blog

    After Effects kursus
    På dette 3-dages kursus i Aarhus og København får du det fulde overblik over After Effects. Læs mere om kurset >>

    InDesign kursus
    Lær InDesign på 2 dage så du kan opsætte grafisk design til plakater, annoncer, foldere og meget mere. Læs mere om kurset >>

    UX design kursus
    Få en solid og praktisk forståelse for UX Design, så du kan designe gode brugeroplevelser og overbevisende design. Læs mere om kurset >>

     

    Se flere kurser