Agni.art

Qual é a real função do design?

Design está na moda. Usam essa palavra para se referir a uma porção de coisas, e que nem sempre tem de fato relação com Design. Essa palavra chama a atenção em capas de revista, temas de palestras, cursos e campanhas publicitárias. As várias interpretações e o pouco esclarecimento sobre a real função do Design geram uma grande confusão e pouca eficácia no processo de criação, principalmente para quem está começando na área.

“Tio, o que é Design?”

Design refere-se ao projeto visual e funcional de um produto, a adaptação de um produto a necessidade dos seus usuários, cativando o seu uso através da estética, aplicando-se conceitos e usabilidade a sua forma. Porém não é difícil encontrar profissionais, empresas, cursos, matérias de revistas e conversas de botequim, associando o Design à produção de imagens, ou resumindo-o a manipulação de um software específico.

Vale sempre lembrar que um software é apenas uma ferramenta, e por si só não garante a qualidade do projeto. Nenhum software deve ser encarado como uma solução pronta. Existem diversos softwares diferentes e com funções similares, e a escolha sobre qual utilizar deve ser de cada profissional. A definição do que é Design vai muito além do Photoshop!

Design é uma área projetual. Sua função é responsável por gerar desempenho, qualidade, durabilidade e aparência a um produto. Cada trabalho a ser realizado exige planejamento, pesquisa, criatividade e técnica. Ao contrário do que muitos pensam, a função do Design não está vinculada pura e simplesmente a produção de imagens.

O Design para Web

O webdesign é um fragmento do design. Não existe webdesigner. Existe o designer que faz web, e este profissional tem que aprender tudo, tipografia, fotografia, semiótica, gestalt, matemática, ótica, percepção, comportamento humano, etc. Senão, ele não consegue fazer web (Alexandre Wollner).

Costumo dizer que o design para web chega a ser mais multidisciplinar que em outras vertentes. Hoje o profissional de webdesign, para elaborar um projeto coerente, precisa trabalhar em conjunto com diversos outros profissionais como arquitetos de informação, webwriters ou programadores (isso quando ele próprio não acaba assumindo uma dessas funções). No desenvolvimento de um website, além do trabalho de criação alguns outros conhecimentos são importantes para que o projeto forneça soluções eficientes e eficazes em usabilidade, desempenho e comunicação, focadas nas necessidades do público-alvo. Não é um trabalho apenas criativo, mas também de planejamento e de pesquisa. Produzir um Web Site inevitavelmente exige “pensar”.

Portanto, além da manipulação de Softwares, existem alguns métodos de planejamento e pesquisa que se deve conhecer, além de conceitos sobre como trabalhar a pregnância da forma.

Briefing: coletando as informações

Todo projeto deve começar com um briefing. Ele é o documento onde são colocadas as informações e dados necessários para a criação de qualquer projeto. Utilizar elementos dentro de qualquer peça gráfica sem um estudo do caso é um equívoco que compromete a comunicação e a funcionalidade. Há que se levar em consideração diversos fatores tais como: o objetivo do projeto, o produto a ser divulgado, o público-alvo (sexo, idade, cultura, classe social, e outras informações relevantes), identidade visual existente, motivações e propósitos, informações sobre o cliente, a prioridade das informações, a imagem a ser transmitida, etc. Para realizar tal estudo, nada melhor do que ter em mãos um briefing bem elaborado. Se não temos em nossa equipe um profissional de atendimento, o ideal para a elaboração desse documento é se reunir com o cliente, tirando suas dúvidas, esclarecendo detalhes e orientando-o sobre conceitos e tecnologias. Quando esse processo de elaboração não é possível de se realizar com o cliente, pode-se enviar a ele um documento com perguntas a serem respondidas, o que nem sempre é satisfatório. É possível encontrar vários modelos e exemplos de briefing na Web, dando uma noção de como esse documento deve ser feito. No entanto o ideal é não seguir um modelo, e sim elaborá-lo sempre de acordo com a necessidade do projeto.

A arquitetura de informação

