Este documento apresenta um laboratório sobre design de interfaces web. Discute as oportunidades para designers na web atual e introduz os conceitos de interface e tipologias de interface, incluindo exemplos. Também fornece uma lista de recursos sobre o tema.

1. Laboratório Web
CURSO DE LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA / 2013-2014 / 4º SEMESTRE
DOCENTE: RICARDO PEREIRA RODRIGUES / RPRODRIGUES@ESCS.IPL.PT
INTRODUÇÃO E ENQUADRAMENTO

3. AGENDA
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.

4. URL:
http://www.youtube.com/watch?v=7_zzPBbXjWs

5. A WEB DE HOJE
URL:
http://www.youtube.com/watch?v=ntyXvLnxyXk

6. A WEB DE HOJE
URL:
http://www.youtube.com/watch?v=gew68Qj5kxw

7. A WEB DE HOJE
URL:
http://www.youtube.com/watch?v=T0D4avXwMmM&feature=mh_lolz&list=PLB43734793C621D59

8. A WEB DE HOJE
URL:
http://www.youtube.com/watch?v=g_txF7iETX0

9. A WEB DE HOJE
URL:
http://www.youtube.com/watch?v=uSKq0DuH-7g

10. A WEB DE HOJE
URL:
http://www.youtube.com/watch?v=GPfCZC4VHnE

11. A WEB DE HOJE
URL:
http://www.youtube.com/watch?v=v2vpvEDS00o

12. A WEB DE HOJE
URL:
http://www.youtube.com/watch?v=ISxgVmRnFq8

13. A WEB DE HOJE
URL:
http://www.youtube.com/watch?v=rgT7gGciQrg

14. A WEB DE HOJE
URL:
http://www.youtube.com/watch?v=MzX140m_eiQ&feature=BFa&list=PLEC86D7B6150B0A0F&lf=BFa

15. A WEB DE HOJE
URL:
http://www.youtube.com/watch?v=uDNQr52b4oI

16. A WEB DE HOJE
URL:
https://www.youtube.com/watch?v=4EvNxWhskf8&list=PLyR4fvjGTgA65BkrjbVHAWT9IuPIExw5_

17. CENAS DOS PRÓXIMOS CAPÍTULOS…
URL:
http://www.youtube.com/watch?v=6Cf7IL_eZ38&feature=BFa&list=PLEC86D7B6150B0A0F

18. INTERFACE
• Procuram resolver um problema específico, permitindo ao
utilizador interagir com objectos (físicos ou virtuais).
!
• Um dispositivo ou sistema usado por duas entidades
independentes para interagirem/comunicarem.
!
• No contexto deste laboratório interessa-nos sobretudo as
interfaces digitais (interfaces Humano-Computador/HomemMáquina).
Referências:
- Ivan Sutherland
- Douglas Englebart
- Alan Kay

19. INTERFACE

20. INTERFACE

21. INTERFACE

22. INTERFACE
• Representa a forma como o utilizador interage com o
sistema.
!
• A navegação é um dos elementos da interface e, a não ser
que estejamos na presença de uma aplicação ou formulário,
confunde-se com a própria interface.
!
• Não trata exclusivamente da interacção.
É também a forma como o sistema comunica com o utilizador:
Estaticamente e Dinamicamente.
Objectivo:
Eliminar a sua presença da consciência do utilizador!
Diferentes tipos:
- Interfaces Web
- Interfaces Gestuais
- Interfaces Móveis
...

23. Exercício

32. INTERFACE
Na Web, muitas vezes chegamos às páginas a partir de uma
lista fornecida por um motor de busca.
Torna-se necessário incluir elementos que nos permitam
identificar uma qualquer página ou ecrã e com navegação que
nos possibilite chegar à página de entrada ou ecrã de início.
Elementos de uma interface essenciais para dar resposta
às perguntas que o utilizador coloca a ele próprio e ao
sistema:
!
• Em que website/ecrã estou?
• Do que trata?
• Quando é que esta informação foi publicada?
• Quando foi a última vez que sofreu alterações?
• Como posso dar daqui? Para onde posso ir?

33. TIPOLOGIAS DE INTERFACE
URL:
http://www.ikea.com/pt/pt/

34. TIPOLOGIAS DE INTERFACE
URL:
http://www.ikea.com/pt/pt/

35. TIPOLOGIAS DE INTERFACE
URL:
http://www.sapo.pt

36. TIPOLOGIAS DE INTERFACE
URL:
http://www.thedailybeast.com/newsweek.html

37. TIPOLOGIAS DE INTERFACE

38. TIPOLOGIAS DE INTERFACE

39. TIPOLOGIAS DE INTERFACE

40. TIPOLOGIAS DE INTERFACE
© Escola Virtual, Grupo Porto Editora.

41. TIPOLOGIAS DE INTERFACE
© Escola Virtual, Grupo Porto Editora.

42. TIPOLOGIAS DE INTERFACE
© Numbers, Apple.

43. TIPOLOGIAS DE INTERFACE
URL:
http://www.nytimes.com/interactive/2010/09/10/nyregion/2010-wtc.html

44. TIPOLOGIAS DE INTERFACE

45. TIPOLOGIAS DE INTERFACE

46. TIPOLOGIAS DE INTERFACE
URL:
https://www.youtube.com/watch?v=vDNzTasuYEw

47. BIBLIOGRAFIA
• Lal, R. (2013) Digital Design Essentials. 100 Ways to Design Better Desktop, Web, and
Mobile Interfaces. Rockport Publishers.
• Matos, A. (2009) Dicionário de Informática e Novas Tecnologias. Lisboa, FCA.
• Preece, J.; Rogers, Y. & Sharp, H. (2002) Design de Interacção, Bookman.
• Ribeiro, N. (2004) Multimédia e Tecnologias Interactivas. FCA/Tecnologias de Informação.
• Scott, B. & Neil, T. (2009) Designing Web Interfaces. O’Reilly.