Denis Tassoni acompanhou a palestra sobre o tema e traz um relato detalhado!

Ontem o palestrante contou um pouco da história da atividade de web designer, citado as imagens gifs animados pulando no canto da tela, os globos terrestres girando e as frases passando apressadas. Os menus em formato de tabela e imagens com sombras gigantescas, tudo isso surgiu no ano 2000.

Certo. Mas estes são outros tempos. Agora o design das páginas amadureceu. Temos regras para o tamanho das fontes, teoria das cores, espaçamento, repetição. Seguimos todas as diretrizes e boas práticas de outros ramos do design. Claro, que transpostos para a realidade web.
Apesar da grande disponibilidade de material para estudo, ainda vemos em maior quantidade a não aplicação de preceitos básicos do design. Gradientes do azul escuro para o azul claro, sombras à la anos 2000…

Já que material para estudo não falta, podemos concluir que um dos motivos é a falta de padronização no aprendizado. Cursos de web design tem o foco maior no código do que na aparência das aplicações. Ainda existe um certo estigma em relação a masculinidade do designer.
A maioria então aprende a criar layouts olhando galerias CSS e websites como o Monster Template.

O palestrante deixou bem claro que design não é criar coisas bonitas. O design na web deve primar pela usabilidade com uma interface agradável. Não precisa ser espalhafatoso ou complicado, antes deve ser simples e sutil. Design bom não aparece.

Alguns desses princípios são conhecidos como Princípios da Percepção Gestalt e são parte do estudo da corrente Gestalt da psicologia. Psicologia? Você deve estar se perguntando, o que diabos isso tem a ver com fazer um layout no Photoshop?

É importante saber como o ser humano percebe os objetos e a relação entre eles para uma criação baseada em processos conscientes de escolhas. Procurar idéias em galerias CSS será desnecessário. A criação depende de inspiração e precisa de técnica.

Tambem citou três itens importantes a serem considerados por um Web Designer: Contraste, Repetição, Alinhamento, Proximidade, Cores e Conclusão.

Contraste
Se te apresentarem uma folha vermelha com um pequeno quadrado branco na lateral direita, o que vai te chamar a atenção? Tenha certeza que o quadrado. E por que? Porque o branco esta contrastando com a predominância do vermelho. Ele é o diferente.
Temos tendência a procurar algo que contraste com o ambiente. Algo a ver com o tempo das cavernas e animais perigosos. Por isso nossos olhos magneticamente repousam sobre o que consideramos deslocado do padrão.

Para destacar um elemento na página você pode alterar o tamanho, adicionar textura, mudar a orientação ou a forma, colorir, alterar o posicionamento padrão entre outros.

No caso do website do Mr B & Friends a primeira coisa que você verá é uma definição sobre o trabalho da agência. Nenhum outro texto da página compete em tamanho com estas duas sentenças. Primeiro princípio aplicado com sucesso.
Além de aplicável a elementos pontuais, o contraste é importante para criar uma hierarquia na página. O que chama primeiro a atenção é o título geral pelo tamanho, depois os subtítulos, um pouco menores e em seguida as imagens e palavras em negrito.

Repetição
A repetição cria unidade para que você tenha uma ancora visual. Cria ordem para que você consiga se mover entre os elementos com facilidade e cria associação para que você saiba que pertencem ao mesmo grupo. Além de ser um pouco hipnótica quando aplicada na escrita.
Por mais que o ser humano goste de coisas diferentes, sente-se mais seguro com padrões. Para que sirvam também como base na comparação com outros elementos. Os blocos com título do texto e resumo, imagem na direita e links na base são um exemplo bem aplicado da repetição. Você vai saber onde olhar quando quiser saber o título do texto.
Uma aplicação comum deste princípio no web design é manter sempre a mesma posição do menu e logotipo entre as diferentes páginas. Isso serve para que o visitante saiba que não saiu do website e que localize rapidamente a informação.
Alinhamento
Os gráficos e textos não podem ser postos na página. Devem ser alinhados, seguir uma ordem, conhecida como grade. Uma página com
elementos alinhados e que não demonstrem explicitamente isso, será percebida como mais agradável aos olhos. E nem precisa ter um design fora de série.
O design em grade é facilmente percebido em websites de e-commerce na disposição dos produtos para venda. Com este padrão, você sabe onde olhar para saber o preço, o nome e a imagem.
O palestrante nos contou que resistiu um tempo à utilização de grades porque sempre considerava a criação gráfica um campo de liberdade criativa e idéias de impacto. “Foi perda de tempo”. E aconselhou, por experiência, que utilizemos grades nos nossos próximo layout.
Tratando-se de texto, sempre alinhar à esquerda. Textos centralizados são um erro primário. E justificar o parágrafo não funciona muito bem para web porque pode criar “valas” de espaços em branco verticais no meio dos parágrafos.
Outra vantagem do alinhamento consistente é que para destacar um trecho ou elemento, basta alinhá-lo diferente dos outros. Não vai precisar de cor, tamanho ou qualquer outro artifício. Apenas o alinhamento.
Proximidade
Em um evento, quando você vê pessoas próximas umas das outras, em grupos, você entende que eles compartilham uma afinidade. Em um layout o mesmo princípio se aplica aos elementos.
Veja como os elementos estão agrupados nas diferentes seções da página. Do lado esquerdo a imagem, o título e logo abaixo o texto. Na direita as imagens dos projetos com poucos pixels de distância.
Assim como você deve aproximar elementos relacionados, deve aumentar a distância entre os que não tem relação.
Este é mais um princípio que ajuda a manter a unidade e ordem na página. Facilitando com isso a navegação.
Conclusão
Aplicando os princípios apresentados, também conhecidos como CRAP (Contraste, Repetição, Alinhamento e Proximidade) será visível a melhora na qualidade do layout.
E você também ganha argumentos para justificar as suas escolhas. O que aumenta a sua confiança em relação ao trabalho e a do cliente em relação a você.

*Cores
Não escrevi nada sobre o que foi citado sobre elas, porque dormi nessa parte da palestra…
Mas podem dar uma olhada no resumo da Monitora: Juliana Karem Petreski, acho que ela deve ter citado alguma coisa, pois ela estava ao meu lado na palestra.

Compartilhe!

Um comentário O Designer e a Arte

  1. Davi Dramaturgo disse:

    Sou Produtor e Roteirista e Ator humorista as vezes…kkkk boaz

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current month ye@r day *