Adobe XD-tutorial: Erfaring Design

Adobe XD-tutorial - Erfaringsdesign og prototyping

Sprog: Tysk

Adobe XD-guide - Oplevelsesdesign og prototyping

Med Adobe XD kan du gøre dine app- og websidedesigns interaktive, helt uden programmering! Omsæt dine ideer til oplevelsesbasrede prototyper, som du straks kan kommentere, dele med andre og diskutere videre. I denne fem timers Adobe XD vejledning af Stefan Riedl lærer du at bruge softwaren til erfaringstilrettelæggelse og prototyping - let og trin for trin!

Fra idé til prototype: Sådan laver du interaktive designs med Adobe XD.
Til din nemme start: Lær at arbejde med tegneflader, farver, UI-kits og Co.
Prototyping og wireframing: Så forbinder du dine artboards til en brugeroplevelse.
Praktisk anvendelse: Anvend det lærte ved hjælp af to specifikke eksempelprojekter
For et smidigt samarbejde: Sådan kommenterer og deler du dine prototyper med andre.
At arbejde med Adobe XD, leveret af Stefan Riedl på 5 effektive timer
Bonus: Alt det vigtige om nyhederne, der følger med opdateringen til Adobe XD 19.

Vis, hvordan din app og din hjemmeside skal fungere! - Lær hvordan du bruger Adobe XD med tutorialen, og dine designs bliver direkte klikbare!

detaljer

Kan bruges med:
Indhold: 5 h Video-træning
Licens: privat og kommerciel Brugsrettigheder

Kategorier

Design (Illustration, layout & tryk)

Skabt med kærlighed fra:

Stefan Riedl

Anvendelseseksempler

Åbn galleri

Lær at oprette UI-designs og koble dem til interaktive prototyper.
Åbn galleri

Eksempel: Lær, hvordan du opretter brugergrænseflader til smartphone-skærme og skrivebordsvisninger i Adobe XD.
Åbn galleri

Eksempel: Gå ind i to eksempelprojekter for at få konkrete erfaringer med Adobe XD.

Adobe XD-tutorial: Oplevelsesdesign og prototyping.

Gratis

Adobe XD-guide: 01 | Intro

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

Adobe XD-tutorial: 02 | UI & UX og forskellige niveauer af design

Adobe XD-guide: 02 | UI & UX og forskellige level-designs

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!

Adobe XD-guide: 03 | Begyndelsen, splash-skærm og tilgængelige funktioner

Adobe XD-guide: 03 | Introduktion, Splash-screen og tilgængelige funktioner

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.

Adobe XD-tutorial: 04 | Oprette tegneområder med forskellig opløsning

Adobe XD-guide: 04 | Oprette tegneflader med forskellig opløsning

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.

Adobe XD-vejledning: 05 | Gitterindstillinger for kolonner og rektangulære gitter

Adobe XD-tutorial: 05 | Gitterindstillinger for kolonner og rektangulære gitter

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.

Adobe XD-guide: 06 | Nyttige presets med UI-kits

Adobe XD-tutorial: 06 | Nyttige presets med UI-kits

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.

Adobe XD-tutorial: 07 | Behandling af farver

Adobe XD-vejledning: 07 | Håndtering af farver

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.

Adobe XD-vejledning: 08 | Import af elementer

Adobe XD-tutorial: 08 | Import af assets

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.

Adobe XD-tutorial: 09 | Skrifter og typografi

Adobe XD-vejledning: 09 | Skrifter og typografi

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.

Adobe XD-tutorial: 10 | Former og symboler.

Adobe XD-guide: 10 | Former og symboler

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.

Adobe XD-vejledning: 11 | Inspiration til designere

Adobe XD-tutorial: 11 | Inspiration til designere

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.

Adobe XD-tutorial: 12 | Opret en Onepager, del 1 - Lær teknikker

Adobe XD-tutorial: 12 | Opret onepager, del 1 - Lær teknikker

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

Adobe XD-guide: 13 | Opret en onepager, del 2 - Gentagelsesgitter

Adobe XD-tutorial: 13 | Opret en Onepager, Del 2 - Gentagelsesgitter

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.

Adobe XD-tutorial: 14 | Opret onepager, del 3 - Referencer og Footer.

Adobe XD-tutorial: 14 | Opret en onepager, del 3 - Referencer og footer

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.

Adobe XD-vejledning: 15 | Basics i prototyping og wireframing.

Adobe XD-vejledning: 15 | Grundlæggende i prototyper og wireframes

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.

Adobe XD-guide: 16 | Byg interaktivt menu til skriveborde

Adobe XD-tutorial: 16 | Opret interaktiv menu til skriveborde

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.

Adobe XD-tutorial: 17 | Opret interaktiv menu til smartphones

Adobe XD-vejledning: 17 | Interaktiv opbygning af menuen til smartphones

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.

Adobe XD-guide: 18 | Auto-animate-funktionen til interaktiv prototyping.

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.

