Usabilidoido: Menu Principal

English Website


Fundo cinza não é legal

Em peças gráficas coloridas é muito difícil encontrar fundo cinza, tem uma conotação negativa no meio publicitário. Isso se deve um pouco ao fato de que impressão à cores ser super-valorizada depois de séculos de preto e branco. Mesmo assim, é uma cor que não atrai a atenção e desestimula a leitura, já que a única cor que não causa ruído por cima é preto ou outra tonalidade de cinza. Contraste baixo, nas duas escolhas.

Porque então, ele é tão largamente usado como cor de fundo nos websites por aí? U UOL, IG, POP e muitos outros usam muito cor de fundo cinza. Compare com o Terra, que quando usa cinza, é beeem clarinho. Não é mais atrativo assim, sem o cinza?

Creio que essa influência é devido à cor padrão da interface do Windows. Era a cor padrão de fundo dos browsers até há alguns anos atrás! Anos e anos usando softwares cinza poderia ter levado webdesigners a escolherem o cinza como opção padrão para fundo. Ele é neutro, encaixa razoavelmente bem em qualquer layout. Na verdade, percebo que muita gente usa o cinza como a solução para o fundo complica, um tapa-buraco dos layouts.

O Windows XP mudou a cor padrão para amarelo clarinho. Creio que foi uma boa escolha. Tenho usado o amarelo #FFFF00 com sucesso para substituir minha tendência para o cinza. As interfaces se tornam mais agradáveis e familiares. Isso só prova o quanto é importante escolher bem o fundo de uma interface. Na verdade, é a primeira coisa que faço.


Dicas

Siga-me no Twitter, Facebook, LinkedIn ou iTunes.

Autor

Frederick van Amstel - Quem? / Contato - 17/03/2004

Palavras-chave

cinza    fundo    background    cores    cor    

Opções



Comentários

Discussão
Danilo
17/03/04 às 08:56

Em meu site, eu uso fundo cinza, mas se vc quiser vc mesmo pode mudar a vontade, divirta-se....


Discussão
Fred
18/03/04 às 01:59

Estou numa cruzada contra o cinza. É bem verdade que no caso do Acqua do Macintosh (degradés de cinza e brilhos brancos) ele não é tão funesto, mas ainda assim acho que em websites ele deve ser evitado. A interface tem que seduzir, incentivar a navegação e o cinza é péssimo para isso. No exemplo da Thomaz Rabelo, a navegaçãoe está praticamente morta, é a última coisa que eu vi no site, quando na verdade deveria ser a primeira.

Cinza não cria contraste com cor nenhuma e os contrastes são fundamentais para estabelecer a hierarquia visual do layout. Note como no exemplo da Digicomp não há como dizer o que é mais importante na página, não há um caminho sugerido ao olho. A única parte que chama a atenção são os quadrados coloridos no topo, mas infelizmente elas estão justamente na área de cegueira de banner e serão confundidas como tal.


Discussão
Danival A. Souza
18/03/04 às 10:10

Fala Frederick!

Não concordei muito com este artigo. A cor cinza é muito difundida hoje, não só em websites, mas também em objetos. Veja os carros. Os cinzas (prateados), são ou não os carros predominantes ?

Outra coisa, o fato de contratar menos com o preto deixa mais suave a leitura, para quem quer usar fonte preto é um bom caminho.

É um belo trunfo também, para se alternar com o branco em caixas para sites. Quando utilizado com degradê com o branco também produz um bom efeito. Na minha opnião é uma cor neutra, e pode ser bem utilizada.

Concordo com você que fundo cinza (completamente cinza) é ultrapassado. Dá mais cara de sistema do que de site, o que não é uma boa experiência para o usuário.

Veja alguns exemplos feitos pela minha equipe na NBH Internet que utiliza partes cinzas:

www.digicomp.com.br
www.thomazrabelo.com.br


Discussão
Carolina Antunes
18/03/04 às 10:13

O Cinza de fundo pode tirar um pouco a claridade que o branco dá (ele emite muita luz no monitor), tornando-a assim, melhor de ler.
é claro q o resto do site deve ter harmonia para que esse cinza n de cara de funeral


Discussão
willpower
25/03/04 às 03:28

Eu amo cinza. ;)

Tudo depende de como você usa o cinza.


Discussão
Lincoln Schultz
03/05/04 às 03:51

Bom, na minha humilde opinião, creio que não exista de maneira alguma uma formula do tipo: "use essa cor, e tenha sucesso".

Tudo vai depender da identidade visual da empresa.

Laranja? Tudo bem, se a minha marca é verde, está pronto um belo site sircence. :)

Pra mim, o cinza é uma ótima cor (aliás, uma das únicas) para balancear, e harmonizar outras cores que compoem o visual da interface, seja web ou software.


Discussão
Fred
03/05/04 às 03:56

Sábias palavras Lincoln! Porém, o cinza pode muito bem ser substituído em quase todos os casos pelo branco, que não tem um efeito negativo sobre as cores ao seu redor. O cinza pelo efeito de proximidade, acaba deixando as cores ao redor menos luminosas e o branco, ao contrário, mais luminosas. Claro que isso pode ser interessantes para alguns usos específicos como o website de uma funerária, mas no geral temos que criar layouts estimulantes.


Discussão
dudu
03/05/04 às 11:00

Que discução fantastica....
Com certeza, o cinza fica bom em layouts, seja qual for o tema, pois no lugar do branco, ele diminui o contraste, facilitando a leitura e assim ficando mais agradavel a nossos olhos...
Por mais claro q seja o tom do cinza, ja vai dar uma bela diferença do branco....


Discussão
Fabio
03/05/04 às 11:54

Baseado em que vc tirou essas conclusões? Existe livros que dizem ao contrario do que vc diz acima..


Discussão
Fred
03/05/04 às 12:30

Baseado na minha experiência pessoal. É uma conclusão pessoal, claro.

Porém, outro dia vi uma dessas conclusões num blog estrangeiro, que dizia que o "laranja é o novo preto".

"Switch it over to Zeldman, whose recent compliant, standards-based redesign is smart and snappy. Zeldman uses orange, which everyone knows is the new black, so that wins major points already."
http://www.designbyfire.com/000076.html

Concordo com ele. Vamos esquentar um pouco essas interfaces. Chega de cinza, de preto, de branco. Precisamos cativar os olhares alheios. Claro, sem exageros e sabendo a hora certa de fazer isso.

Ah, se você puder colocar outras opiniões a favor do cinza, manda ver. Eu já li em algum lugar que cinza com preto e branco é a combinação mais perfeita para websites. E realmente, há uma porção que utiliza essa trina, porém, claro não dá pra generalizar. É difícil criar um website de uma indústria que trabalhe com metais sem usar cinza em algum lugar, mas é só um caso particular.

Minha crítica é justamente sobre o uso generalizado da cor cinza.


Discussão
Lincoln Schultz
04/05/04 às 05:56

Realmente é uma discussão interessante. Porém vamos ficar a vida inteira discutindo aqui sobre o uso adequado ou não do Cinza.

Muitos irão dizer que é ruim usar, porém outros tantos irão dizer que o cinza é muito bom.

Há casos e mais casos.

Falando em questão de usabilidade / experiência do usuário até pode ser que faça algum sentido e dê realmente algum resultado positivo (?).

Mas falando no lado da Estética / Design acho muito difícil o Cinza ser trocado por outra cor, ainda mais por Amarelo. Sendo uma cor completamente irritante ao olho.


Discussão
Cissa
11/05/04 às 07:09

O cinza com cores cores contrastantes, especialmente alranja, foio uma tendência muito forte no mercado de design gráfico nos Estados Unidos até mais ou menos 2 anos atrás. Ele permite uso de outras cores fortes e transmite sensação - desde que usado corretamente com tais cores - de sofisticação e modernidade. Não força a vista, e discordo de que dificulte a leitura. O fundo desta página por exemplo é gritante demais a ponto de incomodar sua visualização.


Discussão
Fred
19/05/04 às 01:05

Ana, bem lembrado a questão da luz emitida. Porém, acho que o cinza não é a cor mais confortável, porque senão os browsers não teriam mudado a cor de fundo padrão de cinza para branco há anos atrás (quem é das antiga lembra do Netscape). Concordo que o cinza cansa menos a leitura do que o branco para mim, mas não para todas as pessoas.

O branco foi culturalmente estabelecido como a cor de fundo padrão para a leitura, por causa dos impressos. Então, insconscientemente ele é mais confortável, mesmo na tela do monitor. Temos que sempre nos lembrar que ergonomia não vale só para questões físicas, mas também psicológicas.


Discussão
Ana Neves
19/05/04 às 12:13

Olá Frederick,

