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

Agora, somarei ao assunto o que acredito ser um grande tabu no trabalho dos webdesigners: descobrir a dosagem exata de como projetar design, sem esquecer da importância do conteúdo¹.

¹ – Chamo de conteúdo tudo o que deve ser levado em conta para conceber um projeto: o propósito, a definição, o público alvo, os benefícios e etc.

O que importa é o conteúdo

Design é casual. É arte com propósito de venda. Por conta disso, não deve ser encarado como fatia determinante em um projeto web. O papel do design é chamar atenção aos olhos para um conceito, porém, assim como a propaganda de TV, ele não tem o poder de obrigar o consumo daquilo.

Tomemos como exemplo o Twitter. As primeiras versões da sua página web eram modestas, porém o poder da ferramenta era aparente. Façamos, agora, uma comparação com o Meme do Yahoo!. É notável que a sua interface foi desenhada com todo cuidado, porém será que a beleza da ferramenta era o bastante para encantar os usuários de Twitter ao ponto de fazê-los migrar para lá?

Outro exemplo interessante é o Delicious. Nos seus primórdios a sua interface — apesar de usual — era bem pobre de estilo. Ainda assim, naquela época o Delicious era considerado uma das melhores ferramentas de social bookmarking (quiçá a melhor).

Conclusão

Não quero ser polêmico ao ponto de dizer que design não é importante. Eu adoro navegar em sites bonitos e gosto mais ainda de usar ferramentas bem desenhadas. Aliás, tenho certeza de que todas as pessoas também gostam. Contudo, saber a dosagem certa do design para web e aplicá-lo da forma correta ao propósito do projeto é muito importante, até porque, não nos esqueçamos, sem conteúdo não há webdesign. :)

¹ – Defino website como qualquer tipo de site, hotsite, blog ou portal; apesar de alguns portais terem características de sistema agregados.

Conceitos de User Experience e User Interface

UX ou UE é, basicamente, a forma de criação da arquitetura e das interfaces de um produto com foco na Experiência do Usuário, como o próprio nome se refere. Ou seja, trata de todos os aspectos de interação do usuário com o produto. Aí entra o papel da UI: tranformar a UX em algo visualmente atrativo e eficiente.

Confesso que é deveras complicado chegar numa construção de Design UX/UI que seja agradável ao usuário tanto pela usabilidade, quanto pela aparência. Mas é aí que entra a parte interessante da história: experimentar!

Agora, as comparações

1. Masthead

Em sistemas web, o Masthead define um menu horizontal na parte superior direita da tela. É uma forma rápida e prática para apresentar links de perfil de usuário e saída do sistema. Estes links podem ser encontrados, por exemplo, em qualquer serviço Google, como o Gmail.

Em websites a coisa muida de figura, já que é difícil encontrar um cenário em que o masthead se encaixe. O link “pular para conteúdo” pode ser uma boa “simulação” de um masthead. Este link, inclusive, pode ser encontrado neste meu blog.

2. Boxes (ou caixas)

Os boxes (ou caixas) são uma forma muito interessante de organizar várias seções de um sistema numa mesma tela. O administrador do WordPress utiliza muito deste conceito.

O interessante é que a utilização de boxes pode ser muito similar nos websites. Portais jornalísticos utilizam muito deste conceito também.

3. Largura do layout

Descobri — depois de muitas experimentações — que o layout fluido (ou elástico) é a melhor pedida para desenvolver sistemas web. Este formato abre o leque de possibilidades para a criação de controles, boxes adicionais e formulários. Além disso, é possível incluir uma sidebar fixa que se movimenta junto com o tamanho do canvas do browser do usuário.

Em websites a largura do layout é um assunto um pouco polemizado, porém ao meu ver é algo muito simples de imaginar: basta saber a característica do negócio. Um blog talvez tenha uma interface mais bem trabalhada numa estrutura fixa e não tão larga. Já um portal jornalístico (como pode ser visto acima) necessita de um layout mais amplo, visto a quantidade de informação que precisa ser organizada.

4. Iconografia

Penso ser indispensável a utilização de ícones em sistemas web², mas em suas devidas proporções. É importante deixar claro para o usuário que tipo de informação ele vai encontrar em determinado link (um menu por exemplo).

