Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

664 views

Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

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.

×