Tutorial do Adobe XD - Design de Experiência e Prototipagem

Seja bem-vindo ao grande tutorial de Adobe XD. Nesta introdução, apresento-me como seu treinador.

Qual é a diferença entre Experiência do Usuário (UX) e Interface do Usuário (UI)? Que tipos de design de níveis existem e para que é melhor usar o Adobe XD? A resposta está aqui!

Pela primeira vez abri o Adobe XD - e já se oferecem inúmeras possibilidades para escolher. Neste vídeo, há um pequeno aquecimento para o Adobe XD, uma visão geral do programa e uma introdução à tela de abertura do XD e suas funções.

As artboards (áreas de desenho) podem ser criadas rapidamente no Adobe XD para diferentes resoluções e dispositivos. Quais peculiaridades devem ser consideradas são abordadas neste tutorial.

Diferentes configurações de grade facilitam a organização limpa de elementos e objetos entre si. Para isso, temos à nossa disposição uma grade retangular e uma divisão de colunas em colunas.

Google, Apple e Microsoft disponibilizam kits de UI práticos para um início rápido. Esses artboards prontos nos ajudam imensamente na posterior criação de protótipos para diferentes plataformas.

As cores desempenham um papel extremamente importante em quase todos os designs - neste vídeo, aprenderás como trabalhar com cores no Adobe XD, como importá-las e que fontes práticas existem para recolher harmonias de cores prontas.

Existem numerosos métodos para importar ativos como imagens, arquivos, documentos de texto, etc. no Adobe XD. Neste vídeo, apresento alguns procedimentos. No entanto, como o XD faz parte da Creative Cloud da Adobe, é possível trabalhar de forma extremamente confortável e conveniente com as bibliotecas.

O tema das fontes e tipografia é uma grande peça na nossa jornada através do Adobe XD. Neste vídeo, você aprenderá a lidar corretamente e de forma eficiente com as fontes.

Os formulários podem ser facilmente importados para o Adobe XD ou criados usando a ferramenta de caminho. Se um objeto for utilizado mais de duas vezes, é recomendável também adicioná-lo como um símbolo na lista de ativos.

Design tem muito a ver com inspiração e entrada de fora. Isto inclui o ambiente analógico, assim como o digital. Aqui apresento alguns portais que gosto de visitar.

Vamos começar com um pequeno e bom projeto prático. Neste tutorial e nos próximos dois vídeos que serão lançados, vamos criar uma página única.

A grelha de repetição é uma das funcionalidades mais importantes do Adobe XD. Ela nos ajuda a dimensionar e preencher grupos de objetos criados uma única vez de forma flexível e personalizada.

Na última parte da criação do site de página única, vamos cuidar do rodapé e de uma seção para as referências. Aqui, usamos arquivos SVG práticos e aprendemos mais técnicas de design.

Nesta lição, trataremos da questão de como é possível conectar interativamente diferentes artboards. Aqui, vamos discutir as possibilidades de escolha de transições e outras modificações que podemos fazer no protótipo.

Cada site precisa de um ponto de âncora para navegação. Neste vídeo, focamos exclusivamente na criação de uma navegação principal no cabeçalho e na conexão interativa entre eles.

Este treinamento baseia-se no capítulo anterior e mostra como podemos adaptar o menu desktop criado para um smartphone. O ícone de hambúrguer e os itens do menu serão realçados com animações interessantes.

Uma das ferramentas mais poderosas para visualização ideal é a função de Auto-Animate do Adobe XD. Neste exemplo, eu explico como vocês podem adaptar o princípio da função Auto-Animate de forma adaptativa para qualquer cenário imaginável.

Nos seguintes vídeos, aprendemos a criar um protótipo para uma loja online. Aqui aprenderemos maneiras de transformar simples artboards em protótipos de alta fidelidade visualmente atraentes. Parte 1 de 4.

Na segunda parte, vamos lidar com a apresentação das descrições detalhadas, inserir sliders para as imagens e interligar os artboards entre si.

A função de sobreposição para prototipagem interativa oferece-nos possibilidades emocionantes, como a capacidade de exibir e ocultar informações diretamente.

Um bom design de usabilidade sempre fornece feedback ao usuário sobre o status do sistema. Este feedback será incorporado em uma animação bonita no final do projeto.

O Adobe XD também suporta interações por comando de voz em seu processo de prototipagem. Comandos verbais acionam ações no sistema que podemos definir. Vou mostrar como isso funciona neste tutorial.

Ao colaborar com outros departamentos e pessoas envolvidas, a narração de áudio é uma funcionalidade valiosa para explicar claramente o status do projeto.

Testar um protótipo em um ambiente virtual é uma coisa - apresentá-lo ao vivo em um dispositivo final é algo completamente diferente. E é exatamente isso que pode ser facilmente resolvido através do Adobe XD, seja por USB ou por conexão com a Creative Cloud. Para isso, utilizamos o aplicativo Adobe XD da loja de aplicativos.

Durante a colaboração, é imprescindível trocar informações com outros departamentos sobre o status do projeto. Através da função de publicação, o protótipo pode ser liberado para que revisores, desenvolvedores e contratantes obtenham impressões visuais do projeto. Neste ponto, começa o ciclo de edição entre os departamentos especializados para desenvolver o projeto até a sua conclusão.

O Adobe XD está em constante mudança como um programa ainda muito jovem, com cada atualização: Neste vídeo, eu explico quais são as novidades que surgiram na transição da versão 18 para a versão 19, como os recursos são utilizados e em que situações eles são úteis. Isso inclui: componentes em vez de símbolos, redimensionamento responsivo, guias de alinhamento, ferramenta de polígono, mais opções de formatação de texto e muito mais. Divirta-se!