Laboratório Web CURSO DE LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA / 2013-2014 / 4º SEMESTRE

DOCENTE: RICARDO PEREIRA RODRIGUES / RPRODRIGUES@ESCS.IPL.PT

APRESENTAÇÃO UNIDADE CURRICULAR

CONTACTOS

Prof. Ricardo Pereira Rodrigues rprodrigues@escs.ipl.ptGabinete 1G1Horário para marcação de atendimento: 2ª e 3ª feiras das 15h às 16h30 (com marcação prévia por email).!!Grupo Facebook de Apoio à Unidade Curricular: https://www.facebook.com/groups/ESCS.AM.LAB.WEB!Neste grupo será disponibilizada toda a informação sobre as aulas, exercícios, trabalhos e ligações para outras fontes e recursos relacionados com o programa da cadeira.

Internet is a “gift from God”

FONTE: The Verge

DESAFIOS DE APRENDIZAGEM

• Pensar de raiz projectos de comunicação em ambientes digitais e desenvolvimento de conceitos para os principais suportes existentes (WWW, mobile, e-mailling, apps, social media e novos media).!

• Enquadramentos teóricos e práticos nas áreas do web design, desenho de interfaces e interacção, introdução a ferramentas de computação gráfica e autoria web, linguagens de programação, metodologias e práticas associadas ao desenho para ecrãs.

POR ONDE VAMOS ANDAR?

• Pesquisa• Estratégia• Branding • Copy • Gestão de Projecto • Usabilidade• Web Design• Interactividade• Programação• Social Media • SEM / Analytics

✓ Pesquisa • Estratégia• Branding • Copy ✓ Gestão de Projecto ✓ Usabilidade ✓ Web Design ✓ Interactividade ✓ Programação • Social Media • SEM / Analytics

POR ONDE VAMOS ANDAR?

O PERCURSO

ANÁLISE & PESQUISA UX & UI USER EXPERIENCE

E USER INTERFACE !

DEFINIÇÃO DA MELHOR EXPERIÊNCIA PARA O

UTILIZADOR !(ARQUITECTURA DE

INFORMAÇÃO)

DESIGN & CONTEÚDO HTML & CSS DESENVOLVIMENTO

FRONT-END

RESUMO

URL: https://www.youtube.com/watch?v=3iVVM_DgWY4&list=PL30E23CCC107B0A00&index=23

PROGRAMA

Introdução e Enquadramento !• A Web de Hoje: oportunidades para um Web Designer,

Designer de Interfaces ou Designer Multimédia.• A Interface.• Tipologias de Interface.

PROGRAMA

Tendências na Estética e Produção de Interfaces para Web !• Responsive Web Design; • Flat Design; • Revisitar o Layout de jornais/revistas impressas; • HTML5 + CSS3; • Vídeo Fullscreen em background ou layout em fullscreen; • 3D; • Slideshows “XL”; • Scroll Vertical: novas interpretações; • Parallax Scrolling; • Tipografia; • Backgrounds com grandes imagens ou ilustrações; • Minimalismo; • Ausência de cor ou monocromáticos.

Etapas na Produção: Planeamento, Concepção e Implementação !Fase 1 - Análise e Pesquisa:• Pesquisa, Objectivos e Necessidades;• Brainstorming, Mapas Mentais, Entrevistas, Grupos Focais

(Focus Group) e Pesquisa Visual;• Documentação;• Análise Competitiva (Benchmark);• Personas;• Cenários de Actividade.!Fase 2 - Arquitectura de Informação:• Inventário de conteúdo;• Estrutura de Informação;• Wireframes;• Modelos e Especificações Funcionais (SPECS);• Storyboard;

PROGRAMA

Etapas na Produção: Concepção, Planeamento e Implementação !• Mapa de Fluxos de navegação (User Flows).

PROGRAMA

Etapas na Produção: Concepção, Planeamento e Implementação !Fase 3 - Desenho e Composição (Look & Feel):• A Interface: desenho de interfaces e usabilidade, modelos

teóricos e princípios para o design de interacção em sistemas web;

