30 :: Webdesign
Como os conceitos da Bauhaus se transformam no design digital
Uma das frases mais famosas do filósofo
processo criativo. E, a partir disso, instigar um rigor
George Santayana dizia que “aqueles que não podem
crítico que seja acessível e faça sentido em contexto
lembrar o passado estão condenados a repeti-lo”. Nesta
contemporâneo. A figura dos ideais como alicerce
mesma linha, o intelectual alemão Karl Marx ressaltava
reforça justamente o discurso de Santayana de que não
que a história pode se repetir em forma de farsa ou até
devemos repetir o passado, mas lembrá-lo e a partir dele
mesmo de tragédia.
construir o nosso presente”, afirma Marcos Nähr, gerente
Analisando estes pensamentos dentro do processo de produção de ambientes digitais e interativos, seja para seguir as boas práticas, ou até mesmo na hora de
de desenvolvimento web da Dell e professor do curso de comunicação digital da UNISINOS. “O designer que possui repertório e referências de
quebrar os padrões convencionais, as soluções criadas
diversas escolas consegue aprimorar o seu processo
pelo designer devem estar sempre embasadas em
criativo, revisitando conceitos e ideais de cada época.
conceitos que justifiquem a sua eficácia.
Com esta bagagem, poderá avaliar e sugerir novos usos
Assim, conhecer os ideais e estudar as
e/ou combinações de tecnologias, materiais, fontes,
metodologias que ajudaram a construir a prática do
cores, padrões visuais. Fazer arte abstrata, sem ter
design contemporâneo torna-se fundamental para
conhecimento de escolas clássicas, pode deixar o trabalho
fortalecer o discurso de defesa de um projeto. “Os
final pouco elaborado. Neste aspecto, gosto muito do
benefícios estão no fato de que este processo faz com
livro ‘Das coisas nascem coisas’, de Bruno Munari, que
que passemos (se o processo for bem feito, tanto por
li quando ainda cursava a Faculdade de Arquitetura
quem ensina quanto por quem aprende) a integrar estes
e Urbanismo da UFRGS. Nele, o autor mostra vários
pensamentos do design como um alicerce em nosso
estudos fundamentais para a Comunicação Visual e Artes
capa - menos é mais :: 31
Plásticas. Além disso, adoro quando ele questiona: você
usável e acessível não se trata
acha melhor ter uma torneira de ouro que serve água
apenas de uma ação simplória,
poluída, ou uma boa torneira cromada ou mesmo plástica,
mas uma atitude e uma filosofia de
com água potável e filtrada?”, revela Gladimir Dutra,
desenvolvimento que visa contemplar o
sócio-fundador e gestor executivo da Aldeia | Agência de
máximo de pessoas possível independente
Internet (www.aldeiainternet.com.br).
de características físicas, que possam prejudicar
Como exemplo prático das questões envolvendo o
sua interação com a interface. O fato de governos
mundo digital, Marcelo Gluz, gerente de novas mídias
de o mundo inteiro passar a adotar padrões rígidos
dos canais Globosat, destaca, por exemplo, o uso
de acessibilidade para seus websites é um exemplo
inadequado do Flash na criação de elementos de uma
claro de que esses conceitos têm forte apelo social
interface. “Ignorar o passado é tão comum e equivocado
de acesso democrático às informações importantes
quanto se prender demais a ele. Negar um conceito
para a população”, complementa Eduardo Loureiro,
de design estabelecido é algo necessário, se for feito
experience designer e coordenador de experiência do
conscientemente. Quando surgiu o Flash com toda aquela
usuário da Mapa Digital (www.mapadigital.net).
facilidade de criar objetos com movimento, muita gente pensou ‘pra que fazer um menu parado se ele pode se
Primeira lição: forma e função
mexer pela página?’. Ficaram seduzidos pelo recurso
No artigo “Princípios de design para a internet (sem
e esqueceram o que já se sabia sobre dispositivos de
dogmas)” (http://migre.me/4hpY), o designer Marcelo
navegação em design de produto: que eles devem servir
Gluz cita três princípios da Bauhaus que vêm sendo
de porto seguro para os usuários e que sua razão de
aplicados no processo de desenvolvimento das novas
existir é funcional. Esse é o exemplo de uma ruptura tola.”
mídias: “a elegância pela economia de formas, o enfoque
Diante disso, para evitar que o deslumbramento
funcional e a redução de custos de produção”. Inclusive,
prejudique o seu processo criativo, vamos analisar como
o primeiro deles é muito utilizado para justificar a ideia de
os ideais originados por um dos principais movimentos
que “a forma deve seguir a função do objeto”.
históricos da sociedade moderna devem ser aplicados e
"Fico muito feliz quando esta frase, que resume o
transformados no desenvolvimento de projetos web.
design como atividade, está presente nas discussões.
“Acredito que uma das maiores contribuições da
Principalmente, quando este conceito também migra
Bauhaus para a profissão e a oficialização da figura do
para as mídias digitais. Muitos profissionais desconhecem
designer foi sua pedagogia. Mais do que as obras e
este princípio ou, quando o relacionam, não sabem
objetos que saíram daquela escola. O ensino, através de
muito bem de onde surgiu. A Bauhaus está fazendo 90
uma proposta com métodos particulares a cada realidade
anos. Há uma história que a justifica. Anteriormente à
e necessidade, é facilmente transposto ao ambiente web.
Bauhaus, e ainda em seu início, havia um movimento
Empresas como a Adaptive Path e o próprio Google,
simbólico-romântico trazendo consigo ideias que ligavam
em suas devidas proporções, utilizam métodos quase
a arte e a natureza. No entanto, aos poucos, com a
científicos e questionamentos muito semelhantes aos da
disseminação dos preceitos da Revolução Industrial, a
Bauhaus”, explica Eduardo de La Rocque, designer visual
objetividade e o construtivismo foram tomando espaço.
e de interação (www.delarocque.com.br/).
Foi a continuidade deste processo que estabeleceu este
“Fazer um design que atenda a todos, ou seja,
princípio - cores e formas interagem em um sistema
socialmente responsável, foi um lema da Bauhaus
que se integra funcionalmente. Dessa forma, o design
influenciado por movimentos artísticos como
tornou-se o resultado da aplicação de uma metodologia
Suprematismo, Construtivismo e De Stijl. Com certeza,
de projeto para o desenvolvimento funcional e estético
é uma das filosofias que ajudam a embasar os conceitos
de objetos visuais ou tridimensionais”, explica José
de acessibilidade, usabilidade e, principalmente, design
Ricardo Cereja, coordenador pedagógico da Escola de
universal de hoje. Nessa perspectiva, tornar algo
Design do Instituto Infnet.
32 :: Webdesign
“Não devemos repetir o passado, mas lembrá-lo e a partir dele construir o nosso presente” (Marcos Nähr) Sobre os benefícios de sua aplicação no design de
de que ‘a forma segue o fracasso’. Ao invés de existir
interfaces, algumas características terão que ser avaliadas
apenas uma forma certa (predestinada) de se fazer algo,
pelos profissionais. “Diferentemente de outras mídias,
vamos perceber que o design deve trabalhar como uma
onde geralmente apenas um sentido é requerido, a mídia
forma de evolução, onde novas ideias construídas muitas
interativa proporciona o uso de vários sentidos ao mesmo
vezes a partir do fracasso de outras ideias ajudam a obter
tempo. Aqui as pessoas usam as interfaces, ou seja, elas
melhores resultados. Este aspecto pode ser muito bem
promovem ações e recebem resultados. Assim, a função
utilizado na web, onde a observação do que funciona e
exerce papel fundamental nesse contexto. A decisão
do que não funciona é praticamente imediata e o design
de se trabalhar um design que privilegia a função ao
pode ser usado como forma de evoluir para se alcançar
tirar o foco ornamental dos elementos gráficos é uma
resultados cada vez melhores.”
estratégia muito utilizada para manter o foco das pessoas na realização das tarefas que elas estão desempenhando na interface. A aplicação do preceito da simplicidade, um
Na seja simplório! Um dos conceitos da Bauhaus que mais se
dos pilares da usabilidade, nas interfaces dos projetos
popularizou foi o “menos é mais” (“less is more”), criado
interativos, com toda certeza é consequência do que a
pelo arquiteto alemão Ludwig Mies Van der Rohe.
Bauhaus começou há 90 anos. O principal aprendizado
Para se ter uma ideia de sua disseminação, ele
para as interfaces web é a busca por objetivos claros, ou
tornou-se uma espécie de oração na hora de se
seja, foco”, diz Eduardo Loureiro.
apresentar argumentos sobre a simplicidade e a
“Quando o excesso é eliminado, o principal sobressalta. Encontrar o que se procura passa a ser
funcionalidade de um projeto. Segundo Marcelo Gluz, tal frase está intimamente
mais fácil, claro e rápido se não estiver escondido
ligada às características presentes atualmente no
por um emaranhado de efeitos visuais e informações
design de mídias interativas.
desnecessárias. Para o designer de interface, trabalhar
“Encaixo o conceito em três pilares, igualmente
a elegância pela economia de formas traz a enorme
importantes. O primeiro é a redução de complexidade
vantagem de garantir a comunicação/interação de uma
das interfaces. Ela não deve apresentar opções demais
forma mais simples”, completa Marcia Maia, especialista
para o usuário. No livro ‘The Paradox of Choice’, o
em ergonomia e usabilidade pela PUC-RJ.
professor Barry Schwartz discorre sobre como a vontade
Porém, como destaca Marcos Nähr, é preciso cuidado
de proporcionar mais opções ao usuário pode criar
para que este princípio não seja interpretado de forma
barreiras de compreensão e consumo. Abrir mão de
errônea. “O maior erro que podemos cometer ao seguirmos
recursos de interface secundários é importante para
cegamente o ensinamento de que ‘a forma deve seguir a
privilegiar o uso das funcionalidades principais. O
função’ é imaginar que uma função terá necessariamente
segundo diz respeito ao escopo inicial de um projeto.
apenas uma forma. Normalmente, quando começo
A primeira versão do produto deve ter somente o set
a desenvolver esse raciocínio com os meus alunos, a
mínimo de funcionalidades, deixando espaço para evoluir
impressão que eles têm é de que esta é quase uma fórmula
na direção apontada pelo uso do produto. Por último,
mágica que irá transformar a função automaticamente
entra a questão mais subjetiva: o minimalismo estético.
em uma forma. Henry Petroski, em seu livro ‘Small Things
Em minha opinião, deve-se dar menos destaque para
Considered: why there is no perfect design’, argumenta
a moldura e mais para o conteúdo. Menos foco nas
que esta ideia mágica pode nos levar a outra máxima, a
decorações supérfluas e mais nos dispositivos funcionais.
34 :: Webdesign
“Por trás de um bom projeto, há um bom profissional. É este ‘humanware’ que faz a diferença” (José Cereja) Menos discussão sobre a aplicação de grafismos da marca e mais sobre como transformar os valores dessa marca em funcionalidades de sucesso.” Além disso, os especialistas recomendam um
solução simplória”, ressalta Gladimir Dutra. Para fechar este assunto, Renato Costa, co-fundador e professor do Instituto Faber-Ludens (www.faberludens. com.br), lembra da discussão sobre a validade no uso
posicionamento crítico para evitar que erros sejam
deste conceito na página principal do mais popular
cometidos em sua aplicação pelos diversos tipos de
mecanismo de buscas pela web. “O maior erro na
projetos digitais. “O conceito se traduz na priorização
aplicação desse conceito é confundir simplicidade
da ‘função’ que o projeto tem que entregar. Essa função
com simplismo. Uma interface simples apresenta o
pode ser atendida por uma combinação de premissas
mínimo de elementos necessários para compreensão
básicas e devemos nos perguntar o tempo todo, ao
do complexo de informações que estão por trás dela.
longo do processo, se elas estão sendo comunicadas
Uma interface simplista ultrapassa esse limite mínimo de
claramente e zelar para que se mantenham assim. Se o
elementos e começa a prejudicar a percepção de todas
objetivo do website é claro, se o público para o qual ele
as possibilidades oferecidas. Um exemplo de simplismo
é endereçado tem essa percepção e se identifica com o
na web é a página inicial do Google, que, como foi muito
produto final. Podemos testar isso de inúmeras maneiras
bem observado no artigo ‘The truth about Google’s
- de uma forma simples e rápida entre os nossos colegas
so-called simplicity’ (http://migre.me/4Yhe), de Donald
de trabalho; ou de uma forma mais dispendiosa, científica
Norman, não representa a quantidade de serviços
e complexa, através de testes de usabilidade. Por outro
oferecidos pela empresa.”
lado, devemos tomar cuidado com o jargão do ‘menos é mais’, que pode ser interpretado de forma errônea, levando a caminhos não imaginativos e a uma falta de
Estética não exclui Funcionalidade. E vice-versa Aproveitando a citação anterior de artigo escrito
exploração de inúmeras novas possibilidades. Costumo
pelo respeitado professor Donald Norman (http://
brincar dizendo que ‘simples não é simplório’. E nem
migre.me/4YUE), vamos recorrer a um de seus livros
sempre ‘menos é mais’. Às vezes, ‘mais é mais’. Basta
mais famosos, “O design do dia-a-dia”, que trata das
olhar uma peça de tapeçaria oriental, por exemplo... Tudo
principais questões envolvendo a metodologia de design
vai depender das características do projeto em questão”,
centrado no usuário.
diz Eduardo de La Rocque. “Para chegar numa solução minimalista e simples,
Dentre seus pensamentos, ele destaca que “a arte e a beleza desempenham papéis essenciais em nossas vidas.
há um processo de análise e testes onde você lapida os
Bons designs incluem tudo isso - prazer estético, arte,
elementos. Pensa no todo, separa em partes, organiza as
criatividade - e ao mesmo tempo são usáveis, de fácil
partes e volta ao todo. Este processo ocorre em espiral
operação e prazerosos”. Levando-se em consideração
de iterações. Quanto mais iterações, mais profunda
os princípios da Bauhaus, o designer precisará trabalhar
a análise. Até que você chega à solução sintética,
alguns aspectos para atingir harmonia e equilíbrio na
simples, minimalista. E onde você acaba encontrando os
criação de um projeto, ou seja, para produzir interfaces
elementos fundamentais de sua interface. Este conceito
com estética e funcionalidade adequadas, sem que um
de menos é mais acaba sendo erroneamente confundido
conceito elimine o outro.
com fazer tudo ‘ligeirinho’ e ‘sem stress’. O que era para
“Ser bonito e fácil de usar não são características
ser simples acaba virando simplório! E há uma grande
excludentes. Existem projetos onde o primeiro é mais
diferença entre uma solução simples e elegante e uma
importante e outros onde o segundo importa mais.
Quer fisgar R$10.000,00? A maré está agitada no Peixe Grande 2009! Prepare o seu site para concorrer a este prêmio! Serão premiados: agências, freelancers e blogs
www.peixegrande.com.br
últim mês p o a inscri ra ção
Realização
Patrocinadores
E D I T O R A
Quer ser um patrocinador?
publicidade@arteccom.com.br
36 :: Webdesign
facilidade de uso para diminuir a carga cognitiva dos usuários e assim a forma tem que seguir uma linha mais minimalista, como, por exemplo, um internet banking. Porém, outros projetos poderão seguir uma corrente No site da Revista Webdesign, seção Downloads,
contrária, ao precisarem estimular o raciocínio das pessoas,
é possível baixar gratuitamente um PDF
e aí o apelo estético tem que ser muito mais forte e
onde você poderá conferir uma lista de livros
contundente”, complementa Eduardo Loureiro.
específicos que apresentam as histórias e as particularidades sobre a escola alemã Bauhaus. Acesse: www.revistawebdesign.com.br
Cores na Bauhaus Johannes Itten (http://migre.me/4YNP) foi um dos principais pensadores dentro do movimento da Bauhaus. Uma de suas realizações mais importantes envolveu a criação do disco de cores (ver box página 38), elemento fundamental no estudo da harmonia e do
Não dá para pôr o portfólio de um designer e um site de internet banking na mesma cesta. No entanto, é fácil perceber que existe um ‘tipo de beleza’ comum aos produtos bem-sucedidos na web. E é uma beleza minimalista, de formas cartesianas, fundos claros, grids bem pensados e teor funcional. Os exemplos óbvios são Flickr, Amazon, Twitter e Facebook, mas a lista é bem maior. Talvez a simplicidade seja o valor mais difícil de atingir, mas quando se atinge surgem produtos maravilhosos. Esse foi o legado de Miles Davis para música, é a grande sacada do fenômeno iPod, permeia as obras mais geniais do Niemeyer na arquitetura e as carreiras dos maiores craques de futebol. Tornar um problema complexo em algo simples”, argumenta Marcelo Gluz. “De fato, estética e função são aspectos que devem ser trabalhados juntos e de forma plena nas interfaces. Pensar que são dois fatores antagônicos ou conflitantes é um erro grave em projetos interativos. A usabilidade desempenha um papel muito importante para produtos interativos, mas o apelo estético também é fundamental para que as pessoas sejam instigadas a utilizar o produto e sintam prazer durante o uso. A estética influi diretamente na emoção das pessoas e esse é um fator que consegue até mesmo sobrepor a questão da facilidade de uso, como mostrou o próprio Donald Norman, em seu outro livro, ‘Design Emocional’. Para trabalhar forma e função da maneira correta, é preciso traçar corretamente os objetivos dos projetos. Alguns necessitarão de maior
contraste cromático. Diante da variedade dos dispositivos existentes para o manuseio de projetos digitais, de que maneira esta “ferramenta” deve ser utilizada pelos profissionais de criação? “Muitas vezes, o designer já possui a habilidade nata de criar contrastes cromáticos harmônicos sem a necessidade de ferramentas ou do conhecimento das teorias, mas não podemos esquecer que o cliente precisa ser convencido daquilo que o designer está fazendo e um singelo ‘porque assim fica melhor’ nem sempre convence os mais desconfiados. Assim, conhecer as teorias que existem por trás de nossas escolhas é fundamental. Saber explicar a necessidade de cores tônicas, dominantes ou intermediárias, defender a escolha de uma harmonia assonante para uma interface e argumentar que existe a necessidade de trabalhar o equilíbrio da matiz de algum elemento pode ser de grande valia no dia-a-dia do designer”, explica Marcos Nähr. “O disco de cores do Johannes Itten continua tendo fundamental importância no estudo de harmonia e contraste cromático. No entanto, ao trabalhar com cores em projetos digitais, é preciso levar em consideração que a ‘superfície de impressão’ é uma tela. Então, deve-se estar atento para a emissão de luz e a quantidade de cores do monitor (laptop, desktop, mobile, palm top etc.). Além disso, não podemos deixar de analisar questões fundamentais de acessibilidade, como, por exemplo: se utilizar sinalização em cores para alguma informação, é indicado utilizar um texto em conjunto. Atualmente,
38 :: Webdesign
temos algumas ferramentas que nos ajudam a verificar
tecnologia é apenas uma ferramenta que deve ajudar a
contraste e simular a visualização do site por pessoas
viabilizar soluções. Muitas vezes, os projetos são iniciados
daltônicas: Colour Check (http://migre.me/4YNA), Colour
pelo caminho inverso, ou seja, pensando no recurso
Blind Simulator (http://migre.me/4YNE) e VischeckURL
para depois pensar no problema a ser solucionado. Por
(http://migre.me/4YNI)”, relata Marcia Maia.
exemplo, ao invés de começar as definições de um site com afirmativas do tipo ‘quero que tenha um App do
Tecnologia como suporte ao trabalho criativo
Google Maps no meu site’ ou ‘quero que, na página
Outro fator importante introduzido pela Bauhaus
inicial, tenha um Flash bem grande’, devemos fazer
foi a valorização da tecnologia com intuito de inserir
perguntas como: ‘por quê?’, ‘pra quê?’e ‘faz sentido?’. E
um caráter industrial na produção do design e das
só depois identificar qual é a tecnologia mais adequada
artes. Quando falamos do mercado de internet, é
para resolver o problema. Como diz Pierre Lévy, a
possível apontar uma variada e expansiva oferta dos
tecnologia não é boa nem má. O importante é o uso que
aparatos tecnológicos disponíveis para criação e
fazemos dela”, orienta Marcia Maia.
desenvolvimento de ambientes virtuais. Neste contexto, dois questionamentos surgem
Para consolidar os assuntos abordados nesta edição, vamos conferir exemplos práticos da
pelo caminho: como os princípios da Bauhaus podem
aplicação dos conceitos da Bauhaus em projetos
contribuir para que os projetos sejam concebidos com as
web, selecionados especialmente pelos profissionais
tecnologias mais adequadas ao seu objetivo final? E como
consultados nesta reportagem.
evitar o uso apenas pelo uso da tecnologia na web? “Tenho refletido muito ultimamente sobre o que, de fato, forma um designer. E acabo sempre voltando a pensar na gênese do design. Para mim, não é a tecnologia que faz um designer, mas o seu saber projetar utilizando as tecnologias. A oferta crescente de novos recursos tecnológicos, as falácias estéticas produzidas por softwares cada vez mais automatizados não são, definitivamente, determinantes para a produção de um bom projeto na área. Por trás de um bom projeto, há um bom profissional. É este ‘humanware’ que faz a diferença. E tanto o fará quanto for sua formação em conteúdo próprio e aprofundado sobre o design. Para ilustrar, vou usar um exemplo que todos conhecem: a oferta de fontes nos softwares gráficos. Nos primórdios do surgimento dos softwares gráficos havia disponíveis apenas cerca de três famílias de fontes (Helvética, Times e Courier). Hoje, há centenas de possibilidades. No entanto, em um bom projeto de design, quantas fontes são utilizadas de fato? E
Desenhado por Johannes Itten, em 1928. No centro do círculo estão as cores primárias, que são magenta, amarelo e azul cyan. Essas cores são usadas na criação de todas as outras. Combinando as primárias, duas a duas,
quantas destas fontes guardam o mesmo estilo ou desenho
em proporções similares, surgem três cores secundárias:
das pioneiras? Sem me aprofundar nesta discussão, o que
vermelho, verde e violeta. As seis cores terciárias são
quero ressaltar é que designers devem ser conhecedores dos processos para desenvolverem bem seus projetos. A tecnologia pela tecnologia não resolve nada, não assegura
formadas através da mistura de uma primária com uma secundária adjacente. Exemplos: magenta com vermelho, magenta com violeta, amarelo com verde, amarelo com vermelho, azul cyan com verde, azul cyan com violeta etc.
bons resultados”, alerta José Cereja. “Para projetos de interfaces de mídias interativas, a
Fonte: Curso web para designers
40 :: Webdesign
Conceitos da Bauhaus
aplicados pela web AREA 17 www.area17.com “Com relação à influência estética, o site desta agência interativa é um bom exemplo pela aplicação da tipografia e pela ausência de ornamentos ao optar pelo minimalismo no design dos elementos e formas.” (Eduardo Loureiro)
Bauhaus Dessau Fundation www.bauhaus-dessau.de “O próprio site da Bauhaus é um exemplo da aplicação dos conceitos à representação visual da própria escola. A distribuição dos menus, a navegação, as animações concisas, a forma cartesiana de dispor informação objetivamente.” (José Cereja)
Edenspiekermann www.edenspiekermann.com/en/ “O site consegue ser elegante e simples. Ao mesmo tempo sua beleza não interfere nos trabalhos que são mostrados nele, favorecendo seu conteúdo e funcionando como apoio.” (Eduardo de La Rocque)
capa - menos é mais :: 41
Edigma.com www.edigma.com “É uma empresa de gestão de projetos digitais. Seu site tem uma excelente organização da informação. Os agrupamentos dos assuntos por interesse e as formas gráficas que os contém são um ótimo exemplo da harmonia entre forma e função.” (José Cereja)
Google Analytics www.google.com/analytics/ “Traduz dados estatísticos de forma leve e interessante. É fácil perdermos um bom tempo nele, onde informações matemáticas são facilmente ‘digeríveis’ através de uma interface simples. Sua beleza vem simplesmente da interpretação de dados.” (Eduardo de La Rocque)
Panasonic Design Museum www.panasonic.eu/designmuseum “Ótima combinação de uso de Flash, com navegação funcional e tempo de carregamento adequado aliados a uma estética simples e linda!” (Gladimir Dutra)
UX Magazine www.uxmag.com “Um dos aspectos que mais chama a atenção na interface é o modo como uma quantidade grande de informação pode ser disponibilizada sem agredir o usuário. Isto foi feito por meio de elementos que procuraram ‘simplificar a complexidade’.” (Marcos Nähr)