desenvolvimento para web » Design

Elementos de design aplicados à web

Tárcio Zemel — Sun, 11 Dec 2011 10:00:01 +0000

O design é dividido em uma série de princípios básicos que se aplicam a todo o projeto, seja ele do “mundo real” ou do mundo virtual. No entanto, especialmente na web, às vezes essas regras tendem a ser esquecidas e nós apenas trabalhamos com o que sentimos ser o “certo”.

Em uma das séries do desenvolvimento para web foram abordados alguns dos principais estudos sobre Gestalt para web, e isso foi um grande passo sobre o que estamos tratando aqui, pois pudemos estudar como é a percepção e entendimento das pessoas no ambiente online. Agora, veremos alguns dos elementos de design aplicados à web.

Este é um artigo traduzido do original “The Elements of Design Applied to the Web“, do blog Astheria, e sofreu pequenas adaptações.

Equilíbrio

Equilíbrio é um assunto complexo. Existem dois tipos de equilíbrio: equilíbrio simétrico e equilíbrio assimétrico. Quase todos nós estamos familiarizados com imagens simétricas. A maioria de nós, nos tempos de criança, provavelmente já fez algum tipo de recorte em papel de forma que o resultado final ficasse perfeitamente simétrico. Enquanto o equilíbrio simétrico é fácil de detectar (as coisas aparecem como imagens num espelho), o equilíbrio assimétrico é menos perceptível, mas, aparentemente, mais importante.

Subtraction: exemplo de Equilíbrio Assimétrico

A figura acima é um excelente exemplo de equilíbrio assimétrico (aplicado em vários lugares), especialmente a imagem do cachorro. Nesse exemplo P&B, a colocação do animal nessa posição deixa muito peso para o preto na metade esquerda da composição, que é equilibrada pelo aparentemente aleatórios “X” na parede, à direita (1). Esta pequena adição cria um senso de equilíbrio que quase faz você se sentir como se o cachorro esteja no centro da imagem, quando, na verdade, ele não está. Confira.

Enquanto a imagem do cachorro demonstra um equilíbrio gráfico há, também, algum equilíbrio assimétrico no cabeçalho do site (2). A barra de menu é bastante pesada, tanto em seu tamanho, quanto na cor. No entanto, a linha mais fina acima de “Subtraction” usa o espaço negativo acima e abaixo para criar um equilíbrio visual entre os dois. Então, a área em branco acima da barra de menu fica como mesmo peso visual que a barra de navegação preta mais abaixo.

Um desenho simétrico, apesar de ser um conceito extremamente simples, pode ser surpreendentemente poderoso.

Apple: exemplo de Equilíbrio Simétrico

Apple, uma das atuais referências de design, usa um layout completamente simétrico em sua página inicial (atualmente a página deles está diferente que a desse screenshot). Como você pode ver na imagem, cada elemento é correspondido do outro lado da linha, criando uma harmonia visual simples.

Proporção

Escolher o tamanho certo para os elementos vai além de simplesmente selecionar um tamanho legível para o corpo do conteúdo ou a largura das colunas. Deve-se levar em conta a proporção, que está entre o equilíbrio e dominância, baseados nas proporções de certos objetos. Se num site “tradicional”, por exemplo, com uma coluna maior para conteúdo e uma menor para menus e meta-informações, a coluna do conteúdo é maior justamente por ser mais importante. Se os menus e meta-informações fossem colocados na coluna principal, certamente a primeira reação dos visitantes será de pensar que a página não tem o conteúdo que estão procurando.

Enquanto algumas pessoas preferem usar grids com módulos fixos, outros preferem usar abordagens diferenciadas, tais como a usada aqui, no desenvolvimento para web – pelo menos na data de publicação deste artigo -, que tem como base a Proporção Áurea: a largura da coluna do conteúdo é, aproximadamente, 1,625 maior que a coluna da barra lateral.

A proporção também pode ser usado para, simplesmente, atribuir importância a elementos na página.

Elementos de design aplicados à web: proporção

Apesar de a página atual estar diferente deste screenshot, o pessoal da Panic fez um bom trabalho em usar elementos proporcionalmente dimensionados para atribuir não somente uma hierarquia visual, mas significado entre eles. Começando com o logo do produto (1), passando, mais baixo, para as três call to action (2) – que são ligadas por tamanho e aspectos relacionais, como os ícones à esquerda – e, finalmente, títulos e texto importante (3). Combinado com um design muito unificado, esta página é quase uma obra-prima da web (especialmente para os que adoram um javascript bem feito aplicado a user interfaces).

Ritmo

Ritmo na web é algo presente principalmente em dados. É especialmente importante para sites que contêm páginas compridas e/ou grandes quantidades de informação. Este screenshot do Digg mostra que o site cai em ambas as situações e, também, é um excelente exemplo de ritmo através da repetição:

Digg: exemplo de Ritmo

O site cria um ponto de partida no cabeçalho com sua navegação horizontal estabelecendo a direção de leitura (1) para, logo em seguida, cair no conteúdo principal, que é idêntico para cada artigo. Isso cria um ritmo consistente que o usuário segue inconscientemente (2). Esta técnica é repetida na barra lateral.

Uma boa maneira de pensar sobre o ritmo no design está na mesma definição que vem à mente quando pensamos em música. Cada projeto tem um pouco de um “pulso visual” que, dependendo de onde você está na página, convida a uma leitura rápida, uma pausa numa imagem interessante ou a uma orientação para um botão de download.

Um site que é muito consistente no seu ritmo pode sofrer no fato de que todos os elementos na página acabam ficando com uma quantidade igual de peso ao redor, podendo deixar os visitantes ligeiramente desorientados. Muitas variações, por outro lado, podem fazer com que a página se torne um caos! O importante é estabelecer uma coerência dentro de certas seções do site, como demonstrado acima, no Digg: cada parte tem seu próprio ritmo interno, segundo seu propósito; mas, como um todo, a página inteira é unificada e tudo instantaneamente tem significado apenas com base na cor, forma e proporção.

Dominância (ou Ênfase)

Não há nada mais poderoso no design do que uma forma circular, especialmente em um mundo de retângulos, como a web. Um círculo chama a atenção simplesmente por sua forma. Ele não precisa ser especialmente vibrante em cores ou espaço em branco. E o melhor lugar para aproveitar todas essas boas características está no logotipo.

A List Apart: exemplo de Dominância

Como é possível ver na imagem, A List Apart está usando não um, mas um par de círculos para fazer a dominância ao seu logotipo (1). Isso é reforçado pelo símbolo com o número da edição, adjacente ao logo. Há, também, outros “selinhos” como esse usados no lado direito (2) para chamar a atenção para algum ponto específico (no caso, venda de camisetas).

Outra forma de alcançar uma posição dominante é através do uso de espaço em branco e/ou cores. Estes podem ser combinados com uma forma dominante, mas, raramente, você sempre precisa combinar todos eles; um ou dois geralmente já é o suficiente.

Google: outro exemplo de Dominância

Google usa ambos, espaço em branco e dominância de cores, para puxar o olho para a área principal da página (1). O lúdico colorido do logotipo do Google, combinado com a quantidade de espaço em branco que envolve esta área, força de seu olho a se concentrar lá imediatamente. Embora o Google pode fornecer excelentes resultados para as buscas, a chave para seu sucesso na web é a sua facilidade de uso, que é naturalmente fácil de se usar devido a suas tendências visuais básicas.

Unidade

O conceito de unidade é muito mais aberto a interpretações. A unidade é, na verdade, um sentimento de que todos os elementos estão ligados, conectados de alguma forma, e isso dá uma ideia de um todo. Um grande exemplo de unidade é o portfolio de Dave Werner, no qual cada página do site apresenta escrita à mão, alfinetes e todo o tipo de outros elementos que, quando analisados em conjunto, produzem um sentimento de unidade. Não há nada que se sente estar fora do lugar e tudo compartilha o mesmo estilo:

Dave Werner: exemplo de Unidade

Mesmo pedaços do site que, como entidades separadas, naturalmente podem parecer diferentes umas das outras, são cobertas de notas e esboços, trazendo até mesmo esses aspectos do site para o portfolio. Não há nada no site que você não esperaria ver alfinetado num quadro de camurça de projetos! ;-)

Conclusão

Embora ninguém vá se tornar um “guru do design” somente com essas dicas, certamente essas explicações e exemplos ajudam a conceber projetos de forma mais consciente, que podem impor a hierarquia visual necessária e realmente guiar os olhos do visitante através da página da maneira que planejada.

Sem este tipo de estudo (e o de Gestalt aplicado ao web design) esses elementos você não ganha nada além de muito trabalho e retrabalho em busca de uma solução visual que você sinta ser a certa ou a “bonita”. Os princípios, em si, são muito simples; o mais importante é estar ciente de que eles existem e, a partir de agora, começar a refletir sobre eles na hora dos projetos e partir para a prática que, como sabem aqueles que já sentem um pouco da experiência dos anos de trabalho na área, sempre recompensa com trabalhos cada vez melhores.

10 erros básicos de web design

Tárcio Zemel — Wed, 14 Sep 2011 13:38:39 +0000

Uma das principais áreas do desenvolvimento web é o web design. Ao se comunicar com outras áreas correlatas, é através de um bom planejamento visual que o web design proporciona uma boa experiência visual ao visitante, garantindo que a qualidade do projeto web seja incrementada e esteja mais perto do sucesso!

O contrário disso é um web design que não consegue atender às necessidades do projeto e acaba por piorar a situação… Para corrigirmos um problema, é preciso conhecê-los antes; por isso, vamos a essa lista de 10 erros básicos de web design que você deve evitar!

Este é um artigo traduzido do original 10 Basic Visual Web Design Mistakes, do blog 1WD.CO e sofreu algumas adaptações.

Acredito que as pessoas têm tanta experiências em ver/analisar web design quanto é seu tempo de navegação na web. Eu poderia garantir que você vê mais web design ruim do que bom. Eu também vejo dessa maneira: existe um monte de sites que tem web design ruim. A seguir, veja 10 erros básicos de web design para que você possa analisar e saber o que não deve fazer em seus sites!

Erro básico de web design 1: usar fontes ruins

Sabe quando você visita um site com com uma fonte tão estranha ou extravagante que fica muito difícil de ler? Determinadas fontes “extravagantes” não devem ser usado no corpo do texto, caso contrário, o leitor não será capaz de ler e/ou a leitura ficará tão cansativa a ponte de fazer com que esse visitante desista da leitura e abandone o site.

Use fontes que são fáceis de ler!

Outro erro é que algumas pessoas usam fonte não-padrão em seus sites. Se o seu leitor é apenas uma pessoa comum que não têm tantas fontes adicionais instaladas, ele vai se confundir e dizer: “Por que é que o tamanho da fonte deste site é tão pequena?”. Infelizmente, isso faz as pessoas se queixarem sobre o site. Basta usar font comuns como Arial, Helvetica, Verdana, Georgia, ou Times New Roman, que a grande maioria tem em seu computador.

Erro básico de web design 2: não usar imagens, apenas texto puro

Acredite, as pessoas vão ficar entediadas se veem apenas texto e deixarão seu site uma vez que estão cansados de ler um oceano de palavras… Isso é internet, não um livro de auto-ajuda. Se você não tem idéia sobre que imagem você deve colocar, basta usar qualquer imagem relacionada com o título do conteúdo. Evite deixar o “corpo” do texto sozinho, sem qualquer imagem.

Obviamente que existem algumas (que podem ser consideradas) exceções, como manuais técnicos, sites com tutoriais específicos e afins. Mas, ainda nestes casos, sempre que possível é interessante inserir algumas imagens/ilustrações contextualizadas.

Erro básico de web design 3: textos longos sem parágrafos

Mesmo que você tenha inserido imagens no conteúdo de seu site, é importante lembrar de separar as coisas usando parágrafos. Imagine que você está lendo um artigo com mais de 500 palavras sem qualquer parágrafo. É cansativo e pode ser confuso! Com algumas frases separadas por parágrafos, as pessoas conseguirão ler seus conteúdos com mais facilidade.

Mas acho que todos que cursaram o primário já sabem disso, não é? ;-)

Erro básico de web design 4: fonte muito pequena

Alguma vez você já visitou um site e você teve que ampliar o tamanho da fonte através de recursos do navegaor para ler o conteúdo? Isso é ruim. Faça com que seu texto tenha um tamanho equivalente de, pelo menos, 12pt, para se certificar de que o conteúdo será legível o suficiente. Se não, as pessoas terão que apelar para ferramentas de terceiros e, certamente, podem querer ir para um site que não tenha o mesmo problema…

Adicionalmente, você pode fornecer aos visitantes uma ferramenta simples para controle do tamanho da fonte. Com isso, mesmo usando o texto com um tamanho mínimo aceitável, os visitantes que, mesmo assim, quiserem algo maior, terão essa possibilidade de personalização e facilitação de sua leitura.

Erro básico de web design 5: flash muito pesado

Quando se opta por utilizar Flash em um site, geralmente o objetivo é agregar valor à percepção visual dos visitantes. Infelizmente, o uso do flash faz com que o site seja mais lento para abrir e aumenta as chances de os visitantes deixá-lo rapidamente. Reduza o uso de Flash, a menos que seja extremamente necessário para alguma função específica.

Assim que o HTML5 ficar mais madura e amplamente utilizado, provavelmente esta dica ficará obsoleta.

Erro básico de web design 6: texto por cima de background coloridos

A maioria dos web sites usam backgrounds de cor única para melhorar a legibilidade. Se você pensa que usar fundo colorido vai tornar as coisas melhores e mais agradáveis, você está absolutamente errado! Isso só faz as pessoas ficarem cansadas de ler seu conteúdo, porque a cor do texto se mistura com o background.

Perceba que não há “proibições” em usar cores para o background, o problema está em usar patterns ou imagens sem tratamento algum que, inevitavelmente, fazem com que a experiência de leitura seja um desastre… Bom senso, pessoal!

Erro básico de web design 7: publicidade demais

Provavelmente você já deve ter visto sites cheio de banner e anúncios de publicidade, das mais variadas maneiras e possibilidades cabíveis. Você, mesmo, pode dizer o quão desagradável isso é, sem ninguém falar pra isso pra você. Jamais priorize anúncios em detrimento do conteúdo!

Bons web sites sempre colocam anúncios em lugares estratégicos de modo a não incomodar o visitante e não atrapalhar o conteúdo principal. Inspirar-se nos bons geralmente é uma boa estratégia.

Erro básico de web design 8: pop ups indesejados

Eu odeio (e tenho certeza de que você, também) sites com pop-ups indesejáveis! Eles realmente irritam! Eu quero olhar para a informação, mas o pop up interfere e faz com que eu perca meu tempo. Existe um motivo pra isso, claro, mas isso continua sendo um ato odiável…

Erro básico de web design 9: conteúdos muito extensos

