Atendimento via WhatsApp Atendimento via WhatsApp

Blog Tecnológico

Projeto de UI/UX para Apps

Melissa Campuzano • 26 mai 2020 • Adobe Xd - Experience Design

Projeto de UI/UX para Apps

Como prometido no anterior artigo, aqui você vai aprender os passos mais importantes para criar um projeto em Design de Aplicativos.
O Design de Interface e de Experiência é algo muito amplo e requer uma serie de fases e processos para chegar a um resultado ótimo e que traga bons resultados tanto para um negócio como para os usuários finais.

O caminho mais seguro é projetar e fazer testes, sem testes você nunca vai saber se está realmente trazendo uma experiência ótima para o usuário final. É por isso que usar o ADOBE XD facilita tanto o trabalho de UI/UX pois você pode testar seu produto quantas vezes precisar e ainda trabalhar em colaboração com outros designers e profissionais interessados no projeto, que são conhecidos como stakeholders.

Para começar um projeto de design de aplicativo você deve ter muito claro as seguintes coisas:

O que o usuário precisa?

O que o negócio quer atingir de meta?

Que recursos tem para o usuário e para o negócio bater a meta?

Lembre-se que você deve focar na solução do problema antes mesmo de começar a usar a ferramenta. O fato de você focar na solução do problema permite que você possa elaborar um projeto mais condizente e capaz de solucionar os problemas e as necessidades do usuário final. O 90% das ideias falham sendo o 42% porque o mercado não precisa daquilo. Por isso, foque na solução do problema antes mesmo de começar a desenhar. Desenhe e projete com a solução em mente, esse é deve ser o alicerce principal do projeto.
A formula para ter um projeto ótimo é: Entregar resultados + Boa estética + Facilidade de uso

As pessoas não querem um aplicativo ou um site, elas querem o valor que esse produto gera para eles.

Então, como você aplica UX/UI na prática:

 

  1. Identifique o problema
  2. Reconheça todos os usuários que irão usar o aplicativo
  3. Defina o contexto (Considere todos os momentos em que o usuário vai usar o aplicativo)
  4. Identifique as alternativas de solução ao problema e priorize cada uma delas para saber quais terão maior ou menor impacto e esforço
  5. Defina as métricas
  6. Estabeleça a solução usando as ferramentas de UI e UX Writing, comece com os esboços e a prototipação
  7. Gere hipóteses e faça testes
  8. Entreviste, avalie, peça feedback.
  9. Tenha uma estratégia de entrega e meça os resultados
  10. Continue a trabalhar nas próximas versões, sempre tem coisas a melhorar

 

Esta é apenas uma orientação de como você pode trabalhar no seu projeto de Design UX/UI. Existem muitas outras maneiras e métodos que você pode implementar em seu processo de trabalho. Não siga os mesmos passos que outros apps fazem, cada caso é um caso, não há apenas uma alternativa de solução. Por isso a pesquisa é mega importante, o erro começa quando só escutamos nossas ideias e não as pessoas para quem projetamos.

Agora vou explicar aqui alguns recursos que vão permitir que seu fluxo de trabalho num projeto de Design UI/UX seja mais eficiente, fácil e colaborativo usando a ferramenta de Adobe XD:

 

1. Se você já mexe com o Adobe Illustrator e Adobe Photoshop você pode salvar seus recursos nas Bibliotecas da Creative Cloud e usa-los depois no Adobe XD

Muitas vezes você recebe uma quantidade de recursos tais como o logotipo, cores corporativas e secundarias, estilos tipográficos, imagens e outros elementos da marca num arquivo pdf ou como imagem. Normalmente você abre eles com os softwares de edição para poder usa-los. Para que você não se de o trabalho de copiar e arrastar cada um deles individualmente a seu arquivo de Adobe XD você pode simplesmente salvar todos eles numa Biblioteca da Creative Cloud.

 

 

Quando estiver na fase de aprimorar os wireframes, abra a sua biblioteca e com os elementos selecionados modifique as cores, estilos tipograficos e até adicione imagens para alcançar a fase de wireframes em alta fidelidade.

Lembrando que qualquer elemento salvo nas Bibliotecas pode ser modificado diretamente desde o Adobe XD, isso facilita demais o trabalho e a produtividade

 

 

2. Salve seus recursos no Adobe XD

Esteja você trabalhando sozinho ou com uma equipe de designers, a criação de um sistema de design coeso pode melhorar muito os fluxos de trabalho, e os ativos vinculados no Adobe XD ajudam a manter tudo atualizado. 

Você pode salvar seus recursos com a Creative Cloud: cores, estilos de caractere, componentes e áudios. Isso permite que você possa ter todos esses ativos sempre a sua disposição para usa-los quantas vezes precisar ao longo de todo o projeto de design.

 

 

Você também pode usar dos mesmos ativos em outros documentos e projetos para isso você precisa salvar o documento com os ativos na nuvem e uma vez aberto um novo projeto você apenas precisa ir à opção de Design>Ativos>Vincular ativos e selecionar o documento que salvou na nuvem.

 

 

