Guia de banners
O que fazer, com que medidas e com que nome — para as quatro marcas, nos dois idiomas
a partir de
- Início »
- Guia de banners
Esta página é o pedido escrito. Diz o que fazer, com que medida, com que nome e para que marca. Escolha em cima a marca, o serviço e o idioma em que está a trabalhar: os nomes dos ficheiros lá em baixo mudam sozinhos, e é esse o nome que a peça tem de ter.
16 formatos ·
10 serviços · 2 idiomas · 4 marcas
Esta selecção: Hospedagem de Sites, em português, para a Interweb Angola.
Sempre a mesma ordem, de cima para baixo. O que muda de tamanho para tamanho é quanto disto cabe — e é o cartão de cada formato que diz onde parar.
| Elemento | O que é | Onde entra |
|---|---|---|
| 1 · Logótipo | O da marca escolhida, na versão que se lê sobre o fundo usado. Nunca redesenhado, nunca esticado, nunca com sombra. | Em todas, sem excepção |
| 2 · Título | O texto que está no cartão. É a única coisa que se lê de longe — deve ocupar o maior corpo da peça. | Em todas menos a foto de canal |
| 3 · Apoio | A linha por baixo do título, que diz o que vem incluído. Corpo bem mais pequeno que o título. | Só na versão longa |
| 4 · Botão | A chamada à acção, com fundo cheio e cantos redondos. Nunca só texto sublinhado — tem de parecer clicável mesmo quando não é. | Nas médias e nas grandes |
| 5 · Rodapé de contacto | Uma linha discreta, no fim: site, e-mail, telefone. Corpo pequeno, mas legível — não é letra miudinha de contrato. | Conforme o tamanho (ver cartões) |
| 6 · Fundo | Cor cheia ou fotografia com escurecimento por cima. Nunca uma fotografia crua por baixo de texto: não se lê. | Em todas |
A cor. O vermelho da casa é #D60037 e o escuro é #1F2835 — são os do manual de marca, e são iguais nas quatro. (O rodapé do site usa um escuro mais fundo, #0F1319; nos banners vale o do manual — ver a secção do manual.) O que muda entre marcas é o logótipo e o nome. Use o vermelho no botão e para destacar, não como fundo de peça inteira: cansa e tira contraste ao que interessa. Contraste: texto sobre fundo tem de dar pelo menos 4,5:1; o título grande, 3:1. Se tiver dúvidas, escureça mais o fundo.
Antes de desenhar do zero, veja isto. É tudo material da casa, no ar, e é daqui que sai a linguagem visual das peças.
Existe um por marca, feito em Illustrator. É a fonte para tudo o que seja uso do logótipo, cores e proporções — se algo aqui contrariar o manual, manda o manual.
Cada marca tem uma open-graph.jpg de exactamente 1200×630 — é a imagem que aparece hoje quando alguém partilha uma ligação nossa. Serve de referência do estilo em uso, e é a primeira peça a ser substituída pela nova.
É o que o site usa em todo o lado (font-family: Ubuntu em 35 regras da folha principal). É gratuito no Google Fonts. Use-o nos banners — assim a peça e a página falam com a mesma voz.
cPanel, WHMCS, Plesk, VMware, Microsoft e Zumada, já recortados e com fundo transparente. Servem de selo de confiança num banner — mas nunca maiores do que o nosso logótipo.
Os mesmos que estão no rodapé do site, em SVG e mosaicos de 55×35: Visa, Mastercard, PayPal, Multicaixa, M-Pesa, e-Mola, mKesh, e os das redes sociais. Já foram limpos e alinhados — não os volte a recortar.
O cabeçalho e o rodapé de qualquer página mostram a linguagem em uso: os espaçamentos, o peso dos títulos, como o vermelho é usado com conta. Olhe para uma página de produto antes de começar.
Os dois manuais são o mesmo documento com o logótipo trocado: mesma paleta, mesma tipografia, mesma folha. Uma página cada. Cobrem quatro coisas e param aí — e é por isso que este guia existe.
#1F2835 escuro, #D60037
vermelho, #EDEDED cinza) e cinco secundárias (#00ACC8,
#DCE7F1, #F6B436, #BA0000, #064D9B).| O quê | O manual diz | O site faz | Nos banners |
|---|---|---|---|
| Letra do texto corrido | Open Sans | Ubuntu — é a única que carrega do Google Fonts, em 35 regras | Ubuntu, para a peça falar como a página |
| O escuro | #1F2835 |
#0F1319 no rodapé, mais escuro |
#1F2835, o do manual |
| O vermelho | #D60037 |
#D60037, mas o logótipo da MozOut para fundo claro traz #F00843 |
#D60037, o do manual |
São divergências a sério, não detalhes: alguém terá de decidir qual das duas fontes passa a mandar. Até lá, nos banners vale a coluna da direita.
| Cor | Sobre branco | Sobre o escuro | Serve para texto |
|---|---|---|---|
| #1F2835 | 14,86:1 | — | sim, sobre branco |
| #D60037 | 5,36:1 | 2,77:1 | sim, sobre branco |
| #BA0000 | 6,80:1 | 2,19:1 | sim, sobre branco |
| #064D9B | 8,26:1 | 1,80:1 | sim, sobre branco |
| #00ACC8 | 2,71:1 | 5,47:1 | só sobre escuro |
| #F6B436 | 1,83:1 | 8,14:1 | só sobre escuro |
| #EDEDED | 1,17:1 | 12,69:1 | só sobre escuro |
| #DCE7F1 | 1,25:1 | 11,85:1 | só sobre escuro |
O mínimo para texto normal é 4,5:1. O amarelo #F6B436 sobre branco
dá 1,83:1 — não se lê, e é uma cor da paleta oficial. Sobre o escuro dá 8,14:1 e
é excelente. Nenhum manual avisa disto.
São dois desenhos, não quatro: a Interweb Angola e a Interweb Moçambique usam o mesmo ficheiro, e o mesmo se passa entre a MozOut Moçambique e a MozOut International — conferi, são idênticos byte a byte. O que distingue as marcas no banner é o nome que aparece no rodapé de contacto, não o logótipo.
logo-interweb-2021.svg
625 × 135 · #1F2835 · #D60037 · #FFFFFF
Transferir SVG
logo-interweb-2021-footer-inverse.svg
625 × 135 · #D60037 · #FFFFFF
Transferir SVG
As duas têm a mesma moldura, por isso à mesma altura saem do mesmo tamanho.
logo-mozout-2021.svg
462 × 106 · #2A343E · #F00843 · #FFFFFF
Transferir SVG
logo-mozout-2021-footer-inverse.svg
150 × 29 · #D60037 · #FFFFFF
Transferir SVG
Atenção: as molduras são diferentes (19,6% de folga numa, 1,7% na outra) e os vermelhos também não são o mesmo. Ver a nota no fim da secção.
Existe e está em uso como ícone da aplicação — mas não está no manual, e por isso quase ninguém sabe que pode usá-lo. É o que a foto de canal de 512×512 pede, e serve sempre que a palavra inteira não caiba. Já existe em PNG a 512×512, no tamanho exacto de que a foto de canal precisa — e ainda em treze tamanhos mais pequenos, de 16 a 192. O que não existe é o vectorial: para o pôr maior do que 512 é preciso pedir o original a quem o tem em Illustrator.
apple-touch-icon-512x512.png
Transferir
apple-touch-icon-512x512.png
TransferirEscolher a versão certa. Sobre fundo claro, a de fundo claro; sobre fundo escuro ou fotografia, a branca. Não é opcional — a de fundo claro tem letras escuras e desaparece num fundo escuro. Nunca recolorir, esticar, rodar, pôr sombra, contorno ou caixa por trás. Se o logótipo não se lê sobre a fotografia, o problema é da fotografia: escureça-a.
Duas coisas que dão nas vistas quando se abrem os ficheiros. O vermelho não é o mesmo em todos: o da Interweb para fundo claro e as duas versões brancas usam #D60037, mas o da MozOut para fundo claro usa #F00843, que é mais vivo. E o ficheiro da MozOut para fundo claro tem 19,6% de folga vertical dentro da moldura, contra 1,7% no branco — por isso, à mesma altura, o branco aparece maior. Nos banners, faça-os do mesmo tamanho a olho, não pela altura da caixa.
As medidas normalizadas da publicidade em linha — é o que um parceiro põe no site dele. As três escolhidas cobrem computador e telemóvel.
Hospedagem de sites com domínio e SSL grátis
Botão: Ver planos
Rodapé da peça www.interweb.ao
Hospedagem de sites com domínio e SSL grátis
Botão: Ver planos
Rodapé da peça www.interweb.ao
Hospedagem de sites
Botão: Ver planos
Rodapé da peça www.interweb.ao
A capa é cortada em telemóvel — o que conta tem de caber ao centro. A de 1200×630 é também a imagem que aparece quando alguém partilha uma ligação nossa.
Hospedagem de sites com domínio e SSL grátis
Botão: Ver planos
Rodapé da peça www.interweb.ao
O seu site no ar, sem complicações
Domínio e certificado SSL grátis, sites ilimitados e cPanel
Botão: Ver planos
Rodapé da peça www.interweb.ao · info@interweb.ao
O seu site no ar, sem complicações
Domínio e certificado SSL grátis, sites ilimitados e cPanel
Botão: Ver planos
Rodapé da peça www.interweb.ao · info@interweb.ao · +244 942 011 191
A vertical é a que ocupa mais ecrã de quem passa. O Instagram corta tudo o que não for uma destas três proporções.
Hospedagem de sites com domínio e SSL grátis
Botão: Ver planos
Rodapé da peça www.interweb.ao
O seu site no ar, sem complicações
Domínio e certificado SSL grátis, sites ilimitados e cPanel
Botão: Ver planos
Rodapé da peça www.interweb.ao · info@interweb.ao
O seu site no ar, sem complicações
Domínio e certificado SSL grátis, sites ilimitados e cPanel
Botão: Ver planos
Rodapé da peça www.interweb.ao · info@interweb.ao · +244 942 011 191
O cabeçalho é muito baixo e é tapado ao centro pela fotografia de perfil.
Hospedagem de sites com domínio e SSL grátis
Botão: Ver planos
Rodapé da peça www.interweb.ao
O seu site no ar, sem complicações
Domínio e certificado SSL grátis, sites ilimitados e cPanel
Botão: Ver planos
Rodapé da peça www.interweb.ao · info@interweb.ao
A capa de empresa é a peça mais estreita de todo este guia.
Hospedagem de sites
Botão: Ver planos
Rodapé da peça www.interweb.ao
O seu site no ar, sem complicações
Domínio e certificado SSL grátis, sites ilimitados e cPanel
Botão: Ver planos
Rodapé da peça www.interweb.ao · info@interweb.ao
São as duas por onde mais se partilha em Angola e em Moçambique. É por aqui que um banner chega a um cliente a sério.
O seu site no ar, sem complicações
Domínio e certificado SSL grátis, sites ilimitados e cPanel
Botão: Ver planos
Rodapé da peça www.interweb.ao · info@interweb.ao · +244 942 011 191
O seu site no ar, sem complicações
Domínio e certificado SSL grátis, sites ilimitados e cPanel
Botão: Ver planos
Rodapé da peça www.interweb.ao · info@interweb.ao
Só o símbolo da marca. Qualquer palavra fica ilegível a este tamanho.
A lista completa, para se ler de uma vez. Nos cartões acima aparece só a versão do comprimento certo para cada tamanho. A versão longa é um título mais uma linha de apoio; a média é uma linha; a curta são duas a quatro palavras.
| Serviço | Curto | Médio | Longo | Botão |
|---|---|---|---|---|
| Hospedagem de Sites PT | Hospedagem de sites | Hospedagem de sites com domínio e SSL grátis | O seu site no ar, sem complicações Domínio e certificado SSL grátis, sites ilimitados e cPanel |
Ver planos |
| Web Hosting EN | Web hosting | Web hosting with free domain and SSL | Your website online, no fuss Free domain and SSL certificate, unlimited websites and cPanel |
See plans |
| Hospedagem WordPress PT | Hospedagem WordPress | WordPress simples, seguro e com cPanel | O WordPress a funcionar como deve Simples, seguro e com cPanel incluído |
Ver planos |
| WordPress Hosting EN | WordPress hosting | WordPress made simple and secure, with cPanel | WordPress that just works Simple, secure and with cPanel included |
See plans |
| Hospedagem Business PT | Hospedagem Business | Hospedagem para empresas, com domínio e SSL grátis | Feito para quem não pode parar Sites ilimitados, domínio e certificado SSL grátis |
Ver planos |
| Business Hosting EN | Business hosting | Hosting for companies, with free domain and SSL | Built for those who cannot stop Unlimited websites, free domain and SSL certificate |
See plans |
| Revenda de Hospedagem PT | Revenda de hospedagem | Revenda hospedagem — a gestão fica connosco | Venda hospedagem com a sua marca Flexibilidade e desempenho, com a gestão por nossa conta |
Saber mais |
| Reseller Hosting EN | Reseller hosting | Resell hosting — we handle the management | Sell hosting under your own brand Flexibility and performance, with management on us |
Learn more |
| Servidor VPS e Cloud PT | Servidor VPS | Servidor VPS Linux, com autonomia total | O seu servidor, à sua maneira A autonomia dos servidores virtualizados Linux |
Ver planos |
| VPS & Cloud Server EN | VPS server | Linux VPS server, full autonomy | Your server, your way The autonomy of Linux virtualized servers |
See plans |
| Servidor Dedicado PT | Servidor dedicado | Servidor dedicado, com recursos 100% seus | A máquina inteira para si Alta disponibilidade e recursos 100% dedicados |
Ver planos |
| Dedicated Server EN | Dedicated server | Dedicated server, 100% of the resources yours | The whole machine, yours High availability and 100% dedicated resources |
See plans |
| Domínios PT | Registe o seu domínio | Registe o seu domínio e garanta o seu endereço | O endereço certo faz diferença Registe o seu nome e garanta o endereço do seu site |
Registar agora |
| Domains EN | Register your domain | Register your domain and secure your address | The right address makes a difference Register your name and secure your website address |
Register now |
| Certificados SSL PT | Certificado SSL | Certificado SSL — o cadeado no seu site | Navegação segura para quem o visita Certificados SSL HTTPS para o seu site e os seus clientes |
Ver certificados |
| SSL Certificates EN | SSL certificate | SSL certificate — the padlock on your site | Safe browsing for your visitors SSL HTTPS certificates for your website and your customers |
See certificates |
| E-mail Profissional PT | E-mail profissional | E-mail com o nome da sua empresa | nome@asuaempresa Um e-mail profissional dá mais credibilidade ao seu negócio |
Saber mais |
| Professional E-mail EN | Professional e-mail | E-mail with your company name on it | name@yourcompany A professional e-mail gives your business more credibility |
Learn more |
| Criação de Sites PT | Criação de sites | Criamos o seu site, com desenho profissional | Um site à altura do seu negócio Desenho profissional, feito por gente qualificada |
Falar connosco |
| Website Creation EN | Website creation | We build your website, professionally designed | A website worthy of your business Professional design, by a qualified team |
Talk to us |
Uma peça, um serviço, um texto. Nenhum destes textos leva preço, data ou percentagem — é a regra do topo da página. E nenhum promete o que a página do serviço não promete: foi de lá que saíram.
Cada peça é feita para as quatro. Muda o logótipo e o nome; a cor principal é a mesma. A raiz do caminho é diferente em cada uma — é onde o ficheiro deve ser guardado.
Porque é que a MozOut International não leva telefone. Ela serve dez países, e o rodapé do site tem cinco conjuntos de contacto conforme a localização — Angola +244, Moçambique +258, África do Sul e Estados Unidos +27. Um banner é feito por idioma, não por país: não há um telefone que sirva os dez. Por isso as peças dela levam só o endereço do site e o e-mail, que são iguais em todo o lado. Se quiser telefone também nas peças da MozOut.com, são cinco variantes de cada peça — e essa é uma decisão do dono, não do designer.
O nome carrega tudo o que é preciso saber: a rede, a medida, o serviço e o idioma. A pasta da marca é a raiz.
| Padrão | O que é |
|---|---|
| <raiz>/images/banners/<rede>/<largura>x<altura>/<serviço>-<idioma>.png | o padrão |
| static/images/banners/facebook/1200x630/hospedagem-pt.png | publicação do Facebook, hospedagem, português |
| static/images/banners/web/320x50/ssl-en.png | faixa de telemóvel, certificados SSL, inglês |
| static/images/banners/mensagens/1080x1920/dominios-pt.png | estado de WhatsApp, domínios, português |
Sobre a quantidade. 16 formatos × 10 serviços × 2 idiomas dão 320 peças por marca, e 1280 nas quatro. Ninguém desenha isso à mão, e não é isso que se pede: o desenho é 160 (um por formato e serviço) e o resto sai por exportação, trocando logótipo e texto. Se preferir começar por um bocado, sugiro Facebook, Instagram e WhatsApp, com hospedagem, domínios e SSL: são 9 formatos × 3 serviços × 2 idiomas × 4 marcas.
Obtenha a Hospedagem Rápida e Segura da Interweb com um Domínio GRÁTIS!