Conteúdos (como artigos, por exemplo) muito extensos causam um efeito: geralmente as pessoas ficam entediadas para lê-los… Algumas pessoas apregoam a diretiva de que conteúdos devem ter, no máximo, 1000 palavras – com alguma adição de imagem para torná-lo mais atraente do que um texto simples. Pessoalmente, não sou muito apegado a números precisos e sim ao bom senso. Este artigo que você está lendo neste exato momento, por exemplo, tem mais de 1000 palavras mas, segundo o contexto em que está, não é cansativo.

O importante é fazer suas palavras simples e compreensíveis e ter em mente que a maioria das pessoas não gosta de artigos muito longos, mas que isso não é uma verdade absoluta e que esta “regra” pode ser “flexível”, dependendo do nicho a que o conteúdo está destinado.

Erro básico de web design 10: links invisíveis

Certifique-se de que a cor do link tenha uma cor diferente do texto simples. Simplesmente isso. Isso ajuda o leitor a identificar quais os links que visitaram e também o ajuda a não clicar nos links sem querer. Uma dica básica sobre boas user interfaces que é preciosa e não deve ser negligenciada.

Alguns ainda afirmar que a cor dos links deve ser diferente da cor dos títulos. Pessoalmente, não vejo muita necessidade para isso já que, teoricamente, a apresentação de um título é bem diferente da apresentação de um link textual. De qualquer forma, fica a seu critério.

Conclusão sobre erros de web design

Como vimos, estes são 10 erros básicos de web design que você deve evitar cometer em seus projetos web. Evidentemente, nenhuma das dicas aqui apresentadas são inflexíveis e/ou constituem-se verdades absolutas. Como já tivemos a oportunidade de ressalvar em diversos artigos aqui no desenvolvimento para web, no fim das contas, o que melhor guia seu projeto ao sucesso é o seu bom senso!

E você, apontaria mais algum erro básico de web design? Comente!

Cores na web: guia completo

Tárcio Zemel — Mon, 09 May 2011 13:10:59 +0000

Recentemente, uma leitora do blog escreveu pedindo algum material sobre cores na web, perguntando se poderia publicar um artigo sobre este assunto tão importante no desenvolvimento para web. Como já tivemos a oportunidade de mostrar, as cores são uma das maneiras de os sites se comunicarem com seus visitantes, imprescindível para se fazer web sites de qualidade.

O assunto, além de complexo e, em alguns pontos, controverso, é bastante amplo. Por isso, ao invés de escrever um artigo ou uma série a respeito, decidi que a contribuição seria maior ao indicar fontes e referências sobre o tema. Certamente compartilhar o que outras pessoas já escreveram sobre as cores na web (e cores, em geral) será uma contribuição muito maior.

Referências sobre teoria das cores para web

O uso da teoria das cores na web, na verdade, não é assunto exclusivo da web. O que se faz é pegar todo o este conteúdo teórico e, simplesmente, realizar algumas adaptações para que este seja mais “compatível” e traga resultados mais eficientes no ambiente online. Portanto, quando se faz este tipo de estudo, você encontra os mesmos termos, terminologias, conceitos e constatações, seja no “mundo online” ou “mundo offine”.

Então, uma boa forma de começar o estudo das cores é acessando o site de Maria Claudia Cortes, Color in Motion, no qual, através de interações do próprio visitante, ela mostra o significado, melhor combinação, efeitos psicológicos, significado nas diferentes partes do mundo, etc, das cores vermelho, laranja, amarelo, verde, azul e roxo. Além disso, há uma animação que envolve os personagens das cores, mostrando algumas das principais respectivas características. Realmente vale a pena o acesso!

É importante, também, já que o assunto são cores na web, conhecer um pouco da parte técnica que envolve a exibição de cores em monitores, diferença entre CMYK (real) e RGB (virtual), diferença ao representar as cores usando RGB ou Hexadecimal, dentre outros. E, para isso, existe uma explicação-base bastante simples de se entender, que pode ser encontrada no site da Hi-Midia, em um artigo sobre as cores na web.

Uma das grandes referências na área é Daniele Viana que, em seu blog, fez uma série de artigos a respeito. O interessante é que, dentre esses artigos, existem aqueles que abordam, especificamente, as principais cores e seus efeitos em web designs. Artigos estes que, numa disposição didática, seriam:

O uso das cores em webdesign
Breve análise das cores
Como criar combinações de cores mais inteligentes

Também o pessoal do Vandelay Design Blog apresenta excelentes referências de sites por cor que valem a pena serem vistos:

Ferramentas para cores na web

Já tivemos a oportunidade de mostrar algumas ferramentas para cores na web, como, por exemplo, o Colorblind Web Page Filter. Mas, para compor este artigo melhor, faz-se necessária uma lista mais incrementada. Portanto, segue uma lista completa de ferramentas de cores para web:

Conclusão

Quando se trata de cores e exibição de imagens na web, algo que deve ser feito depois de o serviço feito, é “ajustar” o trabalho para a web. Então, confira o artigo “Como otimizar imagens para web – guia de otimização de imagens“.

Existem muitos e muitos sites que tratam sobre a teoria das cores na web. Alguns tratam de forma mais geral; outros mais pormenorizada. Mas são tantos e tantos que tentar sistematizar todos em um único artigo é algo bastante difícil de se fazer. Portanto, caso tenha algum complemento a fazer e/ou ferramenta para indicar, comente!

URLs longas apresentadas corretamente com CSS

Tárcio Zemel — Mon, 25 Oct 2010 12:00:57 +0000

Principalmente em blogs sobre desenvolvimento web – ou que não sejam, mas que precisem, eventualmente, apresentar URLs longas -, a indicação de endereços completos da internet e/ou da web geralmente se faz necessária. Mas é preciso saber como estilizar corretamente estes endereços através de regras CSS para que sua apresentação não fique “quebrada” dentro do layout feito.

Este é um artigo traduzido do original “Wrapping Long URLs and Text Content with CSS“, do blog Perishable Press, e sofreu pequenas modificações.

Para apresentar corretamente URLs longas, seqüências de texto e outros conteúdos, basta utilizar esta regra CSS em qualquer elemento em nível de bloco (por exemplo, é perfeito para tags

pre {
white-space: pre;           /* CSS 2.0 */
white-space: pre-wrap;      /* CSS 2.1 */
white-space: pre-line;      /* CSS 3.0 */
white-space: -pre-wrap;     /* Opera 4-6 */
white-space: -o-pre-wrap;   /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap;  /* HP Printers */
word-wrap: break-word;      /* IE 5+ */
}

Por padrão, o valor da propriedade white-space é definido como “normal”. Então, você pode ver algo como isto quando tenta “forçar” URLs longas e outras seqüências contínuas de texto:

Para “forçar” fragmentos de texto longos e contínuos que são “envolvidos” dentro da largura do

(ou outro elemento nível de bloco, como ou ), é necessário um valor diferente para a propriedade white-space. As opções possíveis são:
normal. O valor padrão para a propriedade white-space. Sequências de espaços em branco são “recolhidos” a um único espaço em branco. O conteúdo de irá se adequar à largura do elemento.
nowrap. Sequências de espaços em branco são recolhidos a um único espaço em branco. Os conteúdos de pulam de linha SOMENTE em elementos com
.
pre. Todos os espaços em branco são preservados e o conteúdo de irá pular de linha de forma implícita. Esse é o comportamento padrão do elemento .
pre-line. Sequências de espaços em branco se recolhem a um único espaço em branco; o conteúdo de irá dar wrap em espaços em branco e quebras de linha acontecem de acordo com a largura do elemento.
pre-wrap. Todos os espaços em branco são preservados e o conteúdo de irá se comportar de acordo com os espaços em branco e quebras de linha de acordo com a largura do elemento.
inherit. Valor de white-space herdado do elemento pai.
Em um mundo perfeito, nós poderíamos simplesmente usar “white-space:pre-line” dessa forma:
pre {
white-space: pre-line;
width: 300px;
}
Embora a propriedade white-space seja, teoricamente, suportada por todos os principais navegadores, infelizmente muitos deles falham e não conseguem aplicar corretamente a propriedade para strings longos.
Diferentes navegadores farão o wrap (“quebrar” o texto) em textos longos, mas exigem valores diferentes de white-space para trabalhar. Felizmente, podemos aplicar os valores necessários para cada navegador incluindo várias declarações de white-space. Essa é exatamente a solução apresentada no código CSS mostrado no início do artigo.
Os comentários incluídos na solução CSS mostram qual solução se aplica a cada browser. Observe que algumas das regras são específicas de alguns navegadores (veja os prefixos específicos dos fornecedores), enquanto outros declaram valores default a partir de diferentes especificações CSS.
A estranha propriedade “word-wrap” é uma invenção da Microsoft que foi incluído no CSS3. Graças às “CSS forward compatibility guidelines”, é perfeitamente possível incluir várias instâncias da mesma propriedade. Em poucas palavras:
Propriedades não reconhecidas são ignoradas
Para várias declarações da mesma propriedade, somente a última tem validade
A solução de código apresentada neste artigo parece funcionar bem em todos os navegadores, mas ela não valida (segundo o W3C) devido à louca propriedade da Microsoft.
Para ver os conceitos aqui mostrados na prática, veja uma página de exemplo e, para uma discussão mais completa sobre a quebra automática de texto, confira o artigo Perfect Pre Tags, também do blog Perishable Press.
Artigos Relacionados
Problemas comuns de WordPress e como resolvê-los
Microdata API e Schema.org: dando significado ao HTML
Estratégia de Conteúdo ou Content Strategy
Elementos de design aplicados à web
Wireframes para web: guia completo de desenvolvimento
10 erros básicos de web design
JSON – JavaScript Object Notation
Erros comuns em desenvolvimento web para campanhas de SEO
URLs amigáveis (slug) à WordPress
15 fantásticos comandos SQL para WordPress

7 ferramentas para web designs melhores

Tárcio Zemel — Mon, 22 Feb 2010 12:40:55 +0000

Web design é uma arte! Através dos princípios de Gestalt, cores, call to actions bem feitos e outras técnicas e práticas (tudo isso aliado ao bom gosto), é possível criar ambientes incríveis na internet! Saber desenvolver um excelente design para web é fruto de bastante estudo, conhecimento técnico e experimentação.

E, a fim de saber se determinado design é eficiente e está conseguindo atingir os objetivos a que se propõe, é preciso analisar seu desempenho. Mas como analisar se um web design é eficiente? Através de algumas ferramentas interessantes e bastante úteis.

Este é um artigo traduzido do original “7 Tools You Should Be Using For Better Web Designs“, do blog Six Revisions, e sofreu algumas adaptações.

Heat Maps

Heat Maps (ou Mapas de Calor) feitos por empresas como a CrazyEgg (ou o gratuito ClickHeat) dão uma representação visual de o que os visitantes estão fazendo em seu site através do rastreamento individual de cada clique. Heat Maps, geralmente, também controlam cliques que não são links (algo que o Google Analytics, por exemplo, não faz).

Com mapas de calor, você pode descobrir se as pessoas estão usando o site da maneira desejada e fazer alterações quando necessário. Por exemplo, os visitantes estão clicando incorretamente em textos ou imagens que se parecem com links?

Testes de Usabilidade Online

Recrutar pessoas para testes de usabilidade “tradicionais”, em um ambiente controlado, pode ser um processo muito demorado e oneroso. Várias empresas fornecem testes de usabilidade totalmente online, tanto em estilo um “moderado”, quanto “não moderado”. Isso pode economizar tempo e dar mais controle sobre seus cenários de testes.

Em um teste de usabilidade online moderado (confira UserTesting.com), você cria cenários de teste, pode atribuí-los a usuários pré-selecionados e ver os resultados. Em um estilo não moderado (veja ClickTale), cenários e/ou tarefas não são especificados; Ao invés disso, sessões de browser inteiras da navegação de visitantes são anonimamente monitoradas, registradas e estudadas.

Teste A/B

Está tendo problemas para decidir qual web design para a página inicial trará melhores resultados? O Google Web Optimizer pode implementar testes A/B em seu site para ajudar a determinar qual delas é mais eficaz. Ele permite que você implemente projetos múltiplos da mesma página, que são então aleatoriamente mostrado aos visitantes.

Você pode, então, comparar os resultados e ver qual projeto é mais eficaz. Os testes A/B eliminam qualquer forma de “adivinhação”, usando informação real para ajudar a tomar decisões sensatas sobre o web design de seu site. Veja este vídeo de experiências A/B com o Google Web Otimizador no YouTube.

Crowdsourcing

O Huffington Post deu um passo adiante nos testes A/B, usando uma técnica conhecida como crowdsourcing para determinar como os visitantes preferem o texto da manchete. Manchetes são conhecidos para literalmente fazer ou “quebrar” um artigo, independentemente do seu teor.

Para ajudar a criar as manchetes mais interessantes, para estimular o interesse do público, os visitantes são mostrados a, aleatoriamente, um dos dois títulos diferentes para um mesmo artigo em uma página. Após os primeiros 5 minutos de ser lançado, o título com o maior número de cliques é selecionado e mostrado para todo o restante do público.

Buscas Internas

O Google Analytics tem um recurso chamado Site Search, que usa dados de pesquisas internas para acompanhar e analisar o que os visitantes estão procurando em seu site. Dados de buscas internas são muito importantes, já que auxiliam e dão dicas sobre o que seus visitantes querem e por que estão lá.

Usando esta informação, você pode descobrir se seu site tem o conteúdo que seus visitantes querem/precisam. O Site Search também pode o quão eficazmente seu conteúdo é organizado e se ele pode ser facilmente encontrado.

Por exemplo, quando os visitantes utilizam sua busca, que link eles clicam em primeiro nos resultados da pesquisa? É a página correta? Ou será que eles procuram por um número reduzido de páginas e então se sentem desencorajados e abandomam o site? Estas são apenas algumas das questões importantes o Site Search pode ajudar a responder para ajudar a gerenciar seu conteúdo.

Até que ponto você quer permitir que outras empresas (no caso, Google) saibam sobre você e seu site? Pense no seguinte: permitir uma análise completa das buscas e padrões de seu site é, falando em business, interessante para você?

Serviços de Monitoramento

O que as pessoas estão dizendo sobre o seu site? Ouvindo o seu público e o acompanhando através de comentários não solicitados podem ser uma ferramenta muito importante para ajudar a entendê-lo. Esses canais permitem que você permaneça relevante com o seu público. Dessa forma, você pode criar decisões informadas e embasadas sobre a direção e web design do seu site.

Alertas do Google

Alertas do Google permite que você selecione termos de pesquisa específicos e irá notificá-lo via e-mail ou feed a qualquer momento que esse(s) termo(s) for encontrado pelo Google. Ele lhe dá a capacidade de procurar dentro de blogs, notícias, grupos, vídeo e web.

Twitter Search

O Twitter Search permite controlar o que as pessoas estão dizendo, em tempo real. Além disso, dentro das opções avançadas, você pode limitar as pesquisas a determinados locais, datas e mesmo se os usuários estão fazendo uma pergunta.

Blogs

Blog: o “avô” de todas as ferramentas (deste gênero) e algo que sempre deve ser considerado pelos administradores de um site. Ao implementar um blog, você cria um canal oficial de comunicação entre você e seu público. Você pode mantê-los informados sobre as mudanças ou novos recursos e incentivar a participação e feedback do público.

Conclusão sobre ferramentas para melhores designs para web

Muitas vezes os administradores de sites lançam um novo web design e julgam que o trabalho está feito. Bons web designers e desenvolvedores devem constantemente permanecer relevantes para sua audiência.

Estas ferramentas irão ajudá-lo a participar e interagir mais com seu público. Vão ajudá-lo a compreendê-lo de forma mais eficaz, conduzir a uma maior facilidade de utilização e entregar o máximo proveito do seu site. Obviamente não são todas as formas de se fazer isso, mas, certamente, um bom passo para começar a otimizar seus web designs.

Gostaria de indicar mais alguma ferramenta ou serviço para a melhora de web designs? Alguma outra dica?

4 elementos de design para um bom call to action

Tárcio Zemel — Mon, 08 Feb 2010 11:30:09 +0000

O artigo com dicas para call to actions eficientes foi interessante, mas faltou algum detalhamento extra, algo a mais sobre a prática de se fazer chamadas à ação. Por isso, indicar os 4 elementos de design para um bom call to action vai ser de muita valia para complementar. Depois de ler este texto, você está apto a fazer melhores call to actions e vai incrementar a usabilidade de seu site.

Este é um artigo traduzido do original “4 Simple Design Elements Behind a Good Call to Action“, do blog letscountthedays, e sofreu algumas adaptações.

Tamanho

Faça a sua chamada à ação grande o suficiente para que se destaque bastante na página! É o foco principal, certo? De modo geral, quanto maior é um elemento em uma página, mais visível será, consequentemente, deve ter maior importância. Um bom call to action é grande o suficiente para que ele seja reconhecido facilmente.

Antes de fazer botões enormemente e exageradamente gigantes, bastante atenção! Se você criar uma chamada muito grande, uma call to action enorme, os visitantes podem não compreender que o elemento é clicável e você vai perder completamente o “apelo” àquela ação. A dica é criar chamadas à ação grandes em relação aos outros elementos da página, tomando o cuidado para não cair no exagero ridículo e ineficiente.

Alternativamente, se você tiver mais de uma chamada à ação, utilize o tamanho segundo sua importância. O primeiro call to action deve ser maior do que o segundo e assim por diante.

Forma

Normalmente os melhores call to actions são os que tem forma de botão, chamam bastante atenção e são instantaneamente identificados como clicáveis – experimente usar os cantos arredondados ou circulares nas extremidades de call to actions para lhes dar a forma de um botão. Cantos arredondados funcionam bem, porém alguns usuários podem interpretar mal a chamada à ação, tomando por um anúncio ou banner. Como sempre no desenvolvimento web, o que vale é o bom senso!

Na intenção de fazer os call to actions parecidos com botões, um bom passo nessa direção é usar uma fonte tipográfica única, diferente das do restante da página, de modo a reforçar o “apelo” à ação. A diferença na forma da letra a ajudará a atrair a atenção para o call to action. Mais uma vez, bom senso na escolha para não destoar completamente do estilo e identidade visual do site.

Cor

Não é possível dizer que algum dos 4 elementos para um bom call to action que estão sendo abordados tem mais importância do que os demais, no entanto, a cor de seu call to action tem muita importância. Uma das formas mais rápidas para agarrar a atenção do usuário é usando um contrastante e visualmente interessante call to action. Escolher uma cor que se destaca do resto das cores utilizadas na página irá cumprir sua função.

Escolha uma cor que é especificamente exclusiva para sua chamada à ação; uma cor que não seja usada em qualquer outro lugar da página. Por exemplo, se o texto do site é preto e todos os links e botões são azuis, você deve usar cores diferentes de azul ou preto para o seu call to action. Ao invés disso, use uma cor mais clara e contrastantes como, por exemplo, o laranja. Ao utilizar laranja, a chamada à ação não ficará despercebida com o resto do azul e preto e vai receber bastante destaque em relação aos outros elementos da página.

Também é recomendável que você pratique o uso de cores de forma apropriada. É conveniente escolher cores chamativas e contrastantes, mas certifique-se de escolher as cores que se encaixam no esquema de cores geral do site. Também tome cuidado ao usar mais de uma chamada à ação na página: se você transformar a página em um arco-íris vai “drenar” o impacto do primeiro call to action e colocar os usuários em estado “não responsivo”.

Posição

Posicionar sua call to action “instintivamente”, no caminho dos olhos dos usuários, é extremamente importante. Não importa o quão grande, de forma estranha ou brilhantemente e coloridos seja sua chamada à ação seja, os visitantes nunca o verão caso não seja colocado em uma posição intuitiva. A posição exata para a sua chamada para a ação vai depender do layout da página, mas, regra geral, o melhor é manter a chamada para ação acima da dobra, numa área de destaque e com a abundância de espaço.

Deixando uma boa quantidade de espaço em branco em torno da call to action evita que outros elementos da página interfiram com a importância necessária de estarem ali. Posicione a chamada para ação num local intuitivo, sem qualquer confusão na forma como vai angariar o maior número de conversões.

Conclusão sobre bons call to actions

O mais importante é que você não pode ignorar o design de seu call to action! 4 elementos de design descritos aqui podem não parecer muito, mas, se bem utilizados, podem fazer maravilhas em sua taxas de conversão!

Veja diversos exemplos de call to actions no artigo da Smashing Magazine sobre o assunto. Inspire-se e avalie se você está indo no caminho certo; se está acertando nos julgamentos de design e estratégia de conversões de seus projetos. Fazer revisões e aprimoramentos constantes em seus trabalhos é um grande passo para garantir sua qualidade profissional, ao mesmo tempo em que ajudará com que você seja visto como alguém confiável, que não “abandona” os jobs realizados, simplesmente.

Tem mais alguma dica, exemplo ou comentário a fazer sobre call to actions?

Pergunte-se a si mesmo: questões para desenvolver um bom site

Tárcio Zemel — Wed, 18 Mar 2009 15:01:29 +0000

O desenvolvimento web às vezes é encarado como algo extremamente complexo, um verdadeiro “Bicho de Sete Cabeças”! Realmente não é a coisa mais simples do mundo; entretanto, pessoalmente creio que, por exemplo, operar uma pessoa ou planejar uma casa são coisas bem mais difíceis! Pode ser devido à minha afinidade com o desenvolvimento web, mas esta é minha opinião.

Na maioria das vezes fazer perguntas a si mesmo (depois de realizar um bom briefing para desenvolvimento de web sites, claro) é a melhor forma de identificar/complementar as principais necessidades de um projeto; é o meio excelente de saber o que pode ser feito, o que não pode, o que deve, o que não deve, como fazer, qual tecnologia escolher e o que mais for preciso saber, pelo menos num segundo momento (o “primeiro momento” é o briefing do site) é a coisa acertada e mais sensata a se fazer.

Perguntar-se a si mesmo (ou, quando trata-se de uma equipe, fazer perguntas mútuas) algumas questões nada complexas a respeito do projeto em vista é uma boa maneira de saber como começar e como seguir com o desenvolvimento do projeto web; e isso com a preparação e precaução necessárias para evitar um monte de surpresas que inevitavelmente ocorrem em projetos desta natureza.

Para ajudar você a elaborar suas “auto-perguntas”, segue uma série de considerações a respeito do desenvolvimento web. Pergunte-se! ;-)

