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.

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. 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. 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. 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. URL:
http://www.sapo.pt

6. URL:
http://www.thedailybeast.com/newsweek.html

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. URL:
http://www.tvlcorp.com/index.html

9. URL:
http://www.colouredlines.com.au/

10. URL:
http://wearemovingthings.com

11. URL:
http://adayinbigdata.com

12. TENDÊNCIAS
Revisitar o Layout de jornais/revistas impressas

13. URL:
https://medium.com/design-things/d76a58035978

14. URL:
http://www.publico.pt/temas/jornal/quando-a-escola-deixar-de-ser-uma-fabrica-de-alunos-27008265

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. URL:
http://www.guidetotheappgalaxy.com/

17. URL:
http://vlog.it/

18. URL:
http://videoguard.pt

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. URL:
http://whiteboard.is/

21. URL:
http://www.aboutblank.cz

22. URL:
http://www.dadaabstories.org/

23. TENDÊNCIAS
Slideshows “XL”

24. URL:
http://avaaz.org/en/

25. URL:
http://www.vogue.es/

26. URL:
http://www.ikea.com/pt/pt/

27. URL:
http://www.escs.ipl.pt

28. TENDÊNCIAS
Scroll Vertical: novas interpretações
!
Múltiplos Scrolls.
Scroll Infinito.
Página Única.

29. URL:
http://www.griplimited.com/

30. URL:
http://www.pinterest.com

31. URL:
http://99u.com

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. URL:
http://www.apple.com/iphone-5c/

34. URL:
http://everylastdrop.co.uk/

35. URL:
http://sports.espn.go.com/espn/eticket/story?page=Dock-Ellis

36. TENDÊNCIAS
Tipografia

37. URL:
http://www.newyorker.com/

38. URL:
http://archive.coryetzkorn.com/wicked-palate/

39. URL:
http://www.rollingstone.com/

40. TENDÊNCIAS
Backgrounds com grandes imagens/ilustrações

41. URL:
http://www.greyp-bikes.com/

42. URL:
http://www.lego.com/en-us/Default.aspx

43. TENDÊNCIAS
Minimalismo
!
Clareza e simplicidade.
Interface centrada no conteúdo.

44. URL:
http://www.dropbox.com/

45. URL:
http://haraldurthorleifsson.com/

46. URL:
http://www.skype.com/pt/

47. TENDÊNCIAS
Ausência de cor ou monocromáticos

48. URL:
http://www.subtraction.com/

49. URL:
http://www.edp.pt/PT/aedp/Pages/aedp.aspx

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