Slideshow presented to the Portolinux meetup, regarding principles and practices on designing for the web in open-source.

1. José Mota
Design para
programadores
open-source
Princípios e práticas
@josemotanet

2. Eu — José Mota

3. Eu — José Mota
• A 3 dias da Licenciatura em Eng. Informática — ISEP.

4. Eu — José Mota
• A 3 dias da Licenciatura em Eng. Informática — ISEP.
• 3 anos de experiência pro ssional em web design e
desenvolvimento open-source. Inclui freelance.

5. Eu — José Mota
• A 3 dias da Licenciatura em Eng. Informática — ISEP.
• 3 anos de experiência pro ssional em web design e
desenvolvimento open-source. Inclui freelance.
• Trabalho na Weemagine (www.weebiz.com).

6. Eu — José Mota
• A 3 dias da Licenciatura em Eng. Informática — ISEP.
• 3 anos de experiência pro ssional em web design e
desenvolvimento open-source. Inclui freelance.
• Trabalho na Weemagine (www.weebiz.com).
• Não uso M$ Windows há ano e meio. Tem peso.

7. Eu — José Mota
• A 3 dias da Licenciatura em Eng. Informática — ISEP.
• 3 anos de experiência pro ssional em web design e
desenvolvimento open-source. Inclui freelance.
• Trabalho na Weemagine (www.weebiz.com).
• Não uso M$ Windows há ano e meio. Tem peso.
• Linguagens que programo: PHP e Ruby.

8. Sumário

9. Sumário
• Princípios
• Equilíbrio
• Cor
• Usabilidade

10. Sumário
• Princípios
• Equilíbrio
• Cor
• Usabilidade
• Práticas
• Web standards
• Frameworks: CSS, JS, server-side (Zend, Rails, Django, …)
• Engenharia de aplicações

11. Princípios

12. Equilíbrio

13. Equilíbrio
• Equilíbrio vertical

14. Equilíbrio
• Equilíbrio vertical
• Equilíbrio horizontal

15. Equilíbrio
• Equilíbrio vertical
• Equilíbrio horizontal
• Simetria

16. Equilíbrio
• Equilíbrio vertical
• Equilíbrio horizontal
• Simetria
• Prioridades

17. Equilíbrio
• Equilíbrio vertical
• Whitespace
• Equilíbrio horizontal
• Simetria
• Prioridades

18. Equilíbrio
• Equilíbrio vertical
• Whitespace
• Equilíbrio horizontal
• Grelhas
• Simetria
• Prioridades

19. Equilíbrio
• Equilíbrio vertical
• Whitespace
• Equilíbrio horizontal
• Grelhas
• Simetria
• Medida unitária
• Prioridades

20. Cor

21. Cor
• Conteúdo — Melhor legibilidade

22. Cor
• Conteúdo — Melhor legibilidade
• Exposição — Mais intensidade e diversidade

23. Cor
• Conteúdo — Melhor legibilidade
• Exposição — Mais intensidade e diversidade
• Interface — Tirar proveito de psicologia da cor
• Vermelho - perigo / urgência / falha
• Verde - aprovação / noti cação / dinheiro
• Amarelo - cuidado / alarme / energia / mensagens
• Cinzento - incapacidade / deprecação / cronologia
• …

24. Usabilidade

25. Usabilidade
• Estudar audiência — o que destacar?

26. Usabilidade
• Estudar audiência — o que destacar?
• Ícones próprios e claros

27. Usabilidade
• Estudar audiência — o que destacar?
• Ícones próprios e claros
• Botões fáceis (não apenas clicar no texto, :hover, …)

28. Usabilidade
• Estudar audiência — o que destacar?
• Ícones próprios e claros
• Botões fáceis (não apenas clicar no texto, :hover, …)
• Primeira página — o quê & como pôr a informação?

29. Usabilidade
• Estudar audiência — o que destacar?
• Ícones próprios e claros
• Botões fáceis (não apenas clicar no texto, :hover, …)
• Primeira página — o quê & como pôr a informação?
• Pesquisa evidente

30. Usabilidade
• Estudar audiência — o que destacar?
• Ícones próprios e claros
• Botões fáceis (não apenas clicar no texto, :hover, …)
• Primeira página — o quê & como pôr a informação?
• Pesquisa evidente
• Hierarquia

31. Práticas

32. Web standards

33. Web standards
• XHTML 1.0 — o mais desa ador, o mais íntegro
• HTML 5? (modernizr.com)

34. Web standards
• XHTML 1.0 — o mais desa ador, o mais íntegro
• HTML 5? (modernizr.com)
• CSS 3 — menos backgrounds, mais out-of-the-box

35. Web standards
• XHTML 1.0 — o mais desa ador, o mais íntegro
• HTML 5? (modernizr.com)
• CSS 3 — menos backgrounds, mais out-of-the-box
• Javascript inobtrusivo (document.onLoad) e e caz

36. Web standards
• XHTML 1.0 — o mais desa ador, o mais íntegro
• HTML 5? (modernizr.com)
• CSS 3 — menos backgrounds, mais out-of-the-box
• Javascript inobtrusivo (document.onLoad) e e caz
• Floated Div based layouts ≠ Table based layout

37. Frameworks

38. Frameworks
• HTML — Haml

39. Frameworks
• HTML — Haml
• CSS — Sass, Less, 960.gs, Blueprint, …

40. Frameworks
• HTML — Haml
• CSS — Sass, Less, 960.gs, Blueprint, …
• JS — jQuery, Prototype, Mootools, YUI …

41. Frameworks
• HTML — Haml
• CSS — Sass, Less, 960.gs, Blueprint, …
• JS — jQuery, Prototype, Mootools, YUI …
• server-side
• PHP: Zend, CodeIgniter, CakePHP, Kohana, …
• Ruby: Rails, Merb, …
• Python: Django, …?

42. Porquê frameworks?

43. Porquê frameworks?
• Menos trabalho, mais resultados

44. Porquê frameworks?
• Menos trabalho, mais resultados
• Ambiente produtivo (aquele que dá guito)

45. Porquê frameworks?
• Menos trabalho, mais resultados
• Ambiente produtivo (aquele que dá guito)
• De facto standard

46. Porquê frameworks?
• Menos trabalho, mais resultados
• Ambiente produtivo (aquele que dá guito)
• De facto standard
• Menos entediante, menos frustrante, mais divertido

47. Engenharia de
aplicações

48. Engenharia de
aplicações
• Papel e caneta 1º, não programem logo.

49. Engenharia de
aplicações
• Papel e caneta 1º, não programem logo.
• Programação ágil é o futuro (aparentemente)

50. Engenharia de
aplicações
• Papel e caneta 1º, não programem logo.
• Programação ágil é o futuro (aparentemente)
• Pesquisa
• Já está feito? Aproveitar.
• Não está feito? Fazer para aproveitar.

51. Engenharia de
aplicações
• Papel e caneta 1º, não programem logo.
• Programação ágil é o futuro (aparentemente)
• Pesquisa
• Já está feito? Aproveitar.
• Não está feito? Fazer para aproveitar.
• Desenhar uma aplicação não é só Photoshop.
• ALTAMiENTE!

52. Exemplo
Linux @ DEI

55. Obrigado!
Agora a parte das perguntas.