Adobe XD-guide - Oplevelsesdesign og prototyping

Hjertelig velkommen til det store Adobe XD-tutorial. I denne introduktion præsenterer jeg mig selv som din træner.

Hvad er forskellen mellem brugeroplevelse (UX) og brugergrænseflade (UI)? Hvilke typer af niveaudesign findes der, og hvad er Adobe XD bedst egnet til? Svaret findes her!

Første gang Adobe XD åbnes - og straks åbner der sig mange muligheder, som man kan vælge. I denne video er der en lille opvarmning til Adobe XD, et overblik over programmet samt introduktion til XDs splash-skærm og dens funktioner.

Artboards (tegnflader) kan på et øjeblik oprettes til forskellige opløsninger og enheder i Adobe XD. Hvilke særpræg der skal tages hensyn til, vil du finde ud af i denne tutorial.

Forskellige gitterindstillinger gør det lettere for os at placere elementer og objekter rent under hinanden. Hertil har vi et rektangulært gitter og en opdeling i kolonner til rådighed.

Google, Apple og Microsoft tilbyder praktiske UI-kits til hurtig opstart. Disse færdige artboards hjælper os enormt med senere at designe prototyper til forskellige platforme.

Farver spiller en ekstremt vigtig rolle i næsten alle design - i denne video vil du lære, hvordan du kan arbejde med farver i Adobe XD, hvordan du importerer dem, og hvilke praktiske ressourcer der findes for at samle færdige farveharmonier.

Der er adskillige metoder til at importere aktiver som billeder, filer, tekstdokumenter osv. i Adobe XD. I denne video præsenterer jeg nogle metoder. Men da XD er en del af Adobes Creative Cloud, kan du naturligvis arbejde ekstremt behageligt og bekvemt med bibliotekerne.

Emnet skrifter og typografi er et stort element på vores rejse gennem Adobe XD. I denne video lærer du, hvordan du håndterer skrifter på den rigtige og effektive måde.

Former kan enten importeres meget let til Adobe XD eller oprettes selv med sti-værktøjet. Hvis et objekt bruges mere end to gange, anbefales det også at inkludere det som et symbol i aktivérlisten.

Design har meget at gøre med inspiration og input udefra. Dette omfatter både den analoge og den digitale verden. Her præsenterer jeg nogle portaler, som jeg gerne besøger.

Lad os starte med et lille, fint praksisprojekt. I denne vejledning og de to kommende videoer vil vi oprette en Onepager.

Gentagelsesgitteret er en af de mest betydningsfulde funktioner i Adobe XD. Det hjælper os med at skalere og individuelt udfylde grupper af objekter, der er oprettet én gang.

I den sidste del af oprettelsen af Onepageren tager vi os af footer og et område til referencer. Her bruger vi praktiske SVG-filer, og vi lærer at kende yderligere designteknikker.

I denne lektion vil vi undersøge, hvordan individuelle artboards kan forbindes interaktivt med hinanden. Vi vil undersøge mulighederne for valg af overgang (Transition) og andre ændringer, som vi kan foretage på prototypen.

Hvert websted har brug for et ankerpunkt til navigation. I denne video fokuserer vi udelukkende på oprettelsen af en hovednavigation i toppen og den interaktive forbindelse til hinanden.

Denne træning bygger på det forrige kapitel og viser, hvordan vi tilpasser den oprettede desktop-menu til en smartphone. Hamburger-ikonet og menu punkterne bliver forbedret med spændende animationer.

Et af de mest kraftfulde værktøjer til den bedst mulige visualisering er Auto-Animate-funktionen i Adobe XD. I dette eksempel forklarer jeg, hvordan I kan tilpasse princippet om Auto-Animate-funktionen fleksibelt til enhver tænkelig situation.

I de følgende videoer lærer vi at oprette en prototype til en onlinebutik. Her lærer vi, hvordan vi kan skabe visuelt tiltalende high-fidelity-prototyper ud fra simple artboards. Del 1 af 4.

I den anden del tager vi os af detaljebeskrivelserne, indsætter sliders til billederne og forbinder artboards med hinanden.

Overlay-funktionen til interaktiv prototyping giver os spændende muligheder, såsom at kunne skjule og vise informationer direkte.

Godt brugervenligt design giver altid brugerne feedback om systemets status. Denne feedback vil vi integrere i en flot animation ved afslutningen af projektet.

Adobe XD mestrer i sin prototypingsproces også interaktion via talekommando. Verbale kommandoer fører derfor til systemhandlinger, som vi selv kan definere. Hvordan det fungerer, viser jeg i denne vejledning.

Ved samarbejde med andre afdelinger og involverede personer er lydkommentering en værdifuld funktion til at præsentere projektstatus på en forståelig måde.

At teste en prototype i et virtuelt miljø er én ting - at præsentere den live på en slutenhed er en helt anden. Og netop dette kan nemt løses via Adobe XD enten via USB eller via tilslutning til Creative Cloud. Til dette benytter vi Adobe XD-appen fra App Store.

Under samarbejdet er det uundværligt at udveksle projektstatus med andre afdelinger. Gennem offentliggørelsesfunktionen kan prototypen frigives, så anmeldere, udviklere og bestillere kan få visuelle indtryk af projektet. På dette tidspunkt begynder redigeringscyklussen mellem fagafdelingerne også for at modne projektet.

Adobe XD udvikler sig som et stadig meget ungt program med hver opdatering: I denne video forklarer jeg, hvilke nye funktioner der er kommet med springet fra version 18 til version 19, hvordan funktionerne bruges, og i hvilke situationer de er nyttige. Dette inkluderer: Komponenter i stedet for symboler, responsiv skalering, hjælpefigurer, polygonværktøj, flere muligheder for tekstformatering og meget mere. God fornøjelse!