12 Gratis AE Tutorials för UX Professionals
Modern webbdesign innebär många rörliga delar som innehållsdesign, ikonarbete och UX designstrategier . En nyare trend är användningen av mikrointeraktioner på webb- och mobilprojekt.
Dessa ser bra ut i det slutliga projektet men är inte så lätta att göra med en statisk mockup. Så designers har plockat upp animationsprogram som After Effects för att skapa rörelsesbaserade mockups.
Om du försöker lära dig denna färdighet rekommenderar jag starkt dessa gratis videor på YouTube. De kommer inte att lära dig allt men de kommer att täcka grunderna och ge dig en solid grund för att avancera dina färdigheter.
1. Knapp UI Animerad
Detta mycket kort UI-animering handledning är perfekt för nybörjare med lite AE-upplevelse. Det kräver lite tålamod att arbeta genom gränssnittet, men anvisningarna är kristallklara.
Du lär dig att skapa en liten animeringseffekt som kan fungera bra för webbplatser eller mobilappar.
Det här är inte något spektakulärt men i slutet kommer du att få ett mycket starkare grepp om detta koncept.
2. Prototyprörelse
En annan enkel animering du kan göra är en glidande meny som i denna video . Det lär dig hur man animerar en meny i After Effects och hur man arbetar med enskilda lager i programvaran.
Det är en ganska lång handledning med över 40 minuter steg-för-steg-vägledning. Men det är väl värt tiden om du kan se det fram till slutet.
3. AE Icon Animation
Små ikon animeringar lägger inte direkt till gränssnittet, men de kan förbättra användarupplevelsen. Dessa ikonmotioner avser de små mikrointeraktioner som nämnts tidigare.
Och denna ikon animering tut talar om mikrointeraktioner med lättlästa instruktioner. Du kan även ladda ner gratis ikoner i PSD / AI-format och använd dem för animeringen.
Men det här är också praktiskt för ikondesigners som skapar egna ikoner från början och vill animera dem för produktion.
4. Animerade UI / UX-markörer
Många designers skapar UX-animationer för att visa hur ett gränssnitt ska fungera. Detta skulle naturligtvis inkludera musklick / swipes eftersom du vill se hur innehållet rör sig över sidan.
Om du vill lägg till markörförhållanden till dina mockups så är denna handledning för dig. Det är en ganska kort guide, bara 15 minuter lång, men informationen är super värdefull och relevant för både mobil och webbdesigners.
5. iPhone App UI
Ett annat bra exempel på en användarfokuserad animering är den här följer en typisk iPhone appinmatning. Du skapar en användares sökväg genom en iPhone-app som fyller i enskilda formulärfält.
I sig kan det inte tyckas så mycket eftersom folk vet hur denna process ser ut.
Men om du utformar en webbsida eller en applikation som har ett unikt flöde, hjälper det att visa hela användarens beteende från att skriva in information för att logga in och kanske mer.
6. App Page Swipes
Mobilappdesigners kan använda sid swipes för multi-paged gränssnitt. Dessa fungerar bra för gallerier och för paginerade effekter.
I denna korta handledning Du lär dig hur du skapar sidraspirningsanimationer med After Effects med några existerande mockups. Den här videon kommer från UX in Motion där de har massor av liknande handledningar och privata verkstäder.
Ämnet UX-rörelse täcker inte mycket på webben, men dessa killar är en av de få bra som verkligen deltar i detaljerna. Kolla in hela sin YouTube-kanal om du vill lära dig mer.
7. Jelly UI Animationer
Du har antagligen sett konstiga flytande-gelémenyer i Android-appar eller ens över hela webben. Dessa är inte super vanliga eftersom de är svåra att återskapa i kod, men med denna Jelly UI handledning du kan åtminstone bygga animationerna från början.
Det är en annan freebie från UX in Motion och det uppgår bara cirka 5 minuter.
Men du lär dig mycket om After Effects och den övergripande UX-animeringsprocessen. Specifikt hur man importerar vektorer och arbetar med de här filerna över en tidslinje - egentligen bara grunderna för gränssnittsanimationsarbete.
8. Utveckling Animation
Medan jag inte kan säga att denna animering påverkar gränssnittet, är det något coolt du kan lägga till på din webbplatss logotyp. Utveckla animeringar används mestadels i videointros för att skapa en brandbar visuell.
Men webbplatser kan också ha liknande utvecklingsanimationer genom att använda SVG-grafik och grundläggande JS-animationer.
Även om du inte vill skapa logotypanimationer kan den här handledningen fortfarande styra dig genom ett enkelt AE-gränssnittets arbetsflöde. Perfekt för att lära repen utan mycket stress.
9. Grundläggande UI Prototype Animationer
Mobile app menyer finns i många olika stilar med olika animeringstekniker. Denna UI-handledning lär dig hur man animerar flybubbelsymbolmenyn.
Detta krediterades först till appen Path men har sedan dess vuxit till en gemensam trend för Android och iOS-enheter.
Under den här 20 minuters videoen hämtar du idéer för ikonanimering och menydesign. Det är ganska enkelt att arbeta med och du kan använda förkonstruerade ikoner för att arbetsflödet sparar tid.
10. 3D Layer Splits
Presentationsanimationer är värdefulla för klientarbete eller för att dela dina idéer framför ett lag. Det är där denna 3D-animering handledning kan hjälpa till.
Det lär dig hur man bryter upp olika lagerelement och skiljer dem från hela gränssnittet. Du kan även visa upp olika sidelement för att visa hur appen / webbplatsen ska fungera.
Jag kan inte föreställa mig att detta skulle vara värdefullt för personligt arbete, men det är en cool effekt att lära sig speciellt för kommersiella spelningar.
11. IOS 8-switchar
Animerade på / av-omkopplare uppträdde först i tidiga versioner av iOS och har sedan spridits till Android och allmänna webbplatser.
De bästa gränssnittsknapparna har egna animeringar och du kan bygga dina egna genom att följa denna 25-minuters handledning . Det förutsätter att du redan har switchgrafik men du kan också ladda ner en freebie PSD och använd det istället.
Dessutom kan du återanvända denna animering för vilken typ av switch du designar i framtiden. En bra handledning för någon bara komma in i After Effects för UI / UX.
12. Smidig ikon Animationer
Sista på min lista är denna detaljerade ikon rörelse tut med hjälp av några olika vektorformer. Det är en ganska detaljerad guide som stämmer över drygt 30 minuter och täcker några olika tekniker.
När du väl vet din väg runt After Effects kan du använda dessa idéer till andra ikonstilar. Det är därför denna handledning är så bra för nybörjare. det lär dig hur man arbetar i AE-gränssnittet med specifika tekniker för UI / UX-designers.
Men någon av dessa handledning kommer att förbättra dina UX-animationsförmåga, så var noga med att boka något som fångar ditt öga.
