UI Design: Da teoria a prática com foco em projetos Web

Name: UI Design: Da teoria a prática com foco em projetos Web
Rating: 4.4 (19 reviews)

Aprenda os princípios fundamentais de UI, como trabalhar com cores, tipografia, grid, hierarquia visual e muito mais.

Created byUI Lab

Last updated 4/2019

Portuguese

Portuguese [Auto],

What you'll learn

Você aprenderá os fundamentos de UI Design e princípios fundamentais da área.
Várias dicas e técnicas para trabalhar com cores, tipografia, hierarquia visual, grid e outros elementos.
Como organizar e enviar um arquivo para o desenvolvedor.

Course content

4 sections • 32 lectures • 3h 13m total length

O que é UI Design?1:23
Nessa aula veremos o que é fundalmentalmente User Interface Design.
Qual a diferença entre UI e UX3:01
Essa é uma dúvida que recebemos frequentemente. Será que UI e UX são a mesma coisa? Nessa aula você vai ver as diferenças entre as duas mas de que forma elas se complementam.
Ferramentas essenciais para um UI Designer7:16
Na UI Lab sempre falamos que ferramenta não vai determinar se você é um bom UI ou não. Você pode usar qualquer uma e vai conseguir bons resultados. Mas nessa aula veremos algumas que são mais indicadas para esse tipo de trabalho.
Princípios fundamentais de UI Design19:18
Princípios existem desde que o mundo é mundo. No Design não é diferente. Eles são essenciais para criarmos interfaces melhores.

Introdução Dando o ponta pé inicial no projeto0:24
Nesse módulos veremos todos os passos que fazemos na UI Lab para começar um projeto de UI.
Escopo do projeto3:24
Escopo é super importante para delimitar o que vai e o que não vai ser feito dentro de uma interface.
User Flows4:08
Nessa aula veremos a importância de usarmos user flows para planificar todos os caminhos possíveis que o usuário pode fazer dentro de uma interface.
Moodboard3:52
A prática de criar moodboards é super importante para deixar claro quais serão os passos em relação a estilo e estrutra que seguiremos no desenvolvimento da interface.
Exercício: criando um Moodboard6:19
Wireframe4:14
Nesta aula veremos dois tipos de wireframe e qual sua importância dentro de um projeto de UI.
Exercício Wireframe1:58

Introdução Visual Design1:29
Agora as coisas começam a ficar mais divertidas! Visual Design é onde pegamos forte na parte estética da nossa interface.
Style Guide2:02
Nessa aula veremos o que é Style Guide, qual sua importância e que tipo de elementos encontraremos nele.
Cores10:01
Na nossa opinião, trabalhar com cores é uma das coisas mais difíceis em UI.
Nessa aula veremos como montar nossa paleta de cores, variações claro e escuro e outras dicas essenciais.
Exercício: Criando variação clara e escura das cores9:34
Tipografia24:46
Além das cores, outra parte difícil de trabalhar em UI são as tipografias. Nessa aula veremos várias dicas de como fazer o melhor trabalho possível com os tipos. Veremos também sobre regra de 8pt e modular scale.
Exercício: definindo os tamanhos das tipografias5:13
Botões11:06
Botões são os elementos mais comuns dentro de uma UI. Nessa aula veremos os tipos de botões mais frequentes, seus estados e tamanhos.
Exercício: criando botões e suas variações6:15
Campos de Texto2:58
Veremos nessa aula todos os estados que um campo de texto possui. É extremamente essencial prevê-los para garantir uma boa implementação.
Marca0:40
Uma aula bem curta mostrando como podemos documentar a marca dentro do Style Guide.
10 dicas do que fazer ou não com formulários8:39
Dicas super práticas para você levar em consideração na hora que for desenvolver seus formulários.
Grid7:28
Nessa aula veremos como utilizar Grid de 8pt e Grid Bootstrap.
Hierarquia Visual12:50
Uma aula abordando o que é hierarquia visual e qual sua importância. Além disso, veremos formas de adicionar hierarquia visual por meio de exemplos.
Contraste5:32
Nessa aula veremos formas de adicionar contraste nas suas interfaces. Fechado e aberto, flat e texturizado, etc.
White Space10:59
Uma das coisas mais odiadas pelos nossos clientes mas que são essenciais para criar interfaces que consigam dar fornecer uma boa leitura e foco em partes específicas.

Intro preparando o projeto para a entrega1:02
Parte importante e que não devemos negligenciar: organizar tudo para entregar para o dev.
Organização das layers e pastas5:08
Nessa aula veremos como organizar hierarquicamente os arquivos do nosso projeto.
Exportando os assets corretamente4:33
Exportar os assets corretamente vai facilitar a vida de quem for desenvolver o projeto. Nessa aula veremos algumas dicas de como fazer isso corretamente.
Sobre a ferramenta Zeplin2:57
Zeplin é uma mão na roda para entregar seus arquivos!
Sobre font icon3:33
Um arquivo que muda a vida de todo mundo!
Encerramento1:57

Requirements

Dominar basicamente algum ferramenta de edição gráfica (sugestões: Sketch App, Adobe Xd, Figma, Photoshop)

Description

Sobre o curso: Este curso foi desenvolvido para profissionais interessados em começar sua carreira em User Interface Design. Todo o conteúdo é explicado de uma maneira fácil, objetiva e com exemplos práticos.

Você verá com detalhes várias técnicas para trabalhar com tipografia, cores, grid, hierarquia visual, style guide e muito mais.

ATENÇÃO: O curso não é indicado para quem procura só exercícios práticos.

Sobre o instrutor: Co-fundador da UI Lab e do Choco La Design. Graduado em Design pela Faculdade SATC. Possui 9 anos de experiência projetando interfaces digitais. Já atuou como Senior Product Designer na empresa americana Homeyou, como Visual Designer na Organizze e como UI Designer Senior na Philips Clinical Informatics.

Você aprenderá o essencial para começar com o pé direito em UI Design e desenvolver bons trabalhos.

Who this course is for:

Designers Gráfico
Publicitários
Desenvolvedores Front-End
Marketing

UI Design: Da teoria a prática com foco em projetos Web

What you'll learn

Explore related topics

Course content

Módulo 14 lectures • 31min

Módulo 27 lectures • 24min

Módulo 315 lectures • 2hr

Módulo 46 lectures • 19min

Requirements

Description

Who this course is for: