Adobe XD-tutorial - Erfarenhetsdesign och prototypning.

Välkommen till den stora Adobe XD-handledningen. I denna introduktion presenterar jag mig som din tränare.

Vad är skillnaden mellan användarupplevelse (UX) och användargränssnitt (UI)? Vilka typer av nivådesign finns det och vad är Adobe XD bäst lämpad för? Svaret finns här!

Första gången Adobe XD öppnades - och redan finns det många möjligheter att välja mellan. I den här videon finns det en liten uppvärmning för Adobe XD, en översikt över programmet samt en introduktion till XD: s Splash-skärm och dess funktioner.

Artboards (Ritningsytorna) kan skapas på ett ögonblick i Adobe XD för olika upplösningar och enheter. Vilka särdrag som måste beaktas upptäcker du i denna handledning.

Olika rasterinställningar underlättar den rena placeringen av element och objekt med varandra. Här för har vi en rektangulär grid och en kolumnuppdelning för kolumner till vårt förfogande.

Google, Apple och Microsoft tillhandahåller praktiska UI-kit för en snabb start. Dessa färdiga artboards hjälper oss enormt när vi sedan utformar prototyper för olika plattformar.

Färger spelar en extremt viktig roll i nästan alla designer - i den här videon lär du dig hur du kan arbeta med färger i Adobe XD, hur du importerar dem och vilka praktiska källor det är för att samla färdiga färgpaletter.

Det finns många metoder för att importera tillgångar som bilder, filer, textdokument etc. i Adobe XD. I den här videon presenterar jag några metoder. Men eftersom XD är en del av Adobes Creative Cloud, är det naturligtvis mycket bekvämt att arbeta med biblioteken.

Ämnet skrivstilar och typografi är en stor del av vår resa genom Adobe XD. I den här videon lär du dig hur du hanterar skrivstilar på rätt sätt och effektivt.

Former kan antingen importeras mycket enkelt till Adobe XD eller skapas själva med hjälp av sökvägsverktyget. Om ett objekt används mer än två gånger, är det också rekommenderat att lägga till det som en symbol i tillgångslistan.

Designen har mycket att göra med inspiration och input utifrån. Detta inkluderar den analoga miljön såväl som den digitala världen. Här presenterar jag några portaler som jag gärna besöker.

Låt oss börja med ett litet, fint praktikprojekt. I denna handledning och de kommande två videorna skapar vi en Onepager.

Rutnät för upprepning är en av de mest betydelsefulla funktionerna i Adobe XD. Det hjälper oss att skala och fylla grupper av objekt som skapats en gång på ett individuellt sätt.

I den sista delen av utformningen av Onepagers tar vi hand om footern och en sektion för referenser. Här använder vi praktiska SVG-filer och vi lär oss ytterligare design-tekniker.

I den här lektionen kommer vi att undersöka hur individuella artboards kan kopplas samman interaktivt. Vilka alternativ för övergången (Transition) och vilka ytterligare modifieringar vi kan göra på prototypen, ska vi klargöra här.

En varje webbplats behöver en ankarepunkt för navigering. I den här videon kommer vi endast att fokusera på skapandet av en huvudnavigering i huvudområdet och den interaktiva kopplingen till varandra.

Den här träningen bygger på det föregående kapitlet och visar hur vi anpassar den skapade skrivbordsmenyn för en smartphone. Hamburger-ikonen och menypunkterna förbättras med intressanta animationer.

Ett av de kraftfullaste verktygen för optimal visualisering är autoanimatfunktionen i Adobe XD. I det här exemplet förklarar jag hur du kan anpassa principen för autoanimatefunktionen för vilket scenario som helst.

I de följande videorna lär vi oss att skapa en prototyp för en onlinebutik. Här lär vi oss hur man skapar visuellt tilltalande high-fidelity-prototyper från enkla artboards. Del 1 av 4.

I den andra delen tar vi hand om presentationen av detaljbeskrivningarna, lägger in bilder i en skjutreglage och länkar ihop artboardsen med varandra.

Overlay-funktionen för interaktiv prototypning ger oss spännande möjligheter, som att information kan visas och döljas direkt.

Braun design ger alltid användaren feedback om systemets status. Denna feedback kommer vi att integrera i en fin animation när projektet är klart.

Adobe XD har även stöd för interaktion via röstkommando i sin prototyp-process. Verbala kommandon leder till systemåtgärder som vi själva kan definiera. Hur det fungerar visar jag i den här handledningen.

Vid samarbete med andra avdelningar och involverade personer är ljudkommentering en värdefull funktion för att tydligt presentera projektstatus.

Att testa en prototyp i en virtuell miljö är en sak - att sedan visa den live på en slutanordning är något helt annat. Och precis det kan enkelt åtgärdas med Adobe XD antingen via USB eller genom anslutning till Creative Cloud. För detta använder vi Adobe XD-appen från App Store.

Under samarbetet är det avgörande att utbyta information om projektets status med andra avdelningar. Genom att använda publiceringsfunktionen kan prototypen frigöras så att granskare, utvecklare och beställaren kan få visuella intryck av projektet. Vid denna punkt påbörjas and bearbetningscykeln mellan specialavdelningarna för att mogna projektet.

Adobe XD förändras som ett fortfarande mycket ungt program med varje uppdatering alltmer: I den här videon förklarar jag vilka nyheter som har uppstått vid språnget från version 18 till version 19, hur funktionerna används och i vilka situationer de är användbara. Hit hör: Komponenter istället för symboler, Responsiv storleksändring, Riktlinjer, Polygonverktyg, fler möjligheter för textformatering och mycket mer. Ha så kul!