Vale lembrar que o monitor é um suporte luminoso, ao contrário do papel, por exemplo, que apenas reflete luz. Portanto, quanto maior o volume de texto (sina dos portais), teoricamente, mais "cansada" fica a "vista" ao ler texto sobre o branco do monitor.
Claro que não se precisa se usar cinza, entretanto, ainda que o amarelo não seja tão "cansativo" quanto o branco, o cinza ainda é a cor de fundo que requer menos esforço dos olhos - e gera, portanto, maior conforto.
Acredito que diversos fatores formais influenciem na estética de um projeto - não apenas a cor de fundo. Cabe ao designer a habilidade de projetar sobre cinza sem fazer com que o resultado fique "frio", "careta", que remeta aos "primórdios do Windows". ;-)
Grande abraço!


Discussão
Lincoln Schultz
20/05/04 às 01:57

Discordo Fred.

Acredito que o branco dos livros não sejam apenas pelo conforto "visual" que o branco proporciona, e sim pelo fato dos custos também.

Pegue a gazeta do povo, the times, the new york times: (os que mais entendem sobre Infografia e veja se o fundo dos jornais é branco).

:)


Discussão
Fred
20/05/04 às 02:57

Que nada Lincoln. Para o papel ficar branco é preciso gastar muito em processos químicos, aliás este é quase todo o custo do papel. Os Jornais não são completamente brancos, justamente para economizar.


Po Fred... o problema não é o cinza de fundo. É sua foto nele heheheheh!!

Brincadeira ;)

Bom, o fato é que qualquer cor, desde que bem utilizada dentro do tema se torna a cor perfeita.

O fato do cinza "reduzir" a luminosidade do monitor, permitindo que ela (sendo fundo) não se sobressaia ao texto (o que acontece com um fundão inteiro branco)considero válida. Mas nem sempre o cinza é a aplicação mais indicada. Muitas vezes, por exemplo, um fundo amarelado e conteúdo preto (ou cinza escuro) mantém uma calma no ar. Mas a aplicação da tipologia influencia muito nisso. Conteúdos com textos muito compactos, massivos, viram um bloco de informações praticamente inúteis ao olho humano. E isso sim não é funcional.

Portanto, a aplicação disso tudo é questão de bom-senso. Com o tempo, a visão vai se aprimorando e você mesmo passa a enxergar as melhores combinações.


Discussão
Meu Belo Nome.
28/07/04 às 15:08

Fred... vc está sendo preconceituoso com o Cinza.

não preciso lembrar (vc sabe disto, eu sei) que luz emitida não é luz refletida.

Cinza é (fato) mais "confortavel" que branco ou um amarelo claro...

mas o grande X da questão ainda vai ser o contraste entre os conteúdos (texto e imagens) e o background


Discussão
Leandro Moreira
28/07/04 às 15:48

Acredito que o cinza seja realmente um tapa-buraco como mencionado. Mas um tapa buraco muito eficiente. Ele deixa as coisas mais homogêneas, menos intrusivas e mais confortavel. Mas mesmo assim acredito que tudo tem medidas.

Observem os dois sites que fiz:
http://www.ospop.com

Nesse o fudno é branco, mas o cinza foi usado em demazia, e o resultado não me agradou.

Outro:
http://www.vileladelivery.com.br

Nesse eu preferi o azul bem clarinho para substituir o cinza, acredito que ficou bom.

Ps. Esse último não está mais sobre minha responsabilidade e já fizeram cagadinhas nele q NÃO É CULPA MINHA! hehehehehe.

Acho que é só.


Discussão
Golfetto
24/09/04 às 13:15

Sinceramente, prefiro variações quase brancas de amarelo ou marrom ao invés do branco ou do cinza... principlamente pq podemos usar cores diferentes nos textos, tipo um marrom escuro.. o que naum dá muito contraste, mas também não atrapalha a leitura.
Sem preconceitos, acho que o cinza pode ser usado sim, mas não de forma banalizada.


Discussão
Antonio Santos
06/11/04 às 20:15

Pow, dá pra ver que vc não acredita muito nessa cruzada contra o cinza e está mais querendo polemizar sobre um assunto interessante e ver no que vai dar. Ok, vamos lá então que tb gosto de um bate boca amigável em mesa de bar. Tem MIL sites bons, tem mil sites profissionais com bom uso de cinza assim como tem gente usando mal até a batida trinca preto, vermelho e branco. Quer ver sites grandes, cinzas e bem razoáveis? Ai uns q lembrei agora:

http://www.ideo.com/ideo.asp
http://www.cleverdesign.com/2004/default.asp
http://www.cemgul.com/