Adobe XD-tutorial: 19 | Oprette high-fidelity-prototype, del 1 - mobil online-butik

Adobe XD-tutorial: 19 | Opret højtopløsnings-prototype, del 1 - mobil onlinebutik

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.

Adobe XD-tutorial: 20 | Opret højtopløselig prototype, del 2 - Produktdetaljer.

Adobe XD-guide: 20 | Skab hifi-prototype, del 2 - produktinformationer

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

Adobe XD-guide: 21 | Opret højtopløsnings-prototype, Del 3 – Overlay-funktion

Adobe XD-tutorial: 21 | Oprettelse af high-fidelity-prototype, Del 3 - Overlay-funktion

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

Adobe XD-tutorial: 22 | Opret højtopløselig prototype, Del 4 - Afslutningsanimation

Adobe XD-vejledning: 22 | Opret højtopløsnings-prototype, del 4 - Afslutningsanimation

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-tutorial: 23 | Talestyring

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.

Adobe XD-vejledning: 24 | Lydkommentering af forhåndsvisninger

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.

Adobe XD-tutorial: 25 | Enhedsvisning på enheder via app

Adobe XD-tutorial: 25 | Device Preview på enheder via app

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.

Adobe XD-tutorial: 26 | Offentliggør projekt med designspecifikationer.

Adobe XD-tutorial: 26 | Offentliggøre projekt med designspecifikationer

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.

Forbedringer i Adobe XD 19

Adobe XD-guide: 27 | Nye funktioner i version 19

Adobe XD-vejledning: 27 | Nye funktioner i version 19

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!

Oplysninger om indhold

Anvend Adobe XD til at få dine design forstået
Start tutorialen og bliv ledt gennem dine første interaktive Adobe XD-designs på en forståelig måde i løbet af fem timer. Din træner Stefan Riedl har brugerfladen, funktionerne og arbejdsgangen for softwaren i hovedet - og har komprimeret alt det væsentlige for dig.

Derfor er du på rette spor med denne Adobe XD-tutorial

Uanset om UX og UI er nyt for dig eller ej - henvender denne Adobe XD-tutorial sig til både begyndere og erfarne. Målene med tutorialen er klare: For det første lær Adobe XD at kende. For det andet, lær grundlæggende om Experience Design, Wireframing og Prototyping. Og for det tredje, tilegn dig viden og færdigheder til at præsentere dine design interaktivt i fremtiden:

Fremragende til overgangen til Adobe XD: Brug tutorialen til hurtigt at skifte fra et alternativt UX-program til Adobe XD.
Perfekt til begyndelsen i Adobe XD: Tag de første skridt inden for Experience Design og lav dine egne brugergrænseflader.
Bedre samarbejde i teamet: Lær hvordan du deler dine prototyper med andre ved hjælp af Adobe XD. En enorm fordel for dit samarbejde f.eks. med programmører og udviklere!
Udnyt det fulde potentiale i Creative Cloud: Ligegesom Adobe Dimension CC er Adobe XD også et ret nyt program. Prøv det og udnyt mulighederne i dit CC-abonnement!

Indhold: Brugerflade og Experience Design, Wireframing og Prototyping

Adobe XD-tutorialen starter med grundlæggende viden, fører dig gang på gang ind i den praksisnære anvendelse og giver dig kompetence til at designe dine app- og webdesigns interaktivt og selvstændigt i fremtiden.

I begyndelsen lærer du at kende Adobe XD overordnet. Se sammen med din træner på brugerfladen og lær, hvad der er vigtigt ved håndteringen af tegneflader, gitter, farver, aktiver, former og de tilgængelige UI-kits. Det er disse elementer, der danner grundlag for dine design. Praktisk: Stefan Riedl skaber i tutorialen et design af en onepager, hvor alle grundelementer præsenteres igen på en samlet måde.

Dernæst kaster du dig over Adobe XDs andet hovedtema - knytning af dine design. Ved hjælp af Wireframing angiver du, hvad der skal ske i appen eller på websitet, når brugere fx trykker på en knap. Inkluderer dynamiske animationer! Denne del er især vigtig for kunderne for at forstå hurtigt, hvordan flowet af en applikation konkret ser ud. Din træner kommer ind på både menuopsætning for smartphone-skærme og desktop-visningen og afslutter afsnittet med at skabe et højopløsningsprototypeksempel baseret på et shop-eksempel.

Til sidst udnytter du det egentlige fordel ved Adobe XD: Du visualiserer først for dig selv og derefter for andre, hvordan dit design fungerer - hvordan det interagerer med brugerne. Opret en forhåndsvisning med dine kommentarer. Eller: Del dit UX-design med projektmedarbejdere, så de direkte kan prøve og kommentere din prototype. Så når I sammen meget hurtigere i mål! Derudover kan du se og evaluere din prototype live på din smartphone eller tablet for at få en meget realistisk fornemmelse af applikationen i en naturlig miljø.