Conteúdo

Sem sombra de dúvidas o conteúdo é o fator-chave de sucesso para os web sites e projetos online, em geral. Levando em consideração alguns pontos importantes, pode-se caminhar à consecução do objetivo de alcançar a qualidade deste e, consequentemente, a qualidade e satisfação para quem acessa.

Textos. Em sites/blogs “normais” os textos podem ser considerados como conteúdo de maior relevância e procura. Deve-se ter cuidado com a maneira de escrever (mais formal, mais coloquial, em terceira pessoa, em primeira pessoa, etc), a extensão dos textos, o tamanho das fontes, o espaço entre as linhas, a distância entre os parágrafos, apresentação de títulos e subtítulos, cores. Se ainda não sabe, veja como usar qualquer fonte tipográfica em blogs WordPress e sites, em geral.
Imagens. As mensagens transmitidas através de imagens também são bastante relevantes e, igualmente, merecem atenção especial. Mais à frente a questão das imagens será abordada com mais detalhes.
Áudio. Muitos sites utilizam áudio como forma de comunicação, o que é perfeitamente possível e conveniente se o bom-sendo for usado. Por exemplo, não é nada interessante colocar para tocar uma música em um site sem que o visitante tenha solicitado; o ideal é deixar um player à vista para que ele saiba que o recurso existe. Deve-se atentar também ao tamanho dos arquivos, em si, e ao tempo de duração, seja o áudio uma “música ambiente”, palavras de responsáveis pela empresa/produto/serviço, podcast, ou o que quer que seja.
Vídeo. Excetuando-se os sites voltados especialmente aos vídeos, para os utilizar nos sites um “mix” deve ser feito e levados em consideração fatores como tamanho em pixels, tempo de duração, qualidade das imagens, controle (barra de tempo, botões pausar e continuar, volume, etc), adequação ao tema e, muito importante, decidir se os vídeos serão hospedados em sites de terceiros e anexados ao conteúdo ou se vão ficar diretamente no servidor do site e executados através de scripts de players.

Navegabilidade

A navegabilidade, sem dúvidas, é uma das coisas mais importantes de seu site. A facilidade que o visitante tem para navegar entre/nos conteúdos do site é fator determinante para o sucesso ou fracasso de seu espaço online. Perceba em conversas com amigos, colegas e mesmo observando seu próprio comportamento, que quando se entra em um site confuso, “embaraçado”, sem uma boa estrutura navegacional, que a atitude é logo de irritabilidade e a primeira frase que vem à cabeça é “Droga, que site confuso! Vou embora…”.

Menus. Os menus do site devem estar bem claros e ser bem fácil de identificar o que é menu e o que não é. É através dos menus de navegação que os visitantes exploram a grande maioria dos sites e, se não está explícito em qual lugar o(s) menu(s) está(ão), como isso poderá ser feito?
Links. O mesmo vale em relação aos links, quer dizer, se não está bem claro e evidente que determinada palavra ou frase é, na verdade, um link, é fácil não se surpreender caso ninguém clique. É muito importante que os links do site sejam evidentes e diferenciados do restante do “texto normal”. Igualmente importante é salientar, de alguma maneira, quando um link já foi visitado.
Localização. O visitante precisa saber em qual ponto do site ele se encontra. A web é ampla, muito ampla, e as pessoas facilmente se perdem nos sites. Por isso, use e abuse de elementos que sirvam para identificar em qual lugar do site o visitante está atualmente como, para citar alguns, destaque nos menus e caminhos de pão (breadcrumbs).
Busca. Especialmente sites a partir do porte médio, blogs e revistas eletrônicas necessitam de um campo de busca. O campo de busca é um dos elementos mais usados em site e, em alguns casos, é o primeiro a ser usado pelo visitante. É importante deixar o campo de busca em local de fácil acesso e que este seja bem claro e simples de ser utilizado.
Elementos Auxiliares. Além dos já elementos, utilizar elementos auxiliares de navegação e “suporte” ao visitante eleva bastante a qualidade de um site, como um todo. Alguns exemplos são as páginas Ajuda, Perguntas Frequentes e Mapa do Site.

Web Design

Que “o conteúdo é o rei” todos os desenvolvedores sabem; o que muitos ainda não sabem é dar a devida importância ao web design. A forma como os elementos visuais estão dispostos e como se apresentam influi diretamente na maneira como as pessoas percebem e intuem (do verbo “intuir”) os web sites. Conhecer alguns princípios básicos de Gestalt aplicado ao web design e dar importância a determinados elementos é de suma importância.

Identificação. Identificar qual é o site em questão é garantir que as pessoas não terão dúvidas e reforçar sua marca na mente dos visitantes. É essencial que o logotipo (com link para a página inicial) seja apresentado logo na parte superior e que não haja equívocos quanto a qual empresa o site pertence/faz parte.
Identidade visual. Estritamente ligado à Identificação, É o conjunto de elementos que identifica determinada empresa, produto, uma instituição e similares. Vejam bem, é o conjunto de elementos! Para que uma identidade visual seja formada/mantida, é preciso critério para que a consistência e a constância estejam presentes. Respeitar e “repetir” os elementos visuais (e de outros tipos) a fim de fixar o que é preciso na mente das pessoas e garantir que nenhum equívoco acontecerá.
Cores. A correta escolha de cores (de muita preferência levando em conta a Identidade Visual) deve ser feita com cuidado e seguindo critérios bem estudados/observados. É importante levar em consideração o público-alvo (idade, sexo, preferências, expectativas, e mais), o objetivo do projeto, a época em que ele é feito, dentre outros. As cores merecem estudos complementares à parte, devido à sua importância para qualquer projeto de natureza web.
Fontes tipográficas. Partindo do princípio de que o conteúdo textual é o mais importante na maioria dos web sites, a utilização de fontes tipográficas adequadas ao projeto é imprescindível. A escolha correta da família de fontes, tamanho, cores, contraste, inter-relação entre tipos, posicionamento, e outros, devem ser feitos com cautela e tendo em vista o objetivo a que se propõe o projeto.
Imagens. Dependendo de como é pensado/estruturado o site, o uso de imagens praticamente se faz desnecessário, haja vista o atual delicious. Para os casos mais “normais”, em relação às imagens deve-se levar em consideração a qualidade, o formato, o tamanho em pixels, tamanho em KB (conhecem o optiPNG?), alinhamento, a relação com os outros elementos, etc.

Outras considerações

Para finalizar, ficam considerações sobre elementos de caráter geral dos sites que, se levados em conta e bem planejados, certamente aumentam a qualidade do site.

URLs. Pode parecer que não, mas o uso correto de URLs ajuda bastante a divulgação dos sites (principalmente falando sobre os mecanismos de busca). URLs amigáveis garantem que seu site será melhor indexado nos sistemas de pesquisa e, olhando o lado humano, facilita a memorização de páginas específicas. Escolher nomes fáceis e de tamanho reduzido são diferenciais.
Idiomas. Dependendo do site é interessante que os conteúdos sejam apresentados em idiomas distintos. Existem sistemas de tradução automática que podem auxiliar um pouco, mas o ideal são traduções profissionais. Pense bem, um tradutor automático não traduz áudios e vídeos. Quando parte considerável do público-alvo for de outros países, é interessante haver, além de diferentes versões textuais do conteúdo, também diferentes versões para áudios (quando se tratar de falas, claro), vídeos (ou inserção de legandas) e, dependendo do caso, até disposição dos elementos, levando em conta o modo de leitura e costumas dos países.
Tempo de carregamento. Algumas pesquisas alegam que se algum conteúdo não for apresentado e m 5 segundos, o visitante sai do site para buscar outro. Isso é relativo, claro, mas mostra a importância que há no tempo de carregamento das páginas do site. Fique atento ao tamanho de imagens, utilização de javascripts (que devem ser inseridos antes de “” e podem ter tamanho reduzido através de um compactador de javascript) e extensão das páginas. Utilize o YSlow para Firefox como auxílio.

