12 esercitazioni di AE gratuite per i professionisti UX
Il web design moderno comporta molte parti in movimento come la progettazione di contenuti, il lavoro con icone e Strategie di progettazione UX . Una nuova tendenza è l'uso di microinterazioni su progetti web e mobili.
Questi sembrano grandi nel progetto finale, ma non sono così facili da fare con un modello statico. Così i designer hanno raccolto programmi di animazione come After Effects per creare prototipi basati sul movimento.
Se stai cercando di imparare questo skillset, consiglio vivamente questi video gratuiti su YouTube. Non ti insegneranno tutto ma copriranno le basi e ti daranno una solida base per far avanzare il tuo bagaglio di abilità.
1. Pulsante UI animato
Questo molto breve animazione dell'interfaccia utente il tutorial è perfetto per i principianti con un'esperienza AE poco o nulla. Richiede un po 'di pazienza per lavorare attraverso l'interfaccia, ma le istruzioni sono chiare.
Imparerai a creare un effetto di animazione a pulsante piccolo che può funzionare perfettamente per siti Web o app mobili.
Questo non è niente di spettacolare ma alla fine avrai una comprensione molto più forte di questo concetto.
2. Prototipo del movimento
Un'altra semplice animazione che puoi fare è un menu scorrevole come in questo video . Ti insegna come animare un menu in After Effects e come lavorare con i singoli livelli nel software.
È un tutorial abbastanza lungo con oltre 40 minuti di guida passo-passo. Ma vale la pena se riesci a vederlo fino alla fine.
3. Animazione icona AE
Le animazioni con icone piccole non aggiungono direttamente all'interfaccia, ma possono migliorare l'esperienza dell'utente. Questi movimenti dell'icona si riferiscono a quelle piccole microinterazioni menzionate in precedenza.
E questa icona animazione tut parla di microinterazioni con indicazioni facili da seguire. Potresti anche scaricare icone gratis nel formato PSD / AI e usa quelli per l'animazione.
Ma questo è utile anche per i progettisti di icone che creano le proprie icone da zero e vogliono animarle per la produzione.
4. Cursori UI / UX animati
Molti designer creano animazioni UX per mostrare come dovrebbe funzionare un'interfaccia. Ciò includerebbe naturalmente clic / passaggi del mouse perché si desidera vedere come il contenuto si sposta sulla pagina.
Se lo desidera aggiungi movimenti del cursore per i tuoi modelli allora questo tutorial è per te. È una guida piuttosto corta, lunga solo 15 minuti, ma le informazioni sono estremamente preziose e pertinenti sia per i dispositivi mobili che per i web designer.
5. Interfaccia utente dell'app iPhone
Un altro buon esempio di un'animazione incentrata sull'utente è questo seguendo un tipico input dell'app per iPhone. Stai creando il percorso di un utente attraverso un'app per iPhone che riempie i singoli campi del modulo.
Di per sé questo potrebbe non sembrare molto visto che le persone sanno come si presenta questo processo.
Ma se stai progettando una pagina web o un'applicazione che ha un flusso univoco, allora aiuta a mostrare all'intero comportamento dell'utente l'inserimento di informazioni per l'accesso e forse di più.
6. Scorri della pagina dell'app
I progettisti di app mobili possono utilizzare gli swipe di pagina per interfacce a più pagine. Questi funzionano benissimo per le gallerie e per gli effetti impaginati.
In questo breve tutorial imparerai come creare animazioni di scorrimento della pagina con After Effects utilizzando alcuni modelli esistenti. Questo video è gratuito UX in movimento dove hanno un sacco di tutorial simili e workshop privati.
L'argomento del movimento UX non è trattato molto sul web, ma questi ragazzi sono uno dei pochi bravi a scavare nei dettagli. Guarda il loro intero canale YouTube se vuoi saperne di più.
7. Animazioni di Jelly UI
Probabilmente hai visto strani menu di gelatina liquida nelle app Android o persino su tutto il web. Questi non sono super comuni perché sono difficili da ricreare nel codice, ma con questo tutorial su Jelly UI puoi almeno costruire le animazioni da zero.
È un altro omaggio di UX in Motion e conta solo circa 5 minuti.
Ma imparerai molto su After Effects e sul processo generale di animazione UX. In particolare come importare i vettori e lavorare con quei file su una timeline, in realtà solo le basi del lavoro di animazione dell'interfaccia.
8. Animazione spiegante
Anche se non posso dire che questa animazione abbia un impatto diretto sull'interfaccia, è qualcosa di interessante che puoi aggiungere al logo del tuo sito web. Animazioni spieganti sono utilizzati principalmente nelle introduzioni video per creare un visual brandabile.
Ma i siti web possono anche avere animazioni di svolgimento simili usando Grafica SVG e animazioni JS di base.
Anche se non vuoi creare animazioni con il logo, questo tutorial può comunque guidarti attraverso un semplice flusso di lavoro con interfaccia AE. Perfetto per imparare le corde senza troppo stress.
9. Animazioni di prototipi UI di base
I menu di app mobili sono disponibili in molti stili diversi con diverse tecniche di animazione. Questo tutorial sull'interfaccia utente ti insegna come animare il menu icona a fumetto a comparsa.
Questo è stato in primo luogo accreditato per l'applicazione Path, ma da allora è cresciuto in una tendenza comune per dispositivi Android e iOS.
In questo video di 20 minuti raccoglierai idee per l'animazione delle icone e la progettazione dei menu. È abbastanza semplice lavorare con e puoi utilizzare icone pre-progettate per il flusso di lavoro per risparmiare tempo.
10. Divisioni 3D Layer
Le animazioni di presentazione sono preziose per il lavoro del cliente o per condividere le tue idee di fronte a un team. Ecco dove questa animazione di livello 3D tutorial può aiutare.
Ti insegna come suddividere elementi di livello diversi e separarli dall'interfaccia completa. Puoi persino mostrare diversi elementi della pagina per mostrare come dovrebbe funzionare l'app / il sito web.
Non riesco a immaginare che questo possa essere prezioso per il lavoro personale, ma è un effetto interessante imparare soprattutto per i concerti commerciali.
11. Switch iOS 8
Gli interruttori on / off animati sono comparsi nelle prime versioni di iOS e da allora si sono diffusi ad Android e ai siti web generali.
I migliori interruttori dell'interfaccia utente hanno animazioni personalizzate e puoi crearne uno da seguire questo tutorial di 25 minuti . Si presuppone che tu abbia già la grafica dell'interruttore ma potresti anche scaricarla un PSD freebie e usa quello invece.
Inoltre puoi riutilizzare questa animazione per qualsiasi tipo di switch che disegni in futuro. Un ottimo tutorial per chi entra in After Effects per UI / UX.
12. Smooth Icon Animations
L'ultimo sulla mia lista è questa icona dettagliata motion tut utilizzando alcune forme vettoriali diverse. È una guida piuttosto dettagliata per un totale di poco più di 30 minuti e copre alcune tecniche diverse.
Una volta che sai come orientarti in After Effects, puoi applicare queste idee ad altri stili di icone. Ecco perché questo tutorial è fantastico per i principianti; ti insegna come lavorare nell'interfaccia di AE con tecniche specifiche per i progettisti UI / UX.
Tuttavia, qualsiasi di queste esercitazioni migliorerà le tue abilità di animazione UX, quindi assicurati di mettere tra le segnalibri quelle che attirano l'attenzione.