Trata-se de como organizar a estrutura da interface e a distribuição das informações, categorizar conteúdos (taxonomia), além de priorizar a comunicação de informações mais relevantes. O documento apropriado para especificar a ordem e o posicionamento dos elementos que vão compor a página é o wireframe. Através de uma forma esquemática, ele representa a distribuição e a hierarquia das informações a serem comunicadas. A partir dos posicionamentos do wireframe é que se constrói o Layout.

Layout: transformando a informação em comunicação

Uma vez que uma das funções do design é transformar informação em comunicação, nenhum elemento dentro do layout deve estar lá sem comunicar algo. Elementos desnecessários podem confundir, poluir e dificultar o acesso e o entendimento das informações. Para um bom trabalho, é necessário fazer um estudo de conceitos visuais e de comunicação. Deve-se ter consciência do porque usar determinadas cores, fontes e formas, e quais sensações esses elementos estão transmitindo ao usuário.

As cores

A percepção que temos das cores proporciona diferentes emoções e estados de ânimos em nós, e por isso elas têm poder de comunicação bem maior do que se imagina. É importante saber trabalhar com o equilíbrio e com a psicodinâmica das cores, para que elas transmitam as sensações desejadas. Cada cor transmite uma informação, sensação ou emoção diferente, isso dependendo da cultura do público-alvo, do contexto, ou mesmo das outras cores com a qual ela é combinada.

Uma boa introdução neste assunto é encontrada no site Color in Motion, que por meio de uma animação, dá exemplos de sensações e emoções que cada cor pode representar. Uma fonte de informação mais consistente sobre o assunto pode ser o livro Psicodinâmica das Cores em Comunicação.

Para elaborar uma paleta de cores com equilíbrio, é importante saber como trabalhar as combinações cromáticas, por mais que se saiba que cores transmitem as sensações desejadas. Uma ótima ferramenta que pode nos auxiliar na elaboração de uma paleta de cores é encontrada no site http://kuler.adobe.com.

A Tipografia

Toda ideia a ser transmitida é traduzida através de letras. É importante possuir um bom conhecimento de como trabalhar com a tipografia na web, priorizando sempre uma boa legibilidade e respeitando o contexto do projeto. Diferentemente da limitação de outras épocas, hoje temos alguns recursos na tipografia para web que nos permitem maiores possibilidades, como é o caso da biblioteca Cufón e do Google Font Directory. Existem diversas famílias tipográficas, cada qual com uma aplicação específica, de acordo com o contexto. Saber escolher bem a tipografia a ser usada em um projeto é um ponto importante na comunicação.

Uma boa fonte de informação para quem está começando e quer se aprofundar no assunto é o livro Manual de tipografia.

As formas

Outro fator relevante na pregnância da forma é a aplicação das leis da Gestalt em nosso projeto. Segundo a Wikipédia, Gestalt é um termo intraduzível do alemão, utilizado para abarcar a teoria da percepção visual baseada na psicologia da forma. Aprendendo a analisar as manifestações visuais e objetos ao redor, compreendemos melhor o porquê algumas formas agradam e outras não, podendo assim trabalharmos esses fatores em nossos projetos. O estudo da Gestalt compreende a “integração das partes em oposição à soma do todo: estrutura, figura e forma”. Leis da Gestalt, como unificação e segregação, fechamento, boa continuidade, proximidade e semelhança, ajudam a orientar o processo de criação e obter resultados satisfatórios.

Uma boa referência de estudo sobre o assunto é o livro “Gestalt do Objeto: Leitura Visual da Forma“, do professor João Gomes Filho.

Seu desenho vai virar código, e agora?

Não podemos criar um bom projeto gráfico para um site se não compreendermos o potencial da web como mídia interativa, e todas as possibilidades e limitações que isso nos trás.

Também é importante sabermos a forma que a informação é estruturada na web. Conhecimentos em HTML e principalmente CSS acabam sendo indispensáveis na hora de criamos um layout que possua uma implementação viável e proporcione um bom desempenho para o site, assim como facilidade de manutenção e boa acessibilidade. Conhecer CSS e saber explorar da melhor forma possível os seus recursos logo na concepção do projeto gráfico pode fazer toda a diferença. CSS é uma linguagem simples, e quanto mais experiencia você possuir com ela, melhor será a criação dos seus layouts.