Tem mais algum ponto que você gostaria de citar? Tem alguma dica para complementar os tópicos do artigo? Comente!

Web sites e comunicação: 21 maneiras de os sites se comunicarem com seus visitantes

Tárcio Zemel — Thu, 20 Nov 2008 16:10:36 +0000

Uma das mais importantes responsabilidades de um web site é a comunicação com os visitantes. Independentemente de o site ser um blog, um portfolio, um site corporativo ou um e-commerce, ele existe para se comunicar com os visitantes.

A comunicação, em alguns casos, é uma “via de mão dupla” (comentários em blogs são um bom exemplo), mas na maioria dos casos o site comunica antes de os visitantes enviarem seu feedback. Para que o site comunique eficientemente, o designer e o dono do site precisam ter propósitos claros das mensagem que querem transmitir aos visitantes.

A melhoria da comunicação é um processo contínuo. Através da avaliação de diversos sites, aí estão as maneiras pelas quais os web sites se comunicam com seus visitantes.

Este é um artigo traduzido do original “21 Ways Websites Communicate with Visitors“, do blog Vandelay Design, e a tradução foi feita com autorização do autor.

Títulos

Títulos são um óbvio ponto de partida para a comunicação se dar com os leitores. Os títulos devem informar aos leitores o que vão encontrar na página ou artigo se continuarem a leitura e devem ser extraídos do conteúdo, como consequência.

Independentemente se o site é um blog, um portfolio, um e-commerce ou qualquer tipo de web site, o título é um componente-chave da comunicação online com visitantes. A qualidade de um título pode ter um incrível impacto sobre quantas pessoas continuarão lendo o conteúdo, mas muitos de nós não damos aos títulos a atenção que eles merecem.

Subtítulos

Uma das chaves para a efetiva comunicação online é “quebrar” o texto para que fique mais legível. Uma das maneiras de aumentar a legibilidade e fazer o conteúdo ficar mais “amigável” é incluir subtítulos. Os leitores terão mais facilidade em entender e lerão de forma mais fácil, assim como entenderão mais facilmente a estrutura do texto.

A maioria dos blogueiros está acostumada a utilizar subtítulo, mas eles também podem ser usados em outra situações. Em momentos em que há conteúdos divididos em parágrafos ou listas, existe a possibilidade de aumentar a legibilidade com a utilização de subtítulos. Quando usar subtítulos, use de maneira que os conteúdos fiquem melhor apresentados e para criar um interesse particular pelas “seções” do texto.

Texto na página (conteúdo)

O texto na página é obviamente uma das maiores formas de comunicação com os visitantes. “Copyrighters” prestam bastante atenção aos pormenores da escrita, mas muitos sites não fazem um trabalho efetivo com seus textos. A quantidade de texto e como ele será abordado varia muito de um tipo de site para outro.

Por exemplo, um blog vai incluir uma grande quantidade de texto e esta será a principal forma de comunicação com os leitores. Por outro lado, um e-commerce deve ter pequenas quantidades de texto, com o propósito de informar aos visitantes detalhes sobre os produtos ofertados – o conteúdo deve ser descritivo o suficiente para impulsionar e contribuir com as vendas, mas muito conteúdo pode desencorajar ou dificultar as vendas.

Taglines

Nem todos os sites usam taglines, mas alguns as utilizam de forma de forma bastante eficaz. Ela precisa comunicar rapidamente algo sobre a empresa, produto ou serviços. Taglines são ótimas para fins de branding e para ajudar a controlar a impressão que é dada aos visitantes.

Branding / Logo

Alguns sites se valerão de serviços profissionais para criação de seus logotipos, mas, muitos, não. Independentemente de um site utilizar um logotipo desenhado profissionalmente ou simplesmente um texto para o título, há uma mensagem para ser comunidade em termos de branding.

Por que as empresas estão dispostas a pagar bem por um logotipo de qualidade? Porque um logotipo bem concebido irá ajudar a empresa a comunicar algo básico com os clientes, algo que ajuda a determinar como as pessoas veem marca.

Cores

Esquemas de cores são um aspecto crítios do web design, não somente por afetar como um site é apresentado, mas, também, porque as cores são capazes de comunicar mensagens sutis aos visitantes. Em certas culturas, as cores têm transmitem mensagem e representações bem claras, mas, em outras, o impacto das cores nos visitantes é algo mais sutil nos leitores e visitantes.

Veja um “guia” muito bom sobre como encontrar a combinação de cores perfeita para seu site: “Find the Perfect Colors for Your Website“.

Imagens

Todos nós conhecemos o ditado “Uma imagem vale mais que mil palavras” e, certamente, isso pode ser aplicado ao web design. Com a impaciência da “média” de visitantes de sites, boas imagens podem ajudar a reter uma certa atenção, isso sem mencionar que as imagens simplesmente melhoram a aparência geral do site.

Ao trabalhar com imagens no web design, às vezes você se verá no dilema de usar fotos fornecidas pelo próprio cliente ou se valer de fotos mais profissionais, como as que podem ser pegar em sites de fotografia como o iStockphoto. É importante pensar sobre o propósito da imagem e o que é preciso comunicar para o visitante, já que existem ocasiões para ambos os casos.

Por exemplo, se você estiver elaborando o web design de um site de igreja você pode querer usar uma foto profissional para grandes áreas da página inicial, mas provavelmente vai querer usar fotos reais da igreja para a maioria das imagens no site (tais como fotos de eventos específicos dentro da igreja), porque estas fotos ajudam a comunicar como a igreja é de verdade.

Título da página (barra de títulos)

Os títulos das páginas (que aparecem na Barra de Títulos dos navegadores) não são importantes somente para fins de SEO, mas, também, para propósitos de comunicação com seus visitantes. Enquanto os visitantes estão no seu site, eles prestarão mais atenção para os títulos que estão nas páginas do que para o título que aparece no topo de seus navegadores. Entretanto, muitos visitantes virão através dos mecanismos de busca e, neste caso, os títulos das páginas (que aparecem na Barra de Títulos) desempenham um papel crítico em comunicar seus conteúdos.

Além dos mecanismos de busca, aqueles que chegam a seu site através de links em outros sites também estão suscetíveis de serem “afetados” pelos títulos das páginas. Em muitos casos, os sites que fizerem um link para o seu usarão o título como texto âncora, que comunica sobre o que a página trata para aqueles que considerarem clicar no link.

Layout

O layout de um site é importante por várias razões, e comunicação é uma delas. O layout pode comunicar mostrando quais partes do site ou do conteúdo são mais importantes. Normalmente o site será disposto de modo a que os conteúdos mais importantes tenham maior destaque. Isso mostra aos visitantes o que você quer que eles vejam mais.

Veja “20 Websites With Unique Layouts“.

Estilo do design

Existe um “sem-número” de diferentes estilos de design por aí, e o estilo escolhido consegue comunicar certas mensagens aos visitantes. Alguns designs criam certas “impressões ” em muitos visitantes, e isso pode auxiliar ou prejudicar o propósito da comunicação de seu site, dependendo de qual “impressão” for.

Para alguns exem, veja “25 Incredibly Artistic Websites“. Todos os sites apresentados nesta mini-galeria enviam uma mensagem para os visitantes com base no nível de criatividade do design. Você verá que muitos dos sites são de apresentação de portfolios de designers ou de alguma forma estão relacionadas com design. Obviamente, mostrando sua criatividade desta maneira, um designer mostra a potenciais clientes que tem habilidade para criar web sites únicos e atrativos, e isso mostra o quanto o estilo pode ajudar, em termos de comunicação.

Ícones

Muitos sites e blogs utilizam ícones. E esses ícones não são usados unicamente para melhorar a aparência do site. Eles também intencionam comunicar alguma coisa aos visitantes com rapidez. Por exemplo, os ícones de RSS usados nos blogs imediatamente comunicam aos visitantes que eles podem subscrever para acompanhar as novidades. Um ícone de casinha também é um ícone muito comum para propósitos de navegação.

É válido baixar ícones de alta definição e qualidade para usar no site. Uma boa montagem e estruturação do layout com ícones profissionais pode conferir uma boa taxa de aceitação/conversão.

Navegação

Os links que são fornecidos e onde são colocados também comunicam aos visitantes quais páginas são importantes e onde você quer que eles vão. Normalmente, as páginas mais importantes são colocadas na navegação principal do site e outras páginas podem ser lincadas dentro do conteúdo da página ou em uma barra lateral ou rodapé.

Web designers têm muita influência sobre qual conteúdo é enfatizado em função do sistema de navegação. Tenha certeza de que as partes mais importantes do site são fáceis de se encontrar e podem ser acessadas rapidamente a partir de qualquer lugar do site.

Vídeo

Vídeos on line certamente se tornaram muito comuns nos últimos anos, e essa tendência parece ser certa de continuar. Vídeos proporcionam uma excelente forma de comunicação com os visitantes. Os vídeos podem ser utilizados para entretenimento, blogs, demonstrações de produtos e muito mais.

Comunicações por vídeo às vezes podem ser bem fáceis. Você pode ter um nível de certeza maior de que a mensagem que foi comunicada foi devidamente recebido por quem ela estava destinada. Às vezes a comunicação com textos pode ser limitada ou pode ser interpretada de maneiras diferentes.

Áudio

Além do vídeo, o áudio é uma outra forma de adicionar mídia a um web site para propósitos de comunicação. Algumas vezes o áudio pode ajudar; algumas vezes ele pode prejudicar. Em geral, áudio que começa a tocar sem a soliticação do visitante será encarado como chato e obstrutivo.

Anúncios

Anúncios são bem aceitos em boa parte dos sites de hoje. No entanto, os produtos e serviços em questão irão enviar mensagens aos visitantes em termos de conteúdo do seu site, como você vê seus visitantes e sobre o que é realmente importante para você.

A maioria dos donos de web sites não gostaria de ter anúncios de Viagra, já que isso poderia enviar uma mensagem não intencionada a seus visitantes (leia-se: “Você é broxa!”). Se os anúncios em um site são relevantes para os visitantes, então eles se sentirão mais “em casa”, mesmo se eles não estiverem interessados em clicar ou comprar alguma coisa, porque eles sentirão com a audiência pretendida para o web site.

Os anúncios também podem comunicar baseados em onde eles estão posicionados. Pessoalmente, não sou um grande fã de anúncios juntamente com o conteúdo de um site porque eu fico com a impressão de que o anúncio é mais importante para o dono do site que o conteúdo e a experiência de seus leitores com esse conteúdo.

FAQ (Perguntas Mais Frequentes)

Páginas de FAQ (Perguntas Mais Frequentes) são usadas em muitos sites porque elas podem ajudar a comunicação com os visitantes que frequentemente tem o mesmo tipo de perguntas. Ao invés de deixar essas perguntas sem respostas ou ter que responder a cada pergunta, separadamente, uma página de FAQ pode ser uma maneira útil e conveniente de os visitantes terem suas perguntas respondidas.

Facilidade de contato

Alguns visitantes de web sites desejam contatar o dono do site por uma razão ou por outra. Quão fácil ou quão difícil é para o visitante encontrar uma maneira de entrar em contato? Se você tiver um formulário de contato que é facilmente acessível de qualquer página de seu site, você enviará a mensagem de que encoraja seus visitantes a entrarem em contato e que você está interessado em seus pensamentos e opiniões.

Por outro lado, um site que não apresenta informações de contato ou se essas informações estão “enterradas” em algum canto do site e são difíceis de serem encontradas, isso mostra aos visitantes que o dono do site não se preocupa com o que os visitantes tem a dizer e que ele não quer ser incomodado.

Depoimentos

Depoimentos são usados extensivamente em sites de vendas, bem como nos sites de prestadores de serviço. Uma declaração de um cliente satisfeito pode ser uma poderosa maneira de comunicação com os visitantes. Ao invés de somente apresentar a mensagem por si mesmo, você coloca uma outra pessoa na frente, que pode ser mais credível do que suas próprias palavras.

Links Externos

Os sites e páginas para os quais você faz link podem dizer aos visitantes sobre o que é o seu web site e o que é impotante para você. Você não faz ligações externas se não quer agregar algum valor ao seu site e a seus visitantes; então os links que você faz dizem muitas coisas sobre seu site.

Por causa dessa mensagem que está sendo enviada aos visitantes, não se esqueça de ser cuidadoso em relação aos links externos que você faz. Lincar para “más vizinhanças” pode ser algo ruim em relação aos propósitos de SEO e isso também “mancha” sua imagem aos olhos dos visitantes.

Meta Descrições

A meta tag “description”, na verdade, não comunica nada aos visitantes quando eles já estão em seu site, mas ela pode comunicar uma mensagem importante para os pesquisadores que estejam tentando encontrar algo específico. Muitos mecanismos de busca utilizam a descrição nas SERPs (páginas de resultados de busca), então isso é uma oportunidade para dizer às pessoas sobre o que é aquela página, antes mesmo de a pessoa a visitar, e isso pode ajudar a melhorar seu CTR nas SERPs.

Acessibilidade

Se um web site é inacessível para alguém, esse “alguém” fica com a impressão de que não é considerado importantes pela a empresa ou pelos criadores do site. Se fosse importante, poderia acessar o site sem dificuldades. Tenha certeza de que você considera os potenciais impactos da inacessibilidade a respeito de um projeto ou site que não será acessível a um determinado público-alvo.

O que mais?

Fique à vontade em compartilhar seus próprios pensamentos e opiniões sobre o tema da comunicação e web sites.

10 fontes de inspiração para fazer logotipos de qualidade

Tárcio Zemel — Mon, 06 Oct 2008 16:27:58 +0000

A importância de um logotipo é indiscutível. Relembrando uma parte do diálogo fictício do Guia do Ilustrador, um logo bem feito agrega valor à empresa e, conseqüentemente, aumenta os ganhos e faturamento – já ouviu falar de branding?

Quando recebemos a proposta de um trabalho para o desenvolvimento de logotipo, por exemplo, mesmo com um briefing de qualidade em mãos, às vezes não estamos tão inspirados para o job… Certamente que é preciso captar o “espírito” da empresa ou instituição para realizar um trabalho de qualidade e, para auxiliar nesta tarefa, pode ser útil observar os trabalhos de alguns colegas para “chamar” a inspiração.

