Arte Do Design Para Plone

55
André Nogueira

description

Palestra de André Nogueira, apresentada durante o Plone Symposium South America de 2009, em São Paulo - Brasil

Transcript of Arte Do Design Para Plone

Page 1: Arte Do Design Para Plone

André Nogueira

Page 2: Arte Do Design Para Plone

Um pouco sobre a história da Simples...

Page 3: Arte Do Design Para Plone

Simples Consultoria

• Usabilidade• Arquitetura da Informação• Gestão de Conteúdo

Page 4: Arte Do Design Para Plone

Simples Consultoria

• Busca por um CMS:– Fácil de usar– Acessível– Foco na organização de conteúdo– Aderente aos padrões web

Page 5: Arte Do Design Para Plone

Simples Consultoria

• Testamos vários CMS• Iniciamos o desenvolvimento de um

CMS próprio.

Page 6: Arte Do Design Para Plone

Até que um dia...

Page 7: Arte Do Design Para Plone
Page 8: Arte Do Design Para Plone

Simples Consultoria + Plone =

• + 500 projetos em Plone• + 200 pessoas treinadas em Plone e

CSS• Diversos produtos desenvolvidos e

disponibilizado a comunidade

Page 9: Arte Do Design Para Plone

A arte do design para Plone

Page 10: Arte Do Design Para Plone

Ou em outras palavras...

Page 11: Arte Do Design Para Plone

Como fazer qualquer coisa com o Plonee garantir que fique bonito e funcional.

Page 12: Arte Do Design Para Plone

4 histórias rápidas:

Page 13: Arte Do Design Para Plone

História 1

Page 14: Arte Do Design Para Plone

World Usability Day

Feito em poucas horasBaseado em layout existente

Page 15: Arte Do Design Para Plone

World Usability Day

Um deficiente visual elogiou o site,pois conseguiu fazer sua inscrição

Page 16: Arte Do Design Para Plone

História 2

Page 17: Arte Do Design Para Plone

AbraspeAssociação Brasileira de PedestresMantido por usuário com mais de 70 anos

Page 18: Arte Do Design Para Plone

Abraspe

Maior problema enfrentado:• Configurar o Outlook

Page 19: Arte Do Design Para Plone

História 3

Page 20: Arte Do Design Para Plone

Simples “Estacionamentos”Nosso antigo site indicava qual o

estacionamento mais próximo denossos eventos

Page 21: Arte Do Design Para Plone

Simples “Estacionamentos”

Éramos um dos primeiros resultado noGoogle para a tag “estacionamento”

Page 22: Arte Do Design Para Plone

História 4

Page 23: Arte Do Design Para Plone

ECA 18 anos

Website ColaborativoVárias pessoas adicionando conteúdo

Page 24: Arte Do Design Para Plone

ECA 18 anos

Depois de receber muita informaçãoO site virou um livro

Page 25: Arte Do Design Para Plone

Todos esses sites foram feitosapenas com alterações de CSS...

Page 26: Arte Do Design Para Plone

...usando o melhor “framework”para desenvolver um Plone site:

Page 27: Arte Do Design Para Plone

O próprio Plone

Page 28: Arte Do Design Para Plone

Características do Plone “out of the box”

• Fácil de usar e colaborar• Alto nível de acessibilidade• SEO• Separação de conteúdo, estrutura e

apresentação

Page 29: Arte Do Design Para Plone

Regras para criar um Plone Site de sucesso:

Page 30: Arte Do Design Para Plone

Regra #1

Pense primeiro, faça depois

Page 31: Arte Do Design Para Plone

Pense primeiro, faça depois

• Plone é uma ferramenta fantástica• Mas não faz tudo sozinho• Não basta instalar o site e pronto

Page 32: Arte Do Design Para Plone

Pense primeiro, faça depois

• Também precisa de passos básicos:– Levantamento de informações– Briefing– Análise dos usuários– Análise da concorrência e mercado– Arquitetura da informação