Como disse certa vez Chris Coyier em seu perfil no Twitter, “CSS é como xadrez: você pode aprender os princípios em um dia, e passar a vida inteira se especializando”.

Então, já sabe o que é design? E webdesign?

Os processos e conceitos necessários para se tornar um designer não se encerram aqui. Outros conhecimentos, como semiótica, antropologia, arte, técnicas de composição, além da busca de boas influências, são essenciais na formação de um profissional. Porém, a partir daqui pode-se ter uma compreensão mais clara do que é Design, além de uma direção para iniciar os estudos e o trabalho.

Gostou? Então assine o RSS e siga-me no Twitter!

Este artigo foi publicado originalmente em 4 de setembro de 2007, e revisado e atualizado em 4 de agosto de 2010.

Em meu último artigo, sobre a Resistência que desenvolvedores tem em adotar as Web Standards, muitas pessoas se manifestaram no sentido de que trabalhar com editores WYSIWYG como Fireworks ou Dreamweaver, na criação de páginas diagramadas com tabelas, seria mais produtivo, além de evitar incompatibilidade com navegadores.

As alegações são de que o uso das Web Standards aumenta o tempo de desenvolvimento, a quantidade de testes e a correção de erros. Isso realmente pode acontecer, se o desenvolvedor não possuir experiência suficiente com XHTML e CSS, e consequentemente criar Layout’s inadequados para a estruturação.

A maior dificudade que as pessoas tem para compreender a importância do desenvolvimento com as Web Standards é (1) imaginar que é apenas uma questão de substituir Tabelas por DIVs, e (2) não compreender a questão da Semântica.

O que é Semântica?

A Semântica, enquanto estudo da palavra, tem preocupação com o significado dos objetos (me refiro aqui a objeto como tudo que é perceptível aos sentidos).

A ideia de uma Web Semântica surgiu em 2001 a partir de um artigo publicado por Tim Berners-Lee, James Hendler e Ora Lassila, e tem como objetivo extender a Web atual, através da atribuição de significado ao conteúdo dos documentos, de forma que eles possam ser compreensíveis não só por seres humanos, mas também por máquinas. Isso possibilitaria que informações úteis em diferentes sistemas fossem integradas para facilitar a vida das pessoas.

Vamos imaginar que eu possuo uma agenda online, onde consta que tenho uma viagem marcada para Nova Yorque, assim como a data e o horário em que devo embarcar. Essas informações seriam muito claras para mim ou para qualquer outro ser humano, que poderia providenciar tudo que fosse necessário para a viajem.
Agora vamos imaginar que essa agenda possui informações com significado não só para humanos, mas também para máquinas, de forma que esses dados pudessem ser integrados com outros sistemas pelo mundo, que também tivessem informações com significado para as máquinas.
Com isso, meu sistema ao identificar o compromisso na agenda, poderia automaticamente buscar e reservar para mim uma passagem aérea para o dia e horário em que fosse necessário, assim como reservar um quarto no hotel mais próximo ao meu local de destino, e quem sabe até me recomendar passeios, livrarias e restaurantes, de acordo com meus gostos pessoais descritos no perfil de uma rede social qualquer.

Parece até coisa de filmes de ficção cientícfica!

Para que algo assim fosse possível, para que os sistemas tivessem esse nível de automatização e funcionassem como na história acima, teriamos que pensar na evolução dos documentos, antes de pensar na evolução das tecnologias.

Teriamos que criar documentos em que as informações tivessem significado não só para humanos, mas também para máquinas.

Isso seria a Web Semântica.

Tirar o lixo e organizar a casa

Alguém sabe a quantidade de informação que existe hoje na Web, ou quanta informação é possível de ser armazenada digitalmente?

Um CD comum armazena cerca de 650 Megabytes de informação, e isso equivale a 340.000 páginas com 2000 caracteres cada. Se essas páginas fossem impressas em papel de 20 gramas em frente e verso, a pilha de papel necessária para equivaler a capacidade informativa de um CD pesaria 770 quilos. (Informação retirada do livro “Do papel até a Web”, de Tony McKinley)