Dentre os tantos sites e respositórios de logos que existem na web, indico 10 que, considero eu, são de muita qualidade e apresentam os trabalhos de designers excelentes de todo o mundo, inclusive do Brasil. Certamente a relação de fontes de inspiração para fazer logos de qualidade vai ajudá-lo com futuros trabalhos.

Carbonmade

Carbonmade é um repositório de logos (e outros trabalhos) no qual os próprios designers publicam seus trabalhos em um “unir o útil ao agradável” bem feito, ajudando os colegas com a inspiração e fazendo um promoção de seu próprio trabalho. Há divisão por categorias que, quando acessadas, mostram quem faz parte de cada uma e dá acesso a seu portfolio.

LogoPond

O LogoPond já consta em meu delicious faz tempo! Pessoalmente, considero o LogoPound como um dos melhores sites para se visitar quando se precisa de inpiração, pois os trabalhos lá expostos são de altíssima qualidade! Mesmo quando somente para ver as útlimas novidades, vale a pena frequentar o LogoPound!

LogoSauce

LogoSauce também não conheço há tanto tempo, assim, entretanto, já o visito com certa regularidade quanto o assunto é inspiração para logotipos. Ele é do mesmo esquema de os próprios designers enviarem seus trabalhos para a formação das galerias. Apesar de não ser algo tão seleto quanto o Carbonmade, por exemplo, considero como ponto forte seu sistema de pesquisa.

GMK Free Logos

O GMK Free Logos também é uma ótima fonte de inspiração para logotipos. É bem fácil se orientar no site e os pontos fortes ficam por conta do detalhamento das informações sobre os logos e a facilidade de se fazer downloads deles. Nada de plágio, hein, pessoal!

logotypes.lv

O logtypes.lv tem um método de navegação baseado em ordem alfabética. Apesar de haver excelentes trabalhos expostos por lá, infelizmente não é tão fácil ver a imagem do logo quanto os outros indicados. Em compensação, também é bem simples realizar o download dos trabalhos que constam no logotypes.lv.

logotypes.ru

Provavelmente dos mesmos mantenedores do logotypes.lv, o logotypes.ru apresenta a mesma forma de navegação por ordem alfabética e igualmente disponibiliza o download dos trabalhos de forma fácil – também, os cliques extras até se poder visualizar os logos… Também conta com um sistema de pesquisa.

lo8os

Com uma estrutura bem simples e intuitiva, o lo8os apresenta trabalhos de qualidade em seu repositório (trabalahos compartilhados justamente com o fim de inspiração entre os colegas de profissão). O sistema de classificação é por categorias e é possível visualizar, separadamente, os logos mais votados e os mais visualizados – e conta com sistema de notificação de novidades por feed.

LogoLounge.Com

LogoLounge.Com disponibiliza, além de logos para visualização – que são enviados pelos próprios freqüentadores do site -, artigos de alto nível sobre o mercado da área, inclusive com apontamento de inclinações e tendências do mercado. Realmente vale a pena assinar seu feed para receber as últimas notícias sobre logos!

Brand New

Este não é um repositório de logos, propriamente dito. Na verdade, o Brand New é um blog no qual logotipos são analisados e os visitantes também fazem comentários a respeito de cada um apresentado. Para quem procura algo mais que simples visualizações de logos para inspiração, ter contato com as idéias e opiniões de terceiros também é fortemente indicado para a inspiração surgir!

Logo Design Love

Tenho um apreço especial pelo Logo Design Love por ser um blog que eu acompanho há muito tempo. Desde sempre ele apresenta artigos da mais alta qualidade sobre logotipos e tendências – o que é ótimo para inspiração – e não raramente faz ótimas compilações de logos e divulga notícias sobre os acontecimentos mundiais da área.

Uma dica para ter inspiração nas horas de “aperto”

Existem muitos outros sites sobre logotipos, prontos para serem explorados, vasculhados e esmiuçados por você! Certa vez li numa publicação de design sobre a técnica de guardar as peças que agradam em uma caixa ou pasta para consulta futura. Por que não fazer o mesmo em relação a logotipos?

Certamente que não é preciso imprimir cada um e colocar numa caixa ou pasta, basta um diretório em seu computador reservado para isso. Separando os melhores logotipos, os que mais lhe agradam, para uma pesquisa posterior, quando surgir a conveniência/necessidade, certamente poupará muito tempo e você vai ter sua fonte de inspiração para logos pessoal.

Conhece algum outro site para inspiração de logos? Faça um comentário e diga qual é! ;-)

Fechamento de contratos e designs para web: teoria e prática

Tárcio Zemel — Fri, 25 Jul 2008 15:40:04 +0000

Trabalhar com desenvolvimento web é algo muito bom; entretanto, tem também seus aspectos negativos – como tudo nesta vida. há algum tempo atrás, em discussão com meu ~~colega~~ ex-colega de trabalho, Leo Bruno, entramos em uma seara muito complicada e delicada de se tratar; na verdade, uma discussão profissional que já foi iniciada há anos atrás e, obviamente, continuará a existir.

A questão principal era “É preciso apresentar um design para o cliente antes de fechar um contrato ou deve-se fechar o contrato antes para, somente depois, mostrar os primeiros esforços”? Esta, na verdade, não é uma questão meramente restrita ao desenvolvimento para web. Existe em diversas áreas de atuação, mormente às relacionadas a artes, abstração, etc – os exemplos do Guia do Ilustrador não me deixam mentir.

O objetivo, aqui, não é de convencer ninguém a pensar conforme uma opinião ou outra mas, sim, expor ambos pontos de vista para que a discussão sobre o assunto continue e todos nós possamos aprender e refletir mais a respeito.

O difícil é convencer

Como comentei, é complicado para um profissional da área de desenvolvimento web – e outras muitas – de “convencer” o cliente de fechar um contrato antes mesmo de aprensentar algo “palpável”. E difícil para uma pessoa pagar por algo (ou começar a pagar) que sequer viu e não verá durante um tempo, não é? A resposta é “Depende”!

Se você quer dar um novo visual a seu jardim e contrata um paisagista, você não vai dizer que somente paga pelo trabalho dele depois de ver o resultado, somente se este lhe agradar… Um médico não cobra a cirurgia plástica somente se a pessoa agradar do resultado. Ele faz o que precisa ser feito, conforme as “especificações” passsadas pelo paciente, e pronto.

Mas parece que quando o assunto é desenvolvimento web, a coisa muda… As pessoas têm dificuldade, não sei por quais motivos, de aplicar o mesmo raciocínio para o desenvolvimento de web sites e sistemas virtuais, em geral. O fato é que alguns cliente insistem em ser inflexíveis em relação a fechamento de contratos quando não vêem um design ou um layout, que seja, e pensam que estão pagando “à toa”, que não será confiável, etc.

Portfolio, clientes, teoria e prática

Realmente, em alguns casos a pessoa pode levar gato por lebre, mas, para isso mesmo, é que o profissional, a agência, grupo de amigos ou o que for, devem ter um portfolio! É através do portfolio que o potencial cliente poderá ver a qualidade dos serviços que são prestados e optar por fechar o contrato do desenvolvimento, ou não (caso ainda não tenha um, leia o artigo sobre como montar um portfolio sem ter clientes).

Na discussão argumentei isso, que o portfolio deve ser consultado pelo cliente para auxiliar em sua decisão, que é possível enviar uma apresentação multimídia com alguns trabalhos dias antes da reunião, enfim, que o cliente deve ter a oportunidade de consultar trabalhos já feitos antes de, efetivamente, fechar o contrato e contratar os serviços de desenvolvimento.

Já o Leo Bruno disse que a “realidade do mercado” é outra; que na teoria é assim, mesmo, e tudo é muito bonito, mas, na prática, se você chegar e disser isso a um cliente, que só vai apresentar algo para ele ver depois de o contrato fechado, ele responde que existem mais X desenvolvedores e que vai fazer o projeto com eles, então… Resultado, um cliente um job a menos.

E o Briefing?

Então, contra argumentei que é impossível mostrar algo focado àquele cliente sem antes fazer um bom briefing de desenvolvimento web. Que, para fazer isso, apresentar um design sem fazer um briefing, só mesmo trabalhando com modelos de sites prontos e templates… Falei sobre o artigo onde cito a opção de fazer um briefing preliminar e um briefing mais detalhado e sobre várias coisas a respeito, que inclusive já escrevi sobre no artigo de briefing para web sites, aqui no desenvolvimento para web.

Ele chegou a concordar na parte do briefing, mas disse que o modus operandi é fazer o briefing final antes mesmo de se fechar o contrato, para passar o orçamento e, se este for aprovado, continuar com o desenvolvimento.

No fim, ninguém mudou de idéia…

Como na maioria das discussões, todos os envolvidos saem com as mesmas opiniões que tinham antes, no máximo com a informação de um novo ponto de vista ou a “suavização” de determinados aspectos. Então, eu continuo pensando que o correto é se fazer briefing(s) e só apresentar um design depois de o contrato fechado e o Leo Bruno continua pensando que a “realidade do mercado” obriga a tomar outro rumo, quer dizer, que é preciso, para conquistar e manter clientes, que se apresente um design antes de se fechar contato; caso contrário, o cliente vai buscar o serviço em outro lugar.

Meu colega Leo Bruno é era o responsável pelas vendas e contato com clientes ~~aqui na empresa onde trabalho~~ na empresa em que trabalhávamos; ele é formado em marketing e lida com o público há vários anos, o que o capacita a dizer o que diz devido à sua prática. Portanto, respeito muitíssimo a opinião dele.

Entretanto, continuo com minha humilde opinião, de quem mais desenvolve a web do que fecha contratos; continuo pensando que o portfolio é o principal “trunfo” para a decisão de o cliente contratar você ou não, e que as principais especificações de um projeto web devem ser “descobertas” através da feitura de um bom briefing.

E você, qual sua opinião sobre isso? O melhor é fechar o contrato antes e apresentar o design depois ou apresentar o design antes para, só depois e se aprovado, fechar o contrato?

Tipografia com foco ao web design: considerações sobre fonte, tipo, tipologia e tipografia

Tárcio Zemel — Mon, 07 Jul 2008 16:29:29 +0000

Neste artigo sobre tipologia na web e seu uso em sites, apresento algumas “questões tipográficas” e faço uma diferenciação entre termos comuns e frequentemente confundidos, como “tipologia”, “tipografia”, “tipo”, “fonte” e “fonte tipográfica”.

Considerações sobre a prática tipográfica na web

Os web sites, hot sites, mini sites, portais, sistemas web e softwares, campanhas online e o material encontrado na web, em geral, estão atualmente em uma fase de “amadurecimento”. As pessoas ainda estudam as melhores técnicas e possibilidades sobre o desenvolvimento para web e, devido a esta área do conhecimento ainda ser relativamente recente, ainda não se tem posicionamentos oficiais a respeito – na verdade, nem nas áreas de conhecimento e estudos tradicionais -, o que resultado em uma produção em massa de um material que poderia ter mais qualidade do que se vê.

A relativa facilidade de contato com o desenvolvimento web e, até certo ponto, ausência de obstáculos para se adentrar no ramo – fora o fato da disseminação de cursos do tipo “Web Design em 6 meses”, que aparecem mais e mais -, todos estes figuram como incentivadores às pessoas.

Até certo ponto, isso é positivo, já que permite que todos os interessados aprendam coisas novas e, rapidamente, iniciem o desenvolvimento de seus próprios web sites de forma profissional, sendo remuneradas por seu trabalho.

Por outra perspectiva, “qualquer um” desenvolver web sites tem seus pontos negativos, já que, por um motivo ou por outro – e principalmente pelos certificados que recebem do tipo de curso que foi citado -, os ainda principiantes na arte de desenvolver a web não sabem dos pormenores desta profissão e sobre como o fato de estudar e aprender a cada dia para adquirir novos conhecimentos e atualizar os que já se tem, é essencial!

E esta situação abarca, também, os inúmeros equívocos, falta de conhecimento e especulações sobre a correta utilização tipográfica no desenvolvimento de web sites e afins. Tendo o ledo engano de que fazer o “mais ou menos” é o suficiente, os desenvolvedores não prestam a devida atenção à tipografia na web. Frisando: o conhecimento e constantes estudos desta parte do desenvolvimento para web é muito importante para que os que se interessam seriamente pela área produzam designs web – e designs, em geral – melhores, que satisfaçam e agradem os visitantes dos sites que desenvolvem.

Teoria antes da prática: explicação de termos relacionados à tipografia na web

Antes da prática, vem sempre a teoria. Sempre foi assim. Alunos de medicina passam anos lendo livros, vendo filmes e se informando de maneira diversas antes de operar alguém e nenhum estudante de engenharia constrói um prédio nos primeiros períodos faculdade. O mesmo se aplica ao desenvolvimento para web: ninguém aprende a desenvolver bons sites – sites profissionais – em 6 meses…

Então, é necessária teoria antes da prática. É necessário que a correta definição dos termos da área sejam corretamente esclarecidos e aprendidos. Com isso, equívocos inoportunos e confusões desnecessárias são evitadas e um material com mais qualidade pode ser produzido.

Diferença entre Tipologia e Tipografia

É comum haver confusão entre os termos “tipologia” e “tipografia”. Não é “mal” de quem faz a confusão; a própria grafia e pronúncia são um pouco semelhantes e realmente podem causar confusão. Em um breve – mas muito bom – artigo sobre tipologia e tipografia, Sergio D Stefano, colunista do Webinsider, explica a diferença entre os termos:

Uma grande bobagem que tenho ouvido ao longo dos anos é a insistência no uso do termo tipologia a para classificação de tipos. Tipologia na verdade é um termo pertencente à taxionomia, a ciência das classificações, o estudo das características das diferenças entre objetos e seres vivos de toda espécie.
Nós temos a tipografia que, aí sim, é a arte e processo de criação de caracteres. A tipografia tem origem etimológica na implantação da impressão por tipos móveis na Europa, a partir do século XV. Portanto é a forma certa.

Na maioria das vezes pode parecer bobagem “ficas cismado” com falar uma palavra errada aqui, outra acolá, já que o que importa, mesmo, é enteder sobre o assunto, em suas diversas nuances. Entretanto, ao utilizar um termo errôneamente estamos, em primeiro lugar, errando – e fazer isso, por exemplo, na presença de um cliente, pode ser muito desgradável – e, depois, transmitindo um conhecimento errado, propagando um equívoco que, se tivéssemos estudado um pouquinho mais a respeito, teríamos evitado.

Então, para acabar de vez com este equívoco sobre tipologia e tipografia e, a partir de agora usar o termo correto, quando queremos dizer que estamos envolvidos em alguma atividade sobre a criação/estudo de tipos, usamos o termo tipografia. Combinado? ;-)

Um pouco mais de informação sobre a Tipografia