² – Acho fantástica a iconografia incluída no WordPress 2.7, no estilo barra de ferramentas do PhotoShop.

Para utilizar ícones em websites também é preciso — assim como na escolha da largura do layout — entender a característica do negócio. É muito comum websites não utilizarem ícones e ainda assim serem usuais. Porém é importante levar em conta questões como contraste nas cores e no tamanho da fonte dos títulos que compõem a tipografia, por exemplo.

5. E por falar em tipografia…

Uma boa tipografia dá elegância a qualquer projeto. Por conta disso não há uma regra que me faça comparar as tipografias de sistemas web e websites, exceto em dois aspectos:

• Sistemas web podem ter seções com fonte de tamanho reduzido e os parágrafos não precisam ter o line-height acentuado, já que é rara a utilização de textos longos.
• Websites precisam receber maior cuidado na separação dos textos (veja este meu artigo que trata um pouco disso).

6. Footer

Alguns webdesigners não se preocupam muito com ele, mas ao meu ver o footer (rodapé) tem tanta importância quanto o header (cabeçalho) de um website. Em sistemas web ele pode ser mais discreto.

O footer talvez seja a seção que tenha mais diferenças entre os dois cenários deste artigo. Um website com um footer rico melhora — e muito — a navegabilidade. Já num sistema web praticamente todos os recursos estão dispostos acima dele, o que dispensa sua incrementação.

Considerações finais

Os cenários deste artigo são fruto de experimentações que fiz (e faço) ao longo do tempo. De qualquer forma, não tomo estes conceitos como regra: sou a favor da flexibilidade. Cada projeto é um projeto e tudo é válido na construção de uma interface usual, bonita e agradável ao usuário final. :D

Hora de Wireframes

Os wireframes, atrelado ao Design de Interação definido na fase de escopo, são, acredito eu, os principais elementos de qualquer projeto.

O Design de Interação trata de relacionar todo o fluxo que as páginas do projeto terão e os wireframes vêm como uma transformação visual para o diagrama criado. Tendo a base das páginas que serão necessárias (Design de Interação), agora é só desenhar uma estrutura visual para o conteúdo das páginas (wireframes), colocando os elementos do layout em locais específicos, levando em conta sua importância e relevância.

Costumo desenhar meus wireframes inicialmente em papel e depois prototipar estes desenhos em XHTML e CSS. Defino, assim, alguns mockup’s e templates para o projeto.

Os wireframes em XHTML são mais amplos por possibilitarem a definição de fatores que os em gráfico não possibilitam. O estudo da tipografia e a implementação das cores são alguns destes fatores.

Desenhar Wireframes é uma arte, pois deve-se tomar muito cuidado no posicionamento de cada elemento no canvas do layout. É importante sempre levar em conta fatores como Acessibilidade e Usabilidade.

Modelando o Banco de Dados

A fase de modelagem de banco de dados é outra que poderia ser adiantada, porém fazer uma modelagem logo no início pode causar sérios transtornos (não tenha dúvidas que depois de desenhar os wireframes muitas coisas mudam na estrutura de banco de dados). Um campo que nasce, uma chave que se move, sempre há o que reavaliar.

Os wireframes darão boa base para a estrutura que o banco de dados deve ter. Então, basta organizar as tuplas que porventura já estiverem criadas, adicionar as tuplas que nasceram no meio do caminho e definir os campos para cada uma delas. Costumo fazer esse processo também desenhando à mão, mas depois é sempre bom passar tudo isso para um DER mais bem detalhado.

Apresentando resultados

A cara do projeto acaba de nascer! Temos wireframes em papel ou em gráfico, templates e a modelagem do banco de dados. Chegou a hora de apresentar resultados.

Quando o trabalho se trata de um freelance, cuidados na apresentação devem ser tomados. Talvez não seja interessante mostrar wireframes em papel, a não ser que os desenhos tenham uma boa cara. De qualquer forma, acho mais interessante apresentar os templates em XHTML. Já no meio corporativo, onde os resultados podem ser discutidos entre os colegas e a chefia, vale qualquer um dos papéis, desde que bem organizados.

