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

Obrigado!
Agora a parte das perguntas.