20 melhores brindes para aspirantes a desenhadores de movimento UX

Os designers de interface estão se interessando mais pelo design UX com modelos animados que emulam ações do usuário. Esses modelos de UX confiar no movimento com efeitos animados para definir como uma interface deve responder à entrada do usuário.

A maioria dos designers de UX aprende a usar software para criar essas animações. As duas opções mais populares são o Adobe After Effects e Principle (apenas OS X). Você pode modelos de interface de design em um programa como o Photoshop, e mova as interfaces de usuário para esses programas para animação.

Se você estiver interessado em aprender animação UX, os brindes serão um grande trunfo. Você pode estudar o trabalho dos outros e brincar com seus projetos para ver como tudo funciona.

Abaixo você encontrará os melhores brindes para usuários de Princípio e AE apenas entrando no design de movimento UX. Eles certamente ajudarão você a entender como funciona a animação UX, e como construir seu próprio.

1. Excluir ação

Passando é uma ação muito comum em aplicativos móveis para várias finalidades. A ação de deslizamento do iOS padrão é usada para exibir opções alternativas para editar / excluir itens, e é exatamente isso que você recebe neste freebie criado por Ramil Derogongun.

Você pode baixar o arquivo AEP gratuito do After Effects e testá-lo você mesmo. A interface do usuário segue um esquema muito básico de wireframe com a entrada do usuário exibida como um ponto azul. Esses tipos de comportamentos do usuário são os melhores para serem mostrados através da animação porque dá aos desenvolvedores a chance de ver como a interface deve funcionar.

2. Widget Swipe

Aqui está outra maquete animada que se concentra no carrinho itens em um slideshow. Projetado por Leon Wu, esta animação de furto gratuita vem com um arquivo PRD que é feito para o Princípio.

A animação é extremamente simples e demonstra como os itens devem se mover na tela quando a pressão é aplicada. Você também tem uma ideia do efeito de flexibilização sempre que a ação de furto é liberada.

3. Dualshock UI

Aqui está um efeito de animação UX incrivelmente dinâmico compartilhado por Alexander Boychenko. Este modelo é baseado no PlayStation Controller para uma interface do usuário de aplicativo móvel. Inclui um arquivo de Esboço e Princípio que você pode baixar gratuitamente.

Este brinde mostra como criar transições que deslize entre telas. Mas você também pode ver como os elementos da página se animam na tela em várias direções.

4. Hamburger Menu Animation

Os ícones de hambúrguer ainda estão na moda nas interfaces móveis. Este ícone de menu freebie demonstra como animar o ícone de três barras em um ícone "X".

É um repetindo animação, então o "X" também é animado de volta ao ícone do menu do hambúrguer. Este é um ótimo brinde para aprender sobre manipulação de vetores para elementos da interface do usuário.

5. Snapster

Este modelo gratuito é para um aplicativo móvel chamado Snapster. Foca na tela de boas-vindas / onboarding onde os usuários podem ver demonstrações do aplicativo e aprender como ele realmente funciona.

É um arquivo PRD, e infelizmente isso não funciona bem com o After Effects, então apenas usuários Principle podem se beneficiar deste.

6. Carregamento de Spinners

Aqui está um brinde AEP After Effects para spinners de carregamento móvel. Estes tipos de GIFs animados tornaram-se muito populares quando o Ajax entrou no desenvolvimento web mainstream.

Agora, esses carregadores móveis são um centavo de dúzia, e eles podem até ser fortemente personalizado para encaixar certas interfaces. Este brinde vem com um arquivo AEP e um arquivo Sketch para editar os vetores se você quiser modificá-los.

7. Reproduzir / Pausar Transição

Efeitos de transição muitas vezes parece muito simples, mas na verdade requer uma boa quantidade de trabalho. Esta animação de reprodução / pausa criada por Alex Pronsky é um ótimo exemplo.

Com este brinde, você pode examinar como animar vários ícones de linhas finas em formas e símbolos. Uma vez que você aprende o programa, torna-se muito mais fácil fazer esse tipo de coisa, então ajuda ter brindes à sua disposição para pesquisa.

8. iPhone Mockup

Embora este brinde não contenha diretamente animação, ele deve ser usado para o trabalho de produção em aplicativos para iPhone. É um arquivo AEP gratuito do iPhone 5S para uso no After Effects como um modelo do iPhone.

Basta importar o seu modelo de interface e criar as animações no After Effects. Então você pode conectá-lo a este modelo do iPhone para compartilhar com sua equipe.

9. Template para iPhone

Esta é outra modelo personalizado do After Effects com um design mais moderno do iPhone. O brinde está disponível a partir desta página em UX in Motion.

