Overview
Este documento tem como objetivo a apresentação do Social Brand System da FF, para servir como guia na construção de narrativas visuais nas redes sociais. Estes componentes devem dar suporte para conteúdos para o público geral, assim como, especificamente para clientes, potenciais clientes e corretores.
Como utilizar este guia:
O Social Brand System é uma fonte única de regras, componentes e assets para criar narrativas visuais para a FF. Utilizando estes elementos você poderá dar foco na criação de histórias únicas sem que a marca perca consistência nas redes sociais.
Para utilizá-lo:
- Leia-o com atenção;
- Baixe os assets direta e unicamente deste site;
- Dê prioridade ao uso de elementos já presentes na documentação deste Social Brand System;
- Se for necessário criar novos elementos, sempre utilize as regras descritas em Elementos estruturais e Elementos compostos, além de observar o direcionamento dos princípios da marca.
Princípios
O Social Brand System da FF segue os três princípios fundamentais da marca. Estes princípios não só dão base a tudo o que foi construído, mas também formam a plataforma fundamental para qualquer criação, adaptação ou expansão dos elementos visuais para narrativas visuais.
Modularidade
Uma das principais características da marca é sua modularidade. A marca principal e suas aparições como marcas de produto são os exemplos mais claros deste princípio.
Segurança / Solidez
Elementos fundamentais de uma empresa de seguros, a segurança e solidez como princípios estéticos estão presentes nos elementos retos e contraste grande entre cores e elementos presentes no Social Brand System.
Sentido único / avanço
Com a proposta de ser uma plataforma solida que dá segurança para que as pessoas avancem e progridam em suas vidas, este elemento não poderia deixar de estar presente no Social Brand System. O sentido único e avanço aparecem com destaque nas fotos e no direcionamento de outros elementos visuais.
Elementos estruturais
Cores
A paleta de cores da FF segue o princípio da modularidade. Sempre utiliza uma cor base e trabalha suas matizes variando saturação, luz e sombra.
A paleta de cores deste Social Brand System possui 2 grandes categorias:
Cores da marca
São as cores relacionadas à estrutura de marca e branding.
Cores de produtos
São as cores relacionadas ou definidas para algum produto.
Fotografia
A fotografia da marca segue o princípio do sentido único / avanço e está dividida em 2 categorias:
Fotos institucionais
São as fotos que apresentam de forma assertiva o princípio estabelecido para a fotografia de marca. Essa categoria de fotos são sempre representadas por pessoas olhando para a direita (da visão do fotógrafo), passando subjetivamente a proposta de olhar para o futuro do cliente com a segurança que a FF proporciona em seus produtos e serviços.
Fotos convecionais
São as fotos usadas para apresentar o conteúdo / mensagem relacionados à temática da postagem produzida. Essas fotos não precisam necessariamente seguir o padrão das fotos institucionais, porém, devem utilizar (sempre que possível) cores dessaturadas ou preto e branco.
Iconografia
A iconografia digital da FF segue o princípio da modularidade. As famílias de ícones são subdivididas em 2 categorias:
Ícones de suporte à marca
Categoria de ícones que extende a utilização da sub-marca dos produtos da FF, utilizando somente a simbologia do logo de cada produto.
Ícones de suporte a conteúdo
Categoria de ´ícones que auxilia na construção de todo tipo de conteúdo, dando ênfase ao contexto das publicações produzidas.
Para esta categoria, adotamos o suporte ao uso da iconografia baseline (filled) do Material Design. Todos os ícones da paleta baseline do Material Design pode ser utilizada e as referências de ícones são encontradas junto aos componentes do Digital Brand System no Figma. Alguns exemplos de ícones em suas sub-categorias:
Tipografia
O suporte tipográfico digital da FF segue os princípios de solidez e modularidade, dividindo 2 grandes contextos de aplicação de suas famílias.
Tipos de destaque e apresentação
Caracterizados pelo uso da família Aeonik, os tipos de destaque e apresentação são sempre usados em títulos, subtítulos ou textos breves que são usados para demarcar algum conteúdo importante.
Tipos de detalhe e descrição
São caracterizados pelo uso da família Lora. Em geral, a família Lora é utilizada para textos mais longos e conteúdos que necessitam ter maior legibilidade em tamanhos menores.
Elementos compostos
All Type
Os conteúdos All Type são aqueles produzidos sem a utilização de imagens. Podem utilizar alegorias visuais com todo o suporte da iconografia documentada.
Texto e gráficos em fotos
Textos e gráficos podem ser aplicados sobre fotos, sejam elas Institucionais ou Convencionais.
Artwork
Os elementos de Artwork são aqueles produzidos com alguma ilustração específica para o conteúdo a ser publicado.
Infográficos
Para construção de infográficos, utilize padrões baseados na iconografia de marca - seja institucional ou de produto.
Vinhetas
Vinhetas são as composições visuais construídas com intuito de introdução de conteúdo em vídeo. Elas podem ser produzidas reutilizando todo tipo de iconografia, artwork e elementos de marca e sub-produtos.
Tipos de postagens
Post único
Os posts únicos podem se apresentar como mensagens ou apresentação de perfis de clientes da FF.
Quotes / Aspas
Os quotes / aspas podem se apresentar com imagens ou sem imagens dos clientes que apresentam o seu depoimento.
Instagram: Exemplos
Facebook | LinkedIn | Youtube: Exemplos
Perfis
Os perfis se apresentam utilizando a fotografia do cliente (fotografia convencional) e os elementos estruturais.
Instagram: Exemplos
Facebook | LinkedIn | Youtube: Exemplos
Post Carrossel
Os posts de carrossel podem ser utilizados para apresentar conteúdos com maior densidade de informação, e/ou com narrativas mais longas.
Listas
As listas apresentam um formato de conteúdo com dicas ou outro tipo de conteúdo auxiliar ordenado.
Product placement
As inserções de produto aproveitam também o formato de Carrossel para apresentar um conteúdo mais rico, utilizando de diversos elementos estruturais e compostos.
Institucional
Os conteúdos institucionais também podem aproveitar o formato de Carrossel para apresentar conteúdos mais longos e riscos em informações.
Post Vídeo
Os posts em vídeo podem ter diversos formatos e utilizam da iconografia de marca para fazer as transições entre as seções do vídeo apresentado.
Instagram: Storyboard 01
Instagram: Storyboard 02
Facebook | LinkedIn | Youtube: Storyboard 01
Facebook | LinkedIn | Youtube: Storyboard 02
Stories
Os stories podem ser compostos com fotos e toda a gama de elementos estruturais e compostos, sendo divididos em dois tipos:
Stories com elementos padrão
São aqueles que precisam fazer uso de componentes de funcionalidades internas da rede que está sendo utilizada.
Stories com elementos estruturais e/ou elementos compostos
São aqueles que utilizam toda a gama de elementos estruturais e compostos aqui documentados para apresentação da mensagem a ser veiculada.
Componentes de identidade
Imagem de profile
A imagem de profile do Instagram é apresentada com o tamanho de 110x110 pixels com um aspect ratio de 1:1. Porém, para manter uma alta qualidade, recomendamos utilizar uma imagem de ao menos 1000x1000 pixels.
Imagem de profile
A imagem de profile do Facebook é apresentada com o tamanho de 170x170 pixels no desktop e 128x128 pixels no mobile, com um aspect ratio de 1:1. Porém, para manter uma alta qualidade, recomendamos utilizar uma imagem de ao menos 1000x1000 pixels.
Imagens de capa
A imagem de capa do Facebook é apresentada com o tamanho de 820x312 pixels no desktop e 640x360 pixels no mobile. Para ter uma boa resolução em imagens e textos, utilize no mínimo o dobro de largura do desktop (1640 pixels) ao fazer o upload.
Cover Exemplo 01
Cover Exemplo 02
Cover Exemplo 03
Imagem de profile
A imagem de profile do LinkedIn é apresentada com o tamanho de 108x108 pixels com um aspect ratio de 1:1. Porém, para manter uma alta qualidade, recomendamos utilizar uma imagem de ao menos 1000x1000 pixels.
Imagens de capa
A imagem de capa do LinkedIn deve ser criada com 1584x396 pixels, mantendo o conteúdo da imagem centralizado verticalmente caso tenha imagens ou textos importantes.
Cover Exemplo 01
Cover Exemplo 02
Cover Exemplo 03
Youtube
Imagem de profile
A imagem de profile do Youtube é apresentada com o tamanho de 98x98 pixels com um aspect ratio de 1:1. Porém, para manter uma alta qualidade, recomendamos utilizar uma imagem de ao menos 1000x1000 pixels.
Imagens de capa
A imagem de capa do Youtube deve ser criada com 2560x1440 pixels, mantendo o conteúdo da imagem centralizado verticalmente caso tenha imagens ou textos importantes.
