Udemy

Platform

Português

Language

Design Tools

Category

Sketch: UI Design do básico aos protótipos responsivos

Aprenda Design de Interfaces e protótipos de sites responsivos e apps com Sketch do ABSOLUTO ZERO até Netflix e Booking

4.45 (254 reviews)

Students

6 hours

Content

Nov 2018

Last Update
Regular Price


What you will learn

Utilizar uma das mais modernas ferramentas de UI de 2018 para desenhar e prototipar interfaces de sites e aplicativos

Criar interfaces responsivas que se adaptam a qualquer dispositivo (mobile ou desktop)

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 Sketch mais fácil de aprender que você vai encontrar na Udemy em português. Você vai aprender como usar o Sketch 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 Sketch 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,

  • 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 Sketch 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 SKETCH!

***

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?


Screenshots

Sketch: UI Design do básico aos protótipos responsivos
Sketch: UI Design do básico aos protótipos responsivos
Sketch: UI Design do básico aos protótipos responsivos
Sketch: UI Design do básico aos protótipos responsivos

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 com Ferramenta de UI

Primeiro contato em Figma (Sketch vem logo em seguida)

Overview da ferramenta

Interface do Sketch

(new nov/18) Nova versão do Sketch 52

(new nov/18) Versão 52 na prática - veja as novidades

Canvas, Artboards e Dispositivos

Barra de Ferramentas

Grid em Colunas

Box Model e Grid de 8 pontos

Alinhamento com Option/Alt

Bônus - Recursos extras

UI Kits e Recursos grátis

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

Estilo de camada

Estilo de camada não é só para cores

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

Variações de formatação

Criando o primeiro botão

Heranças de propriedades (override)

Símbolos para textos em botões (override)

Recriando um único botão totalmente customizavel

Documentando o Guia de Estilos para Botões

Landing page - Booking.com

Mobile First (ajustando mockup)

Desktop - Importanto logo, imagens e ajustando grids

Desktop - Incluindo textos e botões

Desktop - Contraste Texto vs Imagem

Mobile - Incluindo textos e botões

Mobile - Criando um botão otimizando mobile

Mobile - Incluindo as imagens e ajustando contraste

Organizando o documento

Alterando o styleguide

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!


Reviews

S
Sergio16 July 2020

O curso está muito bem organizado, o formador explica de forma clara e fácil. Eu sou programador mas gostava de estar a desenhar produtos e com este curso estou a conseguir. Já comprei também o curso completo de UX, é o que vou ver a seguir a este.

C
Clarissa5 April 2020

Curso extremamente didático e, apesar de já estar um pouco familiarizada com a ferramenta, me agregou novos conhecimentos. Muito obrigada, Leandro!

D
Danielle19 March 2020

Quando comprei achei que fosse o curso completo, ele eh mto bom, mas pelas coisas que o professor falou entendi que ainda tem um curso mais completo e isso me deixou desapontada.

P
Paula23 February 2020

estou adorando e trabalhando no exemplo do professor e em outro para meu projeto Aulas dinâmicas e não extensa, o professo tem conhecimento e muito didático

M
Marcus13 February 2020

Adorei o professor, a didática e os exemplos práticos! Comprei mais dois cursos dele. Vamos em frente.

G
Gabriel20 January 2020

Tudo o que é necessário saber para montar as interfaces utilizando o Sketch está no curso. Além da didática do Leandro ser ótima, temos projetos para praticar. Recomendo!

R
Raquel16 January 2020

Até então, está falando e fazendo tudo muito rápido. Não dá pra acompanhar sem pausar e voltar algumas vezes.

L
Lara16 August 2019

Bastante didático e com uma linguagem super tranquila. Cumpriu o que foi proposto com sucesso, fiquei bem satisfeita.

A
Atlas18 June 2019

Ótimo curso! Me ajudou a partir do zero e conseguir criar telas no meu trabalho em poucos dias. Recomendo!

R
Rodrigo17 May 2019

Excelente curso e principalmente a didática do Leandro, fala com propriedade sobre o assunto! Valeu Leandro! Abraço!

N
Nicole5 May 2019

Excelente! Exercícios muito legais desenvolvido pelo Leandro, que possuí ótima didática! Sair do básico para protótipos é muito divertido e fluido com esse curso. Estou gostando muito e super indico!

J
Juliana3 May 2019

Curso super completo, didática impecável do Leandro, que é super generoso em ensinar não só a ferramenta, mas também boas práticas de UI enquanto guia os exercícios. Super satisfeita com o curso! Parabéns Leandro!!!

R
Reinaldo24 April 2019

O Leandro é um excelente professor, tem o dom de replicar conhecimento. Os ensinamentos vão direto ao ponto e sem enrolação. O curso me ensinou exatamente o que eu estava buscando aprender.

M
Mayara13 April 2019

Achei legal partir do protótipo e do teste ainda na versão do rabiscoframe. As explicações das ferramentas são bem detalhadas.

R
Renato3 April 2019

O curso me ajudou muito a passar por uma transição de ferramentas de de bonus ainda tive uma revisão super atualizada sobre processo de UX e como melhorar minha eficiência no dia dia


1902952

Udemy ID

9/9/2018

Course created date

11/22/2019

Course Indexed date
Bot
Course Submitted by