arte do design para plone

André Nogueira

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

Simples Consultoria

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

Simples Consultoria

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

Simples Consultoria

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

CMS próprio.

Até que um dia...

Simples Consultoria + Plone =

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

CSS• Diversos produtos desenvolvidos e

disponibilizado a comunidade

A arte do design para Plone

Ou em outras palavras...

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

4 histórias rápidas:

História 1

World Usability Day

Feito em poucas horasBaseado em layout existente

World Usability Day

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

História 2

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

Abraspe

Maior problema enfrentado:• Configurar o Outlook

História 3

Simples “Estacionamentos”Nosso antigo site indicava qual o

estacionamento mais próximo denossos eventos

Simples “Estacionamentos”

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

História 4

ECA 18 anos

Website ColaborativoVárias pessoas adicionando conteúdo

ECA 18 anos

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

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

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

O próprio 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

Regras para criar um Plone Site de sucesso:

Regra #1

Pense primeiro, faça depois

Pense primeiro, faça depois

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

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

Regra #2

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

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

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.

Regra #3

Design não é CSS

Design não é CSS

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

• Nunca implemtente um sitesem um layout

Regra #4

Não estrague as coisas

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

• Não altere as coisas sem necessidade

Não estrague as coisas!

Não estrague as coisas!

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

• Consistência da interface.• Acessibilidade.

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

Regra #5

Vire um Ninja CSS

• 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

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

• Ou melhor, sem um bom CSS

CSS Ninja

Regra #6

Livre-se do desnecessário

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

Livre-se do desnecessário

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

Livre-se do desnecessário

Regra #7

Tome cuidado com Acessibilidade

• 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

Regra #8

Cuide bem do seu usuário

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

Cuide do seu usuário

Regra #9

Não complique as coisas

• 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

“Simplicity is the ultimate sophistication”Leonardo Davinci

André Nogueira – Plone Symposium South America 2009andre@simplesconsultoria.com.br

http://www.simplesconsultoria.com.br