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

DOCENTE: RICARDO PEREIRA RODR...
AGENDA
Tendências no Desenho e Produção de Interfaces
para Web
!

• Responsive Web Design;

• Flat Design;
• Revisitar o L...
TENDÊNCIAS
Pontos de partida:
!
Audiência

• Para quem?


!
Objectivos

• O que é que isto proporciona à audiência?


!
In...
TENDÊNCIAS
Responsive Web Design (Ethan Marcotte)
!
O processo de adaptação como paradigma de
desenvolvimento de produtos ...
URL:
http://www.sapo.pt
URL:
http://www.thedailybeast.com/newsweek.html
TENDÊNCIAS
Flat Design
!

• Filosofia: simplicidade!

• Racionalista, Depuração, Redução do ruído;

• Sem Elementos 3D;

• ...
URL:
http://www.tvlcorp.com/index.html
URL:
http://www.colouredlines.com.au/
URL:
http://wearemovingthings.com
URL:
http://adayinbigdata.com
TENDÊNCIAS
Revisitar o Layout de jornais/revistas impressas
URL:
https://medium.com/design-things/d76a58035978
URL:
http://www.publico.pt/temas/jornal/quando-a-escola-deixar-de-ser-uma-fabrica-de-alunos-27008265
TENDÊNCIAS
HTML5 + CSS3
!

• Transições;

• Vídeo sem recurso a plugins para exibição;

• Áudio sem recurso a plugins para...
URL:
http://www.guidetotheappgalaxy.com/
URL:
http://vlog.it/
URL:
http://videoguard.pt
TENDÊNCIAS
Fullscreen
!
O termo “fullscreen”, em termos gerais, refere-se à expansão
da janela do browser de forma a ocupa...
URL:
http://whiteboard.is/
URL:
http://www.aboutblank.cz
URL:
http://www.dadaabstories.org/
TENDÊNCIAS
Slideshows “XL”
URL:
http://avaaz.org/en/
URL:
http://www.vogue.es/
URL:
http://www.ikea.com/pt/pt/
URL:
http://www.escs.ipl.pt
TENDÊNCIAS
Scroll Vertical: novas interpretações
!
Múltiplos Scrolls.

Scroll Infinito.

Página Única.
URL:
http://www.griplimited.com/
URL:
http://www.pinterest.com
URL:
http://99u.com
TENDÊNCIAS
Parallax Scrolling
!
O efeito “parallax” tem lugar quando o fundo da página se
move a um ritmo mais lento do qu...
URL:
http://www.apple.com/iphone-5c/
URL:
http://everylastdrop.co.uk/
URL:
http://sports.espn.go.com/espn/eticket/story?page=Dock-Ellis
TENDÊNCIAS
Tipografia
URL:
http://www.newyorker.com/
URL:
http://archive.coryetzkorn.com/wicked-palate/
URL:
http://www.rollingstone.com/
TENDÊNCIAS
Backgrounds com grandes imagens/ilustrações
URL:
http://www.greyp-bikes.com/
URL:
http://www.lego.com/en-us/Default.aspx
TENDÊNCIAS
Minimalismo
!
Clareza e simplicidade.

Interface centrada no conteúdo.
URL:
http://www.dropbox.com/
URL:
http://haraldurthorleifsson.com/
URL:
http://www.skype.com/pt/
TENDÊNCIAS
Ausência de cor ou monocromáticos
URL:
http://www.subtraction.com/
URL:
http://www.edp.pt/PT/aedp/Pages/aedp.aspx
FONTES
• Treder, M., Warych, R., Witman, S. (2014) Web Design Book of Trends. UXPin.

• Website Awwwards - http://www.awww...
Próximos SlideShares
Carregando em…5
×

Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces para Web

7.876 visualizações

Publicada em

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
7.876
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
74
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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).

×