UI Design para Web e Mobile

Entenda o papel do UI designer, a relação entre UX e UI e a diferença de aplicação entre plataformas distintas. Conheça as ferramentas e softwares de Design Gráfico usados pelos UI designers.

• Design de interface e a função de um UI Designer
• Relação entre UX e UI
• Produtos digitais e processo de design de interface
• Design de telas
• As ferramentas usadas em UI Design
• Figma: conceitos básicos

Atividade: Pesquisar e criar um moodboard de designs de alta qualidade. Recriar uma página básica no Figma.

Aprenda noções básicas de organização espacial e navegação, como combinar cores, tipografia, imagens de forma racional para que os usuários possam digitalizar, navegar e interagir com sites. Entenda como funciona o relacionamento com a marca e a identidade visual.

• Design gráfico e cores
• Design tipográfico
• Imagens, iconografia e grade
• O contexto do design de interface, marca e identidade visual
• Formatos impresso e digital
• O projeto do curso: Pix e SumUp

Atividade: Pesquisa para benchmark, esboço e wireframe para e-mail e landing page do seu projeto. Criar uma paleta de cores e tipografia básica para o seu projeto no Figma.

Compreenda a psicologia do usuário e os princípios de UI design, como aplicá-los para navegação e interação dos usuários pelas interfaces. Aprenda a criar o design das interfaces de e-mail marketing e de landing page, além de como criar protótipos de baixa fidelidade para soluções digitais.

• Psicologia e Design Emocional
• Percepção e design de interface: arquitetura da informação, navegação e wayfinding
• Interface e usabilidade
• Interfaces da web: fundamentos do marketing por e-mail
• Interfaces da web: fundamentos da página de destino
• Rabiscoframes e protótipos de baixa fidelidade: usando técnicas de sketching para criar wireframes

Atividade: Fazer pesquisa de referências e análise do design de interfaces web. Entenda o problema e explore alternativas com esboços, depois crie wireframes de baixa fidelidade para e-mail e landing page.

Explore os conceitos de organização espacial (incluindo espaço em branco), estética e composição. Se aprofunde no processo de combinação de núcleos, tipografia e imagens, e aprender várias dicas de design gráfico e como Pixel Perfect Design.

• Estética, artes gráficas, referências e moodboards
• Dominando cor, tipografia, imagens e ícones: s básicos do Photoshop e do Illustrator
• Layouts e organização espacial: técnicas de layout, dicas e truques gráficos
• Dicas para construir com foco em Pixel Perfect Design

Atividade: Criar moodboards no Pinterest e key visuals com base neles, além de novo e-mail marketing e landing page. Avalie a sua evolução criativa em relação aos módulos anteriores.

Conheça os formatos comuns e funcionais para criar boas interfaces, regras do design e a lógica por trás da reorganização dos elementos visuais.

• Ergonomia e acessibilidade em UI
• UI e as 10 heurísticas de Nielsen
• Padrões de interface básicos
• Design Atômico
• Padrões de interface avançados
• Biblioteca de componentes

Atividade: Criar design de alta fidelidade para telas principais do projeto (website), com wireframes completos e evolução para o site inteiro.

Entenda a lógica para trás da reorganização dos elementos visuais e como adaptar as informações para diferentes formatos. Tenha visão dos elementos estruturais dos projetos e como dividir em pedaços menores como componentes, tokens de design e modelos.

• Fundamentos de design responsivo e adaptativo
• Projetando para múltiplas telas e resoluções
• Definindo pontos de interrupção
• Grades fluidas x rígidas
• Frameworks Wordpress, Bootstrap e UI
• Fundamentos de design para celular (iOS e Android)
• Definição de guias de estilo
• Criação do kit UI

Atividade: Criar wireframes para um site completo. Crie um site completo para Pix com diferentes breakpoints.

Tenha uma visão completa e estruturada do projeto para separar em entregas menores. Aprenda a tornar os seus designs de interface mais atrativos com micro interações e preparar designs para fazer testes com usuário. Entenda os aspectos detalhados de design e desenvolvimento para realizar uma comunicação assertiva com as equipes de tecnologia e descubra como apresentar os seus trabalhos e estruturar o seu portfólio.

• Prototipação: técnicas e ferramentas
• Diferentes níveis de fidelidade
• Micro interações
• Prototipação no Figma
• Como apresentar seu trabalho e montar seu portfólio. Apresentações, mock ups e storytelling
• Front-end e web semântica
• HTML e CSS
• Designers e times de engenharia: design em tempos ágeis
• Entrega de design

Atividade: Utilizar o conhecimento adquirido ao longo dos módulos para finalizar o seu projeto autoral. Criar protótipos interativos com micro interações, montar uma apresentação para o seu projeto e organizar o caso do seu portfólio. Criar documento de transferência do seu projeto para a equipe de desenvolvedores.

Claro! O curso foi desenvolvido para que você consiga trabalhar desde o primeiro rascunho até a entrega final para o desenvolvedor. A cada aula, você vai se aprofundar nas inúmeras possibilidades de design de interface e exercitar o conhecimento adquirido, com feedback dos tutores.

As atividades são realizadas em diversas ferramentas mas a principal é o Figma, que você pode fazer um cadastro online e acessar pelo desktop mesmo. Também utilizaremos Marvel App, Invision App, Miro e Zipper, todos com cadastro e acesso gratuitos online. Se você tiver acesso ao Adobe Photoshop e Illustrator, será ótimo, mas esses itens não são obrigatórios para acompanhar as aulas.

O curso foi desenvolvido pensando na sua evolução individual. Por isso, temos uma equipe de tutores para corrigir e dar feedbacks sobre as atividades realizadas por cada aluno. Você também pode conversar com outros alunos e fazer qualquer pergunta sobre o conteúdo das aulas para o tutor no Fórum.

Os módulos são liberados semanalmente, conforme a evolução do aluno no curso. Isso significa que você deve assistir os módulos em ordem e realizar as atividades propostas pelo professor antes de passar para o módulo seguinte.

Este curso tem mais de 20 horas de aula mas o tempo de conclusão vai depender de você. As aulas estão disponíveis na plataforma para acessar quando e de onde quiser, avançando no seu ritmo, sem atrapalhar o trabalho ou vida pessoal. Se você estiver inseguro, pode separar um tempo para assistir novamente ou tirar dúvidas com o professor antes de prosseguir. Além disso, as aulas ficam disponíveis por 2 anos a partir da matrícula do curso. Assim, você pode até atualizar o conhecimento e relembrar algumas coisas daqui a alguns meses.

Sugerimos que você complete um módulo por semana, o que dá um pouco mais de duas horas entre assistir as aulas e realizar as atividades. Mas, não se preocupe, este prazo é apenas uma sugestão, ok? Você pode avançar no seu próprio ritmo, fazer pausas para absorver o conteúdo e assistir de novo, quantas vezes quiser, antes de prosseguir.

Dentro da plataforma, você terá um tutor que irá comentar as suas tarefas e dar dicas. Você terá a chance de aprender mais com a experiência dos nossos professores – os líderes do mercado da sua área, e aproveitar seu conhecimento e lifehacks.