Page 33: Arte Do Design Para Plone

Regra #2

Faça o design para o seu site,não para um Plone site.

Page 34: Arte Do Design Para Plone

Design do seu site

• Um bom design é bom no Plone, no Drupal, no Joomla, Wordpress, HTML...

• Pense apenas nos padrões de design, de usabilidade, consistência da interface...

• Respeite todos os dados levantados na regra anterior

Page 35: Arte Do Design Para Plone

Design do seu site

• A estrutura do Plone não foi criada ao acaso.• Um bom design “encaixa” no Plone.• Se não, pode ter algo errado com seu design.

Page 36: Arte Do Design Para Plone

Regra #3

Design não é CSS

Page 37: Arte Do Design Para Plone

Design não é CSS

• Lugar para fazer layout é no Photoshop, Gimp, ou na sua ferramenta preferida

• Nunca implemtente um sitesem um layout

Page 38: Arte Do Design Para Plone

Regra #4

Não estrague as coisas

Page 39: Arte Do Design Para Plone

• A instalação Padrão cobre 90% das necessidades de sites

• Não altere as coisas sem necessidade

Não estrague as coisas!

Page 40: Arte Do Design Para Plone

Não estrague as coisas!

• Não mude templates apenas para alterar a aparência.

• Consistência da interface.• Acessibilidade.

Page 41: Arte Do Design Para Plone

Não estrague as coisas!

• Deliverance é uma ferramenta incrível,mas pode criar vários problemas– Acessibilidade– Padrões web– Facilidade de uso– SEO

• Só deve ser utilizado por pessoas habilitadas

Page 42: Arte Do Design Para Plone

Regra #5

Vire um Ninja CSS

Page 43: Arte Do Design Para Plone

• Toda apresentação precisa estar na CSS.

• Não misture Apresentação e Estrutura.

• Com conhecimento avançado de CSS dá pra implementar qualquer layout

CSS Ninja

Page 44: Arte Do Design Para Plone

• Não é possivel implementar um bom layout em qualquer sistema sem CSS

• Ou melhor, sem um bom CSS

CSS Ninja

Page 45: Arte Do Design Para Plone

Regra #6

Livre-se do desnecessário

Page 46: Arte Do Design Para Plone

• Elimine tudo o que não estiver usando:– CSS– JS– KSS– IMG

Livre-se do desnecessário

Page 47: Arte Do Design Para Plone

• Use CSS Sprites– Todas as imagens num único arquivo

Livre-se do desnecessário

Page 48: Arte Do Design Para Plone

Regra #7

Tome cuidado com Acessibilidade

Page 49: Arte Do Design Para Plone

• Garanta que tudo o que você desenvolver vai seguir os padrões

• Nunca esqueça de coisas básicas:– Alt das imagens– Atalhos– Cuidado com o contraste– Cuidado com scripts

<p class="hiddenStructure">

<a accesskey="2" href="documentContent">Ir para o conteúdo.</a> |

<a accesskey="6" href="portlet-navigation-tree">Ir para a navegação</a>

</p>

Acessibilidade

Page 50: Arte Do Design Para Plone

Regra #8

Cuide bem do seu usuário

Page 51: Arte Do Design Para Plone

• Ensine seu usuário a usar o sistema.• Ensine os conceitos do Plone.• Ofereça material de apoio.

Cuide do seu usuário

Page 52: Arte Do Design Para Plone

Regra #9

Não complique as coisas

Page 53: Arte Do Design Para Plone

• Mantenha as coisas simples:– Para seu usuário.– Para você.

• De nada adianta uma ferramenta poderosa se ela não for fácil de usar

Não complique as coisas

Page 54: Arte Do Design Para Plone

“Simplicity is the ultimate sophistication”Leonardo Davinci

Page 55: Arte Do Design Para Plone

André Nogueira – Plone Symposium South America [email protected]

http://www.simplesconsultoria.com.br