FLAGProfessional UI/UX Designer for Web & Mobile
Web & MobileNível: Iniciado
●
Duração: 315h
●
Sobre o curso
Web Design é a extensão do design cujo foco é a criação de websites e documentos disponíveis na internet. Trata-se de um domínio multidisciplinar, na medida em que implica competências de diversas áreas, para além do design propriamente dito, tais como arquitetura de informação, programação, usabilidade, 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 objectivos:
Dotar os formandos 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: desenvolvimento de sites, desenho de interfaces para a web e mobile, criação de animações em flash, entre outros.
Destinatários
Todos os interessados em iniciar ou consolidar uma atividade profissional como Web e Mobile Designer. 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.
Conhecimentos de sistema operativo (Windows ou MacOS) na ótica do utilizador. Gosto e apetência pela área de Web e Mobile Design.
Metodologia
Os cursos FLAGProfessional são cursos de longa duração, com 3 sessões por semana, estando disponíveis nos seguintes horários: manhã, tarde e noite. Estes cursos têm por objetivo dotar os
participantes dos conhecimentos técnicos e teóricos para o correto desenvolvimento das competências profissionais para um segmento de mercado, através de módulos de formação destinados à utilização de ferramentas específicas, workshops e sessões teóricas complementares.
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. Ao longo do curso, os formandos desenvolvem diversos projetos, orientados pelo formador responsável, criando o seu portfólio de trabalhos.
No final do curso, os formandos desenvolvem um projeto final, demonstrativo de todos os
conhecimentos e competências adquiridos, que culmina numa apresentação e defesa presencial perante um júri.
A avaliação dos projetos é atribuída numa escala de 0 a 20 valores, atendendo aos seguintes critérios: Planeamento ● Criatividade ● Originalidade ● Autonomia ●
Aplicação dos conhecimentos
●
A avaliação final do formando reflete os seguintes níveis de ponderação:
Assiduidade e relação interpessoal: 5%
●
Projetos intermédios: 60%
●
Projeto final: 35%
●
Os formandos com avaliação final superior a 16 valores são colocados em estágio, em empresas parceiras da GALILEU.
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
●
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 ●
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
●
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
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 ● 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
●
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
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
●
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. ●
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 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
●
Phonegap Developer App
●
Phone gap Build
●
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
●
