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.

Tecnologia na Web, Revista Webdesign

Início de um novo ano e mais desafios prometem movimentar o universo dos profissionais de internet. Além de procurar atualização sobre os conceitos fundamentais que ajudam a construir as bases para atuação na área, é preciso ficar atento também às novidades em termos de ferramentas de produção.

Nos últimos tempos, o surgimento de novas opções e pacotes de software tem contribuído para melhorar o trabalho neste segmento. “Meu cotidiano com aplicações web se resume: ao Netvibes para guardar informações de fácil acesso; o trio da Google: Gmail , Reader e Calendar; o Remember the Milk, que é o centro da minha produtividade, onde uso a metodologia GTD em todas as minhas demandas; e, apesar de a aplicação já existir um tempo, conheci em 2009 o SlimTimer, um software muito bom de gerenciamento de tempo. Trabalho ele casado com o Remember the Milk. Quem conhece a metodologia GTD sabe como é importante prever o tempo de execução de cada tarefa. Normalmente, a gente faz uma previsão de acordo com a experiência anterior de uma demanda recorrente. Mas, quando é preciso fazer algo inédito, é fundamental trabalhar com o SlimTimer. Ao começar a trabalhar no projeto, acionamos o relógio e ele contabiliza todo o tempo em que você estiver nele. E, se esse trabalho for para uma agência, por exemplo, ainda dá para exportar uma planilha com tudo anotado”, revela o webdesigner freelancer Cristiano Santos (http://cristianoweb.net).

“O novo pacote da Adobe, sem dúvida, facilitou muito o dia-a-dia no escritório! Mas não são só softwares gráficos que podem facilitar a vida dos profissionais de criação. Hoje, o Twitter funciona como uma ótima fonte de informações, que contribui muito para que estejamos mais antenados no que acontece no meio criativo e no mundo”, argumenta o designer Silas Augusto (www.silasaugusto.com), que atualmente dirige projetos internos e de reestruturação do grupo Guia de Motéis (www.guiademoteis.com.br).

Neste cenário, Fernando Leite (www.fernandoleite.com), online content developer da Dell, lembra das extensões do navegador Firefox como elementos úteis no trabalho de criação e desenvolvimento de projetos web. “Não surgiram nesse ano (não sei precisar quando), mas cada vez mais temos add-ons para Firefox que nos ajudam no desenvolvimento. Destaque para os já mais do que conhecidos Firebug, Web Developer, ColorZilla e MeasureIt. Além disso, a Google vem lançado e aperfeiçoando aplicativos que ajudam no desenvolvimento/resultado final de projetos interativos.”

getfirebug.com

Como escolher as ferramentas ideais?

Levando-se em consideração o ritmo de produção e diante de tantas novidades e das diversas opções existentes para se trabalhar com a criação e o desenvolvimento de projetos digitais, os profissionais precisam se cercar de alguns parâmetros para garantir a escolha adequada das ferramentas a serem utilizadas.

Segundo Cristiano, em seu “#bunkerweb”, o planejamento do projeto é quem manda. “Nem proposta para um cliente eu faço se não houver um pré-trabalho. Fazer um bom planejamento é fundamental para tudo, inclusive, sobre quais softwares vou utilizar no projeto em questão. É comum, quando um trabalho tem uma demanda de criação de animação complexa em SWF, eu repassála para outro profissional que domine Flash, pois não trabalho com essa ferramenta. Porém, há casos em que eu mesmo faço animações mais simples, utilizando outras ferramentas mais específicas, como, por exemplo, banners ou thumbnails.”

Já Fernando revela que procura trabalhar com as ferramentas que se sente mais à vontade, que tem maior domínio. “Normalmente, nos projetos que faço como freelancer, utilizo o Photoshop para criação de layouts e algum editor de HTML para codificar. Atualmente, tenho utilizado o Smultron (para Mac) e o PSPad (para PC). Além disso, uso o site ClockingIT (www.clockingit.com) para o gerenciamento do projeto.”

“Tempo, público-alvo e formato (e-mail marketing, site, hotsite, banner etc.) são os principais parâmetros para a escolha da ferramenta. Como kit padrão, utilizo o pacote da Adobe: Photoshop, Illustrator, Flash, Dreamweaver, Premiere e InDesign (para projetos off-line)”, completa Silas.

Neste debate, não podemos deixar de citar o software livre como uma ótima alternativa para quem trabalha com o design para mídias interativas. Durante a apresentação da palestra Web Design com Software Livre, Agni listou algumas opções: GIMP (editor de imagens), Blender (modelagem 3D), Scribus (paginação) e Inkscape (desenho vetorial). “Conheço o GIMP e posso dizer que é uma ótima ferramenta, principalmente no quesito mobilidade, uma vez que você pode levá-lo no pendrive e trabalhar no notebook, caso ocorra uma emergência. Tenho uma versão mobile que ‘mora’ no meu pendrive”, revela Cristiano.

GIMP is the GNU Image Manipulation Program

Especialização em uma ferramenta

É comum vermos pelo mercado profissionais que acabam se tornando especialistas em apenas um pacote de ferramentas existentes para a criação e o desenvolvimento de projetos digitais. Diante deste cenário, a dúvida mais comum é: quais são as vantagens de se tornar um especialista e os riscos que isso pode trazer para a carreira de um profissional?

“Acredito que existam mais riscos do que vantagens. Hoje, os profissionais precisam se especializar em áreas e não em ferramentas para dar conta do que o mercado pede. Ao se especializar muito em uma ferramenta podem acontecer situações bem complicadas. Um exemplo é um projeto exigir o fechamento do arquivo em CorelDraw para quem é especialista em Illustrator. Por mais que os softwares se conversem, não há uma padronização em relação às suas ferramentas e isso pode custar algumas horas a mais de trabalho para o reconhecimento da nova ferramenta”, alerta Silas.

“Mais importante do que dominar várias ferramentas é dominar conceitos. Por isso, acho difícil que alguém não seja cont ratado para uma vaga, pois nunca usou determinado software, mas somente o concorrente. Talvez, no início, o profissional demore um pouco mais para executar determinadas tarefas, mas com o uso esse tempo vai diminuindo rapidamente”, complementa Fernando.

Nesta discussão, é importante ressaltar uma reflexão apresentada na palestra de Agni, que citamos anteriormente. Segundo ele, “existe uma grande diferença entre saber como uma ferramenta funciona e saber o que fazer com ela“.

“É comum ver pessoas estudando para aprender uma determinada ferramenta e deixando de lado o mais importante, que é o que fazer com ela. Erro cometido, principalmente, por quem está dando os primeiros passos na área. Procuro sempre fazer o processo contrário, que é primeiro pensar e estruturar bem a ideia para em seguida produzi-la em alguma ferramenta, de acordo com a necessidade. Lápis, papel e caneta são imortais e ótimos instrumentos de criação! Sempre gostei e incentivei essa prática para as pessoas que trabalham e trabalharam comigo”, diz Silas.

“Tive um chefe, quando trabalhava em uma agência de publicidade, que sempre falava mal da minha geração por pensar com o mouse, por receber um briefing e ir direto abrir o Photoshop, Illustrator ou similares. A execução de uma ideia é somente a parte final de um projeto ou peça. Muito mais importante é pensar antes o que se quer, onde queremos chegar, quais os nossos objetivos. Ferramentas são somente ferramentas, não importa qual você usa, se no final você consegue chegar ao resultado que você tinha planejado”, ressalta Fernando.

Matéria publicada na Revista Webdesign, na sessão Tecnologia na Web da edição 74, de fevereiro de 2010. Para visualizar o PDF com a matéria, clique aqui.

Devemos ter os CMSs como soluções prontas também em questões de interface?

Com a crescente demanda de fluxo de informação existente na Web, é imprescindível o uso de ferramentas que facilitem o processo de publicação e compartilhamento de conteúdo. A idéia de uma Web como plataforma colaborativa fez com que novos paradigmas sejam considerados no desenvolvimento dos projetos. Dentre os diferentes sites concorrentes nos diversos segmentos, a escolha do usuário se dará não só pela qualidade do conteúdo ou pela facilidade de uso, mas principalmente por aquele que lhe proporcionar uma melhor experiência.

Seguindo essa linha de raciocínio, o trabalho de criação e de desenvolvimento de projetos digitais e interativos deve priorizar a experiência do usuário em sua concepção. Isso faz com que, em se tratando do sistema por trás da interface, não tenhamos que “reinventar a roda” a cada novo projeto, e sim trabalharmos com a idéia de sistemas pré-concebidos para a automatização de tarefas. O uso de ferramentas CMS’s proporciona uma maior qualidade aos sites, uma vez que dinamiza o desenvolvimento e permite uma maior atenção no projeto de Interface e na experiência do usuário.

CMS’s podem limitar o Design de Interface?

As interfaces devem ser projetadas de acordo com os objetivos do site e com o tipo de experiência que queremos proporcionar ao usuário. Para isso é imprescindível trabalhar-mos a hierarquia visual, para que ela forneça maior consistência nos elementos de navegação e maior facilidade de uso. Porém, devemos proporcionar muito mais que facilidade. Acredito que a estética tenha tanta importância quanto a usabilidade, pois é ela que irá cativar o usuário a consumir o conteúdo e interagir com o nosso produto, tornando a experiência mais agradável e interessante. Dessa forma, é essencial conhecermos bem os recursos que o CMS escolhido possui para possibilitar tais experiências de uso, assim como a flexibilidade de customização visual que a ferramenta fornece para atingirmos de forma integral a estética projetada.

Acima de tudo, uma boa interface deve ser simples. Toda complexidade que possa existir para que os objetivos do usuário sejam atingidos deve ser possível de ser absorvida pelo sistema. Hoje existem inúmeras opções de CMS’s, algumas com finalidades específicas, outros escaláveis para diversas funcionalidades. É de extrema importância conhecermos bem as opções disponíveis, pois o que poderia limitar o design de uma interface nesse caso seria a escolha equivocada do CMS para o projeto.

Pensando ainda na experiência do usuário, é essencial que na hora de projetar uma interface sejam definidos mapas mentais representando a forma que o usuário irá interagir com o produto, tanto no momento do lançamento quanto em futuras adequações. Dessa forma, no momento de definição dos fluxos de navegação e wireframes, assim como da criação de uma boa pregnância visual do projeto gráfico, devemos estar atentos tanto no que diz respeito a flexibilidade da interface quanto na escalabilidade do CMS. Na evolução natural que nosso projeto possa vir a ter, desde a inclusão de novos módulos de conteúdo, novas formas de orientação na navegação local e global, menus contextuais de acordo com o perfil do usuário ou outras ferramentas adaptativas, o maior desafio é manter uma sintonia entre as possíveis extensões da interface com a capacidade de implementação de novos portlet’s ou widget’s pelo CMS em uso, de forma que os diferentes objetivos do site sejam sempre facilmente atingidos pelo usuário.

As interfaces prontas

Normalmente as opções de CMS’s disponíveis possuem um painel administrativo pronto. Porém não há como projetar qualquer interface sem conhecer claramente as necessidades de quem irá utilizar o sistema, seja o usuário que irá navegar pelo site, ou a equipe que irá administrar o conteúdo. O WordPress, possui um painel administrativo relativamente simples, porém podemos encontrar dificuldades quanto a utilização de plugins que estendem suas funcionalidades, pois normalmente não seguem o mesmo padrão de interface administrativa. No Plone a administração do conteúdo é feita dentro da mesma interface de navegação utilizada pelos usuários, não havendo um painel de administração específico, o que divide opiniões quanto a facilidade ou confusão que isso pode gerar na administração dos conteúdos.

Mesmo que a comunidade de alguns CMS’s venham demonstrando uma preocupação maior com a usabilidade e a experiência do usuário, como é o caso do Drupal para a sua versão 7, é essencial que haja uma avaliação do painel administrativo para cada projeto em específico, sendo feita um análise baseada em quem fará uso desta interface. Ao escolhermos um CMS para um projeto, devemos estar sempre atentos à flexibilidade que o sistema possui para a adaptação ou criação de um painel administrativo. O Django por exemplo, possui uma app de administração padrão, porém ela é opcional, havendo a possibilidade de a equipe desenvolver sua própria interface de administração.

Evite equívocos no seu projeto

Para a escolha adequada de qual ferramenta utilizar, é essencial a leitura das documentações dos principais sistemas disponíveis, assim como a troca de experiências em fóruns e listas de discussão, e a analise de outros sites baseados em gerenciadores de conteúdo. Assim, podemos conhecer melhor os recursos e possibilidades que cada CMS pode oferecer ao nosso projeto.

Porém é sempre importante termos conciência de que além da escolha do CMS, outros fatores como a produção e gestão dos conteúdos, a arquitetura de informação, e até mesmo a veiculação de publicidade dentro do site, tem impactos diretos na concepção da interface, e vice-versa. A falta de comunicação e entendimento entre as equipes envolvidas em cada etapa do projeto podem acarretar os maiores equívocos dentro dos projetos de interface ;)

Trechos desse artigo são mencionados na matéria “Design de Interfaces para CMS’s” publicada na edição 77 da Revista Webdesign nesse mês de maio, edição essa focada em Design de Interface. Confiram a revista nas bancas!