12 gratis AE-zelfstudies voor UX-professionals
Bij modern webontwerp zijn veel bewegende delen betrokken, zoals contentontwerp, pictogramwerk en UX-ontwerpstrategieën . Een nieuwere trend is het gebruik van micro-interacties op web- en mobiele projecten.
Deze zien er geweldig uit in het uiteindelijke project, maar zijn niet zo eenvoudig om te maken met een statische mockup. Dus ontwerpers hebben animatieprogramma's zoals After Effects opgehaald om op beweging gebaseerde mockups te maken.
Als je deze vaardigheden wilt leren kennen, raad ik deze gratis video's op YouTube aan. Ze zullen je niet alles leren, maar ze zullen de basisbeginselen behandelen en je een solide basis geven om je vaardigheden te verbeteren.
1. Knop UI-animatie
Dit zeer korte gebruikersinterface-animatie tutorial is perfect voor beginners met weinig tot geen beleving. Het vereist wat geduld om de interface te doorlopen, maar de instructies zijn kristalhelder.
U leert een animatie met een kleine knop te maken die goed werkt voor websites of mobiele apps.
Dit is niet spectaculair, maar aan het einde zul je een veel sterkere grip op dit concept hebben.
2. Prototype beweging
Een andere eenvoudige animatie die je kunt maken is een glijdend menu zoals in deze video . Het leert je hoe je een menu in After Effects kunt animeren en hoe je met individuele lagen in de software kunt werken.
Het is een vrij lange tutorial met meer dan 40 minuten stapsgewijze begeleiding. Maar het is de moeite waard de tijd als je het tot het einde kunt zien.
3. AE-pictogramanimatie
Kleine pictogramanimaties voegen niet rechtstreeks toe aan de interface, maar kunnen de gebruikerservaring verbeteren. Deze pictogrambewegingen hebben betrekking op die kleine micro-interacties die eerder zijn genoemd.
En dit pictogram animatie tut praat over micro-interacties met eenvoudig te volgen aanwijzingen. Je zou zelfs kunnen downloaden gratis pictogrammen in PSD / AI-indeling en gebruik deze voor de animatie.
Maar dit is ook handig voor pictogramontwerpers die hun eigen iconen helemaal zelf maken en ze willen animeren voor productie.
4. Geanimeerde UI / UX-cursors
Veel ontwerpers maken UX-animaties om te laten zien hoe een interface zou moeten werken. Dit zou natuurlijk muisklikken / swipes omvatten omdat u wilt zien hoe de inhoud over de pagina beweegt.
Als je wilt voeg cursorbewegingen toe voor je mockups dan is deze tutorial iets voor jou. Het is een vrij korte handleiding, slechts 15 minuten lang, maar de informatie is super waardevol en relevant voor zowel mobiele als webontwerpers.
5. iPhone App-gebruikersinterface
Een ander goed voorbeeld van een gebruikersgerichte animatie is deze een typische iPhone-app-invoer volgen. U maakt een gebruikerspad door een iPhone-app die afzonderlijke formuliervelden invult.
Op zichzelf lijkt dit misschien niet zo veel, omdat mensen weten hoe dit proces eruit ziet.
Maar als u een webpagina of toepassing ontwerpt die een unieke stroom heeft, helpt het om het volledige gebruikersgedrag te tonen van het invoeren van informatie tot het inloggen en misschien nog meer.
6. App-pagina veegt
Ontwerpers van mobiele apps kunnen paginaswipes gebruiken voor multi-paged interfaces. Deze werken geweldig voor galerijen en voor gepagineerde effecten.
In deze korte tutorial je leert hoe je pagina-veeganimaties kunt maken met After Effects met een paar bestaande mockups. Deze video is gratis UX in beweging waar ze een hoop vergelijkbare tutorials en privéworkshops hebben.
Het onderwerp van UX-beweging wordt niet veel behandeld op internet, maar deze jongens zijn een van de weinige goede die zich echt verdiepen in de details. Bekijk hun volledige YouTube-kanaal als je meer wilt weten.
7. Jelly UI-animaties
Je hebt waarschijnlijk rare menu's voor vloeibare jelly gezien in Android-apps of zelfs op internet. Deze zijn niet super gebruikelijk omdat ze moeilijk herscheppen zijn in code, maar met deze Jelly UI-zelfstudie je kunt de animaties in elk geval helemaal opnieuw opbouwen.
Het is een andere freebie van UX in Motion en het is slechts in totaal ongeveer 5 minuten.
Maar u zult veel leren over After Effects en het algemene UX-animatieproces. Specifiek hoe u vectoren kunt importeren en met die bestanden over een tijdlijn kunt werken, eigenlijk alleen de basis van interface-animatiewerk.
8. Animatie ontvouwen
Hoewel ik niet kan zeggen dat deze animatie direct van invloed is op de interface, is het iets dat u kunt toevoegen aan het logo van uw website. Uitvouwbare animaties worden meestal gebruikt in video-intro's om een merkbaar beeld te creëren.
Maar websites kunnen ook vergelijkbare uitvouwbare animaties hebben door te gebruiken SVG-afbeeldingen en eenvoudige JS-animaties.
Zelfs als u geen logo-animaties wilt maken, kan deze zelfstudie u nog steeds door een eenvoudige AE-interfacewerkstroom leiden. Perfect om de touwen te leren zonder veel stress.
9. Basis UI prototype-animaties
Mobiele app-menu's zijn er in veel verschillende stijlen met verschillende animatietechnieken. Deze UI-zelfstudie leert je hoe je het pictogram van het pictogram van de flyoutballon kunt animeren.
Dit werd voor het eerst toegeschreven aan de Path-app, maar is sindsdien uitgegroeid tot een algemene trend voor Android- en iOS-apparaten.
In deze video van 20 minuten verzamel je ideeën voor pictogramanimatie en menu-ontwerp. Het is vrij eenvoudig om mee te werken en u kunt vooraf ontworpen pictogrammen gebruiken voor de workflow om tijd te besparen.
10. 3D-laagsplitsingen
Presentatie-animaties zijn waardevol voor klantenwerk of voor het delen van uw ideeën voor een team. Dat is waar deze 3D-laaganimatie tutorial kan helpen.
Het leert je verschillende laagelementen op te splitsen en ze te scheiden van de volledige interface. U kunt zelfs verschillende pagina-elementen presenteren om weer te geven hoe de app / website zou moeten werken.
Ik kan me niet voorstellen dat dit waardevol zou zijn voor persoonlijk werk, maar het is cool effect om te leren, vooral voor commerciële optredens.
11. iOS 8-switches
Geanimeerde aan / uit-schakelaars verschenen voor het eerst in vroege versies van iOS en zijn sindsdien verspreid naar Android en algemene websites.
De beste UI-switches hebben aangepaste animaties en je kunt je eigen animaties bouwen door te volgen deze zelfstudie van 25 minuten . Het gaat ervan uit dat je al over de grafische schakelaar beschikt, maar je zou ook kunnen downloaden een gratis PSD en gebruik dat in plaats daarvan.
Bovendien kunt u deze animatie opnieuw gebruiken voor elk type switch dat u in de toekomst ontwerpt. Een geweldige tutorial voor iemand die gewoon op weg is naar After Effects voor UI / UX.
12. Gladde pictogramanimaties
Het laatst op mijn lijst is deze gedetailleerde pictogram beweging tut met behulp van een paar verschillende vectorvormen. Het is een vrij gedetailleerde gids van in totaal iets meer dan 30 minuten, en behandelt een paar verschillende technieken.
Zodra u After Effects kent, kunt u deze ideeën toepassen op andere pictogramstijlen. Daarom is deze tutorial zo geweldig voor beginners; het leert je werken in de AE-interface met specifieke technieken voor UI / UX-ontwerpers.
Maar met al deze tutorials zult u uw UX-animatievaardigheden verbeteren, dus zorg ervoor dat u een bladwijzer maakt voor alles wat uw aandacht trekt.
