A essência do design aplicado na web

O ponto mais importante de todos talvez seja: não tente imaginar a mídia web como se fosse mídia impressa. São realidades completamente diferentes! Na mídia impressa usamos CMYK, na web RGB. A mídia impressa usa centímetros, já a web usa pixels. Na mídia impressa a tipografia é estática (como uma foto), na web a tipografia muda de acordo com o ambiente (como se tivesse vida).

Nós precisamos entender que a essência do design é sempre mesma¹, porém a aplicabilidade deve ser sempre de acordo com o tipo de trabalho. Nenhum website é entregue encadernado.

¹ – Uma sucinta explicação do que é design: imaginar, elaborar e confeccionar algum artefato, utilizando a arte criativa para conceber o resultado.

Webdesign não é print screen

Imagine a seguinte cena: o programador abre sua IDE de desenvolvimento, programa todas as rotinas necessárias para uma determinada funcionalidade ter vida, salva um arquivo .txt e apresenta para a sua equipe. Não tenha dúvidas de que a maioria vai pensar: “Legal, código bonito, mas não seria melhor ver como ele funciona?”. A sensação que eu tenho sobre o que nós pensamos sobre webdesign é a mesma. O indivíduo abre o Photoshop, faz uma deslumbrante tela e apresenta o resultado em imagem estática. Pensem: uma página web é como um organismo vivo, que pode se manifestar de formas diferentes de acordo com o ambiente. Ou seja, o que determina a boa disposição de um layout são os textos, imagens, multimídia ou qualquer outro compontente que o componha.

Completando sabiamente o assunto, Zeldman outro dia disse:

Content precedes design. Design in the absence of content is not design, it’s decoration.

Seja qual for o projeto, o mais importante de tudo sempre será o conteúdo.

Não quero dizer que todo webdesigner deve ser um guru de HTML, CSS e — quem sabe — JavaScript, mas é imprescindível que se tenha a noção de quais recursos usar para tornar um print screen realidade. Eu costumo julgar a qualidade de uma marcação HTML/CSS da mesma forma que julgo layouts. Penso ser tudo parte de um mesmo universo. O webdesigner precisa entender que aquele título feito em 20pt no Photoshop precisa ser um <h1> ou <h2> (dependedo do caso), para atribuir SEO ao site, por exemplo.

Webdesign e as Metodologias Ágeis²

Tenho percebido que há uma carência muito grande de webdesigners que saibam trabalhar com Metodologias Ágeis. E isso é uma pena, porque o sentido da metodologia ágil — ao pé da letra — é tornar a equipe unida e produtiva em toda as fases do projeto. Estariam os webdesigners sendo individualistas?

² – Uma metodologia ágil é aquela que une diversos princípios para melhorar a comunicação entre todos os envolvidos num projeto (inclusive o cliente) e também ajuda na concepção do que realmente precisa ser feito, sempre respondendo às mudanças que o produto sofre, não se apegando à especificações imaginárias.

Falando especificamente de Metodologias Ágeis, alguns Scrum Masters optam por adiantar os sprints de design, fazendo, assim, os chamados mini-waterfalls, outros, como eu, preferem integrar as tarefas de design junto das demais. Cada um tem a sua justificativa (o link do mini-waterfall explica um pouco disso) e a minha está ligada ao que falei acima: conteúdo precede o design. Não vai ser útil ter só a tela do photoshop, porque aquela paginação pode precisar de 20 itens por página e não 10, aquela galeria pode precisar de um controle para remover a foto que o webdesigner não imaginou no seu desenho, o nome do usuário fulano pode ser grande o suficiente para quebrar a caixa de profile e assim por diante.

Fazendo o webdesigner pensar fora da caixa

• O webdesigner precisa descobrir que desenhar em marcação é possível! Isso vai facilitar, inclusive, o trabalho dos programadores;
• Precisa estar próximo da sua equipe e interagir com ela;
• Precisa entender que o seu trabalho não é meramente decorativo. É evolutivo. Do wireframe à marcação. Da marcação à UI/UX. Da UI/UX à identidade visual.
• Conheço diversos programadores que gostam de entender o mundo do webdesign para tornar seu trabalho melhor. É essencial que o webdesigner tenha a mesma motivação. Entender de social coding pode ser um excelente começo.

Para esta temática, nada melhor do que definir check-lists (as chamadas to-do lists) para detalhar tarefas de curto prazo (algumas horas ou alguns dias) ou até mesmo tarefas de longo prazo que implicam no escopo de desenvolvimento do projeto. A idéia aqui não necessariamente é chegar num nível de detalhamento que um PMBOK propõe, apesar de seus conceitos também serem essenciais para a produção de qualquer projeto.

Tipos de check-lists

Para qualquer coisa que faço costumo definir várias check-lists para me organizar. Algumas pequenas, outras longas. A idéia é definir a revelância do uso que cada check-list terá, senão nem é necessário fazê-las, visto que isso poderia até desorganizar aquilo que, inicialmente, era para se organizar.

Costumo criar check-lists para:

• A definição de todos os processos de um projeto, desde o primeiro estudo até a última linha de código. Esta lista de atividades costuma ser extensa, mas é ótima para delimitar os pontos à fazer. Ela é praticamente uma decalaração de requisitos;
• A definição dos pontos à fazer de um módulo específico de um projeto, como por exemplo a parte de diagramação ou a modelagem de banco de dados;
• Lembretes que devem ter rápida execução. Por exemplo algo que defino pela manhã e devo fazer no fim do dia, ou algo que devo implementar no dia seguinte. Essas listas eu costumo ter sempre no bolso. Elas costumam ser pequenas e muito eficazes;
• A declaração de afazeres inerentes à produção, porém que estão fora da linha de desenvolvimento. Por exemplo a aquisição ou teste de uma ferramenta de apoio, a necessidade de contato com clientes ou pessoas envolvidas no projeto, reuniões, e etc;
• A declaração dos novos desafios que busco. Isso mesmo! Até para os estudos fazemos para incrementar um projeto ou até mesmo para aprimorar nossa linha de conhecimento é interessante ter uma lista de à fazer. Até porque teremos que definir um tempo para que este estudo aconteça, assim como acontece em qualquer fase de um projeto. É claro que grande parte da nossa aprendizagem acontece naturalmente, mas às vezes não temos tempo para nos aprofundarmos num determinado assunto. Então, é só colocá-lo numa pauta de estudos.

Mas… Como fazer uma check-list eficaz?

Existem algumas ferramentas na rede que podem facilitar a construção de check-lists e organizar nosso tempo. Posso citar o toggl, o backpack ou o tadalist da famosa 37signals, ou ainda o Remember The Milk (agradecimentos ao Walmar pela dica). Porém a criação de uma boa check-list está além de uma boa ferramenta de to-do. Em determinados casos um pequeno post-it pode resolver o problema. A questão é saber se organizar no tempo e definir os pontos importantes daquilo que se pretende fazer. No meu caso até o celular ajuda! Nele há recursos de listas de atividades integradas ao calendário, assim posso ver meus afarezes a qualquer momento e em qualquer lugar!

Check-lists não são relatórios

Até pode-se criar algo incrementado, para uma apresentação, por exemplo. Mas ao meu ver as check-lists devem ser sucintas e objetivas, focando diretamente no ponto chave daquilo que se deve fazer. Check-lists são para nos guiar no tempo, não para nos dizer como fazer os processos, ou seja, as idéias devem estar pré-definidas em nossa mente. As check-lists, apenas, nos apresentam o que devemos fazer e quando devemos fazer.