Mais uma vez utilizando o bom conteúdo da Wikiédia, para expandir mais o tema transcrevo uma sucinta explicação sobre a Tipografia:

A tipografia (do grego typos – “forma” – e graphein – “escrita”) é a arte e o processo de criação na composição de um texto, física ou digitalmente. Assim como no design gráfico em geral, o objetivo principal da tipografia é dar ordem estrutural e forma à comunicação impressa. Tipografia também é um termo usado para a gráfica que usa uma prensa de tipos móveis.
Na maioria dos casos, uma composição tipográfica deve ser especialmente legível e visualmente envolvente, sem desconsiderar o contexto em que é lido e os objetivos da sua publicação. Em trabalhos de design gráfico experimental (ou de vanguarda) os objetivos formais extrapolam a funcionalidade do texto, portanto questões como legibilidade, nesses casos, podem acabar sendo relativas.
No uso da tipografia o interesse visual é realizado através da escolha adequada de fontes tipográficas, composição (ou layout) de texto, a sensibilidade para o tom do texto e a relação entre texto e os elementos gráficos na página. Todos esses fatores são combinados para que o layout final tenha uma “atmosfera” ou “ressonância” apropriada ao conteúdo abordado. No caso da mídia impressa, designers gráficos (ou seja, os tipógrafos) costumam se preocupar com a escolha do papel adequado, da tinta e dos métodos de impressão.

Apesar de estes conceitos e definições terem foco especialmente às mídias impressas, é perfeitamente possível e aceitável “adaptarmos” tudo e pensar sobre a tipografia com foco ao design web. É importante, então, muito atenção a este assunto porque, com certeza, este é um dos assuntos mais úteis e bons de se tratar – e praticar – no desenvolvimento para web.

“Tipo”, “Fonte” e “Fonte Tipográfica”

Outros equívocos que são feitos quanto à terminologia tipográfica é a respeito dos termos tipo, fonte e fonte tipográfica – na verdade, os equívocos dizem respeito mais aos dois primeiros. Novamente, para sermos claros e precisos enquanto profissionais da web, não podemos cometer equívocos desnecessários e facilmente evitados.

Fonte e Tipo, na verdade, querem dizer a mesma coisa. Entretanto, devido ao mau uso do termo, principalmente por traduções mal-feitas de softwares estrangeiros para a língua portuguesa – editores de texto, por exemplo, usam o termo “fonte”, quando o correto deveria ser “tipo” -, o uso corrente e disseminação deste termo para designar tipos foi inevitável. Tanto que, em explicação a este respeito, consta que a tradução para português de Portugal, nestes programas, ficou “Tipo de Letra” – que é o certo – ao invés de “Tipo de Fonte” – que é o equivocado.

E, quanto á “fonte tipográfica”, é usado para diferenciar e referenciar que se está falando sobre “fontes de tipos” ao invés das outras significações de “fonte”, como “fonte de informações” ou “fonte d’água”.

Conclusão

É importante, então, que se usem os termos corretos quando estivermos lidando com o estudo da tipografia e assuntos tipográficos, em geral, não fazendo confusão entre termos que, aparentemente, querem dizer a mesma coisa. “Fonte” virou sinônimo de “Tipo” principalmente em função de traduções famosas equivocadas, mas o correto é “tipo de letra” ao invés de “tipo de fonte”.

Dicas para um web design minimalista e usável

Tárcio Zemel — Mon, 30 Jun 2008 18:12:54 +0000

As tendências para web design indicam que o design minimalista é uma boa pedida. Estas “tendências minimalistas”, na verdade, insinuam que o conteúdo dos sites, por ser o mais importante, deve ter ênfase e destaque, e o layout, design e elementos visuais, devem contribuir para que os que os acessem tenham uma navegação ótima, encontrando aquilo que querem e/ou precisam rapidamente, da maneira que suas visita, suas experiências, sejam as melhores possíveis.

Pessoalmente, acredito ser esta uma excelente abordagem a se adotar ao pensar em e construir um design para web. Penso que o desenvolvedor web, neste caso, só tem a ganhar “seguindo” esta tendência atual. Para tanto, conhecer algumas técnicas de desenvolvimento é de extrema importância. Técnicas essas que o capacitarão a estruturar o bom design minimalista. E a usabilidade agradece.

Ocupe de 60% a 80% da página com conteúdos (relevantes)

“O conteúdo é o rei”. Esta célebre frase – que, de tão repetida, já não se sabe mais quem a disse originalmente – é um dos pilares para se compreender e praticar a feitura de um design web minimalista. Para o “rei” devem ser feitas todas as “honrarias”; em outras palavras, os esforços do desenvolvedor web devem focar o conteúdo do web site, servindo os elementos o layout e elementos visuais como auxiliadores da consecução deste objetivo.

Não raramente é possível encontrar sites e blogs com um design lindíssimo que não tem um conteúdo digno desta beleza toda. Nestes casos, há muito capricho e dedicação em conseguir uma bela estética e o “rei” é deixado de lado: o conteúdo não é relevante e, em alguns casos, é totalmente confuso e desconexo.

Ocupar de 60% a 80% das páginas de seu site ou blog com conteúdos – conteúdos relevantes e de qualidade, quero dizer – é um enorme passo em direção ao objetivo de conseguir um bom web design minimalista. E por “conteúdos relevantes e de qualidade” menciono aqueles conteúdos que realmente sirvam para seu visitante; conteúdos que sejam realmente condizentes com o tema e função de seu site/blog e que recompensem o visitante por ter dedicado um pouco de seu tempo a fazer uma visita.

Apresente as informações mais importantes primeiro

Apresentar as informações mais importantes (mais relevantes) primeiro pode parecer algo óbvio, mas, na realidade, muitíssimos desenvolvedores não sabem e/ou não seguem este básico princípio.

Uma boa arquitetura da informação, aliada a um bom estudo sobre a usabilidade, sugere que apresentar os conteúdos mais importantes primeiro é indispensável para que a experiência dos visitantes seja melhor. Nada mais desagradável que ficar procurando por algo que já deveria estar lá. Pior ainda é quando, mesmo depois da procura, não se encontra nada…

Então, reforçando mais uma vez os esforços para se fazer um web design minimalista, é importante apresentar os conteúdos mais relevantes, aqueles conteúdos que são mais úteis e que os visitantes mais procuram, logo “de cara”.

Se algo não é relevante, simplesmente não precisa estar lá

Esta preciosa dica, se seguida, certamente aumentará o nível de qualidade e objetividade de seu site ou blog. Pense bem: se algo não é relevante ou necessário para a situação, então por que está lá?

Se o usuário já está logado, então não é mais preciso que seja mostrado o formulário de autenticação. Se determinadas opções do menu não podem ser acessadas naquela hora, então não é preciso que estejam lá.

Estes são exemplos simples de poluição visual desnecessária. Existem muitos mais casos que, seja por falta de conhecimentos ou outro motivo, muito desenvolvedores insistem em cometer.

Se algo não é relevante, simplesmente não precisa estar lá!

O background não é mais importante que a informação

É comum encontrar web sites e blogs que, na busca por uma diferenciação e inovação, acabam utilizando backgrounds, ou planos de fundo, muito extravagantes, que mais atrapalham que ajudam.

Imagens de fundo devem servir para:

Contribuir para a experiência dos visitantes, direcionando seu olhar para o conteúdo;
Servir como elemento visual que serve de “agrado” ao visitante, suavizando a “carga sensorial” e aparecendo como algo bonito de se ver;
Causar sensações planejadas e direcionadas nos visitantes, contribuindo, dessa forma, para a estratégia de divulgação geral e servindo como auxílio de melhoramento de sua experiência na visitação;

Mas o que muito se vê pela web são planos de fundo confusos e esteticamente desagradáveis; texturas fortes, que atrapalham a leitura e cansam mais rapidamente a visão; em geral, elementos que diminuem o tempo de permanência e que minam a boa sensação de fazer uma visita àquele web site.

Tendo cuidado com o uso de planos de fundo esdrúxulos e que mais atrapalham que auxiliam, o desenvolvedor web deve se valer do bom senso e estudos de design antes de optar, impensadamente, por usar uma imagem ou textura como background.

Faça um bom contraste entre plano de fundo e texto

Reforçando o tópico anterior, para um design de web minimamente usável, o ato de ler daqueles que são visitantes devem ser natural e agradável. E este objetivo não pode ser alcançado se o visitante faz esforços desnecessários para ler seu conteúdo, que está sendo ofuscado por um background mal planejado!

Repetindo: um plano de fundo não deve ser posto ao caso; muito antes pelo contrário, deve somente ser usado quando se tem absoluta certeza de que, se figurar como elemento visual do site, mais contribuirá que atrapalhará.

Fazer um bom contraste entre plano de fundo e texto usado é também uma regra básica de design que, infelizmente, é amplamente negligenciada. Conseguir um bom contraste entre estes elementos constitutivos da página é fácil: basta ser simples!

Os livros que lemos têm suas páginas com texturas fortes e pesadas, da mesma cor que o texto ou é simplesmente papel branco com tinta preta impressa? Os jornais se valem de background extravagantes para apresentar suas notícias ou é simplesmente “papel puro” e tinta?

Simplicidade é chave!

Não que não se deva nunca usar um plano de fundo nas páginas dos sites e blogs (tanto que existem muitos que se valem deste recurso muito bem); mas, se o fizer, deve-se, além de usar o bom-senso e discernimento lógico, ter em mente dicas como:

Não utilize a cor do plano de fundo próxima a cor do texto. Isso dificulta a leitura, cansa mais rapidamente o leitor e, em casos extremos, torna impraticável a leitura dos conteúdos;
Se for usar texturas, que sejam suaves. Texturas como plano de fundo, como explicado, devem ser usadas com bastante cautela. Se é para usar alguma, que seja suave e agradável; que auxilie a experiência positiva que o visitante tem ao acessar as páginas;
Backgrounds múltiplos pode ser uma boa solução. Múltiplos planos de fundo podem ser eficientes em diversos casos. Usar um plano de fundo “geral” escuro, com um plano de fundo “secundário”, mais claro, no lugar onde está o texto, é uma boa técnica para “controlar” o direcionamento do foco de visão.
Backgrounds animados não existem. Isso é um mantra, entendeu? Repita: backgrounds animados não existem!

A principal dica para fazer um bom contraste entre planos de fundo e texto é se valer do bom e velho fundo branco com texto escuro. Como mencionado, veja como são livros, jornais e revistas – a comparação com a mídia eletrônica, neste caso, é perfeitamente válida.

Não é obrigatório que o texto seja, necessariamente, preto; o que vale é o bom contraste, que possibilite uma boa leitura e dê ensejo a um bom design, que seja facilmente usável e sensorialmente útil. Fazer um bom contraste entre plano de frente e plano de fundo é, também, uma regra de acessibilidade.

Existe um software sobre análise de contraste entre cores do primeiro e segundo planos. Dê uma olhada no artigo do Maujor sobre o Analisador de Constraste de Cores.

E essas dicas de minimalismo e usabilidade funcionam mesmo?

Se estas dicas para um web design minimalista e usável forem estudadas e aplicadas de forma correta, forem sabiamente usadas e postas em prática nos momentos adequados, certamente que você conseguirá um projeto com mais qualidade e um resultado final satisfatório!

Alertando que esta são apenas algumas dicas. Estudos contínuos e atualizações constantes na área de usabilidade e obtenção de conhecimentos atuais no campos de design certamente farão com que seu trabalho seja muito melhor e que você desenvolva um senso de criação de sites mais crítico e acurado.

Novamente o convido a observar o mundo à sua volta e fazer suas próprias constatações. Veja em publicações impressas e em mídias virtuais de qualidade, como o assunto da usabilidade e minimalismo é tratado na prática. Veja como são construídos bons web designs e o que sugerem os bons desenvolvedores.

Na verdade, fazer sites e blogs minimalistas e usáveis não é complicado. As pessoas é que complicam!

E você, conhece alguma técnica para fazer web sites minimalistas? Gostaria de dar um conselho sobre usabilidade? Comente e ajude todos nós a aprendermos mais coisas!

Definição de acessibilidade e conexão com design

Tárcio Zemel — Sat, 24 May 2008 11:50:32 +0000

Analisando algumas estatísticas do desenvolvimento para web, percebi que uma pessoa fez a busca por “Definição de acessibilidade e conexão com design”. Infelizmente ela não encontrou o que pretendia no site; entretanto, se ela ou alguma outra voltar a fazer esta pesquisa, o resultado será positivo. Aqui está o artigo sobre Definição de Acessibilidade e Conexão com Design! :-)

Definição: o que é acessibilidade?

O termo “acessibilidade” tem muitos significados, dependendo de como é interpretado, de quem fala e da área a que se refere. De uma maneira geral, acessibilidade refere-se ao fato de algo ser acessível às pessoas, sejam elas quais forem, sejam os meios que estejam usando quais forem, sejam suas dificuldades e limitações quais forem.

Este é um conceito “ideal” que certamente não é alcançado em todas as vezes. Mas é o que todos os envolvidos com as atividades em que a acessibilidade tenha importância significativa devem ter em mente.

Por exemplo, um órgão público que organiza e providencia um concurso mas não tem infra-estrutura para que pessoas com necessidades especiais tenham acesso às salas de aula (seja por não ter rampas no local, elevadores com portas pequenas, etc) está impedindo o acesso a essas pessoas.

Acessibilidade na web

Na busca, aqui no blog, acredito eu que a pessoa gostaria de uma definição de acessibilidade em um contexto voltado à web, claro; e é justamente nesta vertente que vou focar.

Acessibilidade na web refere-se ao site ser acessível a quem o visita. Muito fácil, muito simples! Teoricamente, isso é tudo o que há para ser dito. Agora, como a acessibilidade vai se dar “são outros 500″…

O desenvolvedor web deve seguir inúmeras regras de acessibilidade; regras estas idealizadas e desenvolvidas especialmente para o acessos no ambiente virtual. Em nosso caso, regras desenvolvidas especialmente para serem conhecidas e aplicadas na idealização, contrução e manutenção de web sites.

Idealmente aquele sucinto conceito é o correto; na prática, é bem mais complexo e demorado prover a acessibilidade na web.

Para o caso da acessibilidade na web, o W3C definiu as “Diretrizes de acessibilidade ao conteúdo da Web“, ou WCAG. Basicamente, essas Diretrizes aconselham, instruem, o que devem os desenvolvedores de web fazer e/ou deixar de fazer em contextos de desenvolvimento web. O que, se implementado, será benéfico; o que, se não implementado, será maléfico quando as pessoas acessarem os sites.

Acessibilidade e conexão com Design

O Design, especificamente, no caso, o Web Design, tem muita conexão com a acessibilidade! Um bom design web deve ser consoante com a acessibilidade. Um site deve possuir bom layout, boa estruturação, bom design e ser acessível. Claro, estamos novamente no “mundo das teorias”. Na prática, desenvolver um site que atenda a estes (e outros) objetivos é bem complexo. Alguém enfie isso na cabeça dos clientes, por favor! :-D

