introdução
em algum momento de sua carreira, quase todos os designers terão que criar um conjunto de banners. Inspirado por alguém que me disse que eles tinham feito o seu primeiro banner eu pensei que seria bom para examinar este sub-gênero de design desde que eu projetei milhares de banners e arte dirigida milhares mais ao longo dos anos.
neste post, não vou entrar em problemas como os tipos de páginas em que os anúncios aparecem ou taxas de cliques, pois os designers não podem alterá-los. Eu estarei olhando exclusivamente para o ofício de projetar banners para torná-los mais atraentes (e espero que mais clicáveis).
anúncios de Banner deve orientação a página que está a ligar para
O BANNER PAISAGEM
As três mais comuns banner online são o MPU (Mensagens Mais Unidades), a tabela de classificação e o arranha-céu, o que eu chamo de a santíssima trindade de banners. Eles aparecem em toda a web como as formas se encaixam na largura da página da web (leaderboards) ou dentro de uma coluna individual (MPUs e arranha-céus). As tabelas de classificação são colocadas com um MPU ou um arranha-céu, mas todas as três nunca aparecem juntas.
os banners geralmente fazem parte de uma campanha existente, portanto, seus ingredientes podem ser fornecidos pelo cliente, ou seja, logotipo(S), imagens, direção da cópia. A chave é combinar esses ingredientes de uma forma que seja interessante para o usuário do site nos 2 segundos ou para que eles gastem a digitalização do anúncio (ainda menos se estiverem digitalizando o anúncio perifericamente). É crucial chamar a atenção deles com uma imagem/mensagem atraente e tornar óbvio o que você gostaria que eles fizessem a seguir. Se você apertar os olhos e não houver um ponto focal óbvio no anúncio, é improvável que funcione.
sinto fortemente que os banners devem assinar claramente o que o usuário da web está clicando. Dessa forma, o usuário chega a uma página que se parece com o anúncio que os enviou para lá. Se isso não acontecesse, eles ficariam naturalmente desapontados ou adiados se não parecesse nada com o que estavam esperando.
como resultado, geralmente olho para a página de destino primeiro ao projetar banners e trabalho para trás a partir daí. Em seguida, é um caso de trabalhar a hierarquia correta dos vários ingredientes do anúncio (por exemplo, logo primeiro, mas pequeno, título próximo, mas dominante, etc.). Depois disso, adicione um call-to-action (CTA) adequado que se vincula à cópia e explicite a ação/resposta desejada. Depois que as hierarquias das mensagens são classificadas, elas podem ser aplicadas aos três tamanhos de banners individualmente.
Elementos de competir uns com os outros, na maioria MPUs devido à forma quadrada
MPUs (300×250)
O MPU (Mensagens Plus Unidade) normalmente é colocado na mais estreita à coluna do lado direito da página, e como resultado é aproximadamente quadrada, em formato e em tamanho menor de modo a aparecer acima da dobra. O formato quadrado apresenta um problema de composição, pois o olho humano gosta de imagens ligeiramente mais horizontais (formato paisagem) ou mais profundas (formato retrato).
sinto que a mistura de logotipo, imagem, título e CTA em MPUs muitas vezes não deixa muito espaço para um dos quatro formar um foco do anúncio. Isso é facilmente visto nas MPUs HP e X-Factor acima, onde todos os elementos estão lutando entre si pela atenção do usuário da web. Em ambos os casos, o fundo é apenas usado como um tablet no qual colocar elementos.
em contraste, o CSI MPU acima usou a imagem de fundo para reunir os elementos, fazendo-os emergir das sombras. A arma circulada, o cartão de evidência amarelo e as mãos nos pés também emergem das sombras para dar um tom e fornecer outras informações visuais para o olho se a cópia não for lida.
as Manchetes são a chave focal elemento classificações
tabelas de classificação (728×90)
O tempo de forma horizontal da tabela de classificação pode levar a projetos que o utilizam elementos como uma série de igualdade de blocos como no PS exemplo acima. No entanto, descobri que as tabelas de classificação têm mais impacto se o título for muito maior do que nos outros dois blocos de Anúncios de banner. Isso é claramente demonstrado no anúncio do Fator X acima, onde, mesmo se você digitalizar o anúncio rapidamente, a principal conclusão é “você entendeu?Como as tabelas de classificação são geralmente colocadas no topo da página, um foco nas manchetes se presta à psicologia pré-existente de como processamos páginas da Web–uma memória residual da leitura de jornais e revistas.
à medida que as resoluções de exibição aumentam de tamanho, também as larguras das páginas da web tornam os 728x90s anteriores cada vez mais redundantes (originalmente projetados para uma resolução de 1024 × 768). Como resultado desta CBS Interactive está se movendo para substituir todos os 728x90s em sua rede de sites com 970x66s (chamado de super líder). Esses novos anúncios são menos intrusivos para o usuário de um site e se encaixam mais confortavelmente com as várias páginas que agora têm 970px de largura. A extensão adicionada e a profundidade mais rasa de um superleader se prestam ainda mais a uma iteração orientada por títulos de uma campanha.
A tampa cortes de arranha-céus no meio até que o usuário rola para baixo
Os longos e delgados arranha-céu tem pequenas manchetes e imagens grandes
ARRANHA-céus (160×600)
Enquanto MPUs e tabelas de classificação são geralmente colocados em uma página, acima da dobra, o arranha-céu é cortado ao meio pela página da dobra (geralmente, cerca de 600 px para baixo – ver diagrama acima). Como resultado, informações importantes, como o logotipo, o Título e o CTA, devem estar na metade superior. A estreiteza do arranha-céu também significa que suas manchetes tendem a ser pequenas.
na minha experiência, descobri que os arranha-céus tendem a ser colocados em páginas que são pesadas em informações e leves em imagens. Isso é ideal para arranha-céus, pois eles têm muito mais espaço para imagens do que MPUs e tabelas de classificação.
nos três exemplos 160×600 acima dos arranha-céus foi projetado com crescente consideração para a dobra da esquerda para a direita. No arranha-céu HP, todos os elementos acima receberam igual destaque e, como resultado, não há foco para os olhos. O anúncio do Fator X tem os apresentadores maiores do que em outras iterações da campanha, mas o pequeno título ficou sobrecarregado por todos os outros elementos–As principais informações estão todas abaixo da dobra e tornam o fundo do anúncio pesado. No arranha-céu CSI, A imagem maior reúne os elementos, enquanto o segundo logotipo causou um pouco de superlotação no topo.
Comparar este 728×90 versão do anúncio, com o 300×250 que se segue (ver a animação anúncio aqui)
Animação ajuda a dividir os elementos ao longo do tempo
ANIMAÇÃO
escusado será dizer que a adição de animação para um anúncio de banner vai desenhar o olho para ele. Uma versão Flash de um banner também ajuda a quebrar esses elementos ao longo do tempo. No Ally 728×90 acima, mostrar o lápis completo é menos atraente do que a versão 300×250, onde o olho está esperando para ver o que acontece a seguir.
ultimamente estou vendo muito mais botões de repetição em anúncios animados-sem dúvida porque o anúncio já começou a ser reproduzido quando a página começa a ser carregada. As versões estáticas dos anúncios tornaram-se mais relevantes novamente à medida que são carregadas como Jpeg padrão em ambientes onde o Flash não é reproduzido, como tablets e smartphones.
animação por si só não é suficiente para fazer um anúncio bom. Ainda tem que haver algo atraente no anúncio, caso contrário, ele se inclina para ser como todos os anúncios baratos de pontuação de crédito, dieta e remortgage. Eu tinha originalmente transformado os dois anúncios Ally acima em GIFs animados para este post, mas meu olho automaticamente os exibiu como eu (e provavelmente a maioria das pessoas na web) estou tão acostumado a ignorar anúncios animados empilhados uns sobre os outros.
BANNER AD Design TIPS
desde que eu fiz tantos banners Aqui estão algumas dicas que eu peguei ao longo dos anos. Desculpas se eles parecem óbvios, estou afirmando-os porque os vejo constantemente não aplicados:
Copiar
• Evitar todas as letras maiúsculas cópia, pois isso torna difícil para o usuário ler
• Manchetes e cópia do corpo devem ter tamanhos diferentes para torná-lo mais fácil para o leitor para escanear
• títulos e/ou cópia de corpo deve ser não mais do que três linhas
• preservar hierarquias de mensagens e todo o texto deve ser consistente e alinhado (esquerda, direita, centro)
• Considerar o uso de interessante tipografia como imagem, a fim de economizar espaço por ter um menor elemento
Call-to-Action (CTA)
• Deve ser curto e direto ao ponto, como “Ir” ou “Check It As”
• Deve ser acima da dobra para 160×600 e 300×600 unidades (aproximadamente o meio da unidade)
• Devem ser letras maiúsculas no início de cada palavra para torná-lo mais fácil para digitalizar
Botões
• Deve ser em cores contrastantes, sem olhar berrante
• Deve estar posicionada na direção do final da cópia e/ou inferior direita
• Deve ser coerente com o tamanho de todo um conjunto de banners
• Aparentemente obter mais cliques do que o texto apenas links em banners de anúncios (mesmo que o último olhar mais elegante)
Variados
• Adicionar 1 borda cinza em anúncios com um plano de fundo branco – ele pode ser colocado em uma página em branco
• Para a primeira rodada de homologação eu, às vezes, transformar o indivíduo Photoshop quadros em um GIF animado
• Antes da submissão da versão final eu ficar para trás e olhar de soslaio o anúncio para verificar se ele pode ser facilmente digitalizados
• Como em todo o projeto, economizar tempo, esboçando o anúncio frames sempre
Uma página de pele traz o banner de anúncios de acondicionamento ou de enquadramento da página
CONCLUSÃO
Desde que os usuários da web estão tão acostumados a ver anúncios em banners (anúncios e anúncios em geral), há uma série de mudanças que se avizinham. Embora a santíssima trindade de MPU, leaderboard e arranha-céus dominar a paisagem anúncio banner eu vi outros tamanhos estão se tornando mais comuns, como 640×480 intersticiais (como o vídeo se torna mais predominante) e os anúncios de 300 × 600 ‘meia página’ que têm um MPU mais profundo para dominar a coluna da mão direita. Para uma lista completa de unidades mais recentes que provavelmente preencherão a internet no futuro, confira a página do IAB sobre o assunto clicando aqui.
para uma experiência de marca mais abrangente e harmoniosa, as capas de página (ou ‘papéis de parede’) estão sendo usadas muito mais na internet (especialmente no IMDB) à medida que envolvem os banners juntos. Fazemos cerca de 900 skins por ano na CBS Interactive (baixe este pdf para ler mais). À medida que as peles também se tornam mais numerosas, há também um aumento nas aquisições de rich media feitas sob medida que estão sendo especialmente solicitadas em RFPs (para ler mais sobre isso, veja meu post aqui). No entanto, tanto para skins quanto para aquisições de rich media, ainda há a necessidade sempre presente de a experiência do anúncio funcionar em conjunto com os banners padrão na página e a experiência do Usuário deles.
ANEXO
A história de anúncios de Banner: http://en.wikipedia.org/wiki/Web_banner
Interactive Advertising Bureau (IAB) normas:
http://www.iab.net/guidelines/508676/508767/displayguidelines
A Dobra: http://en.wikipedia.org/wiki/Above_the_fold
Procurar banners de anúncios para marcas específicas: http://www.moat.com
resolução de exibição de Tela: http://en.wikipedia.org/wiki/Display_resolution
DIY de criação de anúncios em:
banners de anúncios da Adobe: http://tv.adobe.com/watch/cs5-design-premium-feature-tour/interaction-design-101-create-a-simple-banner-ad-with-flash-professional-cs5/
Alguns crowdsourcing banner páginas:
http://jobs.designcrowd.com/bannerad-design-jobs
http://99designs.com/banner-ad-design/contests
http://www.crowdspring.com/banner-ads/
Alguns hotéis baratos (e superlotadas) faixa web design sites:
http://www.justgothere.com/web_banners/web_banner_example/300x250_web_banner_example.htm
http://www.decentbanners.com/portfolio_300x250.html
http://www.banner4five.com/business_banners_300x250
