20 beste freebies voor aspirant UX Motion Designers

Interface-ontwerpers zijn meer geïnteresseerd in UX-ontwerp met geanimeerde mockups die gebruikersacties nabootsen. Deze UX-mockups vertrouwen op beweging met geanimeerde effecten om te definiëren hoe een interface op gebruikersinvoer moet reageren.

De meeste UX-ontwerpers leren software te gebruiken om deze animaties te maken. De twee populairste keuzes zijn Adobe After Effects and Principle (alleen OS X). Jij kan ontwerpinterface mockups in een programma zoals Photoshop en verplaats de UI's naar deze programma's voor animatie.

Als je geïnteresseerd bent om UX-animatie te leren, zijn freebies een enorme troef. Je kunt het werk van anderen bestuderen en met hun ontwerpen spelen om te zien hoe het allemaal werkt.

Hieronder vindt u de beste gratis aanbiedingen voor Principle- en AE-gebruikers het overstappen naar UX motion design. Ze zullen je zeker helpen begrijpen hoe UX-animatie werkt, en hoe je je eigen kunt bouwen.

1. Actie verwijderen

Het jatten is een veel voorkomende actie in mobiele apps voor verschillende doeleinden. De standaard iOS-veegactie wordt gebruikt voor alternatieve opties weergeven voor het bewerken / verwijderen van items, en dat is precies wat je krijgt in deze freebie gemaakt door Ramil Derogongun.

Je kunt het gratis AEP-bestand voor After Effects downloaden en het zelf uitproberen. De gebruikersinterface volgt a erg basic wireframe-schema met gebruikersinvoer weergegeven als een blauwe stip. Dit soort gebruikersgedrag kan het beste worden weergegeven door middel van animatie omdat het ontwikkelaars een kans geeft om te zien hoe de interface zou moeten werken.

2. Widget Veeg

Hier is nog een andere swipe-geanimeerde mockup die scherpstelt op winkelwagenitems in een diavoorstelling. Ontworpen door Leon Wu, deze gratis swipe-animatie wordt geleverd met een PRD-bestand dat is gemaakt voor het principe.

De animatie is uiterst eenvoudig en laat zien hoe items op het scherm moeten bewegen wanneer druk wordt uitgeoefend. Je krijgt ook een gevoel voor de versoepelingseffect wanneer de veegbeweging wordt vrijgegeven.

3. Dualshock gebruikersinterface

Hier is een ongelooflijk dynamisch UX-animatie-effect gedeeld door Alexander Boychenko. Deze mockup is gebaseerd op de PlayStation Controller voor een gebruikersinterface voor mobiele apps. Het bevat een Sketch en Principle-bestand dat u gratis kunt downloaden.

Deze freebie laat zien hoe je overgangen maakt die vegen tussen schermen. Maar je krijgt ook te zien hoe pagina-elementen rond het scherm animeren in verschillende richtingen.

4. Hamburger Menu-animatie

Hamburger-iconen zijn nog steeds de rage in mobiele interfaces. Dit menupictogram freebie demonstreert hoe animeer het pictogram met drie streepjes in een "X" -pictogram.

Het is een animatie herhalen, dus de "X" animeert ook terug naar een hamburgermenupictogram. Dit is een geweldige freebie om over te leren vectormanipulatie voor UI-elementen.

5. Snapster

Deze gratis mockup is voor een mobiele app genaamd Snapster. Het focust op het welkomst / aan boord scherm waar gebruikers demo's van de app kunnen zien en leren hoe het werkt.

Het is een PRD-bestand en helaas werkt dit niet leuk met After Effects, dus alleen Principal-gebruikers kunnen hiervan profiteren.

6. Spinners laden

Hier is een freep van AEP After Effects voor mobiele laadspinners. Deze soorten geanimeerde GIF's werden erg populair toen Ajax zijn weg vond naar de reguliere webontwikkeling.

Nu zijn deze mobiele laders dertien in een dozijn, en dat kunnen ze zelfs zijn zwaar aangepast om bepaalde interfaces te passen. Deze freebie wordt geleverd met een AEP-bestand en een Sketch-bestand om de vectoren te bewerken als u deze wilt wijzigen.

7. Overgang afspelen / onderbreken

Overgangseffecten lijken vaak heel simpel, maar vereisen eigenlijk een goede hoeveelheid werk. Deze animatie afspelen / onderbreken gemaakt door Alex Pronsky is een goed voorbeeld.

Met deze freebie kunt u onderzoeken hoe verschillende dunne lijnpictogrammen kunnen worden geanimeerd in vormen en symbolen. Zodra je het programma hebt geleerd, wordt het een stuk eenvoudiger om dit soort dingen te doen, dus het helpt om freebies tot je beschikking te hebben voor onderzoek.

8. iPhone-model

Hoewel deze gratis video niet direct animaties bevat, is het bedoeld om te worden gebruikt voor productiewerk op iPhone-applicaties. Het is een gratis iPhone 5S AEP-bestand voor gebruik in After Effects als iPhone-sjabloon.

Importeer eenvoudig uw interface-mockup en maak de animaties in After Effects. Vervolgens kunt u deze aansluiten op deze iPhone-mockup om te delen met uw team.

9. iPhone-sjabloon

Dit is een andere aangepaste After Effects-sjabloon met een moderner iPhone-ontwerp. De freebie is beschikbaar vanaf deze pagina op UX in Motion.