Neste momento um ciclo se inicia até a chegada num consenso para a apresentação ideal que o projeto deve ter. Revisões naturalmente podem surgir.

Relacionados

• Processo de criação web
• Processo de criação web: o escopo
• Processo de criação web: a identidade
• Processo de criação web: a diagramação
• Processo de criação web: o desenvolvimento

Com base no diagrama do processo de criação web postado no artigo anterior, apresento as características da primeira fase.

Coleta de dados

É o primeiro contato com o cliente. Essa fase inicial acaba tendo uma cara de palestra, porque à medida que o cliente vai passando seus desejos, nós temos que mostrar quais serão as formas que eles podem ser criados e, naturalmente, o que pode ou não ser criado, mas como diz o ditado que o cliente pode tudo, eu troco por o que deve ou não ser criado.

A parte de coleta de dados, por ser o início de tudo, deve ser capaz de adquirir o maior número de informação possível do negócio do cliente. Depois, com todos os pontos identificados e organizados, começamos a pensar na forma de criação das próximas etapas.

Natureza do projeto

Projetos mais simples nos dão mais liberdade de fala, assim conseguimos agregar idéias ao cliente com mais facilidade, já com projetos mais robustos, não há outro jeito, reuniões e entrevistas serão necessárias para definir os pontos de implementação.

Caso de uso

O caso de uso é algo que costumo usar para melhor documentar o projeto. Mostrar ao cliente tudo aquilo que foi entendido nos encontros é uma forma de passar comprometimento com aquilo que deve ser feito. A apresentação do caso de uso serve para acertar os desencontros de informação.

Arquitetura da Informação nesse processo

A Arquitetura da Informação é item essencial no desenvolvimento de qualquer projeto no decorrer de todas as suas fases. Nesta parte inicial, de declaração de escopo e identificação de funcionalidades, a Arquitetura da Informação, através do Design da Informação, serve como um meio de melhor apresentação de tudo aquilo que foi coletado.

A AI, basicamente, é o estudo da Ciência da Informação e da Interação Humano-Computador, ou seja, o ato de focar o trabalho na forma com que o usuário irá interagir com o produto final. Isso inclui Usabilidade e Acessibilidade por exemplo.

Criar um Design de Interação também é fator de suma importância, pois ele é responsável pelo link entre Arquitetura da Informação e o Design Gráfico (área verde do Diagrama do processo de criação web).

Bom… O que importa nesta etapa inicial é o bom senso. Escutando tudo o que o cliente tem a dizer e mostrando os prós e contras de implementar este ou aquele recurso.

Relacionados

• Processo de criação web
• Processo de criação web: o escopo
• Processo de criação web: a identidade
• Processo de criação web: a diagramação
• Processo de criação web: o desenvolvimento

Para tanto, acredito que diversas técnicas de desenvolvimento de software podem (e devem) ser aplicadas para um bom desenvolvimento web, até porque, atualmente, até já se fala em Desenvolvimento de Software Baseado em Web! O conceito acaba sendo o mesmo para os dois universos: softwares de CD e softwares de URI, porém dando o devido crédito aos softwares de CD, já que estes são mais maduros.

À medida que vou criando sites, vou pensando em formas de melhor criar meus próximos projetos. Vou aprendendo com os erros e mudando ao longo do tempo. Isso faz com que eu desenvolva melhor os projetos que estão ainda só na agenda. Para explicar um pouco do que penso sobre, apresento uma imagem descritiva de como costumo trabalhar atualmente nos projetos que crio.

Não é lá nenhum Best Pratics, mas com esses conceitos eu tenho conseguido criar meus projetos de forma organizada e mais bem documentada. Pretendo melhorar e acrescentar muitos conceitos, ainda.

Criei quatro seções com cores diferentes na imagem. Elas seriam como grupos de desenvolvimento. Em breve, explicação de cada uma delas nos próximos posts. ;)

Relacionados

• Processo de criação web
• Processo de criação web: o escopo
• Processo de criação web: a identidade
• Processo de criação web: a diagramação
• Processo de criação web: o desenvolvimento