Um dos sintomas do TOC, a mania de alinhamento pode tomar conta da sua vida para sempre. Por isso muito cuidado. Às vezes tenho minhas crises. E aquele post desencadeou uma dessas crises que me fez analisar eletrodomésticos.
Sim, semana passada tive que adquirir um novo forno microondas já que o antigo tinha pifado. E lá fui eu pesquisar com meu faro não só por preços baixos mas também por elementos desalinhados.
Sempre digo que a observação sempre é o melhor exercício de aprendizagem. Olhar tudo a sua volta e se perguntar “por que é assim? por que é assado?” Foi isso que eu fiz ao ver esse microondas Brastemp:
Note que o layout do frontend de um microondas não é muito diferente de um wireframe de um site. Note que temos duas colunas. Rabisquei por cima da foto para que vocês percebam melhor e dei números para cada coluna.
Na coluna 1 temos o vidro espelhado, onde podemos ver o alimento dentro do microondas e na coluna 2 o menu. É bem claro que o logotipo da “Brastemp” está alinhado de forma correta no centro da coluna 1. Por que de forma correta? Note que a distância entre o logotipo e o canto esquerdo é igual a distância entre o logotipo e o canto direito da coluna 1, onde termina o vidro espelhado e começa a coluna do menu. A Brastemp considerou que ali tinhamos uma coluna (a coluna onde fica o vidro espelhado) e que o alinhamento deveria ser feito em relação a este elemento e não em relação ao microondas.
Veja agora o microondas da Panasonic.
Veja que a Panasonic também levou em consideração a divisão do layout do frontend em colunas, onde temos a coluna contendo a porta do microondas e a coluna do menu. O alinhamento do logotipo “Panasonic” se dá em relação a porta e não ao microondas inteiro.
Agora veja este microondas da Electrolux:
Vocês estão notando alguma coisa estranha nesse microondas? Olhem bem. Algo lhe incomoda?
Pense.
Analise.
Agora veja meus rabiscos:
O pessoal responsável pelo design da Electrolux, ao alinhar seu logotipo, desconsiderou completamente a divisão do frontend em colunas, alinhando o logo “Electrolux” em relação ao microondas como um todo. Note que a distância entre o logotipo e os cantos esquerdo e direito do microondas são iguais. Porém a distância entre o logotipo e o canto esquerdo e direito da coluna 1 onde temos a porta do microondas está totalmente desigual, mesmo estando clara uma divisão visual entre a porta e o menu.
O mesmo ocorre com o forno da Electrolux:
Nesse caso o efeito “Fora da Casinha” é evidente. O logotipo está desalinhado não só em relação a porta mas em relação ao vidro também.
O mesmo acontece com os microondas da Bosch:
Nesse caso o problema aparenta ser mais “grave”. Além do logotipo estar totalmente desalinhado em relação ao elemento “porta”, o vidro também está desalinhado. Note que a margem no canto esquerdo é menor que a margem no canto direito, entre o vidro e o menu.
Isso é para vocês perceberem como um erro bobo de alinhamento pode ocasionar uma grande bagunça visual. E que isso não ocorre somente entre amadores mas entre grandes empresas também. Resultado da falta de consideração entre as divisões visuais que cada elemento provoca.
É notório que ali temos um menu formando uma coluna nítida e que a tampa forma uma outra coluna. Nossa visão e nosso cérebro costuma dividir tudo que enxergamos em colunas e linhas. Por isso, não podemos desconsiderar essas divisões em colunas. Sempre que houver um alinhamento de um elemento que está contido em uma coluna, devemos alinhar em relação a coluna e não ao conjunto completo.
Está vendo como a observação de um simples eletrodoméstico pode lhe ajudar na hora de criar layouts web? Pense nisso.
Para o alto e Avante!
Nenhum comentário:
Postar um comentário