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.40 (157 reviews)
Udemy
platform
Português
language
Design Tools
category
instructor
1,173
students
6 hours
content
Sep 2018
last update
$19.99
regular price

What you will 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

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?

Content

Como aproveitar o máximo desse curso

Seja bem-vindo
O que você vai aprender
Muito mais conteúdo além desse curso...
Downloads

Aquecimento com Netflix

Primeiro exercício
Começando pelo papel
Preparando teste com usuário
Primeiro contato em Figma (Invision Studio vem logo em seguida)
Primeiro contato com Ferramenta de UI

Overview da ferramenta

Interface do Invision Studio
Canvas, Artboards e Dispositivos
Barra de Ferramentas
Grid em Colunas
Grid de 8 pontos
Alinhamento com Option/Alt e Box Model

Bônus - Recursos extras

Leis da Psicologia do UX Design

Manipulando elementos

Alinhamento
Largura, Altura, Rotação
Responsividade
Cor de preenchimento
Bordas, Transparência, Sombras e Blur
Tipografia Typeface, Peso, Tamanho e Cor
Alinhamento, Espaçamento e outras opções

Organização do trabalho

Organização do trabalho
Operações entre elementos e máscaras
Ajustes de Responsividade

Prototipação Netflix

Prototipação de interações
Compartilhando e testando o protótipo

Styleguides

Introdução aos Guias de Estilo
Introdução ao exemplo para Guia de Estilos
Escolhendo as cores
Variações de cores primárias e secundárias
Cores do Documento
Cores em Símbolos
Escolhendo e instalando a font
Criando cabeçalhos e parágrafos principais
Variações de texto dark, light, action
Checando o contraste
Estilos de Textos
Criando o primeiro botão
Heranças de propriedades (override)
Customizando botões primários, secundários, mobile
Customizando botões primários, secundários, desktop
Comparação de simbolos e componentes entre ferramentas

Landing page - Booking.com

Mobile First (importando dependências)
Ajustando Grids
Mobile - Textos e Botões
Desktop - Textos e Botões
Contraste Texto vs Imagem
Alterando o Botão master para replicar em todos elementos

Animações

Indicação de telas animáveis
Indicação de elementos animáveis
Controle de tempo de animação
Exemplo de animação 1
Exemplo de animação 2

Rabiscoframes (Bônus UX&DT)

UX&DT - Rabiscos - Impressão para desenhar
UX&DT - Rabiscos Texto e conteúdo
UX&DT - Rabiscos - Elementos de tela
UX&DT - Rabiscos - Outros componentes
UX&DT - Rabiscos - Fluxo de Usuário
UX&DT - Rabiscos - Anotações
UX&DT - Rabiscos - Ícones

Grids (Bônus DI Completo)

Introdução
Grid Bootstrap
Grid 8 pontos
Grids no Frontend

Usabilidade (Bônus UX&DT)

Noção geral
Informações em pouca quantidade
Hierarquia funcional
Simplificação de Formulários
Advinhar intenções, Estados, Prevenção de Erros
O tempo do usuário
Microinterações
Personalidade, Microtextos e Linguagem

Checklist de UX (Bônus UX&DT)

Introdução
Simplicidade
Acionabilidade
Inteligência
Agradabilidade
Relevância
Conclusão

Conclusão

Mais dicas e até breve!

Screenshots

Invision Studio: do básico às telas responsivas e animações - Screenshot_01Invision Studio: do básico às telas responsivas e animações - Screenshot_02Invision Studio: do básico às telas responsivas e animações - Screenshot_03Invision Studio: do básico às telas responsivas e animações - Screenshot_04

Reviews

Danielle
April 5, 2022
Achei o curso maravilhoso com conteúdo abrangente. Gostei do modo que o Leandro conduziu o curso, de uma maneira objetiva e clara.
Valdeir
October 9, 2020
Excelente a didática e o conhecimento do professor em relação a ferramenta. Antes de fazer o curso, eu achava que era uma ferramenta muito difícil de mexer, mas com poucas aulas já percebi a facilidade e praticidade desta ferramenta. Estou amando o curso.
Hélio
June 5, 2020
Sim, o curso é maravilhoso, aprendi muito e estou ampliando meus conhecimentos. Inclusive comprei os demais cursos dele que falam da mesma temática.
Eloah
January 12, 2020
Curso excelente! Apresentou a ferramenta de maneira didática. Deixo apenas a sugestão para um aprofundamento na parte de animação!
Elro
December 20, 2019
Sim, estou muito satisfeito com o curso até o momento. É o primeiro que faço na plataforma. Tinha uma certa resistência em iniciar cursos online (é o meu primeiro de todos). E, tinha o hábito de fazer cursos presenciais. Com experiência até o momento, decidi que comprarei mais cursos.
Makaya
October 26, 2019
Super recomendo para uma quem deseja uma introdução rápida e completa da ferramenta. Mas tem que continuar estudando. As dicas de UX foram top demais.
Vinícius
July 15, 2019
O curso é ótimo, o professor Leandro transmite seu conhecimento com uma ótima didática e fácil entendimento. Por enquanto estou na metade do curso, mas tenho certeza que aprenderei muito até o final de todo o conteúdo.
Jakeline
May 19, 2019
Este curso me fez ter uma visão ampla das necessidades de recursos que uma aplicação de alta fidelidade têm. Consegui aprender como utilizar o Invision e boas práticas para realizar protótipos. Excelente o curso, parabéns prof.º!
Dalbiran
May 16, 2019
Ótimo curso!!! InVision Studio me surpreendeu, apesar dos bugs da versão beta, e o leandro consegue passar tudo de maneira muito clara!! Show dms ??????
Patricia
February 13, 2019
O passo a passo está sendo bacana, mas existem aulas inteiras que são só para encher conteúdo. Compreendo que isso seja bacana como divulgação do trabalho, e sei que são técnicas necessárias, mas para um curso final, se torna bem cansativo.
Denys
December 26, 2018
Ótimo curso, apesar de ser sobre uma determinada ferramenta, mostra vários conceitos valiosos de design de interface, que podem ser aplicados a quaisquer softwares.
J.Valderio
November 7, 2018
Excelente curso que abrange mais que apenas o uso desta ferramenta extraordinária que é o Invision Studio. O instrutor transmite conceitos e práticas fundamentais para um bom projeto de UX/UI. Ótimo curso para quem quer aprender do básico ao avançado.

Charts

Price

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

Rating

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

Enrollment distribution

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

Related Topics

1902956
udemy ID
9/9/2018
course created date
11/22/2019
course indexed date
Bot
course submited by