Design Para Desenvolvimento Open Source

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

Design Para Desenvolvimento Open Source

by José Mota

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 8

Statistics

Design Para Desenvolvimento Open Source Presentation Transcript