Page 1


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)

Menos é mais - Como os conceitos da Bauhaus se transmormam no design digital  
Menos é mais - Como os conceitos da Bauhaus se transmormam no design digital  

Entrevista concedida para a edição 69 (setembro/2009) da Revista Webdesign.

Advertisement