Tá certo, sei que vc se refere ao fundo cinzinha claro e morto de fundo... bom, se é morto a culpa não é do cinza mas do designer (e as vezes do cliente) necrófilo!

Mas sim, estou acompanhando que muita gente está mais tranquila quanto ao uso de cores mais sofisticado por saber que a qualidade das placas, dos monitores ou mesmo a configuração dos micros estão propiciando a visualização mais adequada do trabalho do designer (Tem muito site tirando cinza e colocando cores terrosas ou quentes, sutis que nem saberia dizer o nome e ficando show. Isto deve ser a real origem deste debate, né?). A expariência também vai definindo as cores que permitem visualização agradável no monitor (alguém já disse isto aqui antes, não quero repetir mas é o básico: cor luz x cor pigmento, web é diferente de impresso) e o equilibrio entre o que é utilizável e o que fica bonitão, somado ao q for a última moda (cinza com laranja, verde ácido com azul etc)é que vai dizer como a banda vai tocar.


Discussão
Spranzza
10/05/05 às 11:48

Costumo manter o fundo branco para quadros de texto. Não que nunca tenha utilizado qualquer cor, inclusive o preto (com toda a sua ausência), mas foi apenas uma vez. Utilizo o fundo cinza #e5e5e5 bara o e centralizo a ou a . Assim, fica uma pequena(ou grande, cfe. o caso) margem dando um ar mais gráfico ao site. Gosto desta linha... gosto das coisa feitas para o papel e gosto de trabalhar a idéia de que o site seja um impresso.


Discussão
erika
16/05/05 às 23:26

curto a cor cinza sim ...pelo simples fato de ser basica.... ja dizia meu professor da faculdade...aposte seu trabalho em algo que vc ta realmente certo de que va da certo...melhor que arriscar jogando um verde com amarelo azul e vermelhor....é jogar pra ganhar colocando o cinza....


Discussão
Andre
17/05/05 às 11:31

um detalhe importante, temos que levar em conta o "gosto" do cliente, a maioria das pessoas vê o branco como auzência de cor, ou seja, um buraco no layout e não como mais uma cor. Geralmente reclamando que "falta cor". Usar cinza é buscar esse corte.

Outro detalhe é usar o cinza para deixar o branco em total evidência. Como background colocando o branco em alguma "layer".

Acho tem que se usar cinza como "ponte" para contraste.


Discussão
Mario
06/07/05 às 10:15

Cinza bem fraco com vermelho é legal... dá impressão de austeridade.


Discussão
Michele
02/10/05 às 14:48

Estou fazendo um projeto na facu (é uma bancada), optamos pela cor cinza as prateleiras, a bancada ainda não foi decidido, e a cor da sustenção será azul. Serão 3 cores.
Lendo esses comentários sobre o cinza, fico com dúvidas sobre o meu projeto, pois nessa bancada será encaixado uma máquina, portanto será usada numa indústria, fico com receio de fugir dos padrões maquinários, ´já q a maioria é na cor cinza, o q vcs acham? a cor cinza seria legal p/ as prateleiras do meu projeto, ou eu deveria mudá-las de cor?


Discussão
Fred
03/10/05 às 08:20

Michele, em ambiente industrial o cinza é muito comum mesmo. Dentro da indústria ninguém espera que uma bancada chame a atenção dos funcionários ou transmita uma emoção reconfortante.


Discussão
ana luisa
04/12/06 às 16:44

oi eu demorei um tempao pra ler isso fundo branco tamben nao e legal mas e mais ou menos esse site e quel e seu orku se tiver me add

bijus ana


Discussão
rafael dias
27/05/08 às 12:03

falando tanto de cinza, entao por esse site todo cinza?


Discussão
Fred van Amstel
27/05/08 às 20:18

Pois é Rafael, algruras do destino. Na época em que escrevi esse post, o fundo deste site era preto, heheeh. Mas, tinha proposto uma nova versão, branca com detalhes em azul, que os próprios usuários sugeriram mudar pra cinza, veja:

http://usabilidoido.com.br/redesign_do_usabilidoido_versao_seurat.html




Comente.






(aguarde que é demorado mesmo...)


Você merece.

Assine nosso conteúdo e receba novidades sem sair de casa!

Atualizado com o Movable Type.

Alguns direitos reservados por Frederick van Amstel.

Apresentação do autor | Consultoria | Portifólio | Política de Privacidade | Contato