Curso: FLAGProfessional UX/UI Designer for Web & Mobile

Transcrição

1 Curso: FLAGProfessional UX/UI Designer for Web & Mobile Duração: 279h Área formativa: Design Web & Mobile Sobre o curso O Web Design é uma extensão do design cujo foco é a criação de websites e documentos disponíveis online, acessíveis através de qualquer dispositivo: desktop, tablet ou mobile. Trata-se de um domínio multidisciplinar, que implica competências de diversas áreas, para além do design propriamente dito, tais como arquitetura de informação, programação, usabilidade (UX), entre outros. O Web Designer é o profissional criativo competente para o desenvolvimento de sites e documentos web, conjugando as vertentes estética e funcional do projeto, para promover a melhor experiência possível aos utilizadores finais. Este curso tem como objetivos: No curso FLAGProfessional UX/UI Design for Web & Mobile, os formandos serão dotados de todos os conhecimentos teóricos e competências necessários para ingressar no mercado de trabalho e assumir uma atividade profissional ligada ao Web Design, através do desenho e desenvolvimento de interfaces para web e mobile, privilegiando a usabilidade, os comportamentos do utilizador, a interação e a funcionalidade. Destinatários Este curso destina-se a todos os interessados em iniciar ou consolidar uma atividade profissional como Designer Web e Mobile. Note-se que os cursos FLAGProfessional desenvolvem-se com graus de exigência extremamente elevados, o que obriga a uma total disponibilidade para o correto acompanhamento das matérias lecionadas, bem como dos projetos a realizar. Pré-requisitos Conhecimentos de sistema operativo (Windows ou MacOS) na ótica do utilizador. Gosto e apetência pela área de Web e Mobile Design.

2 Metodologia Presencial ou live training. Programa Fundamentos de UX/UI Design (3h) User Research (6h) Psicologia do Utilizador (3h) Arquitetura de Informação (3h) Design Funcional e de Interação (18h) Desenvolvimento de Protótipo (27h) Otimização (3h) Tendências e Futuro (3h) Planeamento e Gestão de um Site (3h) Workshop: Adobe Illustrator para Web (12h) Workshop: Adobe Photoshop para a Web (12h) Adobe Dreamweaver (39h) Responsive Web Design e Bootstrap (9h) Interatividade e Animações com CSS3, Jquery e Plugins (18h) Projeto Prático (18h) Workshop: Search Engine Optimization e Web Analytics (9h) Wordpress (6h) Adobe Animate CC (30h) Projeto Prático (15h) De Website para Web App (3h) Normas para a Criação de Mobile Apps (9h) Criação de Sites Mobile com Jquery Mobile e PhoneGap (12h) Projeto Prático (18h) Fundamentos de UX/UI O que é? Objetivos do Utilizador vs. Objetivo de Negócio Começar do zero vs. Redesenhar vs. otimizar Os 5 elementos do UX Psicologia Usabilidade Design Copywriting Análise

3 Diferentes utilizadores, diferentes dispositivos Testes A/B User Research Compreender os utilizadores processos (dispositivos) Questionários Perfis de utilizadores / personas (exercício) Psicologia do Utilizador Reflexo condicionado Persuasão Experiência Padrões Comportamentais Arquitetura de Informação Arquitetura de Informação Exercício de card sorting User Stories Design Funcional e de Interação Moodboards Wireframes Frameworks Interação (Formulários, Botões e Indicadores Visuais) Testes A / B Navegação Mobile / Taxonomia dos Gestos Desenvolvimento de Protótipo

4 O que é UI? Styleguides, moods, identidade visual Hierarquia Visual Cor, tipografia e iconografia Peso visual, contraste e profundidade Preparação de briefing para desenvolvimento Otimização Métricas e Indicadores Analíticos Testes e Análise Tendências e Futuro Apresentação de trabalhos Tendências e futuro Planeamento e Gestão de um Site Propostas, orçamentos e contratos Mapa do site Wireframes e mockups Conteúdos Seleção das tecnologias Desenvolvimento do site Testes Alojamento do site Workshop: Adobe Illustrator para Web Objetos básicos Pen Tool

5 Cor Objetos complexos Padrões e Gradientes Layout Formatos de exportação Ícones Imagens Criação de Templates Workshop: Adobe Photoshop para Web Otimização de imagens para a Web Otimização de Imagens com o Save For Web Otimização de JPEGS GIFs Bloquear cores em GIF Otimizar cores em PNGs Slices Slice Tool Slices Slice Automáticas, de utilizador, de Guias e de camadas Otimização das Slices Criar e usar Paragraph Styles e Character Styles Adobe Dreamweaver Introdução ao Dreamweaver Personalizar o workspace Introdução ao HTML Imagens e links Tabelas e formulários Introdução às CSS Formatar texto, imagens e backgrounds

6 Box model Layout de páginas Elementos de navegação Adicionar áudio e vídeo Responsive Webdesign e Bootstrap Layouts fluídos Media Queries Responsive Web Design Testes em browsers e equipamentos móveis Grid systems e front-end frameworks Bootstrap Interatividade E Animações Com CSS3, Jquery e Plugins Como desenhar com HTML e CSS Transforms e transitions em CSS3 Animações em CSS3 Introdução ao jquery Animação e interatividade com o jquery Plugins jquery Projeto Worskhop: SEO e Google Analytics SEO Princípios básicos de SEO: otimização on-site e off-site Otimização de imagens para SEO Paginação de sites para SEO Otimização para sites locais e internacionais XML Sitemaps

7 Google Analytics Princípios básicos de Analytics Testes A/B com Google Analytics Criação de objetivos 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 Adobe Animate CC Interface e conceitos principais Importar recursos Photoshop Illustrator Ferramentas de desenho Criar gráficos e texto Utilizar a biblioteca e símbolos Animações Timeline Keyframes Motion Tweens Scenes & Masks Audio e Video Importar Sons Exportar gráficos e animações

8 Sprite sheets Gifs animados SWF WebGL SVG / Snap.svg ActionScript/JavaScript CreateJS Banner Ads Projeto Workshop: De Website para WebApp Sites para equipamentos móveis Web apps Apps híbridas Apps cross-platform Desenvolvimento nativo Android e ios Normas para a Criação de Mobile Apps Capacidades dos browsers para mobile Restrições dos equipamentos móveis Mobile friendly sites Navegação em equipamentos móveis Desenvolvimento para ecrãs retina / HiDPI Google Material Design ios Human Interface Guidelines Criação de Sites Mobile com Jquery Mobile e Phonegap Introdução ao jquery Mobile Páginas e caixas de diálogo

9 Widgets, toolbars e list views Ferramentas de formatação de conteúdos Formulários Gestão de eventos Themes / ThemeRoller PhoneGap Desktop App PhoneGap Developer App PhoneGap API Plugins PhoneGap/Cordova PhoneGap Build Projeto