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 - Tendências no Desenho e Produção de Interfaces para Web

7,892 views

Published on

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 - Tendências no Desenho e Produção de Interfaces para Web

  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 TENDÊNCIAS NO DESENHO E PRODUÇÃO DE INTERFACES PARA WEB
  2. 2. AGENDA Tendências no Desenho e Produção de Interfaces para Web ! • Responsive Web Design; • Flat Design; • Revisitar o Layout de jornais/revistas impressas; • HTML5 + CSS3; • Fullscreen; • Slideshows “XL”; • Scroll Vertical: novas interpretações; • Parallax Scrolling; • Tipografia; • Backgrounds com grandes imagens/ilustrações; • Minimalismo; • Ausência de cor ou monocromáticos.
  3. 3. TENDÊNCIAS Pontos de partida: ! Audiência • Para quem? ! Objectivos • O que é que isto proporciona à audiência? ! Interacção • Qual a história que vamos contar? • Qual a conversa que estamos a tentar iniciar? A resposta a estas perguntas são a base para compreendermos que tipo de projecto vamos construir.
  4. 4. TENDÊNCIAS Responsive Web Design (Ethan Marcotte) ! O processo de adaptação como paradigma de desenvolvimento de produtos multimédia. ! Ex.: um website que se adapta a uma grande variedade de tamanhos de ecrã. ! Objectivo: oferecer uma experiência de visualização ideal para o contexto de uso. Grelhas fluidas. Imagens flexíveis. Media Queries.
  5. 5. URL: http://www.sapo.pt
  6. 6. URL: http://www.thedailybeast.com/newsweek.html
  7. 7. TENDÊNCIAS Flat Design ! • Filosofia: simplicidade! • Racionalista, Depuração, Redução do ruído; • Sem Elementos 3D; • Sem Gradientes; • Sem Relevo; • Sem Sombras; • Sem Reflexos; • Sem Texturas; • Sem profundidade; • Google, Microsoft (desde 2010), Apple (iOS7), etc. ! Em oposição a abordagem realista (skeuomorphic), procura uma mudança de paradigma que se afasta da imitação do mundo analógico, tão familiar ao utilizar. Simplicidade. Maior Clareza. Abordagem minimalista. Foco na Cor e na Tipografia.
  8. 8. URL: http://www.tvlcorp.com/index.html
  9. 9. URL: http://www.colouredlines.com.au/
  10. 10. URL: http://wearemovingthings.com
  11. 11. URL: http://adayinbigdata.com
  12. 12. TENDÊNCIAS Revisitar o Layout de jornais/revistas impressas
  13. 13. URL: https://medium.com/design-things/d76a58035978
  14. 14. URL: http://www.publico.pt/temas/jornal/quando-a-escola-deixar-de-ser-uma-fabrica-de-alunos-27008265
  15. 15. TENDÊNCIAS HTML5 + CSS3 ! • Transições; • Vídeo sem recurso a plugins para exibição; • Áudio sem recurso a plugins para exibição; • Slideshows com animações; • Animações a partir de SVG’s e CSS’s Transitions.
  16. 16. URL: http://www.guidetotheappgalaxy.com/
  17. 17. URL: http://vlog.it/
  18. 18. URL: http://videoguard.pt
  19. 19. TENDÊNCIAS Fullscreen ! O termo “fullscreen”, em termos gerais, refere-se à expansão da janela do browser de forma a ocupar a totalidade da dimensão do ecrã. ! Começou por ser muito utilizado em websites de vídeo (popularizado pelo Youtube) e hoje é o modo de visualização mais comum na navegação em apps. É importante não desfraldar as expectativas do utilizador! ! ! Criar uma experiência Quando usado apropriadamente pode melhorar a sensação de que seja digna da imersão aumentando o foco do utilizador. atenção que estamos a exigir.
  20. 20. URL: http://whiteboard.is/
  21. 21. URL: http://www.aboutblank.cz
  22. 22. URL: http://www.dadaabstories.org/
  23. 23. TENDÊNCIAS Slideshows “XL”
  24. 24. URL: http://avaaz.org/en/
  25. 25. URL: http://www.vogue.es/
  26. 26. URL: http://www.ikea.com/pt/pt/
  27. 27. URL: http://www.escs.ipl.pt
  28. 28. TENDÊNCIAS Scroll Vertical: novas interpretações ! Múltiplos Scrolls. Scroll Infinito. Página Única.
  29. 29. URL: http://www.griplimited.com/
  30. 30. URL: http://www.pinterest.com
  31. 31. URL: http://99u.com
  32. 32. TENDÊNCIAS Parallax Scrolling ! O efeito “parallax” tem lugar quando o fundo da página se move a um ritmo mais lento do que o objecto que está em primeiro plano. ! Utilizam-se múltiplas imagens, no fundo da página, criando a sensação de moverem-se a velocidades diferentes e aumentando a profundidade na página. O termo “parallax” deriva da palavra Grega “parallaxis”, que significa alteração.
  33. 33. URL: http://www.apple.com/iphone-5c/
  34. 34. URL: http://everylastdrop.co.uk/
  35. 35. URL: http://sports.espn.go.com/espn/eticket/story?page=Dock-Ellis
  36. 36. TENDÊNCIAS Tipografia
  37. 37. URL: http://www.newyorker.com/
  38. 38. URL: http://archive.coryetzkorn.com/wicked-palate/
  39. 39. URL: http://www.rollingstone.com/
  40. 40. TENDÊNCIAS Backgrounds com grandes imagens/ilustrações
  41. 41. URL: http://www.greyp-bikes.com/
  42. 42. URL: http://www.lego.com/en-us/Default.aspx
  43. 43. TENDÊNCIAS Minimalismo ! Clareza e simplicidade. Interface centrada no conteúdo.
  44. 44. URL: http://www.dropbox.com/
  45. 45. URL: http://haraldurthorleifsson.com/
  46. 46. URL: http://www.skype.com/pt/
  47. 47. TENDÊNCIAS Ausência de cor ou monocromáticos
  48. 48. URL: http://www.subtraction.com/
  49. 49. URL: http://www.edp.pt/PT/aedp/Pages/aedp.aspx
  50. 50. FONTES • Treder, M., Warych, R., Witman, S. (2014) Web Design Book of Trends. UXPin. • Website Awwwards - http://www.awwwards.com/ (Consultado 10 Fevereiro 2014). • Website CSS Design Awards - http://www.cssdesignawards.com/ (Consultado 10 Fevereiro 2014).

×