Adobe XD-opplæring – Erfaringsdesign og prototyping.

Hjertelig velkommen til Adobe XD-storopplæringen. I denne introduksjonen presenterer jeg meg som treneren din.

Hva er forskjellen mellom brukeropplevelse (UX) og brukergrensesnitt (UI)? Hvilke typer nivådesign finnes, og hva er Adobe XD best egnet til? Svaret finner du her!

Første gang Adobe XD åpnes - og allerede er det mange muligheter å velge mellom. I denne videoen er det en liten oppvarming for Adobe XD, en oversikt over programmet samt en introduksjon til XD sin Splash-Screen og dens funksjoner.

Artboards (tegneområder) kan lett opprettes for ulike oppløsninger og enheter i Adobe XD på et blunk. Hvilke spesielle egenskaper som må tas i betraktning, vil du lære i denne opplæringen.

Forskjellige rasterninnstillinger gjør det lettere for oss å ordne elementer og objekter rent under hverandre. Til dette har vi et rektangulært rutenett og en kolonneoppdeling for kolumner tilgjengelig.

Google, Apple og Microsoft tilbyr praktiske UI-kits for å komme raskt i gang. Disse ferdige artboardsene hjelper enormt mye med å utforme prototyper for ulike plattformer senere.

Farger spiller en ekstremt viktig rolle i nesten all design – i denne videoen lærer du hvordan du kan jobbe med farger i Adobe XD, hvordan du importerer dem og hvilke nyttige kilder som finnes for å samle ferdige fargeharmonier.

Det er mange metoder for å importere eiendeler som bilder, filer, tekstdokumenter osv. i Adobe XD. I denne videoen presenterer jeg noen teknikker. Men da XD er en del av Adobe Creative Cloud, er det selvfølgelig veldig praktisk og enkelt å jobbe med biblioteker.

Temaet skrifttyper og typografi er et stort byggekloss på reisen vår gjennom Adobe XD. I denne videoen lærer du hvordan du håndterer skrifter på riktig og effektiv måte.

Former kan enten importeres veldig enkelt til Adobe XD eller også opprettes selv med verktøyet for baner. Hvis et objekt brukes mer enn to ganger, anbefales det også å legge det til som et symbol i eiendelslisten.

Design har mye å gjøre med inspirasjon og innspill utenfra. Dette inkluderer både den analoge verden og den digitale verden. Her presenterer jeg noen portaler som jeg gjerne besøker.

La oss starte med et lite, fint praksisprosjekt. I denne opplæringen og de to kommende videoene, vil vi lage en Onepager.

Gjentakelsesrutenettet er en av de viktigste funksjonene i Adobe XD. Det hjelper oss å skalere og fylle grupper av objekter individuelt som er opprettet en gang.

I den siste delen av utformingen av Onepageren tar vi oss av foten og et område for referanser. Her bruker vi praktiske SVG-filer og vi lærer å kjenne flere design-teknikker.

I denne leksjonen skal vi se på hvordan enkelte artboards kan kobles interaktivt sammen. Hvilke muligheter vi har for å velge overganger (transisjon) og hvilke andre modifikasjoner vi kan gjøre i prototypen, vil vi klarlegge her.

Hver nettside trenger et ankerpunkt for navigasjon. I denne videoen skal vi kun fokusere på opprettelsen av hovednavigasjonen i toppområdet og den interaktive forbindelsen til hverandre.

Denne treningen bygger på forrige kapittel og viser hvordan vi tilpasser den opprettede skrivebordsmenyen til en smarttelefon. Hamburger-ikonet og menyelementene blir forbedret med interessante animasjoner.

Et av de kraftigste verktøyene for best mulig visualisering er Auto-Animate-funksjonen til Adobe XD. I dette eksempelet forklarer jeg hvordan dere kan tilpasse prinsippet for Auto-Animate-funksjonen til enhver tenkelig scenario.

I de følgende videoene lærer vi å lage en prototype for en nettbutikk. Her lærer vi forskjellige måter å lage visuelt tiltalende high-fidelity prototyper fra enkle artboards. Del 1 av 4.

I den andre delen tar vi oss av detaljbeskrivelsene, legger til slider for bildene og kobler sammen artboardene.

Overlay-funksjonen for interaktiv prototyping gir oss spennende muligheter, som å kunne direkte vise og skjule informasjon.

Godt brukervennlig design gir alltid brukeren tilbakemelding om systemstatusen. Denne tilbakemeldingen vil vi legge inn i en fin animasjon ved prosjektslutt.

Adobe XD behersker også interaksjon via stemmekommando i prototypingsprosessen. Verbal kommando fører derfor til systemhandlingene vi selv kan definere. Jeg vil vise deg hvordan dette fungerer i denne opplæringen.

Ved samarbeid med andre avdelinger og involverte personer er lydkommentering en verdifull funksjon for å tydeliggjøre prosjektstatus.

Å teste en prototype i et virtuelt miljø er én ting - å vise den live på en enhet er noe helt annet. Og akkurat dette kan enkelt løses via Adobe XD enten via USB eller via Creative Cloud-tilkobling. For dette bruker vi Adobe XD-appen fra App Store.

Det er uunnværlig under samarbeidet å utveksle informasjon om prosjektstatus med andre avdelinger. Gjennom publiseringsfunksjonen kan prototypen bli frigjort, slik at kommentatorene, utviklerne og oppdragsgiveren kan få visuelle inntrykk av prosjektet. På dette tidspunktet starter redigeringsprosessen mellom fagavdelingene for å modne prosjektet.

Adobe XD endrer seg som et fremdeles veldig ungt program med hver oppdatering: I denne videoen forklarer jeg hvilke nyheter som har kommet i overgangen fra versjon 18 til versjon 19, hvordan funksjonene brukes og i hvilke situasjoner de er nyttige. Dette inkluderer: Komponenter i stedet for symboler, Responsive Resize, hjelpelinjer, polygonverktøy, flere muligheter for tekstformatering og mye mer. Ha det gøy!