• Desenho de Navegação para Web;• Hierarquia Visual: grelha e estrutura;• Fundamentos e Teoria do Design: composição, consistência,

equilíbrio e teoria da Gestalt;• Princípios do Design Gráfico: Proximidade, Alinhamento,

Repetição e Contraste.• Layout: gráficos, tipografia, formas e cores;• Mock-ups.

PROGRAMA

Abordagem “Responsive Web Design”: a adaptação como paradigma de produção de projectos web !• Características e cenários de utilização;• Design para diferentes resoluções e plataformas;• Layout: fixo, fluido, elástico e híbridos;• Tamanhos de Fontes;• Media Queries: viewports, estrutura, breakpoints e

navegação.

PROGRAMA

Acessibilidade e Usabilidade !• Acessibilidade: métodos de implementação.• Acessibilidade: boas práticas.• Usabilidade: métodos de avaliação.• Usabilidade: no desenho de página e conteúdo.

PROGRAMA

Tecnologias Web: Introdução ao HTML5 !• Estrutura do Documento;• Elementos Novos;• Layout;• Vídeo e Áudio.

PROGRAMA

Tecnologias Web: Introdução às CSS3 !• Propriedades: border-radius, text-shadow, box-shadow;• Usar múltiplas imagens no background;• Cor: HSL e HSLA;• Opacidade e RGBA;• Transições;• Trabalhar com formato SVG.

AVALIAÇÃO

O método de avaliação é contínuo e tem como base a cotação obtida, pelos alunos, nos seguintes elementos de avaliação:!Projecto Final - 60% • Apresentação Proposta de Projecto - 20%• Desenho, Animação e Programação - 30%• Tutorias e Aulas de Acompanhamento - 10% *!Exercícios Práticos - 40% !• Exercício de Avaliação 1 [Arquitectura de Informação] *• Exercício de Avaliação 2 [HTML + CSS] *• Exercício de Avaliação 3 [JavaScript] *• Exercício de Avaliação 4 [MySQL + PHP] *

* Nota para alunos com estatuto trabalhador-estudante e estatuto de dirigente associativo do ensino superior: !Nos momentos de avaliação presencial existe a obrigatoriedade do aluno acordar, posteriormente à data de realização em aula, um dia/hora alternativo para a execução dos mesmos (o prazo para a execução nunca poderá ser superior a 5 dias úteis).

BIBLIOGRAFIA

• Best, K. (2006) Gestão de Design, AVA Publishing.• Brown, D. (2007) Communicating Design. Developing Web Site Documentation For

Design and Planning, New Riders.• Cederholm, D. (2010) CSS3 For Designers. A Book Apart.• Dabner, D.; Calvert, S. & Casey, A. (2010) Graphic design school : the principles and

pratice of graphic design, New Jersey: Wiley.• Duckett, J. (2011) HTML & CSS - Design and Build Websites. Wiley.• Friedlein, A. (2001) Web Project Management. Morgan Kaufmann Publishers.• Jacobson, Robert (ed.) (2000) Information Design, The MIT Press.• Keith, J. (2010) HTML5 For Web Designers. A Book Apart.• Lal, R. (2013) Digital Design Essentials. 100 Ways to Design Better Desktop, Web, and

Mobile Interfaces. Rockport Publishers.• Lidwell, W.; Holden, K. & Elam, K. (2003) Universal Principles of Design, Rockport.• Morville, P. & Rosenfeld, L. (2007) Information Architecture For The World Wide Web,

O’Reilly.• Nielsen, J. (1999) Designing Web Usability, New Riders Publishing.• Preece, J.; Rogers, Y. & Sharp, H. (2002) Design de Interacção, Bookman.• Robbins, N. (2007) Learning Web Design. O’Reilly.

• Scott, B. & Neil, T. (2009) Designing Web Interfaces. O’Reilly.• Vinh, K. (2011) Ordering disorder : grid principles for web design. New Riders.!

NOTAS: Outras referências serão disponibilizados, sempre que se justificarem, nos keynotes de

apoio às aulas ou no grupo do Facebook de apoio à cadeira.

BIBLIOGRAFIA