Curso: FLAGProfessional UI/UX Designer for Web & Mobile

Transcrição

1 Curso: FLAGProfessional UI/UX Designer for Web & Mobile Duração: 315h Á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 UI e UX Design para 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 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 (6h) Cultura Visual Digital (6h) Design de Interação (IXD) (9h) Design para a Usabilidade (9h) Estratégia de Conteúdos (9h) Análise de Utilizadores e de Tarefas (9h) Adobe Muse (15h) Planeamento e Gestão de um Projeto de Webdesign (6h) Design de Interfaces (3h) Criação de Mockups com Adobe Illustrator (15h) Workshop: Adobe Photoshop para Web (12h) Adobe Dreamweaver (27h) Layout Páginas Web (18h) Interactividade com Jquery e Plug-Ins (12h) Projeto Prático (18h) Worskhop: SEO e Google Analytics (9h) Workshop: Templates em WordPress (15h) Desenhar com HTML5 (15h) Adobe Edge Animate (18h) Animações com CSS3 e Plugins Jquery (12h) Projeto Prático (18h) De Website para Web App (3h) Responsive Web Design: Sites Multiplataforma (9h) Criação de sites Mobile com jquery Mobile e PhoneGap (12h) Desenho de Interfaces para Mobile (12h) Projeto Prático (18h) Fundamentos de UX/UI Design Diferença entre Ux Design e UI Design O papel do UX Designer (Análise de utilizadores e tarefas Criação de cenários Protótipos) O papel do UI Designer (Princípios do Design O Design de Interfaces Mockups) Cultura Visual Digital Da Arte Digital à Interatividade Os media interativos Ambientes interativos Aplicações multiplataforma

3 Design de Interação (IXD) O que é o Design de Interação (IxD)? O Design centrado no utilizador (UCD) Os elementos do Design de Interação (IxD) Casos de estudo O Futuro do Design de Interação Design para a Usabilidade O que é a Usabilidade? Elementos da experiência do utilizador (Ux) Design Emocional Análise do utilizador (Criação de personas) Estratégia de Conteúdos Métodos de estratégia de Conteúdo: processos e criação de taxonomias. Análise das tarefas do utilizador. Identificação e hierarquização dos conteúdos. Criação de um mapa de navegação. Análise de Utilizadores e de Tarefas Métodos de avaliação da usabilidade e da experiência de utilizador (UX) Teste de usabilidade e experiência de utilizador (UX) Casos de estudo Adobe Muse Overview O que é o Adobe Muse? Interface Welcome Screen Tipos de visualização Ferramentas básicas Zoom Criação de um site Criar um sitemap

4 Páginas mestras e sub-páginas Adicionar e apagar páginas Trabalhar com páginas Atributos de página Guias de página Criar menus Headers e Footers Atributos de site Criar um favicon Tile Browser fill Fill Trabalhar com gráficos Importar gráficos Importar Jpg, gif, swf, photoshop, png e edge animate Painel Assets Tamanhos e resoluções Embeber gráficos Alternate Text 100%width content Formatar objetos Transformar objetos Proteger objetos Agrupar objetos Smart Guides Efeitos Estilos de gráficos Text Wrap Texto Importar texto Formatar texto Fontes Web-safe Fontes Typekit Atalhos Text Criar estilos de parágrafo

5 Criar estilos de caractere Exportar tags Hyperlinks Criar um hyperlink Estilos de link Links ancorados e pinning Cor Criar swatches Filetes e preenchimento Degradés Menus Dinâmicos e Estados Painel States Importar botões Criar e modificar menus Criar widgets e slideshows Criar um painel em acordeão Criar lightbox Criar um slideshow Criar um tooltip Criar um composition widget Social widgets: facebook, twitter, google maps Criar um formulário de contacto Criar um full background video HTML embebido Inserir um mapa Embeber vídeos Embeber um slideshow externo Parallax Scrolling Parallax Scroll Effects Panel: Motion, Opacity, Slideshow, Edge Animate Parallax Browser Fill Parallax Fill Exemplos de site com parallax scrolling Muse Exchange

6 Publicar o site Exportar para HTML Publicar em Business Catalyst Atualizar o site Exercício feito na aula Levantamento de dúvidas Planeamento e Gestão de um Projeto de Webdesign Consulta Proposta de projeto Assinatura de contrato Materiais Pesquisa Sitemap Imagens Conteúdos do site Criação do projeto Site beta Design de Interfaces Padrões de Design Design de Interfaces gráficas Mockups Casos de estudo Criação de Mockups com Adobe Illustrator Objetos básicos Pen Tool Cor Objetos complexos Padrões e Gradientes Layout

