Blog Tecnológico

Prototipagem de APPs

Melissa Campuzano • 12 mai 2020

Prototipagem de APPs

Vamos falar uma verdade aqui, não tem um dia só na sua vida que você não utilize uma aplicação no smartphone.

O uso de aplicativos tem se tornado uma necessidade para muitos, para outros pode ser parte do entretenimento do dia e para outros mais expertos é o meio pelo qual ganhar dinheiro.

Acredito muito que por meio deste artigo você vai encontrar uma ferramenta pela qual pode sair avante, ainda mais nesta época tão desafiadora que vivemos no mundo.

Sem mais enrolação o que eu quero dizer para você é que hoje mesmo você pode começar a prototipar aplicações. Já seja um app para promover mais ventas de sua loja ou para começar seu próprio empreendimento. Existem várias ferramentas para isso, há muitos anos, só que muitos só estão dando valor a esse conhecimento agora.
Ainda é uma área em crescimento, mas já existe muita informação ao respeito.

Criar aplicações é todo um processo que requer estudo e dedicação como qualquer coisa, mas você já pode sentir o gostinho do que é esta área com o uso de um aplicativo mega intuitivo e fácil de usar: Adobe XD, com ele você pode começar a criar e prototipar seus aplicativos, baixar kits de interface para não ter que criar tudo do zero, configurar o tamanho da tela, adicionar várias mesas de trabalho das diferentes fases do aplicativo, inserir sua marca, configurar cores, tipografia, adicionar galeria de imagens ou produtos, colocar localizações e informações de contato e o melhor de tudo criar a interação de cada coisa, definindo assim como o aplicativo irá se comportar na hora de ser usado. Detalhe, você não precisa ter conhecimentos em linguagens de programação porque você não vai programar nada. No final da elaboração do projeto ou mesmo no processo você pode ver como está resultando o funcionamento do aplicativo e verificar os tamanhos e a fluidez de cada tela.

Vou explicar cada um desses pontos agora assim você pode ter uma noção melhor do que estou falando:

 1. Para começar o projeto primeiro você deve instalar o app no seu desktop.

 Clique neste link para acessar: https://www.adobe.com/products/xd.html

 

 

2. Comece um novo design selecionado o tamanho de tela onde você irá trabalhar seu aplicativo. Veja que em cada um dos 4 tipos de telas existe um botão com mais opções que você pode escolher.

 

 

Você também pode personalizar o tamanho da sua tela de preferência, caso não encontre o tamanho especifico da tela do dispositivo para o qual irá projetar.

 

Dica: Recomendo você escolher a opção de Iphone ou Android já que é o dispositivo mais utilizado na hora de utilizar um aplicativo. Uma vez que você tem o projeto pronto ou aprovado, pode modificar a posição dos elementos adaptando ao tamanho de tela no desktop ou iPad. Lembrando que não é uma regra que deve ser seguida à risca, tudo depende de seus objetivos.

 

 

3. É importante que você tenha um esquema visual e geral de seu aplicativo esboçado no papel antes de começar a desenhar no aplicativo. Estes esquemas são conhecidos como wireframes e vão te ajudar a poupar muitíssimo tempo. Vou dar mais pautas ao respeito dele nos próximos artigos.

 

 

Clique no primer botão do canto esquerdo da tela e selecione a opção Obter Kits de Interface>Wireframes eles vão te ajudar neste passo, caso você não tenha ideia de como esboçar ainda seu wireframe.

 

Você também pode baixar kits de interface da Apple IOS ou do Microsoft Windows para que você não fique desenhando um por um.

 

 

Nesses links você também pode baixar outros kits legais para usar diretamente no Adobe XD: 

https://letsxd.com/states

- https://www.adobe.com/br/products/xd/resources.html


Você pode desenhar seus próprios botões e outros elementos de interface no Adobe Illustrator e puxá-los para dentro do Adobe XD. Essa é uma das facilidades da Adobe, você pode trabalhar em conjunto com outros softwares como Adobe Illustrator e Adobe Photoshop.

4. Observe que na parte lateral direita você tem os painéis de configurações dos elementos que estão na sua prancheta, chamado de Componentes, eles mudam de acordo ao elemento que você tem selecionado na tela. Neste painel de propriedades você pode modificar o tamanho, a cor, a opacidade dos objetos entre outras propriedades.
Faça as mudanças necessárias nos textos, linhas, ícones, botões e outros elementos.

 

Nesta imagem você pode ver algumas modificações na cor dos elementos, do azul por preto.

 

5. Do lado lateral esquerdo você tem algumas ferramentas que vão te ajudar a construir outras formas necessárias. Por exemplo um círculo, como pode se ver na imagem.

 