Acho que agora deu pra ter uma ideia!

A Web tem mais informações do que todas as bibliotecas do mundo juntas. Infelizmente a maioria dessas informações não tem significado nem sentido algum.

Uma Linguagem de Marcação como o HTML é feita de etiquetas (tag’s) que servem para dar significado as partes de um documento. Sendo assim, com as etiquetas <h1></h1> informamos que determinado trecho de texto é um título, com as etiquetas <p></p> indicamos que determinado trecho de texto é um paragrafo, ou então com as etiquetas <blockquote></blockquote> informamos que determinado bloco de texto é uma citação.

Sabendo disso, poderiamos acreditar que trabalhando com HTML teriamos naturalmente documentos com definições claras sobre o que é cada informação.

Porém, desde o início a Web foi sendo explorada como uma extensão da mídia impressa, com uma preocupação unicamente visual, sem levar em consideração a estrutura do documento e seu significado. Como os recursos do HTML eram limitados para diagramação, além de possuir algumas marcações próprias para formatação, os documentos começaram a ser adaptados de forma equivocada, e recursos como tabelas (que existem para definir dados tabulares) começaram a ser usadas para diagramar páginas de sites como se fossem páginas de revistas. O uso correto das marcações era ignorado: etiquetas de paragrafo eram usadas para comportar títulos ou listas, por exemplo.

Essa forma de criar os documentos faz com que a informação fique clara para o seres humanos, porém sem sentido algum para máquinas ou sistemas que possam vir a (tentar) interpretar os documentos.

Trabalhar com Web Standards significa criar documentos onde serão usadas apenas as marcações necessárias para identificar as informações, sem que sejam inseridas marcações com finalidades visuais.

O uso de tabelas para diagramar as páginas gera um código sem significado, muitas vezes incompreensível, e várias vezes maior que o necessário, enchendo os servidores pelo mundo de Terabytes inuteis, além de fazer com que boa parte das informações úteis não sejam compreendidas pelas máquinas.

Devemos usar apenas marcações que forneçam significado à cada parte do documento, e toda apresentação visual deve estar em um documento separado (CSS).

Acessibilidade: máquinas informando seres humanos

Quem cria páginas para Web utilizando editores WYSIWYG e tabelas, pode alegar que disponibiliza informações claras ao menos aos seres humanos.

Mas será que realmente todos os seres humanos tem acesso as informações publicadas na Web?

Algumas pessoas necessitam do suporte de tecnologias assistivas para compreender as informações da Web, seja por deficiências visuais ou motoras, necessitando do auxílio de Leitores de Tela, Teclados Alternativos, Ampliadores de Tela, Ponteiras de cabeça e Linhas Braile. Existem pessoas que dependem de máquinas para acessar as informações disponíveis na Web.

Para que um programa Leitor de Tela com síntese de voz, usado por uma pessoas cega, possa compreender as informações de um documento e converte-las em áudio, é necessário que todos os dados possuam marcações com significados corretos, para que o programa compreenda quais são os títulos, as listas, os paragrafos e os dados tabulares, assim como ter alternativas textuais para descrever imagens e animações.

Também é importante que os documentos tenham uma sequência lógica, da mesma forma que os capítulos de um livro. Quando usa-se tabelas para diagramar um Layout, a única preocupação é com a organização visual, deixando o código com uma sequência incompreensível para máquinas, como se misturassemos os capítulos do livro.

Para que todas pessoas possam ter acesso as informações, devemos criar documentos com uma sequência coerente, com alternativas textuais para imagens e animações, atalhos de teclado para links e campos de formulários, indicações de conteúdos em outros idiomas, e tudo que possibilite as tecnologias assistivas de compreender o documento.

Trabalhando pela evolução dos Sistemas de Informação