Então, no modo que penso, a acessibilidade tem conexão com o design a partir do momento em que ambos, conjuntamente, aproximam-se o máximo possível do conceito ideal citado acima, com o objetivo de permitir que qualquer pessoa, em qualquer lugar, utilizando qualquer tipo de dispositivo, tenha uma experiência agradável (muito a ver com usabilidade, também), que encontre caminhos fáceis para as tarefas e/ou partes do site que lhe são mais úteis.

Conclusão sobre acessibilidade e conexão com design

O que foi dito neste artigo é, na verdade, uma sucinta abordagem. Quando se fala em acessibilidade e design, outros “núcleos” no desenvolvimento para web devem ser levados em consideração, como usabilidade, arquitetura da informação, bom planejamento, correta aplicação de tecnologias, e muitos outros.

Tudo isso somado à uma boa interface, elementos visuais agradáveis e leveza no carregamento, a meu ver constituem uma boa aliança entre acessibilidade e design, e servem como imensos auxiliares para que o visitante tenha acesso ao mais importante: conteúdo!

Baixar ícones de alta definição e qualidade

Tárcio Zemel — Sun, 23 Mar 2008 22:20:49 +0000

Para quem sempre procura sites onde baixar ícones de alta qualidade e definição, certamente uma compilação com bons sites que disponibilizam ícones é muito útil! Ter um ícone ou set de ícones para se usar nas diferentes situações que aparecem em desenvolvimento para web se faz necessário no “arsenal” do desenvolvedor web e web designer.

Esta é uma página do desenvolvimento para web sobre ícones que está em constante atualização, na qual sempre que encontrar bons ícones profissionais para download vou atualizar o texto e indicar onde baixar. Certamente será muito útil para os que mexer com design para web e precisam de fazer download de bons ícones de alta definição e qualidade!

Icon sets do Smashing Magazine

Vi no feed do Profissionais da Web a indicação de uma ótima lista de ícones para baixar! Os “garotos da web” não exageraram quando disseram queé sem dúvida alguma a seleção dos ícones mais bonitos disponíveis na internet! Aliás, a Smashing Magazine freqüentemente compila listas de recursos web, como, por exemplo, aquela de 70 tutoriais para Photoshop.

Não espere mais para baixar os melhores ícones da internet!

Ícones Crystal e Open Office

Saiu no site do Everaldo a nova fornada de belos ícones da série Crystal Project para baixar! E mais uma leva com quase 6000 ícones de altíssima definição que são usados em diversas distribuições Linux.

Coquette Icons, do DryIcons

O pesoal do DryIcons.com já é conhecido pela qualidade de seu trabalho. Liberaram o pacote de ícones Coquette Icons (em ICO, PNG e ICNS), cujo visual é bem moderno e descontraído, ao mesmo tempo em que apresenta “uma pitada” de “sobriedade”. É possível baixar e usar de graça, mas a licença comercial custa US$14.75.

50 Most Beautiful Icon Sets Created in 2008

O noupe mais uma vez com excelente conteúdo, dessa vez disponibilizando uma coletânea dos melhores icon sets de 2008. Realmente vale a pena conferir esse ícones!

50 Beautiful Free Icon Sets For Your Next Design

Certamente esse set de ícones ultra reais vão fazer você se surpreender! São 50 pacotes de ícones realísticos para usar em projetos diversos, desde web sites a apresentações multimídia – devido à sua alta resolução.

200+ Big and Beautiful Highly Detailed Icons

E que tal mais de 200 packs de ícones de alta resolução e detalhamento? São centenas de ícones para serem usados em quaisquer projetos gráficos e que, certamente, vão garantir uma boa apresentação visual!

The Best Free Icon Sets of 2009

O WDL fez uma coletânea própria daqueles que julgou serem os melhores ícones de 2009. Confira! São ícones decorativos e ícones para interfaces de sites e sistemas online que certamente valem a pena!

The Ultimate Free Web Designer’s Icon Set (750 ícones)

A Smashing Magazine vindo com ícones de excelente qualidade para web designers! São mais de 750 ícones sobre desenvolvimento, User Interface, Bandeiras, Serviços Web, dentre outros. Confira!

31 Free Clean Icon Sets For Minimal Web Design

Que tal mais de 30 sets de ícones minimalistas para web design? Pois é isso o que você vai encontrar na excelente compilação de ícones minimalistas feita pelo pessoal da 1stwebdesigner. Veja agora!

150+ best icon sets of 2010

Os maníacos por ícones do blog da IconShock fizeram uma seleção com o que eles consideraram ser os melhores ícones do ano de 2010. Eles são especialistas em ícones e, quando eles dizem que esses são os melhores de 2010, eles sabem o que estão falando! Confira o 150+ best icon sets of 2010.

Google Plus Free Interface Icons

Que tal usar os ícones do Google+ em seus projetos, também? Suas formas simples e, ao mesmo tempo, extremamente comunicativas, podem ser uma boa pedida para aquele seu site ou sistema web com alguns controles e interações.

Então confira os ícones do Google+ e veja sua definição e qualidade!

Mais de 250 ícones de qualidade e alta definição: Aroma

Mais um fabuloso set de ícones incríveis para se usar em web sites, sistemas virtuais, intranets e em qualquer outro ambiente online em que um bom toque de webdesign seja necessário. No set de ícones Aroma, você encontra mais de 250 opções de qualidade!

Best Of 2011: Outstanding Collection Of Fresh And Free To Use Icon Sets

Que tal uma coletânea de coletâneas de ícones? É isso que você vai encontrar no artigo sobre os melhores pacotes de ícones de 2011! São ícones fabulosos, de alta definição e qualidade, grátis para serem usados em qualquer projeto!

Gestalt aplicado ao design web (parte 6): princípio da experiência passada

Tárcio Zemel — Sat, 22 Mar 2008 19:26:42 +0000

Este artigo é o último da série “Gestalt aplicado ao design web“. Confira a lista de todas as partes:

Gestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade;
Gestalt aplicado ao design web (parte 2): princípio da proximidade;
Gestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade.
Gestalt aplicado ao design web (parte 4): princípio da boa continuidade ou princípio do alinhamento.
Gestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento
Gestalt aplicado ao design web (parte 6): princípio da experiência passada (artigo atual)

No último artigo da série, apresentei alguns exemplos de aplicação do uso do princípio do alinhamento em alguns web sites. Neste artigo, falo um pouco sobre o princípio da experiência passada, ou, como alguns preferem, princípio da aprendizagem. Quebrando um pouco o estilo da série, apresento a parte conceitual desta lei de Gestalt e alguns exemplos, de uma vez.

O princípio da experiência passada refere-se, como o próprio nome sugere, à experiência já adquirida (no passado…) que o observador de determinada obra, peça, cena, web site, etc, tem e de quais maneiras isso pode (ou não pode) ajudá-lo a interpretar, reconhecer e “conectar“.

É algo bastante pessoal, subjetivo, já que a experiência ocorrida é peculiar e cada indivíduo tem suas próprias vivências, histórias e situações; quer dizer, algo observado pode (e geralmente tem) um significado diferente de pessoa para pessoa devido, dentre outras coisas, às experiências passadas.

Pelo exposto, não é complicado inferir que é a partir do processo de associação que a interpretação acontece: associamos coisas / elementos que já conhecemos previamente quando em face ao novo. Valendo-me das palavras de Danilo Medeiros, do digitalminds,

[...] se a gente vê uma coisa com caule, galhos e folhas a gente imagina que seja uma árvore, se a gente vê uma coisa com quatro patas que late a gente imagina que seja um cachorro [...]

Isso é associação! ;-)

E, como faz parte de um processo de aprendizagem / interpretação humano, certamente que podemos nos valer disso para a feitura de web sites; podemos “tirar vantagem” do princípio da experiência passada para compor layouts!

Exemplos do princípio da experiência passada aplicado ao web design

No site Spot.BG, por exemplo, vemos esta estranha forma, esta coisa irreconhecível, à esquerda, sorrindo. “Estranha forma”? Não, não… A não ser que você seja alguém que jamais viu uma mulher antes, em toda sua vida, seu cérebro fará a correta associação e identificará, instantaneamente, que esta é a cabeça de uma mulher, cujo corpo está “escondido” atrás do corpo do site.

No restaurantica podemos perceber (em resolução de tela de 1280 por 1024, ou superior) como o princípio da experiência passada é bem utilizado, apresentando estes bonitos talheres (viu, é possível saber que são talheres porque sabemos como são os talheres, dado que já os vimos no passado).

Vejam que bonitos livros fazem parte da composição do design do site dustycover.da. São livros, não são? ;-)

No site desta Igreja Batista Missionária, por exemplo, podemos perceber a sutil árvore posta em background. Todos percebemos que é uma árvore porque uma já foi vista em algum momento de nossas vidas, e conseguimos, segundo prega a lei da experiência passada, associar e interpretar a composição, identificando que, realmente, trata-se de uma árvore.

Usabilidade na web e o princípio de Gestalt da experiência passada

Pessoalmente, acredito que o princípio da experiência passada tem muito a ver com a usabilidade na web, já que é a partir de situações já passadas por pessoas que utilizam a internet (estudas por especialistas da área) que determinados comportamentos foram “consagrados” nos “esquemas” de web sites. Por exemplo, posições de determinados elementos num web design facilitam e melhoram a experiência de quem os usam e facilitam a realização de tarefas.

A usabilidade na web é um assunto amplíssimo; só citei a respeito para complementar o assunto e deixar claro que faço parte daqueles que pensam que o princípio da experiência passada e a usabilidade têm muito a ver um com o outro.

Mas este é um assunto para uma outra série…

Conclusão

Como os exemplos de sites mostraram, é possível obter efeitos interessantes e visualmente agradáveis se valendo da teoria do princípio da experiência passada. Como costumo dizer, o mais importante é saber quando usar e, mais importante, o motivo e os efeitos que esta técnica podem causar na experiência de quem vê a obra.

Bem, pessoal, este foi o último artigo sobre Gestalt aplicado ao design web. Muito obrigado a todos que acompanharam a série, gostaram e/ou aprenderam algo sobre Gestalt. Espero ter podido ajudar e, querendo que escreva sobre algo, em especial, envie uma mensagem para mim.

Abraços e até a próxima!

Gestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento

Tárcio Zemel — Tue, 11 Mar 2008 23:41:38 +0000

No quinto artigo da série, apresento alguns exemplos web do princípio da boa continuidade ou, como prefiro, princípio do alinhamento.

Este artigo é parte da série “Gestalt aplicado ao design web“. Confira a lista de todas as partes, até agora:

Gestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade;
Gestalt aplicado ao design web (parte 2): princípio da proximidade;
Gestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade.
Gestalt aplicado ao design web (parte 4): princípio da boa continuidade ou princípio do alinhamento.
Gestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento (artigo atual)

Como apresentado no artigo anterior, o princípio do alinhamento é muito importante! Quando utilizado correta e conscientemente, podemos fazer layouts mais organizados, mais consistentes e profissionais, já que, utilizando este princípio de Gestalt, podemos insinuar que elementos visuais têm interelações entre si (e outras coisas mais).

Em qualquer web design feito por alguém que estudou o mínimo, é possível encontrar aplicações do princípio do alinhamento. Lembrem-se: nada é por acaso (tanto no desenvolvimento web, quanto na vida)!

Este artigo contém imagens com tamanho significativo. Em função disso, há um link, logo abaixo, para continuar ler o restante da matéria.

Em cada screenshot, tracei linhas para evidenciar como o alinhamento nas páginas web acontece. Percebam, novamente, que nada é por acaso. Mesmo em sites “abertos”, sem muitos elementos de delimitação, é possível identificar o uso do princípio da boa continuidade em ação. É justamente através dele que elementos

Exemplos do princípio da proximidade aplicado ao web design

Vejam no site da aleusia como os blocos de textos superiores mantém um perfeito alinhamento com os da parte inferior. A base da caixa de busca, acima e à direita, possui a mesma “linha base” que o logotipo. Vejam que recurso interessante eles utilizaram: os textos à direita “Quote of The Day” e “Support“, estão alinhados com a linha que fica abaixo do subtítulo “Welcome to Aleusia“. Por que eles simplesmente não eliminaram esta linha e desceram um pouco o subtítulo? Já que, inconscientemente, os visitantes percebem que este elemento está um pouco desalinhado, eles “prestam mais atenção” naquele ponto, que “incomoda” sua percepção; dessa forma, é garantido que a maioria das pessoas que visitarem este web site lerão o texto de apresentação.

Conhecimento é poder, meus caros!

No site da desi9n, eles pecaram só um pouquinho no alinhamento dos textos de descrição dos serviços (em baixo das respectivas imagens). Percebam que eles estão ligeiramento recuados à esquerda. Retirar esta margem e justificar o texto, talvez resolvesse o caso; entretanto, talvez eles tenham escolhido um texto alinhado à esquerda para não passar a idéia de conservadorismo; para dizer que eles são “despojados” (no bom sentido, claro). Coisa que, aparentemente, é característica quase que obrigatória no mundo de designers… Nos textos das 3 colunas, abaixo, suas bases estão quase alinhadas, também. Eles poderiam ter pensado melhor nas palavras para promover um perfeito alinhamento entre todos (mas isso, às vezes, é bem difícil de fazer, mesmo, por isso, essa passa… rsrs).

A brasuca Luxicom tem um design muito bonito e com imagens bem trabalhadas! Utilizaram muito bem o recurso da sangria naquele dispositivo móvel (“sangria” é quando algum elemento “extrapola os limites”). Percebam que a parte superior do site (acima do retângulo escuro) está bem alinhadinha; entretanto, a parte inferior não respeito a boa continuidade: está com seus elementos desalinhados em relação aos que estão em cima. O botão “Buscar” não é desalinhado no web site; deve ter dado algum problema quando o superscreenshot gerou a imagem…

Enfim, existem literalmente milhões de exemplos de aplicação do princípio de Gestalt do alinhamento pela web à fora. Basta procurar que, agora que você já tem consciência de sua existência e aplicação, vai identificar os acertos e equívocos dos web designers rapidinho! ;-)

Ah! Perceberam que, além dos elementos estarem alinhados, alguns deles (os mais próximos), apresentam uma outra característica em comum? Eles estão exatamente com as mesmas distâncias um do outro! Não se esqueçam do princípio da proximidade!

No próximo artigo: princípio da experiência passada.

Gestalt aplicado ao design web (parte 4): princípio da boa continuidade ou princípio do alinhamento

Tárcio Zemel — Mon, 25 Feb 2008 17:20:28 +0000

No quarto artigo da série, falo sobre um importante princípio de Gestalt: o princípio da boa continuidade ou princípio do alinhamento.

