Você está prestes a lançar uma proposta de design de aplicativo bancário para um cliente? Você está no lugar certo. Neste tutorial, aprenderemos como prototipar uma interface básica de aplicativo bancário.
O Adobe XD é um software especializado em aplicativos e aplicativos da Web, oferecendo ferramentas para designers criarem as simulações ou protótipos da Web mais realistas.
As ferramentas fornecidas pelo Adobe XD economizam tempo e nos ajudam a criar protótipos de aplicativos funcionais. Ao visualizar o design em ação, com botões e animações, essa ferramenta torna mais fácil para os designers comunicarem suas ideias a clientes e programadores.
Modelos de aplicativo bancário do Adobe XD no Envato Elements
Depois de pegar o jeito do fluxo de trabalho do Adobe XD, é sempre útil ter recursos criativos e inspiração à mão. Uma assinatura do Envato Elements lhe dará acesso a milhares de ativos criativos, incluindo modelos de aplicativos Adobe XD e design de interface do usuário para aplicativos.
Curso Completo: Adobe XD Avançado
Você já conhece o Adobe XD? Bem, parece um bom momento para levar suas habilidades para o próximo nível! Confira este tutorial avançado do Adobe XD gratuito e fácil de seguir de Adi Purdila. Encontre também muitos tutoriais em vídeo relacionados ao Adobe XD no canal Envato Tuts+ YouTube para se tornar um profissional rapidamente.
Antes de criar um protótipo, aprenda a usar o Adobe XD para criar um aplicativo, especificamente o design da interface do usuário. Confira este tutorial sobre como criar uma interface de usuário do aplicativo financeiro no Adobe XD:
Como criar um protótipo de aplicativo bancário no Adobe XD
Faz
Antes de começar, é altamente recomendável verificar diferentes aplicativos bancários.
1. Analise outros aplicativos bancários
Você deve até ter um no seu telefone. Tenha em mente que o objetivo final do design da web e do aplicativo é elevar a experiência de navegação dos usuários. A maioria dos problemas do usuário está relacionada às perguntas mais simples. Comece se perguntando:
- Para que esse aplicativo será usado?
- Quem é o principal alvo deste aplicativo? Quem é o usuário?
- Quais são as principais seções e funcionalidades que este aplicativo deve apresentar?
Anote tudo isso e aplique as melhores práticas que encontrar ao seu design.
2. Esboce Seções
Vamos tirar as ideias do papel. Considere todas as informações coletadas dos aplicativos bancários existentes que você analisou. Esboce as telas que você fará o protótipo. Eu costumo fazer isso primeiro à mão, isso me ajuda a internalizar o processo de design. Mas fique à vontade para fazer isso diretamente no Adobe XD.
3. Traduza o esboço em design
Neste ponto, você pode transformar seu esboço em wireframes e projetar seu aplicativo do zero. Você também pode procurar um modelo que cubra a maioria das suas necessidades de design e começar a partir daí.
Etapa 1: baixar um kit de interface do usuário do aplicativo
Para os propósitos deste tutorial, trabalharei com um Kit de interface do usuário do aplicativo móvel Fundia – Wallet & Banking da Envato Elements. Ele vem com um ótimo design de interface do usuário para aplicativos móveis. Eu escolhi este modelo com base nas seções e funções que esbocei anteriormente.
Etapa 2: personalizar telas e elementos
Escolha as pranchetas e os elementos que você usará para o design do seu aplicativo bancário. Distribua, remova e adicione elementos neste modelo de design de aplicativo Adobe XD. Ajuste cores e fontes para combinar com sua marca.
Altere os nomes de cada seção à qual eles pertencem. Para este tutorial, criarei o protótipo com estas seções:
- Conecte-se
- Casa
- Sucesso da transação
- Detalhes do cartão
- Perfil
Depois de saber como usar o Adobe XD para criar um aplicativo, você estará pronto para começar a prototipar.
4. Protótipo do seu projeto
Passo 1
Defina as principais interações no design do seu aplicativo bancário. Neste caso queremos que o usuário faça o Login, clique na seta e vá para Home. Também queremos vincular nosso menu principal na parte inferior de cada tela às diferentes seções que projetamos.
Passo 2
Vamos para Protótipo na parte superior da sua tela. Selecione o primeiro elemento ou área que deseja tornar clicável. Neste caso, vou começar com o próximo botão.
Clique na pequena seta ao lado do elemento e guie-o para a Prancheta que você deseja vincular a esse elemento clicável.
Ajuste aspectos específicos de sua interação. O que vai Acionar a animação? Neste caso, queremos que o usuário “Toque”. o que Modelo de ação que queremos ver? Vamos ficar com “Transição”. Certifique-se de que seu Destino está definido para a prancheta direita. Finalmente, que tipo de Animação gostaríamos de ver? Nós vamos manter Dissolver para a interação Login to Home.
Experimente outros tipos de Animação com diferentes interações. Por exemplo, para ir ao Detalhes do cartão tela, o usuário terá que clicar no cartão. Então, eu vou mudar o Animação para Deslizar para a esquerda para obter uma transição mais suave quando o usuário clica no cartão. Também ajustei o Duração para obter um efeito visual mais agradável.
Teste diferentes interações com o Visualizar botão. Obtenha o exato Animação, Tipo de acão e Duração você gostaria de oferecer ao seu usuário.
Faça o mesmo com todos os seus elementos e botões para vinculá-los à tela à qual pertencem. Selecione suas Pranchetas e veja todos os links que você criou.
5. Compartilhe o link para revisar e testar seu protótipo
Testar seu protótipo ajudará você a descobrir se sua navegação é intuitiva o suficiente. É altamente recomendável que você teste este protótipo com outras pessoas para resolver possíveis problemas de navegação.
Faz
Com o Adobe XD, você pode criar e compartilhar um link online para obter feedback de clientes e colegas.
Vamos para Compartilhar no canto superior esquerdo da tela (ao lado de Protótipo) e escolha Revisão do projeto como sua configuração. Isso gerará um link que pode ser revisado e comentado online por qualquer pessoa com o link.
Mais recursos do Adobe XD
Quer se tornar um profissional em design de aplicativos e web design do Adobe XD? Temos muitos artigos, tutoriais e dicas criativas para você aproveitar ao máximo o Adobe XD. Encontre também modelos incríveis de aplicativos do Adobe XD para trabalhar. Temos uma pequena seleção para você:
Parece que você está se tornando um profissional!
Quanto mais habilidades, ferramentas e truques você aprender, mais eficiente será o seu trabalho de design. Continue aprendendo o Adobe XD e obtenha toda a inspiração e recursos criativos que você precisa no Envato Elements. Você está um passo mais perto do seu próximo melhor design de UI e UX!