Boa parte das justificativas dos profissionais que não trabalham com os Padrões está no fato de que navegadores antigos como o IE6 (que possui a maior fatia dos usuários) não possuem suporte adequado aos Padrões. Porém existem formas de driblar isso, que podemos encontrar com uma simples busca na Web: para PNG’s transparentes, assim como para a falta de interpretação de algumas propriedades de CSS, como pseudo-elementos, podemos utilizar scripts como o IE7.js. Para diferenças de renderização entre navegadores temos técnicas de CSS Reset.

Qualquer Layout complexo é possível de ser feito com CSS, basta ter conhecimento e as armas certas engatilhadas. O fato dos navegadores antigos não fornecerem suporte adequado não pode ser pretexto para pararmos de estudar, nem pregarmos o retrocesso do Desenvolvimento para a Web. Dessa forma não estaremos contribuindo para que evolução alguma aconteça (você acha que o IE8 passou no teste ACID 2 porquê a Microsoft decidiu ser legal, ou pela pressão do mercado e dos desenvolvedores?).

Outra fácil justificativa é jogar a culpa nos clientes, que não flexibilizam prazos e nem recompensam financeiramente o uso das Web Standards. Mas será que todos os clientes tem receio de investir em projetos acessíveis por terem preocupações unicamente visuais, ou porque não são esclarecidos das reais vantagens?

Estudar, argumentar, e convencer os clientes está ao alcance de todos. As vantagens que podemos obter com o uso das Web Standards estão documentadas em diversos sites: arquivos menores e sites mais leves, menor consumo de banda, maior indexação pelos mecanismos de busca, maiores facilidades de manutenção e redesign, além de maior Acessibilidade.

Claro que para isso realmente acontecer, devemos compreender que trabalhar com Web Standards não é apenas uma questão de substituir tabelas por DIVs (Tableless).

Maior produtividade virá com a experiência, e com a compreensão de que os documentos não podem ser verdadeiras “sopas de tag’s”. Se criarmos páginas com uma grande quantidade de marcações sem significado, mesmo que não usemos tabelas e editores WYSIWYG, não conseguiremos obter essas vantagens.

É necessário criarmos documentos com significados não só para humanos, mas também para máquinas. Os sites são armazenados em máquinas, Leitores de Tela e outras Tecnologias Assistivas são máquinas, e também os mecanismos de busca são máquinas!

As possibilidades de existência de uma Web Semântica, com integração de dados entre diversos sistemas informacionais, que possam melhorar a qualidade de vida das pessoas, só serão possíveis com documentos semânticos, e claro que isso não se resume a desenvolver um HTML com devido significado. Porém, outros assuntos relacionados, como RDF ou Microformatos, são temas para outro artigo.

Para que haja evolução das máquinas e dos sistemas, é preciso que haja primeiro uma evolução dos profissionais que fazem a Web.

Olá amiguinhos!

Na última edição do Campus Party Brasil, fiquei encarregado de abrir as atividades na área de Design com a palestra sobre Web Standards.

Após a palestra, e depois de bater papo com muita gente por lá, cheguei a triste conclusão de que muitos profissionais ainda desconhecem as Web Standards, e desenvolvem sites a moda antiga (usando tabelas para diagramar o Layout).

Para contribuir na mudança desse quadro, este artigo é o primeiro de uma série sobre Web Standards ao qual estarei escrevendo. E para ter certeza de que vou ajudar a esclarecer as dúvidas sobre esse assunto, deixo aberto o espaço para a sugestão de temas para os próximos artigos.

Resistência aos padrões, ou amor as tabelas?

Pior do que perceber que ainda hoje muitas pessoas desconhecem as Web Standards e suas vantagens, é perceber que existem pessoas que conhecem, porém resistem a elas, com argumentos (sem fundamentos) de que desenvolver sites com o uso de tabelas para diagramar o Layout é melhor e mais produtivo.

Esses dias andou pipocando pelas listas de discussão um artigo escrito por um tal de Ron Garret, onde ele tenta justificar que o CSS não serve para diagramar Layouts (Why CSS should not be used for layout), e afirmando que o uso de tabelas é melhor para tal finalidade.

Essa forma de pensar mostra que muitas pessoas tem a visão equivocada de considerar o Design como mera produção estética, e desconsideram a concepção de projeto. Como escrevi em outro artigo, além da questão estética, o Design engloba a criação de um produto funcional, usável, eficiente e economicamente viável.

