Mini Curso: sou iniciante em web design. O que preciso saber? parte 04 | André Buzzo
contato@andrebuzzo.com.br | (11) 9-8551-3500 | facebook | skype:andrebuzzowebdesign

Mini Curso: sou iniciante em web design. O que preciso saber? parte 04

Publicado na categoria Artigos, Mini Curso com 5.163 visualizações e 10 comentários

Nesta etapa do nosso Mini Curso, vamos falar um pouco sobre:

  • Cores, fontes e layout;
  • Espaço em branco é bom e eu gosto.

São assuntos recorrentes e que aqui mesmo, eu já falei em algumas ocasiões (fontes:  http://www.andrebuzzo.com.br/preocupado-com-tipografia-veja-esse-pequeno-guia-em-5-passos/ | cores: http://www.andrebuzzo.com.br/o-significado-das-cores/ | layout: http://www.andrebuzzo.com.br/teoria-do-design-layout-f/)

Cores

Ah, as cores! Sempre emblemáticas e nos trazendo os maiores desafios! Quem nunca iniciou suas aventuras pelo Photoshop, Fireworks ou Corel Draw usando aquelas cores que machucam os olhos da gente!

Fazem a gente sofrer quando acessamos um site assim:

jataxi

Vejam que combinação orquestrada de cores para um layout. Simplesmente uma delicadeza para com nossas córneas! #sóQueNão!

A escolha de cores para uma peça, um projeto, deve passar por vários e vários estudos antes de ser aplicada. Alguns pontos a serem considerados:

  • Idade do usuário
  • Público alvo
  • Mensagem a ser transmitida pela cor
  • Harmonia
  • Significado

Existem diversos fatores que exigem uma atenção redobrada:

  • Cultura
  • Região
  • Política
  • Religião

Sim, não é simplesmente escolher um tom de verde para ilustrar sua página de vasos sanitários que serão vendidos no Oriente Médio. Nem a escolha de um layout predominante branco para tratar de assuntos sobre o Japão, por exemplo! Porque?

Porque culturalmente, o branco no Japão significa luto. E o verde, é a cor de Alá. Já pensou a desgraça (e isso realmente já ocorreu com uma empresa que fabrica vasos sanitários!) que seria usar uma cor VERDE que significa e muito para a religião mulçumana em uma remessa de vasos sanitários?

A não observância de inúmeras possiblidades pode afundar seu projeto já em algo que nem parece tão importante, tirando seu aspecto visual apenas. Porém, devemos observar que as cores transmitem emoções, ela tem significados, e passa mensagens! E se você não sabe com quem quer falar, como saberá quais cores utilizar?

Depois de resolver esses problemas, você já tem a noção e a ideia de quais cores implementar em seu novo projeto. E existe uma ferramenta fantástica chamada “Kuler”, da Adobe, que facilita e muito a escolha de uma paleta de cores harmoniosas entre si. O site pode ser acesso nesse link: adobe kuler

Utilizando a ferramenta, será que não poderíamos escolher um conjunto melhor de cores para aplicar em nosso novo projeto? Veja algumas paletas que a ferramenta pode gerar para você:

kuler

Fontes

Ah, o velho problema sobre as fontes! O que usar? Uma mais fininha? Uma mais “gordinha”?

Quando formos utilizar fontes em nosso projeto, devemos tomar cuidado para não irmos inserindo diversas fontes no site. O uso de duas famílias, na minha opinião, é mais que o ideal. Já usar três, quatro, você pode acabar por confundir o usuário.

Um dos princípios do bom design é a repetição. Isso quer dizer que se eu usar a fonte “regular” da família Arial, na cor azul e tamanho 200% nos títulos do site (entenda-se: H1 até o H6), e a fonte regular da família “Open Sans”, para todo o conteúdo, EM TODAS AS PÁGINAS, eu crio uma repetição e com isso, “faço” que meu usuário entenda duas coisas: que as fontes azuis significam o título e as fontes em escala de cinza 80% são referentes aos textos e conteúdos do site. E isso traz uma certa “comodidade” ao usuário, pois ele vai perceber que está ainda em seu site e que ele segue um padrão.

E isso é excelente!

Existe um conteúdo (introdução) muito bom a respeito de fontes e vou publicar aqui as 10 regras sobre tipografia desse material:

1 – Não usar mais que três fontes nun documento
A simplicidade é mais importante que o exibicionismo

2 – Os títulos devem ser maiores que o corpo do texto e surgir acima deste.
O estabelecimento de uma hierarquia visual é importante para comunicar claramente

3 – O texto principal deve ser de um tamanho legível para o meio em que é aplicado.
Texto demasiado pequeno ou demasiado grande torna-se cansativo e difícil de ler. A distância de leitura é um dos fatores mais importantes a ter em conta.

4 – Deve utilizar-se um tipo de letra standardizado.
Letras decorativas e de pobre legibilidade devem ser escassamente usadas e nunca para texto corrido.

5 – O espaço entre pares de letras, letras numa frase e palavras deve ser consistente.
O texto deve criar linhas fáceis de seguir pelo olhar; letras ou palavras demasiado juntas ou afastadas criam distração e impedem a leitura.

6 – Elementos de ênfase devem ser discretos.
O itálico é a forma preferencial de dar ênfase a uma passagem pois não quebra o ritmo de leitura e não deixa de transmitir a enfatização pretendida.

7 – Não se deve escrever texto corrido em maiúsculas.
As maiúsculas são muito menos legíveis, em bloco, do que as minúsculas e este tipo de texto deve ser guardado para títulos ou cabeçalhos.

8 – O texto deve ser alinhado na horizontal.
Lemos da esquerda para a direita; texto “empilhado” na vertical é difícil de ler. Para escrever na vertical, deve usar-se uma linha horizontal rodada 90 graus.

9 – Apenas se deve recorrer à justificação completa (esquerda ou direita), quando temos controle total sobre kerning, tracking e hifenização; caso contrário, deve alinhar-se à esquerda (ou “em bandeira”).
A justificação total em sistemas que não suportam controle tipográfico do espacejamento cria linhas em que os espaços perdem a consistência.

10 – As linhas não devem ser curtas, nem longas demais.
A linha ideal tem 66 caracteres (incluindo os espaços!), porque ajuda a ler rapidamente e permite uma eficiente mudança de linha (fim de uma linha para o início da linha seguinte).

Fonte: http://www.slideshare.net/pedrocs/tipografia-noes-bsicas

Logicamente, algumas das regras aqui abordadas não se aplicam (ainda!) às páginas web. Mas, quando surgiu a web, todos diziam que nunca mais leríamos jornais impressos, livros, revistas e outras publicações que utilizam nosso velho e querido papel. E isso não aconteceu, e muitas pessoas, por mais “antenadas” que sejam, ainda preferem sim a leitura de um livro “físico” do que um “digital”.

Já que é tão bom ler no papel, porque não aplicar algumas das dicas dos impressos para os digitais?

E para finalizar o assunto sobre as fontes, veja que tabela legal sobre tipografia!

tabela_periodica_tipografia

(Clique na imagem para abrir em um nova janela!)

Layout

Ah, esse bicho de setecentas e setenta e sete cabeças! Como é complicado dominar todas as nuances sobre esse assunto.

Quando saber se exageramos demais ou se fizemos algo de menos, não é verdade? Veja meu próprio exemplo: alterei todo o meu site. Todo o layout dele.

Anteriormente, eu oferecia mais de 17 links para artigos/conteúdos no site (sem contar os menus) e hoje eu ofereço apenas 3 e uma caixa de busca. E o que aconteceu após essa mudança? Um aumento no tráfego da página. Sim, meu tráfego aumentou.

Comecei a crer fortemente naquela história do “menos é mais”. Veja mais um exemplo: o site do meu escritório anteriormente era assim:

KR Comunicação Integrada

Então, reformulamos o mesmo e agora ele tem essa aparência:

KR Comunicação Integrada   Jornalismo e Criação de Sites  web design

Nosso tráfego também melhorou, mesmo que não tenhamos realizada praticamente nenhuma mudança na “oferta de conteúdos” do site. Mas a mensagem passada através dos banners deram um retorno interessante.

Dessa maneira, é legal e eu acho bem válido quando as pessoas falam sobre “compor o layout” do site. Há de se ter em mente diversos pontos: cor, mensagem a ser transmitida, público alvo, suas inspirações e porque não aspirações e o que deseja fazer com seu site.

Existem muitos sites que nos servem como inspiração para criamos layouts matadores, mas nem sempre os “matadores” significam sucesso no empreendimento. Sou a favor do seguinte: se for para se focar em apenas uma coisa, que seja o conteúdo; antes um site feio mas com conteúdo do que um site lindo que não comunica nada!

Se conseguir juntar os dois, perfeito!

Existem técnicas para a criação de um bom layout, que explico na vídeo aula sobre “Teoria do Design”, incluindo aí aquela segunda parte onde já me alertaram que eu falo 28 vezes a palavra “Tá jóia”? Me perdoem mas creio que era a terceira ou quarta vídeo aula que eu gravava!

Uma delas, não abordada nesse conteúdo, é sobre um “Layout em Z”.

Veja um exemplo de um layout em Z criado pela minha agência:

layoutZ

Ele é chamado “em Z” por isso. Você o “lê visualmente” como se fizesse um Z com a cabeça. Veja que nesse tipo de criação nós auxiliamos o usuário a guiar seus olhos naquilo que é interessante para NÓS, e não para ele! É aquela velha história: não oferecemos o QUE ELE QUER, da maneira como NÓS QUEREMOS OFERECER.

Um outro exemplo, agora, de layout em F, você pode conferir abaixo:

layoutF.fw

Para saber mais sobre o Layout em Z e em F e porque ambos funcionam, acesse:

Layout Z – http://webdesign.tutsplus.com/articles/design-theory/understanding-the-z-layout-in-web-design/

Layout F – http://webdesign.tutsplus.com/articles/design-theory/understanding-the-f-layout-in-web-design/

Espaço em branco é bom e eu gosto

E como eu gostaria que todos gostassem! De verdade!

Para entender um pouco melhor o assunto, acesse: http://www.andrebuzzo.com.br/razoes-pelas-quais-os-espacos-em-branco-sao-bons-nos-projetos-web/

O espaço em branco no projeto web é de extrema importância, mas é um assunto controverso e muito cheio de “restrições” e até mesmo, “resistência” por parte do designer, do programador e principalmente, do cliente!

Nós sempre pensamos naquela coisa: farei um layout leve:

espacoEmBranco.fw

Quando conseguimos pensar em um layout leve, de fácil leitura, agradável aos olhos e que passa a informação que tanto queremos, normalmente ouvimos coisas como: “Nossa, falta cor nesse negócio!”; “Nossa, está simples demais!”; “Meu Deus, vai ficar todo esse espaço em branco ao redor do site”?

Infelizmente, por insistência do cliente ou inexperiência do diretor de arte/designer responsável, não, não vai ficar assim. Com certeza, vai se tornar algo do tipo:

cadeEspacoEmBranco.fw

Se tivermos a sorte de fazermos algo assim. Claro, sei que vocês dirão “ah, mas um plano de fundo bacana dá outra cara para o projeto e não vai ficar feio assim” … Porém, lembre-se: esse curso é para iniciantes. E não que por isso os mais “velhos” não cometam o mesmo crime. E porque isso não é legal?

Porque nossos olhos precisam de um ponto “de escape”. Ali, confinamos o conteúdo em um box branco sem graça. Compare ambas as imagens por dois minutos que seja: a com fundo colorido torna-se mais cansativa com certeza!

Na imagem sem fundo, você bate o olhos e parece que sua visão “dispersa-se” aos lados esquerdo e direito. Na imagem com fundo, seu olhar simplesmente chega no amarelo e para! Agora imagina isso em um site que seu usuário precisa ficar mais de 5 minutos?

É torturante!

O espaço em branco (entenda-se: se a tela for toda azul, por exemplo, o fundo será azul e não branco ok? Então, o “espaço em branco” é todo o espaço do site onde não está aplicada nenhuma imagem ou nenhum texto!) ajuda na visualização de seu conteúdo, promove a continuidade e, se você “tiver os dons”, consegue fazer a separação dos elementos do layout apenas usando o espaço, sem intervenções de barras ou qualquer outro artifício para promover essa separação. Veja a mesma imagem abaixo sem os separadores:

semDivisorias.fw

Sim, o espaço em branco é bom e eu, assim como muitas outras pessoas, achamos isso bem legal!

No próximo capítulo de nosso mini curso, vamos abordar:

  • O cliente nem sempre tem razão …
  • Não, você não acertará na primeira. Nem na segunda. Quem sabe e olha lá na décima quinta …

Forte abraço a todos e até a próxima!

Voltar à página anterior!

  • Jefferson Soares

    :D daqui não saio mais :) \o/

  • Jefferson Soares

    Adorei esse site,o conteúdo é ótimo e você é engraçado,juntou o útil ao agradavel! Olha que é a primeira vez que entro nesse site e ja estou comentando. Parabéns,continue assim!

    • Fala Jefferson!

      Obrigado pelas palavras meu velho! Seja sempre muito bem-vindo!

      Eu acho que me faço entender melhor se utilizar um pouco de humor … ficar naquela lenga-lenga de coisas técnicas só pra dizer que eu sei (ou enganar os outros pensando que eu sou completo conhecedor! rs) não é minha praia e nem o intuito do site!

      Forte abraço!

  • Flavio Neves

    Você escreve super André, meus parabéns.
    Essa sequência de artigos está ficando sensacional, aguardarei ansioso pelo próximo artigo. Abraz.

    • Fala Flávio!

      Obrigado cara! Aguarde que a parte 05 sai esse ano ainda …rsrsrs

      Abraços!

  • Rebecca

    Poxa, André, que bom que encontrei suas dicas! Estou aqui no meu primeiro estágio na vida e tenho meu primeiro layout pra fazer e aos poucos eu vou clareando a mente de por onde vou começar e o que é errado de se fazer. Ainda bem que existem pessoas como você que não se importa em ajudar, já que nossa profissão é pura competitividade! Obrigada pelos posts e por ter uma linguagem tão clara e bacana de acompanhar!

    • Olá Rebeca!

      Que beleza! Fico feliz duplamente: uma por conseguir um estágio em nossa área e outra por poder contribuir de alguma maneira no seu trabalho!

      Obrigado pelas palavras!

      Abraços e bom estágio para você!

  • Vinicius

    Cara show de bola mais uma vez.. sua dicas estão sendo preciosas.. digo que conseguimos aprender bem mais por aqui do que por um curso presencial..

    abraçoss

    • Fala Vinicius!

      Obrigado meu velho! E eu concordo contigo, mas de uma outra maneira: eu também aprendo pacas em outros lugares se comparados a cursos presenciais!! rs

      Abraços!