Alles in de sjabloon is super eenvoudig aan te passen. Op de downloadpagina vindt u ook een gedeelte met de naam "Video-instructies", waar u kunt leren hoe u de app kunt animeren.

10. Micro-animatie

Zelfs de kleinste app-animaties kunnen een grote impact hebben op de gebruikerservaring. Deze freebie geeft a weer "Like" micro-animatie wanneer een gebruiker een bericht "leuk" vindt.

Het hartpictogram heeft zijn eigen animatie met de profielfoto van de gebruiker toegevoegd aan de stapel vind-ik-leuks. Deze freebie is alleen voor Principle en je hebt ook een .mov bestand om te downloaden als je dat wenst.

11. Wallet-app

Digitale portefeuilles worden steeds populairder, en deze freebie maakt het gemakkelijker om er een te ontwerpen. U krijgt een Sketch-bestand met alle onbewerkte vectorelementen plus een gratis PRD-bestand voor Principle-animatie.

Deze freebie is ontworpen door Sergey Bykov als een leuk klein bijproject. Maar het kan heel leerzaam zijn als je het uit elkaar haalt en stap voor stap met de animatie werkt.

12. iOS-schakelaar

Met iOS 7 van Apple kreeg de wereld een nieuw ontworpen schakelaar voor aan / uit-labels. Dit leidde tot veel verschillende effecten, waaronder een gratis animatie die bootst de native aan / uit-schakelaar na.

In dit bestand krijg je een heel eenvoudig animatie-effect met een eenvoudige versmalling. De schakelaar gaat over en de achtergrond wordt groen en keert terug wanneer de schakelaar wordt uitgeschakeld.

13. Ritter-app

Hier is nog een grote gratis uitgave van Sergey Bykov voor wat hij de Ritter-app noemt. Dit omvat een gratis Sketch-bestand voor de vectorinterface, samen met een gratis PRD-bestand voor de Principle-animatie.

Je zult het krijgen veel verschillende animaties in deze freebie, dus ik denk dat het nuttiger zou zijn voor een gemiddelde tot geavanceerde ontwerper. Beginners kunnen er ook veel van leren, maar hebben misschien een steile leercurve.

14. Nodig vrienden uit

We kennen allemaal het fly-menu van het pluspictogram van Google en zijn er dol op. Welnu, Jardson Almeida heeft een Friends Invite-menu gemaakt op basis van een eenvoudig Material Design-concept.

Alles is ontworpen in Sketch en geïmporteerd in Principle voor animatie. Je krijgt beide bestanden als freebies om mee te downloaden en te spelen.

15. Kaart Vegen

Hier is nog een algemene swipingfreebie die alleen voor gebruikers van Principle is gemaakt. Dit is een kaart swipe interface gemaakt voor slideshows voor algemene doeleinden of native UI's voor apps.

Ik denk dat dit de perfecte freebie is voor een beginner die net begint met het principe. Het is niet zo ingewikkeld dat je je verloren voelt, maar het is niet zo eenvoudig dat je je gebagatelliseerd voelt.

16. Chat op de kaart

Veel ontwerpers gebruiken Photoshop nog steeds voor interfaces, en het geldt ook voor deze kaartchatfreebie. U kunt een PSD-bestand downloaden voor de interface en een PRD-bestand voor de Principle-animatie.

Het is een verrassend tamme animatie voor de stijl, maar het ziet er nog steeds geweldig uit en functioneert precies zoals je zou verwachten in een eenvoudige kaarten- / geolocatie-app.

17. App laden

Mobiele apps gebruiken vaak laadschermen om bezoekers te vertellen dat er iets gebeurt in de backend. Een van mijn favoriete freebies in deze collectie is deze laadanimatie gemaakt door Roman Wagner.

Het laadt individuele elementen de een na de ander zodra het laadscherm is voltooid. Deze animatie is zeer soepel en volledig geloofwaardig op het gebied van het ontwerp van mobiele apps.

18. Kaarten voor inschakeling

Gebruikers aan boord is een cruciale stap voor elke nieuwe mobiele applicatie. Het is altijd leuk om een ​​aantal animaties in dit stadium op te nemen, daarom kunnen deze onboarding-kaartanimaties erg nuttig zijn voor app-ontwerpers.

Deze is gemaakt door Austin Baird en gratis uitgebracht voor gebruik in elk UI / UX-project.

19. Principedemo's

Naarmate u zich verder in Principle verdiept, leert u veel geavanceerde workflowtechnieken. Een van de beste freebies om verder te gaan, is deze gemaakt voor het creatieve team van Yalantis.

Dit is een volledig gratis hulpmiddel voor Principle-gebruikers om te downloaden en mee te spelen. Het behandelt een paar trucjes die laten zien hoe je een professional van Principle-animatie kunt worden.

20. Dropdown-menu's

Menu dropdowns gebruiken vaak gekke animaties om onze aandacht vast te leggen. Deze freebie van After Effects maakt gebruik van een dropdown trappenanimatie op het menu voor individuele elementen om ze als trappen te laten vallen.

Dit is misschien niet voor iedereen nuttig, maar het is zeker een geweldige manier om meer te weten te komen over de interface-animatie van After Effects.

Laatste woorden

Al deze bronnen zijn volledig gratis om te downloaden en mee te spelen in je eigen projecten. Als je helemaal nieuw bent in UX-animaties, garandeer ik dat je veel zult leren door deze freebies te bestuderen. Als u nog andere geweldige bronnen weet, kunt u links in de opmerkingen verwijderen.