Uma estrutura de informação, como documentos escritos em HTML ou XML, deve conter apenas marcações com devido significado (semântica). Adicionar marcações sem significado em um site pode ser comparado a adicionar diversas páginas em branco a um livro: aumentaria inutilmente o tamanho do mesmo, e não teriam sentido algum para o leitor. É justamente isso que acontece com o uso das tabelas para diagramar o Layout.

Podemos dizer que o HTML não é uma linguagem de marcação verdadeira, pois sua sintaxe preve (limitadas) marcações para formatação. Uma linguagem de marcação deve apenas estruturar a informação (como o XHTML), enquanto a apresentação deve vir de um documento específico (CSS).

A maior dificuldade no uso do CSS para diagramação das páginas vem da incapacidade dos navegadores, não só no suporte a linguagem, como na padronização do efeito renderizado. O IE6 suporta apenas 51% das propriedades do CSS 2.1, o IE7 apenas 56%, o Firefox2 suporta 91%. O IE6, que ainda é o navegador mais usado, também suporta apenas 73% do HTML/XHTML, 50% do DOM e 10% do CSS3. Mais informações sobre essas estatísticas podem ser vistas em http://www.webdevout.net/browser-support).

O CSS não é perfeito, as empresas que desenvolvem os navegadores não colaboram no suporte, e a W3C não é nenhum exemplo de discussões promissoras em prol a padronização. Lembrando que a W3C não se resume apenas aquele tiozinho carismatico de ideais livres que inventou a Web, mas de diversas empresas com interesses não tão nobres (quem chegou a acompanhar discussões sobre o uso dos codec’s Ogg Vorbis e o Ogg Theora como padrão nos navegadores, para o uso da nova tag <video></video> no HTML5, sabe do que eu estou falando).

A vantagem do uso de Padrões Web

Recortar um layout em softwares como o Fireworks, e exportar diretamente para HTML com tabelas pode parecer fácil e rápido. Porém o código gerado torna-se incompreensível, sem uma sequência lógica da informação ou significado, além de ser muito maior que o necessário.

O uso das Web Standards propicia um melhor custo-benefício. As vantagens do uso de padrões e da separação das camadas de Conteúdo (XHTML), apresentação (CSS) e Comportamento (Javascript) são evidentes:

• Com arquivos menores e as camadas de Apresentação (CSS) e Comportamento (Javascript) no cachê do navegador, teremos um carregamento mais rápido das páginas, além de menores custos de hospedagem.
• Com a formatação de todas as páginas baseadas num mesmo arquivo CSS, teremos uma melhor consistência visual, e possibilidades de manutenção e redesign mais baratos e eficientes.
• Com marcações mais semânticas (usadas com seu devido significado) e com as informações do documento estruturadas em uma sequência lógica, teremos melhores resultado nos mecanismos de buscas, além de melhor acessibilidade e Interoperabilidade entre diferentes dispositivos.

Exemplos práticos dessas vantagens:

• A Legal & General, uma das primeiras empresas a aplicar em seu site as “Diretivas para acessibilidade Web” (Web Content Accessibility Guidelines) da W3C, e os resultados foram que as taxas de conversão aumentaram 300%, custos de manutenção cairam 66%, listagem natural nas buscas aumentou 50% e o carregamento das páginas ficou 75% mais rápido (fonte: RevistaW).
• A ESPN, quando migrou seu site para os Padrões, reduziu cerca de 50kb em cada página, economizando 2 Terabytes de banda por dia (fonte: Mike Davidson).

Quanto a beleza dos sites feitos com CSS, é indiscultivel que as possibilidades são enormes, e muito mais eficiêntes que a formatação possibilitada com o uso de tabelas no HTML. Exemplos disso podemos encontrar na galeria CSS Zen Garden ou em sites como o Web Leed Design.

Se as Web Standards ainda não são o ideal, é o que de melhor temos hoje para o desenvolvimento de páginas para a Web.

Linguagens como o CSS tem sempre mil possibilidades. A limitação está no Designer.