Você começará com uma introdução sobre o valor do design na era do cliente. Você vai ver o que é UX e UI, os benefícios da aplicação do design em produtos ou serviços, a evolução, os ROIs do design e cases que mudaram indústrias e mercados inteiros.

• Designing for people: Empatia
• Designing for people: Introdução ao UX
• A importância de UX Design para as empresas
• O mercado de UX no Brasil
• A carreira de UX

Atividades: Escreva um texto sobre os resultados e a aprendizagem durante o exercício de escuta empática.

Entenda o que é Design Thinking e como implementá-lo em projetos. Veja a diferença entre usuários e stakeholders e como mapear seu público de interesse para alcançar os melhores resultados de negócio.

• Estudo de Caso: Carrinho de compras da IDEO
• Introdução ao Design Thinking

Atividades: Escolha um tema que deseje trabalhar ou um dos 3 briefings fornecidos pelo Banco Original.

Depois da fase de pesquisa, explore a matriz que ajuda os designers a visualizarem resultados de pesquisa.

• Personas e Mapa de empatia
• Jornada do usuário
• Needs Statement (Necessidades)
• Geração de ideias
• Definição de problemas
• Definição de oportunidades

Atividades: Crie uma jornada de usuário, um mapa de empatia e gere ideias a partir de problemas, necessidades e oportunidades.

Aprenda sobre a importância das metodologias de UX Research para uma compreensão aprofundada do contexto e das dores do usuário. Veja também as melhores práticas no âmbito do negócio, do produto ou do serviço.

• Planejamento
• Recrutamento
• Execução
• Jornada de usuário
• Blueprint de serviço

Atividade: Planeje pesquisas e público-alvo.

Após a fase de Desk Research, explore as técnicas de User Research e como aplicá-las.

• Planejamento
• Recrutamento
• Execução
• Desk Research
• Benchmark
• Análise SWOT

Atividades: Execute pesquisas planejadas e analise os resultados.

Entenda os usuários de uma forma mais profunda.

• Jornada do usuário
• Blueprint de Serviço
• Quem são os usuários?
• Modelos mentais
• Mapeando os Usuários

Atividades: Faça personas, mapas de empatia, jornadas, needs statement e uma priorização de ideias e oportunidades

Aprenda a projetar diferentes níveis de protótipos, com foco em elementos importantes de usabilidade.

• Usabilidade
• Protótipos
• Fazendo um Protótipo
• Arquitetura da informação
• Definição de MVP

Atividade: Crie protótipos para as ideias geradas.

Explore diferentes maneiras de testar seu conceito e soluções com usuários reais. Aprimore o conteúdo e a comunicação do produto com técnicas de UX Writing.

• Design Interativo
• Testes de usabilidade
• Comunicação
• UX Writing
• Interfaces conversacionais

Atividades: Crie um protótipo com design interativo, gere uma personalidade e defina um padrão de comunicação.

Projeto: Crie seu briefing UX e protótipos para começar a trabalhar no design final da sua interface.

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: Pesquise e crie um moodboard de designs de alta qualidade. Recrie 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: Faça uma pesquisa para benchmark, o esboço e o wireframe para um e-mail e para a landing page do seu projeto. Crie 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 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 wireframe

Atividade: Faça uma pesquisa de referências e análises 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. Aprofunde-se no processo de combinação de cores, tipografia e imagens. Aprenda várias dicas de design gráfico e Pixel Perfect Design.

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

Atividade: Crie mood boards 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: Crie um design de alta fidelidade para telas principais do projeto (website), com wireframes completos e evolução para o site inteiro.

Entenda a lógica 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: Crie wireframes para um site completo e um site completo para Pix com diferentes breakpoints.

Tenha uma visão completa e estruturada do projeto para separá-lo em entregas menores. Aprenda a tornar os seus designs de interface mais atrativos com micro interações e prepare designs para fazer testes com usuários. Entenda os aspectos detalhados de design e do desenvolvimento para realizar uma comunicação assertiva com as equipes de tecnologia. 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: Utilize o conhecimento adquirido ao longo dos módulos para finalizar o seu projeto autoral. Crie protótipos interativos com micro interações, monte uma apresentação para o seu projeto e organize o case do seu portfólio. Crie um documento de transferência do seu projeto para a equipe de desenvolvedores.

Projeto: Crie um projeto final para o curso Full Stack Design

Parte 1: Conceitos de design de interface para um aplicativo da web completo.

Aprenda como a internet funciona na perspectiva do desenvolvedor e como usar o HTML para marcar páginas multiplataforma de acordo com os padrões de mercado.

• Introdução ao mercado
• Ferramentas de desenvolvimento web e como a internet funciona
• Desenvolvimento FrontEnd explicado
• Programação HTML
• Layout e acessibilidade para a web

Atividades: Crie uma página hello, world, uma página de resumo do livro, uma postagem de blog formatada e uma página de tabela financeira.

Use CSS para estilizar e criar grades em layouts de páginas HTML.

• Conceitos de design
• Estilos CSS e elementos de layout
• Imagens e gráficos
• Estilo responsivo
• Organização e desenvolvimento de projeto de página web com HTML e CSS

Atividades: Crie um formulário de registro e um Sistema de Email Marketing.

Planeje, desenvolva e depure landing pages visualmente atraentes e aplicativos funcionais com HTML, CSS, Bootstrap e Figma.

Atividades: Crie landing pages baseadas em Figma, aplicativos web responsivos e um site completo com Bootstrap.

Codifique em Javascript e combine HTML no estilo CSS com aplicativos Javascript funcionais.

• Introdução às funções Javascript
• Desenvolvimento de aplicações web Javascript
• Desenvolvimento de soluções web completas com JavaScript, HTML e CSS

Atividades: Melhore o projeto de uma tabela financeira, um sistema de e-mail marketing, uma postagem no blog, uma página de destino e um registro de formulário com Javascript.

Aprenda a trabalhar com Flex box e Boostrap enquanto aprofunda suas habilidades em JQuery e JavaScript. Aprenda também a trabalhar com outras estruturas Javascript, como Node.js, React.js, Next.js e Vue.js.

• Trabalhando com Frameworks e Infraestrutura
• Trabalho com Bootstrap e JQuery
• Desenvolvimento de página responsiva com Flex Box, CSS e SASS
• Objetos e funções JavaScript
• Programação JavaScript avançada

Atividades: Crie uma calculadora Javascript e um player de vídeo JQuery.

Integre API Front-end e AJAX. Veja como realizar o controle de versão com o Github e implementar APIs em seus aplicativos.

• Integrações de API e AJAX
• Controle de versão e colaboração em equipe
• Implantação e SEO
• Padrões de análise
• CSS, pré-processadores e implementação de código

Atividade: Crie e publique um painel e uma página de destino completa com SEO.

Projeto: Crie um projeto final para o curso Full Stack Design.

Parte 1: Use projetos anteriores para desenvolver um aplicativo da web completo.