7 Formatos de exportação Ícones Imagens Criação de Templates Wireframing Workshop: Adobe Photoshop para Web Introdução ao Interface do Photoshop CC 2015 Ajustar as preferencias do Photoshop para trabalhar para WEB Formatos JPEG, GIF, PNG.8 e PNG-24 Cor para WEB, espaço de cor srgb, Numero de cores num GIF e PNG Carregar e salvar Swatches em Formato CSS, HTML e SVG Slice Tool Slices Slice Automáticas, de utilizador, de Guias e de camadas Optimização das Slices Preparação de imagens fotográficas e de gráficos para web. Optimização de Imagens com o Save For Web Optimização de JPEGS GIFs Bloquear cores em GIF Optimizar cores em PNGs Transparência Preparação de imagens para Background de sites. Criação de layouts com os Layer Comps no Photoshop GIFs animados Utilisar o Image Generator para criar Image Assets com as camadas em sibstituição das Slices e do SAVE FOR WEB Criação de Artboards para Devices

8 ArtBoard Tool Testar as Arboards em aparelhos IOS directamente Adobe Preview Utilização do Design Space para design orientado para Pads e SmartPhones Export As no CC2015 para exportar rápidamente artboards, camadas ou documentos Libraries e Adobe Stock para guardar, imagens, Swatches, usar imagens do Stock para criação de artes para o cliente Criação de Libraries personalizadas. Fontes seguras para WEB Criar e usar Paragraph Styles e Paragraph Styles Adobe Dreamweaver Introdução ao Dreamweaver Overview do interface Definir site / Criar páginas Adicionar / importar conteúdo Introdução ao HTML Formatação de conteúdo com HTML Adicionar imagens Introdução ao CSS / criar stylesheet Formatar texto / imagens / backgrounds Box model Floats e posicionamento Adicionar audio e vídeo Recursos de aprendizagem Layout Páginas Web Box model Floats Posicionamento absoluto, relativo e fixo Layouts fluídos

9 Bootstrap Interactividade com Jquery e Plug-Ins Linguagens de scripting Introdução ao jquery Plugins jquery Projeto Prático Worskhop: SEO e Google Analytics SEO Princípios básicos de SEO: optimização on-site e off-site Optimização de imagens para SEO Paginação de sites para SEO Optimização para sites locais e internacionais XML Sitemaps Google Analytics Princípios básicos de Analytics Testes A/B com Googel Analytics Criação de objetivos Análise de desempenho dos resultados das experiências com testes A/B Workshop: Templates em WordPress HTML/CSS Explicação do conceito de Tags. Identificação de algumas tags de HTML. Classes, IDs e hieraquias de elementos. Elaboração de um exemplo prático. Lógica Algoritmos. Exemplos práticos PHP Introdução ao PHP. Exercícios práticos de PHP Instalação de WordPress em máquina local. Criação de páginas. Instalação de Plugins. Configurações base. Instalação de um template.

10 Estrutura de um template de wordpress. Análise do código do template a nivel de HTML e PHP. Alteração à estrutura base do template. Desenhar com HTML5 Desenhar com CSS Canvas SVG Adobe Edge Animate Ambiente de trabalho Stage e suas propriedades Ferramentas Elementos Propriedades Timeline Biblioteca Criar e usar Assets Desenhar no Adobe Edge Exportar e importar símbolos Gerir o painel library Adicionar e formatar texto Adicionar texto ao projeto Propriedades de texto Usar web fonts Texto à volta de formas Posicionamento em linha do texto Animar texto Adicionar links Tags HTML Animação Conceito de animação no Edge Estrutura de funcionamento da Timeline Controlo de objetos na Timeline Tipos de keyframes Técnicas e tipos de transições Organizar animações com Labels Comportamentos e ações aplicadas aos elementos, ao stage e à timeline Ações aplicadas a elementos para iphone e Android HTML5 e JavaScript

11 Compreender o HTML no Edge Compreender o CSS no Edge Copiar e colar HTML e CSS no EDGE Símbolos Construir recorrendo aos símbolos Símbolos e timeline Animar símbolos no stage Construir botão com animação de rollover e drop-down menu Controlar animações em JavaScript e jquery JavaScript Swap images Identificar ou alterar elementos e símbolos Criar símbolos com animação Utilizar o painel de Código Utilizar condicionantes Publicar um projeto Animações com CSS3 e Plugins Jquery Transforms, transitions e animations em CSS3 Animações com jquery Plugins jquery para animação Projeto Prático De Website para Web App Estrutura das Aplicações Web Elementos básicos de User Experience para Aplicações Web Responsive Web Design: Sites Multiplataforma Planeamento do layout e dos conteúdos Seleção de uma framework Otimização e opções de navegação Testes em multiplataforma Criação de sites Mobile com jquery Mobile e PhoneGap Anatomia de uma página jquery Mobile Framework CSS Gestão de eventos de uma plataforma móvel Phonegap API

12 Phonegap Developer App Phone gap Build Desenho de Interfaces para Mobile Diferenças entre Design para web e Design para aplicações mobile nativas Componentes nativos para ios e Android UI / UX nas diferentes plataformas móveis Ferramentas de prototipagem Projeto Prático