Tudo no modelo é super fácil de personalizar. Na página de download, você também encontrará uma seção chamada "Instruções de vídeo", onde você pode aprender como animar o aplicativo.

10. Micro Animação

Até mesmo as menores animações de aplicativos podem causar um grande impacto na experiência do usuário. Este brinde exibe um Micro animação "Like" sempre que um usuário "curtir" uma postagem.

O ícone do coração tem sua própria animação com a foto do perfil do usuário adicionada à pilha de curtidas. Este brinde é apenas para Princípio e você também tem um .mov arquivo para download, se desejar.

11. App da Carteira

Carteiras digitais estão se tornando muito mais populares, e esse brinde facilita o projeto de um. Você obtém um arquivo Sketch com todos os elementos vetoriais brutos, além de um arquivo PRD gratuito para a animação Principle.

Este brinde foi desenhado por Sergey Bykov como um divertido projeto paralelo. Mas pode ser muito educativo se você desmontá-lo e trabalhar com a animação passo-a-passo.

12. Interruptor iOS

Com o iOS 7 da Apple, o mundo tem um switch recém-projetado para rótulos on / off. Isto levou a muitos efeitos diferentes, incluindo uma animação livre que imita o interruptor on / off nativo.

Neste arquivo, você obtém um efeito de animação muito simples com um atenuador básico. O comutador se move e o plano de fundo fica verde e, em seguida, reverte quando o comutador é desligado.

13. Ritter App

Aqui está outro grande brinde lançado por Sergey Bykov para o que ele chama de Ritter App. Isso inclui um arquivo de esboço gratuito para a interface vetorial, juntamente com um arquivo PRD gratuito para a animação do Princípio.

Você terá muitas animações diferentes neste freebie, então eu acho que seria mais útil para um designer intermediário para avançado. Os iniciantes podem aprender muito com isso também, mas podem ter uma curva de aprendizado.

14. Convide amigos

Todos nós conhecemos e amamos o menu suspenso do ícone de adição do Google. Bem, Jardson Almeida criou um menu Friends Invite baseado em um conceito simples de Material Design.

Tudo foi criado no Sketch e importado para o Principle para animação. Você recebe os dois arquivos como freebies para baixar e brincar com.

15. Card Swipe

Aqui está outro brinde de swiping geral feito apenas para usuários do Princípio. Isto é um interface de furto de cartão criado para slideshows de uso geral ou UIs de aplicativos nativos.

Eu acho que este é o brinde perfeito para um iniciante que está entrando no Princípio. Não é tão complicado que você se sinta perdido, mas não é tão simples que você se sinta banalizado.

16. Bate-papo no mapa

Muitos designers ainda usam o Photoshop para interfaces, e também é verdade neste freebie de bate-papo de mapa. Você pode baixar um arquivo PSD para a interface e um arquivo PRD para a animação do Princípio.

É uma animação surpreendentemente mansa para o estilo, mas ainda parece ótimo e funciona exatamente como você esperaria em um aplicativo simples de mapas / geolocalização.

17. App Loading

Aplicativos para celular costumam usar carregando telas para informar aos visitantes que algo está acontecendo no back-end. Um dos meus freebies favoritos nesta coleção é esta animação de carregamento criada por Roman Wagner.

Carrega elementos individuais um após o outro quando a tela de carregamento estiver concluída. Esta animação é muito suave e totalmente credível no domínio do design de aplicativos móveis.

18. Cartões de Onboarding

User onboarding é um passo crucial para cada nova aplicação móvel. É sempre bom incluir algumas animações neste estágio, é por isso que essas animações de cartão de entrada podem ser muito úteis para os designers de aplicativos.

Isso foi criado por Austin Baird e liberado gratuitamente para ser usado em qualquer projeto UI / UX.

19. Princípio Demos

À medida que você se aprofunda no Princípio, aprende muitas técnicas avançadas de fluxo de trabalho. Um dos melhores brindes para ir mais longe é este criado para a equipe criativa da Yalantis.

Este é um recurso totalmente gratuito para usuários do Princípio baixarem e jogarem. Abrange alguns truques mostrando como se tornar um profissional em animação de Princípio.

20. Menus suspensos

As listas suspensas do menu geralmente empregam animações malucas para capturar nossa atenção. Este freebie do After Effects usa um animação de escadas suspensas no menu para elementos individuais para fazê-los cair como escadas.

Isso pode não ser útil para todos, mas certamente é uma ótima maneira de aprender sobre animação de interface do After Effects.

Palavras finais

Todos esses recursos são totalmente gratuitos para baixar e brincar em seus próprios projetos. Se você for novato em animação UX, garanto que aprenderá muito estudando esses brindes. Se você conhece algum outro grande recurso, fique à vontade para deixar links nos comentários..