Invision Studio: do básico às telas responsivas e animações
4.6 (102 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
884 students enrolled

Invision Studio: do básico às telas responsivas e animações

Crie interfaces e protótipos com animação em sites responsivos e apps com Invision Studio do ABSOLUTO ZERO (UI Design)
4.6 (102 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
884 students enrolled
Created by Leandro Rezende
Last updated 9/2018
Portuguese
Portuguese [Auto-generated]
Current price: $27.99 Original price: $39.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 6 hours on-demand video
  • 6 articles
  • 3 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Utilizar uma das mais modernas ferramentas de UI de 2018 para desenhar, prototipar interfaces de sites e aplicativos
  • Criar interfaces responsivas que se adaptam a qualquer dispositivo (mobile ou desktop)
  • Animar microinterações em transições de estado das suas interfaces
  • Criar UI de aplicativos e sites reais como Netflix e Booking
  • Criar protótipos testar suas escolhas de design e coletar feedbacks.
  • Interagir com desenvolvedores passando as informações de design (alinhamento, espaçamento, tamanho, arquivos de imagens, etc)
  • Organizar seu trabalho profissionalmente
Requirements
  • Você precisará solicitar acesso à versão beta para baixar o Invision Studio. A previsão para liberação da versão final é ainda em 2018.
  • Caso o Invision já tenha sido oficialmente lançado, poderá baixar no site. Ainda não há informações sobre o preço, mas há rumores que será grátis.
  • Você precisará utilizar um MacOS. Invision Studio não funciona em Linux ou Windows, por enquanto, mas está prometido para Windows também.
Description

** Criado pelo autor do curso mais vendido de UX da Udemy em português, no ano de 2018 (com mais de 15 mil alunos). **

Quer iniciar sua carreira como Designer de Interfaces? De repente migrar do Design Gráfico para o UX/UI Digital?

Esse é o curso de INVISION STUDIO mais fácil de aprender que você vai encontrar na Udemy em português. Você vai aprender como usar o INVISION STUDIO para sair do absoluto ZERO ao nível PROFISSIONAL organizando seu trabalho, seu guia de estilos e trabalhando em equipe com outros desenvolvedores.

Durante o treinamento, criaremos projetos reais para você aplicar nos seu dia a dia. 

Assista nossa aula de apresentação e conheça tudo que você vai aprender.

O que torna esse curso diferente? Qual é a mágica?

Nesse curso nada que você aprender será teoria por teoria.

Cada desenho de retângulo é para criar um elemento na tela, cada uso de ferramenta de alinhamento é para posicionar um componente de um aplicativo real.

Tudo é ensinado na prática para não ficar chato e você saber exatamente quando utilizar cada recurso no seu dia-a-dia.

***

Este curso de INVISION STUDIO vai te ensinar na prática a criar interfaces para aplicativos e sites responsivos com uma das melhores e mais modernas ferramentas de UI de 2018.

Você aprenderá:

  • Criar protótipos em papel,

  • desenhar telas de apps e sites,

  • criar interfaces responsivas que se adaptam a qualquer dispositivo,

  • organizar seu projeto em guias de estilos,

  • prototipar interatividade e transições,

  • exportar protótipos para testes reais e troca de informações com desenvolvedores (handoff).

  • EXEMPLO NETFLIX


  • Transformar seus protótipos em papel em protótipos de alta fidelidade,

  • Criar protótipos interativos para seus usuários testarem ou mostrar para seus stakeholders,

  • Utilizar grids para organizar os elementos na tela criando interfaces responsivas,

  • Utilizar as constraints de alinhamento para que seu protótipo se adapte a outros dispositivos sem "quebrar",

  • Organizar seu trabalho de forma profissional como um verdadeiro cartão de visitas,

  • ANIMAÇÕES NA NETFLIX


  • Transições animadas para você chamar a atenção do usuário em microinterações (DIFERENCIAL QUE SOMENTE O INVISION STUDIO TEM).

  • EXEMPLO BOOKING

  • Criar guias de estilos com elementos reaproveitáveis para acelerar seu processo de construção,

E receberá de bônus:

  • Minicurso de rabiscoframes para criar protótipos em papel,

  • Minicurso de Usabilidade

  • Checklist de UX para verificar se seu design tem potencial para gerar boas experiências


***

Depoimentos dos alunos do curso de UX (4.6 de 5 estrelas)

Todos depoimentos estão disponíveis na página do curso de UX.

"Curso sensacional. Dinâmico, bem feito, instrutor dominando completamente o conteúdo. Tudo é de uma qualidade excelente. Um dos melhores cursos (senão o melhor) que já adquiri. Parabéns!!!" - Rafael Patrício

"Empresas vieram falar  comigo no linkedin me requisitando para entrevistas para trabalhar exclusivamente com UX. Sem experiência de mercado, e as empresas me buscam pelo que aprendi no curso" - Nayra

"O curso foi maravilhoso. Eu tentava vários estágios e não conseguia. Depois do curso, quando mostrei o que aprendi e os métodos utilizados na prática, consegui o emprego! Em menos de 1 semana após terminar o curso eu já estava estagiando!" - Alberto

"Logo nos primeiros exercícios passei a ter uma visão completamente diferente da razão das minhas dificuldades. Com o passar do curso e aplicando as técnicas, criei um produto específico para um público bem definido e passei a converter 80% mais clientes!" - André Carvalho

"Muito bom, pois além de trazer toda a base conceitual necessária, também apresenta casos reais de utilização do aprendizado e dicas de como aplicar os conhecimentos adquiridos!" - José Leonardo

"Nao criei expectativas com o curso porque não o conhecia, porém ultrapassam qualquer pré-julgamento que eu teria feito a respeito. Estou aprendendo muito!" - Beatriz Rimanski

***

Qual ferramenta escolher? Se o INVISION STUDIO não for para você, você tem outras opções que criei na Udemy!

Sketch

Para usuários MacOS que buscam criar guias de estilos para projetos escaláveis. $99/ano.

Adobe XD

Para usuários Windows e MacOS. Sua versão grátis permite criar 1 projeto. A partir daí são $119/ano.

Figma

Uma das mais promissoras ferramentas do mercado, que permite trabalhar colaborativamente em tempo real com outras pessoas. Tem uma versão grátis que permite criar até 3 projetos. A partir daí são $144/ano.

Invision Studio

A ferramenta que chegou em 2018 fazendo muito barulho no meio do design e que está em versão beta com lançamento em breve. É a primeira do gênero com avançados recursos de animações para microinterações. Você pode sair na frente e dominar a ferramenta antes mesmo dela ser lançada. Perde apenas para ferramenta mais especialistas em microinterações como o Framer X.

Esse formato permite que você escolha sua ferramenta e trabalhe com ela vendo as diferenças sempre que tiver curiosidade. Cada aula de uma ferramenta possui sua correspondente na outra para fins de comparação.

***

Dica

Caso você queira ir além, pode também adquirir o curso completo de Design de Interfaces, também de minha autoria e disponível aqui na Udemy! Nele você irá além das ferramentas (o curso das 4 ferramentas citadas acima estão inclusas) e aprenderá:

  • Aprenda a escolher, combinar Cores e dominar seus atributos (matiz, saturação, brilho, contraste, etc),

  • Saiba como definir Tipografia e os padrões tipográficos com Modular Scale,

  • Crie Botões que engajam e ajudam o usuário a entender as principais funções da interface,

  • Entenda como projetar Formulários fáceis de preencher,

  • Estabelecer uma Hierarquia Visual na página que ajude seu usuário a fazer o que precisa - usando Balanceamento, Ritmo, Harmonia, Dominância, Alinhamento e Proximidade,

  • Organizar os elementos em Grids,

  • Trabalhar Responsividade e projetar interfaces Mobile first,

  • Criar Guias de Estilos para projetos escaláveis e com componentes reaproveitáveis (building blocks e atomic design)

  • E muito mais!

ATENÇÃO: OS CONTEÚDOS ACIMA ESTÃO DISPONÍVEIS SOMENTE NO CURSO COMPLETO DE DESIGN DE INTERFACES. ESSE CURSO QUE VOCÊ ESTÁ VISUALIZANDO É SOMENTE SOBRE A FERRAMENTA INVISION STUDIO!

***

Satisfação garantida ou seu dinheiro de volta

"E se eu não gostar do curso?” Nós devolvemos seu dinheiro! Essa é mais uma garantia de qualidade e um incentivo a mais para você começar já! Após a compra você terá 30 dias para testar o produto, e se não gostar, basta solicitar o reembolso.

Estou certo que será um dos melhores investimentos que você fará em 2018 com grandes chances de trazer muito mais conteúdo e por um valor muito menor que qualquer curso online, presencial ou acadêmico que você já tenha feito na vida no Brasil ou Exterior.

Junte-se a mais de 15 mil alunos que já fizeram e aprovaram meu outro curso!

E aí, o que está esperando? Vamos nessa?

Who this course is for:
  • Qualquer profissional que trabalha com negócios digitais e quer aprender criar interfaces ou pelo menos wireframes ou protótipos.
  • Designer Gráfico que quer migrar (até do zero) para UX/UI digital
  • Iniciantes no mercado que querem criar Produtos Digitais (apps e sites)
  • Desenvolvedores Frontend que queiram ter noções de prototipação para ajustar arquivos Invision Studio.
  • Designers de produtos
  • Web Designers
  • UX Designers
  • UI Designers
Course content
Expand all 82 lectures 06:12:40
+ Como aproveitar o máximo desse curso
4 lectures 06:10
Seja bem-vindo
00:36
Muito mais conteúdo além desse curso...
00:58
Downloads
00:39
+ Aquecimento com Netflix
5 lectures 16:50
Primeiro exercício
00:28
É sempre bom começar com o lápis e papel antes de ir para as telinhas. O que acha de criar seu primeiro protótipo?
Agora é a sua vez: Protótipo Netflix
1 question
Primeiro contato em Figma (Invision Studio vem logo em seguida)
00:36
Vamos sentir na pele como é operar uma Ferramenta de UI Design? Vamos começar simples. Apenas criando o mesmo que criamos no papel :D
Crie seu Protótipo Netflix no Figma
1 question
+ Overview da ferramenta
6 lectures 35:01
Nessa tarefa você vai dar seus primeiros passos com a ferramenta! Você precisará fazer download, instalar e criar três telas utilizando elementos de formas simples: imagens, retângulos, círculos, textos. As telas serão: SPLASH SCREEN, LOGIN e PRINCIPAL.
Crie o wireframe de baixa fidelidade
2 questions
Grid de 8 pontos
06:33
Alinhamento com Option/Alt e Box Model
07:09
+ Bônus - Recursos extras
1 lecture 00:15
Leis da Psicologia do UX Design
00:15
+ Manipulando elementos
7 lectures 01:01:04
Alinhamento
04:10
Utilize o arquivo da última tarefa e siga ajustando os alinhamentos em grids e com o inspecionador de elementos conforme a última aula.
Alinhando os elementos nos grids
1 question
Largura, Altura, Rotação
05:57
Cor de preenchimento
12:42
Bordas, Transparência, Sombras e Blur
14:30
Tipografia Typeface, Peso, Tamanho e Cor
05:20
Alinhamento, Espaçamento e outras opções
11:02
Chegou a hora de pegar o seu wireframe e dar um pouco mais de vida a ele com as ferramentas que você aprendeu na última aula. Vamos lá?
Acabamento do aplicativo
1 question
+ Organização do trabalho
3 lectures 31:08
Organização do trabalho
16:47
Operações entre elementos e máscaras
05:45
Ajustes de Responsividade
08:36
Nessa tarefa você vai organizar o seu trabalho. Ajuste os elementos na camada pensando que você vai sair da empresa e vai deixar o projeto para alguém dar continuidade. Imagine que esse alguém precisará trabalhar com outro dispositivo, então, ajuste também a responsividade como nas aulas! Team work!
Organização e responsividade
1 question
+ Prototipação Netflix
2 lectures 10:30
Compartilhando e testando o protótipo
04:56
Chegou a hora de você criar e compartilhar o seu protótipo para receber feedbacks! Vamos lá! A coisa está ficando legal! :D
Compartilhe seu protótipo
1 question
+ Styleguides
16 lectures 01:20:06
Introdução aos Guias de Estilo
03:41
Introdução ao exemplo para Guia de Estilos
08:01
Variações de cores primárias e secundárias
06:40
Cores do Documento
01:38
Cores em Símbolos
03:54
Agora você vai criar o guia de cores para os seu Guia de Estilos. Você nem precisa demorar muito para escolher as cores, afinal, como é um guia reaproveitável, você poderá trocá-las facilmente no futuro se precisar. Ainda é bom acertar de primeira, apenas não perca mais tempo que o necessário aqui.
Guia de Cores para o Styleguide
1 question
Escolhendo e instalando a font
02:05
Criando cabeçalhos e parágrafos principais
10:42
Variações de texto dark, light, action
02:24
Checando o contraste
02:17
Estilos de Textos
01:18
Agora você vai criar o guia tipográfico para os seu Guia de Estilos. Lembre-se de escolher uma fonte fácil de carregar (webfonts), e ajuste tamanho, cores, espaçamentos e alinhamentos.
Guia tipográfico para o Styleguide
1 question
Criando o primeiro botão
05:01
Heranças de propriedades (override)
08:11
Customizando botões primários, secundários, mobile
11:56
Comparação de simbolos e componentes entre ferramentas
01:32
Agora você vai criar o guia de botões para os seu Guia de Estilos. Crie pelo menos um botão primário e um secundário com estados ativo (mais claro), padrão (cor base) e hover (mouse sobre ele, mais escuro)
Guia de botões para o styleguide
1 question
+ Landing page - Booking.com
6 lectures 29:06
Mobile First (importando dependências)
01:48
Ajustando Grids
02:02
Mobile - Textos e Botões
04:59
Desktop - Textos e Botões
06:03
Contraste Texto vs Imagem
06:02
Alterando o Botão master para replicar em todos elementos
08:12
Chegou a hora de usar seu guia de estilos para criar uma página de aterrissagem para seu aplicativo. Utilize os elementos que criou para ganhar velocidade ao criar a interface. Sempre use elementos reaproveitáveis pois no futuro, você pode querer mudar alguma configuração (tamanho, cor, etc).
Mobile First - Landing page móvel e desktop
2 questions
+ Animações
5 lectures 26:51
Indicação de telas animáveis
03:32
Indicação de elementos animáveis
03:36
Controle de tempo de animação
05:01
Exemplo de animação 1
04:21
Exemplo de animação 2
10:21
Chegou a hora de usar sua criatividade para animar as transições do seu protótipo!
Hora de animar, tá animado?
1 question