SlideShare una empresa de Scribd logo
1 de 55
Descargar para leer sin conexión
José Mota



       Design para
      programadores
       open-source

               Princípios e práticas



@josemotanet
Eu — José Mota
Eu — José Mota

•   A 3 dias da Licenciatura em Eng. Informática — ISEP.
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.
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).
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.
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.
Sumário
Sumário
•   Princípios

    •   Equilíbrio

    •   Cor

    •   Usabilidade
Sumário
•   Princípios

    •   Equilíbrio

    •   Cor

    •   Usabilidade

•   Práticas

    •   Web standards

    •   Frameworks: CSS, JS, server-side (Zend, Rails, Django, …)

    •   Engenharia de aplicações
Princípios
Equilíbrio
Equilíbrio


•   Equilíbrio vertical
Equilíbrio


•   Equilíbrio vertical

•   Equilíbrio horizontal
Equilíbrio


•   Equilíbrio vertical

•   Equilíbrio horizontal

•   Simetria
Equilíbrio


•   Equilíbrio vertical

•   Equilíbrio horizontal

•   Simetria

•   Prioridades
Equilíbrio


•   Equilíbrio vertical
                            •   Whitespace
•   Equilíbrio horizontal

•   Simetria

•   Prioridades
Equilíbrio


•   Equilíbrio vertical
                            •   Whitespace
•   Equilíbrio horizontal
                            •   Grelhas
•   Simetria

•   Prioridades
Equilíbrio


•   Equilíbrio vertical
                            •   Whitespace
•   Equilíbrio horizontal
                            •   Grelhas
•   Simetria
                            •   Medida unitária
•   Prioridades
Cor
Cor
•   Conteúdo — Melhor legibilidade
Cor
•   Conteúdo — Melhor legibilidade

•   Exposição — Mais intensidade e diversidade
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

    •   …
Usabilidade
Usabilidade

•   Estudar audiência — o que destacar?
Usabilidade

•   Estudar audiência — o que destacar?

•   Ícones próprios e claros
Usabilidade

•   Estudar audiência — o que destacar?

•   Ícones próprios e claros

•   Botões fáceis (não apenas clicar no texto, :hover, …)
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?
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
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
Práticas
Web standards
Web standards

•   XHTML 1.0 — o mais desa ador, o mais íntegro

    •   HTML 5? (modernizr.com)
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
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
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
Frameworks
Frameworks
•   HTML — Haml
Frameworks
•   HTML — Haml

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

•   CSS — Sass, Less, 960.gs, Blueprint, …

•   JS — jQuery, Prototype, Mootools, YUI …
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, …?
Porquê frameworks?
Porquê frameworks?


•   Menos trabalho, mais resultados
Porquê frameworks?


•   Menos trabalho, mais resultados

•   Ambiente produtivo (aquele que dá guito)
Porquê frameworks?


•   Menos trabalho, mais resultados

•   Ambiente produtivo (aquele que dá guito)

•   De facto standard
Porquê frameworks?


•   Menos trabalho, mais resultados

•   Ambiente produtivo (aquele que dá guito)

•   De facto standard

•   Menos entediante, menos frustrante, mais divertido
Engenharia de
  aplicações
Engenharia de
               aplicações
•   Papel e caneta 1º, não programem logo.
Engenharia de
               aplicações
•   Papel e caneta 1º, não programem logo.

•   Programação ágil é o futuro (aparentemente)
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.
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!
Exemplo
 Linux @ DEI
Design Para Desenvolvimento Open Source
Design Para Desenvolvimento Open Source
Obrigado!
Agora a parte das perguntas.

Más contenido relacionado

Similar a Design Para Desenvolvimento Open Source

Brasil, Open Source e o Mundo dos Negócios
Brasil, Open Source e o Mundo dos NegóciosBrasil, Open Source e o Mundo dos Negócios
Brasil, Open Source e o Mundo dos NegóciosOpenBossa
 
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IAAula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IAAmyris Fernandez
 
Laboratório Audivisual Hipermedia Aula3 4 13 22 03
Laboratório Audivisual Hipermedia Aula3 4 13 22 03Laboratório Audivisual Hipermedia Aula3 4 13 22 03
Laboratório Audivisual Hipermedia Aula3 4 13 22 03Pedro Tavares
 
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User InterfaceDesenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User InterfaceDomingos Teruel
 
