Especializado UI/UX Design. Sobre o curso. Destinatários. Pré-requisitos. Web & Mobile. Nível: Iniciado Duração: 63h

Transcrição

1 Especializado UI/UX Design Web & Mobile Nível: Iniciado Duração: 63h Sobre o curso Aumentar a satisfação dos utilizadores, melhorando a usabilidade, acessibilidade e proporcionado uma boa interação entre o utilizador e o produto, são um dos focos que qualquer projecto de web design deverá seguir. User Experience Design (UX) é o processo de design que visa garantir esta satisfação por parte do utilizador, dando resposta às suas necessidades, com soluções interativas, otimizadas, apelativas, simples e claras, sem ruído. Com este curso damos a oportunidade de conhecer todos os componentes de design de interface para a web, bem como as considerações a ter na escolha dos elementos de design de interface aquando da concepção de um website. Layouts eficazes para as páginas do site, bem como melhores práticas para navegação, pesquisa, registo, testes, entre outras, são alguns das temáticas abordadas ao longo deste curso. Destinatários Todos os interessados em adquirir ou aprofundar conhecimentos no campo da Usabilidade e Experiência do Usuário. Analistas de negócios e de pesquisa de mercado. Profissionais ligados ao marketing e gestão de produto. Web designers, designers de interface do usuário, designers de interação, e designers de produto. Pré-requisitos

2 Conhecimentos de sistema operativo (Windows ou MacOS) na ótica do utilizador. Gosto e apetência pela área de Web e Mobile Design. 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) 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

3 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

4 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

5 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

6 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