Metodologias Processo de Design Digital

• Processos de desenvolvimento de produtos (Agile, Scrum, Lean e Waterfall)
• Conceitos, Ferramentas, Metodologias
• Conceito de MVP (Minimum Viable Product)
• Problema/Solução
• Construção, Medição, Aprendizagem
• Processo de design (etapas)
• Design Systems
• The Design Sprint
• (Google Product Design Sprint)
• Introdução ao Google Design Sprint
• Processo Tradicional vs Design Sprint
• As fases do Google Design Sprint

Fundamentos de UX/UI Design

• Introdução à User Experience.
• O que é?
• Elementos da User Experience
• UX ­ princípios básicos e factores que contribuem para uma boa experiência
• Ux vs Ui
• Objetivos do Utilizador vs. Objetivo de Negócio
• O que é a Usabilidade
• Princípios de Design
• Aspectos de Usabilidade para melhoraria de UI
• Avaliação Heuristica

User Research

• Concepção do produto
• Competitor Analysis
• Entrevistas
• Personas
• User Stories
• Customer Experience Maps

Arquitetura de Informação

• Card Sorting – O que é e como conduzir um card sorting
• Desenho de AI – Estrutura e relação de dados
• Validação de AI com utilizadores
• Site Map

Visual Design

• Tendências (menus, navegação, flat, material design)
• O processo de design em meio digital
• Displays e Dispositivos (ecrã, smartphone, tablet) dimensões e margens de segurança.
• Os elementos de design (branding e coerência da linguagem gráfica: marca, cores, icons, fontes)

Criação de Mockups com Sketch

• Introdução ao Sketch
• Ambiente de trabalho e ferramentas
• Design Libraries
• Protipagem
• Criação écrans de alta fidelidade
• Criação de Assets
• Ui Kits
• Produção e Integração com InVision

Desenho e Prototipagem com Invision

• Fundamentos Wireframing
• Bases Brainstorming e desenho rápido de ideias
• Definição de flows, estrutura e layout da aplicação
• Prototipagem rápida ­ protótipos de papel, protótipos de páginas e/ou componentes (balsamiq, keynote, etc)
• Angariação de feedback e propostas iterativas.
• Integração com Sketch
• Wireframes Vs Protótipos interativos
• Criação Protótipos interativos
• Produção e integração

Design de Interação

• O que é UI?
• Moodboards, Wireframes, Frameworks
• Interação (Formulários, Botões e Indicadores Visuais)
• Navegação Mobile / Taxonomia dos Gestos
• Responsive & Adaptative Web Design

User Testing

• Tipos de testes com utilizadores.
• Ferramentas e exemplos.
• Finalização Visual Design e Ready for Production
• A/B testing – ferramentas e vantagens.
• Métricas e análise de conversão

Projeto Prático

Front-End Development com HTML5 e CSS3

• Elementos estruturais HTML5
• Quando usar os novos elementos estruturais
• Texto
• Formulários
• Áudio e Vídeo
• Canvas
• Data Storage
• Offline
• Geolocation
• Acessibilidade
• Compatibilidade de HTML 5 e CSS 3
• CSS 3 properties e atributos
• CSS 3 animações
• CSS3 Media Queries

Responsive Web Design & Development

• Principios básicos do Responsive
• Responsive Website vs Mobile
• App”Fix and Fluid Layouts
• Adaptive and Responsive Web Design
• Media Queries
• Mobile First
• Responsive Design
• Progressive Enhancement
• Frameworks

Workshop: JavaScript Foundations

• Noções Base JavaScript
• Eventos
• Variáveis
• Funções
• Expressões e ciclos
• Programação Orientada a Objetos
• Strings
• Arrays
• Elementos e propriedade
• Criação de Nós
• Animação

Interatividade e Animações com CSS3, Jquery e Plug-ins

• Como desenhar com HTML e CSS
• Transforms e transitions em CSS3
• Animações em CSS3
• Introdução ao Jquery
• Selectores
• Atributos
• Efeitos/Animações
• Eventos
• Animação e interatividade com o jQuery

Workshop: Responsive WordPress

• Instalação do WordPress
• Criação de páginas
• Artigos, categorias e tags
• Instalação e utilização de Plugins
• Menus e widgets
• Configurações base
• Utilizadores e profiles
• Utilização de themes/templates

Projeto Prático

Motion for Interaction

• Princípios de animação tradicional vs digital e de interacção
• Ferramentas
• Micro-interações, animações de transição
• Desenvolvimento de protótipo
• Integrações

Adobe Animate CC

• Interface e conceitos principais
• Importar recursos
• Interação e Animação
• Audio e Video
• Exportação e integração

Projeto Prático