Java e Mercado de Trabalho
Java e Mercado de TrabalhoJava e Mercado de Trabalho
Java e Mercado de TrabalhoEduardo Carvalho
 
Carreira de Desenvolvimento
Carreira de DesenvolvimentoCarreira de Desenvolvimento
Carreira de DesenvolvimentoAlvaro Viebrantz
 
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015Anyssa Ferreira
 
UI Design para Desenvolvimento Mobile & Games
UI Design para Desenvolvimento Mobile & GamesUI Design para Desenvolvimento Mobile & Games
UI Design para Desenvolvimento Mobile & GamesSérgio Bezerra da Silva
 
III CAFÉ e CODE - PROVOCAÇÕES DO MESTRE
III CAFÉ e CODE - PROVOCAÇÕES DO MESTRE III CAFÉ e CODE - PROVOCAÇÕES DO MESTRE
III CAFÉ e CODE - PROVOCAÇÕES DO MESTRE Cloves da Rocha
 
Aprensentacao oo-trincheiras
Aprensentacao oo-trincheirasAprensentacao oo-trincheiras
Aprensentacao oo-trincheirasHigor César
 
Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...
Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...
Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...Marcelo Ramos
 
A Web para todos - Acessibilidade na web
A Web para todos  - Acessibilidade na webA Web para todos  - Acessibilidade na web
A Web para todos - Acessibilidade na webRogério Chiavegatti
 

Similar a Design Para Desenvolvimento Open Source (20)

Web mobile dicas
Web mobile dicasWeb mobile dicas
Web mobile dicas
 
Brasil, Open Source e o Mundo dos Negócios
Brasil, Open Source e o Mundo dos NegóciosBrasil, Open Source e o Mundo dos Negócios
Brasil, Open Source e o Mundo dos Negócios
 
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IAAula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
 
Laboratório Audivisual Hipermedia Aula3 4 13 22 03
Laboratório Audivisual Hipermedia Aula3 4 13 22 03Laboratório Audivisual Hipermedia Aula3 4 13 22 03
Laboratório Audivisual Hipermedia Aula3 4 13 22 03
 
Frameworks PHP
Frameworks PHPFrameworks PHP
Frameworks PHP
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User InterfaceDesenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
 
Java e Mercado de Trabalho
Java e Mercado de TrabalhoJava e Mercado de Trabalho
Java e Mercado de Trabalho
 
Carreira de Desenvolvimento
Carreira de DesenvolvimentoCarreira de Desenvolvimento
Carreira de Desenvolvimento
 
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
 
UI Design para Desenvolvimento Mobile & Games
UI Design para Desenvolvimento Mobile & GamesUI Design para Desenvolvimento Mobile & Games
UI Design para Desenvolvimento Mobile & Games
 
Desenvolvimento Web
Desenvolvimento WebDesenvolvimento Web
Desenvolvimento Web
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
III CAFÉ e CODE - PROVOCAÇÕES DO MESTRE
III CAFÉ e CODE - PROVOCAÇÕES DO MESTRE III CAFÉ e CODE - PROVOCAÇÕES DO MESTRE
III CAFÉ e CODE - PROVOCAÇÕES DO MESTRE
 
Aprensentacao oo-trincheiras
Aprensentacao oo-trincheirasAprensentacao oo-trincheiras
Aprensentacao oo-trincheiras
 
Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...
Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...
Avaliação de Usabilidade e Arquitetura de Informação do do Website da Prefeit...
 
Introdução ao Python com Django
Introdução ao Python com DjangoIntrodução ao Python com Django
Introdução ao Python com Django
 
A Web para todos - Acessibilidade na web
A Web para todos  - Acessibilidade na webA Web para todos  - Acessibilidade na web
A Web para todos - Acessibilidade na web
 
Python para devs
Python para devsPython para devs
Python para devs
 
Palestra Carreira Java Bahia Meeting
Palestra Carreira Java Bahia MeetingPalestra Carreira Java Bahia Meeting
Palestra Carreira Java Bahia Meeting
 

Design Para Desenvolvimento Open Source

  • 1. José Mota Design para programadores open-source Princípios e práticas @josemotanet
  • 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.
  • 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
  • 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 • …
  • 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
  • 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
  • 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, …?
  • 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!
  • 55. Obrigado! Agora a parte das perguntas.