Este artigo é parte da série “Gestalt aplicado ao design web“. Confira a lista de todas as partes, até agora:

Gestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade;
Gestalt aplicado ao design web (parte 2): princípio da proximidade;
Gestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade.
Gestalt aplicado ao design web (parte 4): princípio da boa continuidade ou princípio do alinhamento (artigo atual).

Geralmente quem está começando a mexer com web design, tende a colocar os elementos visuais da composição de forma um tanto que ao acaso, tentando preencher qualquer espaço em branco que apareça. O mais triste é que fazem isso, geralmente, desconsiderando os demais elementos constituintes. Quando o site é inaugurado, os visitantes perceberão que há algo errado (embora não conseguirão dizer, exatamente, o quê).

Na verdade, o que acontece é que o web designer não se atenta para um importantíssimo princípio de Gestalt: o princípio da boa continuidade ou princípio do alinhamento.

Segundo o princípio do alinhamento (gosto mais dessa nomenclatura), cada elemento constituinte de um layout deve ter uma conexão visual com outro elemento. Quer dizer, nada deve ser feito/colocado arbitrariamente, sem levar em consideração a totalidade da composição. E essa “conexão” pode ser feita alinhando os elementos que precisam passar a idéia de que são ligados. Mesmo estando distantes um do outro, estes elementos, se corretamente alinhados, transmitem a idéia de “relacionamento”.

Quando os elementos de um design estão inter-relacionados, quem olha percebe, intuitivamente (ou inconscientemente, se preferível), que aquela é uma estrutura mais coesa, forte, mais organizada! Aplicando a lei da proximidade, podemos indicar que elementos próximos são interconectados; através do princípio do alinhamento, podemos indicar que elementos distantes mantém uma relação, quer dizer, fazem parte da mesma “transmissão” (de idéias, conceitos, sentimentos, etc).

No próximo artigo da séria sobre Gestalt: exemplos do princípio do alinhamento aplicados ao web design.

Gestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade

Tárcio Zemel — Thu, 14 Feb 2008 18:23:35 +0000

No terceiro artigo da série, apresento alguns exemplos do princípio da proximidade Gestalt aplicado ao web design.

Este artigo é parte da série “Gestalt aplicado ao design web“. Confira a lista de todas as partes, até agora:

Gestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade;
Gestalt aplicado ao design web (parte 2): princípio da proximidade;
Gestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade (artigo atual).

No artigo anterior foi apresentado o princípio da proximidade que, aplicado ao design web, informa que elementos visuais próximos transmitem a idéia de unicidade e, além disso, que estes elementos são relacionados, de alguma maneira.

Navegando pela web, “pincei” alguns exemplos do princípio de Gestalt da proximidade aplicado à designs de web sites. Como este artigo tem algumas imagens um pouco pesadas, coloco, abaixo, o link para quem realmente quiser acompanhar os exemplos e ler o post até o fim.

Exemplos do princípio da proximidade no design web

Vejam neste screenshot do site do GMail e percebam os relacionamentos:

Itens da direita: O formulário para entrar na conta de e-mail e, abaixo, para se cadastrar no GMail. Esse relacionamento é inferido devido a os dois terem o fundo colorido;
Itens da esquerda: Justamente por todos terem fundo branco, estão relacionados, já que apresentam informações gerais sobre a conta de e-mail.

Com o ato simples de colocar cor no fundo de alguns elementos, o princípio da proximidade foi muito bem aplicado.

No site da Whoooz! Webmedia o princípio da proximidade foi usado para separar os tópicos de informação que constam na página inicial. Percebam que o simples espaçamento entre os textos fez com que colunas se formassem, cada uma delas relativa ao respectivo tópico, que está em negrito. Eles se valeram apenas de texto puro e, aplicando o princípio da proximidade, conseguiram o resultado da divisão destes tópicos.

No web site Photorec, o princípio da Gestalt também foi utilizado: cada um dos retângulos mostrados na parte inferior contém uma informação sobre o serviço oferecido. Os retângulos foram explicitamente colocados devido à composição do design, entretanto, mesmo que não estivessem ali, quem entrasse no site continuaria sabendo que cada coluna seria uma “chamada” diferente, mas que trata de um assunto em comum.

A treforest design, com muita propriedade, utilizou o princípio da proximidade para “dividir” as informações presentes. Notem que os textos (brancos) estão “ligados” aos respectivos tópicos (amarronzados). A proximidade entre os dois sugere que cada texto é referente a cada tópico. Além disso, quem olha interpreta que são vários tópicos diferentes em função da distância entre cada tópico.

A Web Major (com um excelente web site, diga-se de passagem) utiliza o princípio da proximidade da Gestalt através dos espaçamentos e das cores. O retângulo escuro, é a “chamada” principal (tem letras maiores e fica na parte superior); ele é “separado” das “chamadas” secundárias, que estão abaixo. Estas secundárias, por sinal, são “divididas” umas das outras através do espaçamento e do fundo aplicado a cada um. Vejam que elas são inter-relacionadas, e isto é transmitido devido ao fato de todas apresentarem igual distância e terem o mesmo background.

O belo site da Guardian Community torna nítida a separação entre conteúdo principal e conteúdos relacionados. O texto que é devido à página inicial é apresentado sem background, inserido diretamente no grande retângulo branco inferior; a seu lado, estão indicações para os visitantes se informarem mais a respeito do web site, que é, ao mesmo tempo, um convite para que que se continue lendo o restante dos conteúdos. Os três retângulos coloridos tratam de assuntos de alguma forma relacionados, já que possuem o mesmo tamanho, têm igual espaçamento e títulos e conteúdos iguais. Elementos próximos são elementos relacionados.

Breves considerações sobre o princípio da proximidade

Eu poderia inserir mais um monte de exemplos, mas, creio, já deu para perceber a aplicação do princípio de Gestalt da proximidade em sites profissionais e de muita qualidade. Percebam que os web designers destes sites que apresentei como exemplo têm muita consciência das leis de Gestalt e as aplicam com muita propriedade, o que os permite elaborar composições bonitas e inteligentes, que realmente chamam a atenção do visitante e agrada aos sentidos.

Como comentei no artigo anterior desta série,sabendo que elementos próximos dão a idéia de unicidade e relacionamento, que têm ligação entre si, é possível planejar melhor o design de um web site. Logicamente que o princípio da proximidade não foi e não é aplicado sozinho para a construção de layouts. Outras leis de Gestalt também fazem parte desta verdadeira maestria.

No próximo artigo da série: princípio do alinhamento.

Gestalt aplicado ao design web (parte 2): princípio da proximidade

Tárcio Zemel — Thu, 24 Jan 2008 16:03:04 +0000

No segundo artigo da série, apresento o princípio da proximidade, muito útil de se saber e efetivamente aplicar, nos trabalhos do dia-a-dia.

Este artigo é parte da série “Gestalt aplicado ao design web“. Confira a lista de todas as partes, até agora:

Gestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade;
Gestalt aplicado ao design web (parte 2): princípio da proximidade (artigo atual).

Foi visto no artigo anterior que pesquisadores alemães começaram a estudar as percepções visuais humanas, quer dizer, as relações entre algo sendo observado e as sensações que este “algo” provoca em que observa, dando origem à teoria Gestalt.

A partir deste estudo, foram deduzidos alguns princípios – ou “leis”, como preferem alguns – que descrevem alguns aspectos interessantes e, para o caso, úteis de se saber, sobre como o ser humano interpreta o que vê. Nesta série não serão vistos todos os princípios, mas, sim, aqueles que são úteis para o escopo a que se propõe: o desenvolvimento para web.

O princípio da proximidade basicamente diz que quando vários itens estão próximos entre si, formam uma unidade visual única, coesa, e não mais parecerão distintos. E mais: esta relação que forma o “um” sugere que estes elementos são relacionados, de alguma maneira.

Ainda não acredita? Você mesmo “se depara com o princípio da proximidade” diariamente… O princípio da proximidade “transforma” milhões de pontinhos (pixels) no monitor que olhamos em verdadeiras imagens!

Deste princípio da proximidade, pode-se inferir que elementos relacionados devem ser agrupados.

Esta é uma informação muito importante, quando o assunto é desenvolvimento de layouts! Sabendo que elementos próximos dão a idéia de unicidade e relacionamento, que têm ligação entre si, é possível planejar melhor o design de um web site, por exemplo.

Utilizando o princípio da proximidade, é possível conferir organização a um layout; é fazer com que a experiência dos usuários, ao visitarem determinado site, seja agradável e, até mesmo, prazerosa. As pessoas se sentem bem quando as coisas estão organizadas, não é verdade? ;-)

No próximo artigo da série, mostrarei alguns exemplos do princípio da proximidade na web.

Gestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade

Tárcio Zemel — Fri, 18 Jan 2008 20:28:51 +0000

Neste primeiro artigo da série, falo sobre o que é Gestalt, apresento um breve histórico e cito sua utilidade para aplicação no web design. Posteriormente, mostrarei alguns princípios de design conhecidos por todos os profissionais do ramo – na verdade, “medidas simples” que devem ser tomadas no momento de compor um layout.

Sobre o termo “Gestalt“

Segundo o Instituto Gestalt de São Paulo,

a palavra Gestalt (plural Gestalten) é um termo intraduzível do idioma alemão para o português. O Dicionário Eletrônico Michaelis apresenta como possibilidades as palavras figura, forma, feição, aparência, porte; estatura, conformação; vulto, às quais ainda se pode acrescentar estrutura e configuração.

Complementando, o psicólogo Leonel Vieira diz, em seu artigo Descubra suas “gestalts abertas”, que, para a tradução do termo, também se pode usar“forma total” ou “forma global”.

Mas o que, exatamente, é “Gestalt“?

Gestalt é uma teoria – uma escola de pensamento, se ficar melhor – que estuda como os seres humanos percebem as coisas. Surgiu no início do século passado, na Alemanha, e teve como principais expoentes Kurt Koffka, Wolfgang Köhler e Max Werteimer. Ela apregoa que nossa percepção não se dá por “pontos isolados”, mas, sim, por uma visão de “todo”. Citando Juliana Fausto, em seu artigo Gestalt, publicado no web site do designer Tiago Teixeira,

somos bombardeados por estímulos físicos todo o tempo e, para compreendê-los, formamos organizações perceptuais (termo que se aplica tanto ao processo de organização quanto ao resultado em si). Há várias maneiras de se organizar esses estímulos, e, de fato, o fazemos, mas de tal modo que exista sempre apenas uma: nunca há dois tipos de organização em um só momento. Esse empreendimento se dá de maneira espontânea, inerente ao indivíduo, porém o consciente pode exercer um papel nesse processo, pois a organização perceptual ocorre dentro e fora da consciência: se a pessoa quiser, poderá criá-la conscientemente, mas se não o fizer, o inconsciente agirá.

No web site do Instituto Gestalt de São Paulo é possível saber que a Gestalt se divide em 3 sub áreas, quais sejam, Psicologia da Gestalt, Gestalt Terapia e Gestaltpedagogia, cada uma com seu próprio “momento de chegada”, seus próprios pensadores e abordagem focada.

Para que serve a Gestalt?

Levando em conta a Psicologia da Gestalt, que é o que interessa, para o caso, sua utilidade é analisar e “diagnosticar” as maneiras pelas quais percebemos o mundo em que vivemos. Os elementos que o compõem (vistos como um “todo”, como falado) e de que maneira isso influi na vida das pessoas.

Quer dizer, sabendo como é a “visão humana”, é possível fazer, o que quer que seja, levando-se em consideração determinadas práticas benéficas que agradam à percepção, que são mais benignas, diga-se dessa maneira. Por exemplo: fazendo um design web levando-se em conta determinados princípios, é possível criar uma composição que agrada aos olhos e à percepção dos visitantes!

Quando alguém entra em um web site e pensa “Não gosto deste site, mas não sei explicar o motivo…”, na verdade sabe o que há de errado, sim; mas o sabe de forma inconsciente! Seu cérebro, num limiar que não é percebido naquele momento, “capta” que existem discrepâncias entre os elementos, que eles estão fora do lugar, que não se “ajeitam”…

O estudo de princípios básicos de Gestalt, aplicados ao design para web, podem oferecer a quem os usa a chance de compor melhores layouts e, conseqüentemente, agradar mais aos visitantes dos sites que produz. As pessoas se sentirão confortáveis e navegar por ali será um verdadeiro prazer!

Esse é o objetivo da teoria Gestalt aplicada ao desenvolvimento de designs para web. Saber disso é dar um passo rumo a trabalhos mais profissionais e consistentes e, mais importante, realizar projetos de maior qualidade, que agradam às pessoas para as quais estes são feitos!

Identificador de fontes

Tárcio Zemel — Mon, 26 Nov 2007 23:40:05 +0000

Um identificador de fontes é bastante útil para saber qual fonte foi utilizada para compor uma imagem. Identificar uma fonte é imprescindível quando surge a necessidade de se aplicar um tipo diferenciado ao projeto e você viu, justamente, em uma “imagem de texto”. O What The Font é um aplicativo web que identifica a fonte que foi utilizada em alguma imagem.

Passo-a-passo do WhatTheFont

Quando se acessa o site do WhatTheFont, a primeira coisa é fazer o upload de um arquivo ou especificar um URI com a imagem que se quer identificar a fonte.

Como consta nas próprias dicas de submissão/indicação de imagens, melhores resultados serão apresentados quando a fonte contida na imagem possuir as seguintes características:

Caracteres que tenham a forma bastante distinta na imagem
Imagens com fontes não editadas diretamente
Texto deve ser o mais horizontal possível

Para o teste, usemos esta imagem:

Como é possível perceber, além das fontes também existe um símbolo (a máscara). A noa notícia é que, ainda assim, o WhatTheFont consegue realizar a identificação.

Depois do upload ou indicação da URI da imagem, é preciso confirmar para o WhatTheFont se as letras que ele reconheceu realmente são válidas: digitar em vários campos a respectiva letra destacada.

Neste ponto, possível o WhatTheFont vai querer que se identifique, também, possíveis elementos gráficos da imagem que não as próprias fontes. Se for o caso, basta deixar o campo vazio e prosseguir.

Ao final do processo, então, as possíveis fontes identificadas serão indicadas e, caso realmente sejam uma daquelas indicadas, parabéns, você acabou de identificar a fonte!

Conclusão

Como foi visto, quando for preciso identificar uma fonte para um projeto, é possível fazer isso usando o WhatTheFont. E, dependendo do caso, se for preciso comprar a fonte, é possível fazer isso diretamente através do resultado de identificação da fonte.

Obviamente não serão possível identificar a fonte em 100% dos casos, mas, certamente, vale a pena experimentar o uso para começar a identificação, já que, caso se consiga, muito do trabalho é poupado.

Portanto, o WhatTheFont, mesmo não sendo eficaz em todas as vezes que é usado, certamente merece um voto de credibilidade e indicação!