Laboratório Web 2013-2014 - Apresentação Unidade Curricular

609 visualizações

Publicada em

Apresentação da Unidade Curricular de Laboratório Web, Curso de Licenciatura em Audiovisual e Multimédia, Escola Superior de Comunicação Social / Instituto Politécnico de Lisboa.

Publicada em: Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
609
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
33
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Laboratório Web 2013-2014 - Apresentação Unidade Curricular

  1. 1. 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
  2. 2. CONTACTOS Prof. Ricardo Pereira Rodrigues rprodrigues@escs.ipl.pt Gabinete 1G1 Horá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.
  3. 3. Internet is a “gift from God” FONTE: The Verge
  4. 4. 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.
  5. 5. POR ONDE VAMOS ANDAR? • Pesquisa • Estratégia • Branding • Copy • Gestão de Projecto • Usabilidade • Web Design • Interactividade • Programação • Social Media • SEM / Analytics
  6. 6. POR ONDE VAMOS ANDAR? Pesquisa • Estratégia • Branding • Copy ✓ Gestão de Projecto ✓ Usabilidade ✓ Web Design ✓ Interactividade ✓ Programação • Social Media • SEM / Analytics ✓
  7. 7. 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
  8. 8. RESUMO URL: https://www.youtube.com/watch?v=3iVVM_DgWY4&list=PL30E23CCC107B0A00&index=23
  9. 9. 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.
  10. 10. 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.
  11. 11. PROGRAMA 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;
  12. 12. PROGRAMA Etapas na Produção: Concepção, Planeamento e Implementação ! • Mapa de Fluxos de navegação (User Flows).
  13. 13. 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.
  14. 14. 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.
  15. 15. 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.
  16. 16. PROGRAMA Tecnologias Web: Introdução ao HTML5 ! • Estrutura do Documento; • Elementos Novos; • Layout; • Vídeo e Áudio. 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.
  17. 17. 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 trabalhadorestudante 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).
  18. 18. 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.
  19. 19. BIBLIOGRAFIA • 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.

×