Padrões de Design & Dimensionamento do Logotipo
Este documento estabelece os padrões de dimensionamento e proporções para a implantação dos logotipos da marca tupynambalucas.dev em aplicações digitais, perfis sociais, mídia impressa e suítes de software. Para garantir que nossos logotipos mantenham a fidelidade perfeita, desenvolvedores e designers devem aderir às dimensões padrão listadas abaixo.
Para detalhes de desenvolvimento local do monorepo, consulte a documentação de Studio & Ativos Criativos.
1. Visão Geral das Constantes de Dimensionamento
Escolher as dimensões corretas do logotipo evita a pixelização, mantém a legibilidade da marca e garante que os ativos visuais sejam escalados perfeitamente em vários tipos de tela e mídias impressas.
- Padrão de Resolução de Tela: 72 DPI (pontos por polegada) é o padrão para exibições web e digitais.
- Padrão de Resolução de Impressão: 300 DPI é necessário para uma reprodução limpa e nítida em itens físicos.
- Formatos Vetoriais (SVG): Altamente recomendados para interfaces digitais porque escalam dinamicamente e compilam como componentes React dinâmicos.
- Formatos Rasterizados (PNG): Preferidos para plataformas digitais que exigem transparência (como cabeçalhos de sites ou ícones de perfil de redes sociais).
2. Dimensionamento Padrão para Impressão
Ao exportar logotipos para impressão, formatos vetoriais devem ser usados para evitar a perda de detalhes. Abaixo estão as dimensões recomendadas e requisitos de DPI:
| Material / Caso de Uso | Dimensões Recomendadas (polegadas) | Alvo de DPI | Notas de Layout & Posicionamento |
|---|---|---|---|
| Cartões de Visita | 1.5″ × 1.5″ | 300 DPI | Geralmente quadrado; posicionado no topo esquerdo ou centrado. |
| Papel Timbrado | 2″ × 2″ ou menor | 300 DPI | Escalonamento sutil (tamanho A4: 210mm x 297mm). |
| Folhetos & Panfletos | 2.0″ a 3.0″ de largura | 300 DPI | Escala dependendo do layout geral. |
| Pôsteres & Banners | 5.0″ a 12.0″ de largura (ou maior) | 300 DPI | Ajusta dinamicamente para corresponder à tela do banner. |
| Camisetas/Merchandise | 8″ × 10″ (centrado) | 300 DPI | Vetor de alta resolução preferido. |
| Embalagens/Etiquetas | 1″ a 3″ de largura | 300 DPI | Ajusta com base na área da etiqueta ou embalagem. |
Contexto Adicional de Impressão
- Cartões de Visita (Tamanho Geral do Cartão): 3,5 pol x 2,0 pol (o logotipo em si tem normalmente 0,75 pol x 0,75 pol).
- Canecas (Padrão de 11 oz): 7,5 pol x 3,0 pol.
- Bonés: 3,0 pol a 3,5 pol de largura.
- Ecobags (Tote Bags): 14,0 pol x 16,0 pol.
- Posicionamento em Camisetas: Peito adulto (3,5 pol x 3,5 pol), peito infantil (3,3 pol x 3,3 pol), área máxima de impressão (14,0 pol x 15,0 pol) e logotipos de bolso (4,25 pol x 5,25 pol).
- Envelopes (Padrão/C4): 22,9 cm x 32,4 cm (tamanho C4) ou 4,125 pol x 9,5 pol.
3. Dimensionamento Web e Digital
Para canais digitais, mantenha os tamanhos de arquivo minimizados (por exemplo, abaixo de 30 KB para assinaturas de e-mail) para reduzir o tempo de carregamento da página.
| Caso de Uso Digital | Dimensões Recomendadas (pixels) | Proporção | Recomendações de Formato |
|---|---|---|---|
| Logotipo de Cabeçalho | 250 × 100 px (média) | Flexível | PNG (para transparência) ou SVG. |
| Favicon | 16 × 16 px ou 32 × 32 px | 1:1 | ICO ou PNG transparente. |
| Assinatura de E-mail | 320 × 100 px | 3.2:1 | Manter abaixo de 30 KB (normalmente 300-400px x 70-100px). |
| Ícone de App Mobile | 512 × 512 px | 1:1 | Formato PNG preferido para lojas de aplicativos. |
| Logotipo de App Mobile | 864 × 864 px (design) | 1:1 | Tamanho de tela usado para ativos de alta fidelidade. |
| Ícone de App Desktop | 256 × 256 px | 1:1 | Formato vetorial recomendado para telas de alta resolução. |
| Logotipo de Banner | 1800 × 200 px | 9:1 | Gráficos de banner orientados horizontalmente. |
| Embalagem de Produto | 1920 × 1020 px | 16:9 (aprox.) | Pré-visualizações digitais de alta definição. |
Especificidades de Plataformas de CMS e E-Commerce
- Cabeçalhos do WordPress: Logotipos horizontais devem ter como alvo 250 x 45 px ou 250 x 55 px.
- Temas do Shopify: O tema Parallax, por exemplo, recomenda 410 x 205 px.
- Modelos do Squarespace: O modelo de tema Bedford visa uma altura de logotipo de 100 px.
4. Dimensionamento para Redes Sociais
As plataformas de redes sociais comprimem os arquivos enviados. A utilização de formatos PNG de alta qualidade (ou JPGs para o Instagram) produzirá o melhor resultado visual.
| Plataforma Social | Dimensões da Foto de Perfil (px) | Dimensões do Cover / Banner (px) | Notas & Tipos de Arquivo |
|---|---|---|---|
| 170 × 170 | 820 × 312 | Use arquivos PNG para alta qualidade. | |
| 320 × 320 | N/A | O Instagram converte todos os ativos para JPG. | |
| Twitter (X) | 400 × 400 | 1500 × 500 | Tamanho máx: 5 MB (PNG, JPG ou GIF). |
| 400 × 400 | 1128 × 191 | Tamanho máx: 10 MB (PNG, JPG ou GIF). | |
| YouTube | 800 × 800 | 2560 × 1440 | Banners para Desktop/TV (PNG, JPG, GIF, BMP). |
| Twitch | 1600 × 1600 | N/A | Perfis quadrados de alta resolução. |
| Discord | 128 × 128 | N/A | Proporção 1:1; tamanho máximo de 8 MB. |
| 165 × 165 | 800 × 450 | Painéis de perfil e vitrine. | |
| TikTok | 200 × 200 | N/A | Fotos de perfil cortadas em círculo. |
5. Recomendações de Tela para Software de Design
Ao iniciar novos projetos de logotipo em suítes de edição profissionais, estabeleça os seguintes tamanhos de tela base:
Adobe Photoshop
- Tela Inicial Padrão: 1000 × 600 px ou 500 × 500 px.
- Tela Escalável: 1200 × 1200 px (permite escalonamento fácil para baixo sem distorção visual).
Adobe Illustrator
- Tela Padrão: 320 × 500 px (otimizada para proporções de tela de dispositivos móveis).