Adobe XD

Ementa: O curso aborda a utilização do Adobe XD na criação de protótipos para dispositivos móveis e desktop. Este software conta com recursos avançados que ajudam na criação de telas para websites, sistemas, aplicativos e qualquer projeto que envolva design de interface e de experiência. Durante o curso, também serão abordados conceitos como protótipos, canvas, artboard, criação, estilização e configuração de botões, publicação de um protótipo, Design Thinking e MVP.

Mercado de trabalho: Abrange profissões ligadas ao design, por exemplo, um designer de interfaces, o qual não atua apenas na internet, mas também nas áreas de software e design industrial.

Carga horária: 10h

Conteúdo Programático

Aula 1 – Adobe XD

• Aprender sobre o que é protótipo e entender sua função;
• Compreender o que é UI e conhecer quais são os elementos que auxiliam no bom desenvolvimento;
• Aprender o que é e a importância do design responsivo;
• Entender o método de mentalidade Mobile First e o protótipo do Spotify;
• Analisar o aplicativo Spotify.

Aula 2 – O que é Adobe XD?

• Entender sobre a interface do Adobe XD;
• Conhecer modos: Design e Protótipo;
• Criar prancheta e objeto; 
• Conhecer painéis: Controle, Ativos, Camadas e Visualização; 
• Aprender a salvar;
• Aprender o que é canvas; 
• Entender o que é artboard e os dispositivos;
• Criar pranchetas escolhendo dispositivos; 
• Mover e alterar o tamanho e a orientação das pranchetas; 
• Mudar a aparência (cor) das pranchetas; 
• Configurar o zoom; 
• Alterar o título das pranchetas; 
• Alinhar as pranchetas e salvar.

Aula 3 – Ferramentas e grid

• Conhecer as ferramentas do painel à esquerda da interface;
• Criar objetos: elipse, polígono e linha; 
• Utilizar ferramentas: caneta, texto, selecionar;
• Aprender o que são grids e para o que servem; 
• Conhecer as colunas e sua utilidade;
• Ajustar grid e colunas.

Aula 4 – Utilizando o XD

• Criar botões; 
• Configurar altura, largura e rotação; 
• Aplicar estilos;
• Configurar a aparência dos botões;
• Aprender sobre o que é tipografia e como aplicá-la corretamente nos trabalhos;
• Inserir e configurar textos (Tipografia);
• Aprender a diferença entre um wireframe no papel e digital;
• Fazer o wireframe das telas do Spotify: Home, Player, Busca, Biblioteca e Artista.
• Aprender sobre o Desfoque.

Aula 5 – Imagens e assets

• Compreender sobre as imagens importadas no Adobe XD;
• Entender o que são assets e como utilizá-los no Adobe XD;
• Aprender a diferença entre uma imagem e um asset;
• Importar imagens e assets do computador, do navegador e do Photoshop.
• Aprender a utilizar máscara com forma;
• Aprender a aplicar o ajuste responsivo no projeto; 
• Entender como o ajuste automático funciona e, também, o manual.

Aula 6 – Componentes e Style Guide

• Entender o que são componentes, suas funções e como podemos adicioná-los no XD;
• Aprender o que é Guia de Estilos e sua importância;
• Aprender sobre o Briefing; 
• Apresentar o projeto Hooked Dates; 
• Entender como é a estrutura de uma Style Guide;
• Agrupar os elementos dos assets; 
• Aprender a montar a Guia de Estilos do aplicativo Hooked Dates;
• Aprender a transformar os assets em componentes: 
  • Entender o que isso significa; 
  • Ver como utilizá-los tanto na Guia de Estilos quanto na janela Ativos; 
  • Compreender o que é um componente mestre, instâncias e como reconhecê-los no XD; 
  • Entender que toda alteração feita no componente mestre refletirá em suas instâncias.
• Entender a organização dos componentes do aplicativo Spotify.
• Aprender a criar um Style Guide.

Aula 7 – Montando um layout

• Compreender sobre a teoria das cores e suas combinações;
• Entender a importância dos componentes e Style Guide;
• Aprender o que é layout tangível e como aplicá-lo em um wireframe;
• Aprender a criar, por meio do wireframe, o layout das telas Home e Login do app Hooked Dates;
• Entender como montar o layout do Spotify, por meio do wireframe;
• Preparar, com a ajuda do wireframe, o layout da tela Player do aplicativo Spotify.
• Entender a aplicação de componentes e o Style Guide dentro do ambiente de um app.

Aula 8 – Protótipo de alta fidelidade

• Entender o que é um projeto de prototipagem de alta fidelidade;
• Aprender a diferença entre os recursos transition, overlay, auto-animate e comando por voz;
• Criar interações e transições entre as pranchetas;
• Compreender as interações do app Spotify;
• Criar as interações e as transições entre as telas do Spotify;
• Prototipar o layout entre as telas do aplicativo Spotify.

Aula 9 – Publicando o protótipo

• Aprender sobre os tipos de publicações: 
  • Criar um link de acesso para a revisão do protótipo; 
  • Utilizar o link e realizar testes nas telas do aplicativo Spotify; 
  • Aprender a fazer comentários e a utilizar o recurso de apontar locais específicos.
• Aprender sobre as formas de publicações e acessar os arquivos publicados;
• Aprender a acessar protótipos de diferentes plataformas.

Aula 10 – Design Thinking e MVP

• Compreender o que é a ferramenta Design Thinking;
• Entender o conceito do pensamento Lean.
• Aprender o que é MVP.