Automaticamente todos os ativos daquele documento estarão disponíveis no novo documento que você está iniciando.

 

 

3. Use componentes, isso irá facilitar seu trabalho, você irá poupar muitíssimo tempo e esforços

Geralmente, os designers precisam criar elementos base, como barras de navegação ou botões, que se repetem em outros designs e telas do mesmo aplicativo. No entanto, esses elementos base precisam ser personalizados de acordo com o contexto ou o layout em que são usados. Em situações como essa, você acaba criando várias versões do mesmo elemento base, dificultando muito a manutenção do seu design e dedicando muito tempo neles

Por isso que os componentes são elementos de design muito flexíveis que ajudam a criar e manter elementos repetidos cujas instâncias podem ser alteradas para criar variações para diferentes contextos e layouts. Por exemplo, o uso de botões em contextos diferentes.

 

 

Você pode criar um componente mestre para definir um elemento reutilizável, como um botão, e alterar as propriedades dele para personalizar as instâncias desse elemento. As alterações feitas em uma instância individual são específicas desse elemento, mas as alterações feitas no componente mestre são propagadas para todas as instâncias cujas propriedades não foram personalizadas.

 
 

 

4. Utilize a coedição para ajudá-lo nos seus fluxos de trabalho

A coediçã permite que você trabalhe junto com sua equipe para enfrentar projetos em velocidades vertiginosas. Você pode projetar em uma única tela ou dividir tarefas e trabalhar em pranchetas separadas. 

Graças ao recurso histórico do documento, você pode coeditar (beta) designs em conjunto com outros designers para agilizar o fluxo, evitar versões conflitantes e deixar de fazer trabalho dobrado.

Para aceder a coedição salve seu design como um documento na nuvem, clique no ícone da pessoa e selecione em Ativar coedição (beta).

 

 

Seguidamente coloque as Adobe IDS de outros designers e selecione em Convidar.

Seus colaboradores receberão uma notificação no email ou no aplicativo da Creative Cloud avisando que existe um documento na nuvem ao qual eles podem acessar.

 

 

Assim quando você estiver trabalhando no documento você poderá visualizar as áreas nas quais outros designers estão trabalhando em tempo real, elas serão identificadas por cores e por um avatar diferente.

 

 

5. Não perca nada, utilizando a nova ferramenta Documento Histórico, você pode salvar edições dos últimos 30 dias

Na barra superior da interface do Adobe XD clique na setinha. Você vai observar que por padrão são salvas regularmente e de maneira automática versões com hora e data. Estas versões expiram depois de 30 dias. Caso você queira salvá-las de maneira permanente clique no ícone da fita.

 

 

Você não pode reverter versões anteriores, mas sim abrir uma versão anterior no histórico, copiar o conteúdo e colar na versão atual.

 

6. Use o layout sensível ao conteúdo

Estes controles permitem que você possa projetar, modificar tamanhos, adicionar textos, reorganizar e reposicionar elementos sem se preocupar com o trabalho tedioso e manual de cuidar que cada elemento fique centralizado ou com as medidas certas e equilibradas ao redor dos textos ou dos botões, o programa faz automaticamente por você, sempre e quando você ative a opção de Espaçamento entre objetos

 

 

Esta ferramenta é super útil na hora de levar sua aplicação para outros tamanhos de dispositivo conhecido como design responsivo. Lembrando que para ativar essa opção o elemento precisa ser um componente.

 

7. Use as Planilhas Google para trabalhar com dados

Muitas vezes trabalhamos com bastante informação de dados que ao preenche-lo um por um acabamos perdendo muito tempo.

 

 

Por isso a equipe de marketing pode nos ajudar usando planilhas de Google e compartilhando conosco de maneira que todos possamos trabalhar de maneira mais integrada.

 

Você pode extrair os dados de uma planilha de Google para usa-los em cartões que contem muita informação, mas que ao mesmo tempo estão organizados por categorias. Assim você não se dá o trabalho de preencher cada categoria individualmente, e cada modificação que é feita simplesmente pode ser atualizada por meio do plug-in. É uma ferramenta fascinante!!!

 

 

Com estes recursos você vai se tornar um designer UI/UX com muita mais produtividade e eficiência. Vai poder trabalhar facilmente em equipe conseguindo ótimos resultados em seus aplicativos. Mas isso não é tudo, ainda existem muitos mais recursos surpreendentes que podem ser usados em seus projetos. Você pode aprender cada um deles no Curso de ADOBE XD.

Não deixe de acompanhar as atualizações e eventos gratuitos e online sobre esta incrível plataforma.

Gostou deste conteúdo?




 

 

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.

ENG DTP & Multimídia - Logo

 

 

ENVIE SEU CONTATO e SEUS COMENTÁRIOS


LinkedIn da ENG DTP Multimídia
     Facebook da ENG DTP Multimídia     Instagram da ENG DTP Multimídia

 Jornad Graphic Design