6. O penúltimo ícone que tem a forma de uma folha, é a ferramenta Prancheta que permite que você possa criar as próximas telas de seu aplicativo. Você vai precisar mais do que uma prancheta para seus projetos. Clique na ferramenta prancheta, no lado lateral direito você vai ver as opções de tamanhos de dispositivo, selecione o mesmo tamanho que você escolheu ao começar o projeto, assim você vai ter mais pranchetas onde trabalhar.

 

 

Você pode renomear cada uma delas para ter seu trabalho muito mais organizado. Neste exemplo o nome mantem a configuração por defeito do software que é o nome da tela e a numeração que segue.

 

 

7. Agora vamos ir para a parte do Protótipo que é a fase mais divertida. Você vai ir conectando cada botão para a próxima tela que deve aparecer na interface. Você vai observar que esta parte do projeto é super intuitivo, devido as facilidades do software. O esboço do aplicativo no papel é mega importante nesta etapa e também, na etapa de Design que vimos anteriormente, porque assim você vai saber que elementos conectar com qual tela do projeto. Procure fazer todas as conexões, inclusive os botões para voltar, imagine que você está usando o aplicativo e se adiante ao próximo movimento que o usuário vai querer fazer.

 

8. No lado direito da tela você vai ver um painel de Interação. Nele você configura a maneira como os botões se comportam, a maneira de acionar deles e o tipo de ação que você deseja dar a cada um, tais como transições, animações e duração da interação. Aqui você pode tornar seu aplicativo totalmente interativo. Teste todas as opções para ver o funcionamento de cada ação para saber qual pode se adequar melhor a cada botão. Se divirta!

 

9. Finalmente para ver o protótipo em ação você tem que clicar no ícone de Play para visualizar no desktop. Seguidamente ira se abrir uma tela onde você vai visualizar seu aplicativo funcionando, você pode testar cada botão e cada elemento para ver se não esqueceu de alguma interação.

 

Clique no ícone do celular para visualizar o funcionamento do aplicativo diretamente no seu celular, mas antes disso você precisa instalar o aplicativo Adobe XD no seu smartphone. Faça as modificações necessárias e teste em tempo real quantas vezes for necessário, inclusive no meio da fase de Design.

 

10. É muito importante opiniões e sugestões para melhorar a interatividade (UI Design) e a experiência do usuário (UX Design) de seu app. Mande o link para um amigo e peça a ele testar o funcionamento do aplicativo, não esqueça de pedir feedback. Você também pode compartilhar o projeto e trabalhar em colaboração com outras pessoas envolvidas com o projeto.

Para isso clique na aba Compartilhar no lateral direito da tela você vai ver todas as opções disponíveis.

 

Veja que ao clicar em Revisão de Design existem várias opções disponíveis. Selecione a que precisar no momento. Lembrando que não importa quantas mudanças você faça no documento o link gerado ainda será o mesmo. 

 

Conclusão

Designers de aplicativos fazem todo um estudo antes de começar um projeto de UI/UX. É um trabalho muito legal e na maior parte das vezes envolve toda uma equipe nele. Não se preocupe, no processo você ainda vai aprender muita coisa, não esqueça que você projeta e cria aplicativos para outros usuários, pessoas que nem você, que estão na procura de algo fácil de usar, objetivo e visualmente claro. O Adobe XD facilita muitas etapas e processos especialmente porque você pode testar seu protótipo quantas vezes quiser antes mesmo de exportar ele em outros formatos como exportação para desenvolvedores já seja para Web, Android ou IOS.

Você pode baixar o arquivo XD deste artigo aqui para ver como ele foi construído e se quiser para usá-lo como um modelo para seu próprio projeto, ele é o básico de um protótipo, use sua criatividade para adicionar todas as pranchetas necessárias para o trazer uma experiência legal a seu usuário.

No próximo artigo irei falar sobre as etapas de criação de um projeto UI/UX usando o Adobe XD. Então já vai pensando nas suas ideias. Você mesmo vai poder criar seu próprio aplicativo para sua loja ou para esse empreendimento que você já tem em mente há um tempo mas que ainda não tirou do papel. Fique atento ao nosso blog e não deixe de acompanhá-lo para encontrar mais novidades e dicas na criação de seus aplicativos.

Gostou deste conteúdo?






Para nos enviar comentário, acesse.

 

Melissa Campuzano

Melissa Campuzano

Melissa Campuzano, graduada em Design Gráfico pela UCATEC, com grau de Record Acadêmico.

Trabalha na área de Design, desenvolvendo projetos variados de design, imagem corporativa e eventos no exterior.
Com suas peças gráficas conseguiu mudar a percepção do público sobre o que significa estudar numa universidade de empreendedores.
É instrutora e consultora das tecnologias Adobe, atuando na ENG DTP & Multimídia.

Prvacidade e Proteção de Dados | ENG DTP & Multimídia

ENG DTP & Multimídia - Logo

 

 

ENVIE SEU CONTATO e SEUS COMENTÁRIOS