Protocolo de Design da World
Princípios, diretrizes e recursos
Princípios do Design
Humano
A convicção de que as qualidades orgânicas e imprevisíveis do ser humano são essenciais para a inovação.
Universal
Uma linguagem visual que transcende todas as fronteiras, culturas e histórias — garantindo a inclusão, a acessibilidade e a conexão global.
Otimista
Uma crença na humanidade e no papel que a tecnologia pode ter no progresso de todos.
Visão Geral da Marca
Todas as ferramentas fazem parte da marca principal, que é a World.
Identidade Visual
O Logótipo da World
O logótipo da World é a âncora visual da nossa marca — simples, claro e universal. Baseado em princípios de design intemporais, reflete o nosso compromisso para com a acessibilidade, inovação e a conexão global.
A marca gráfica é a representação principal da identidade da nossa marca. Utiliza sempre o logótipo na sua forma original e mantém um espaço ao seu redor, para garantir que se encontra visível e que tem impacto. Modificações, distorções ou a utilização de cores não autorizadas podem comprometer a sua integridade.
A marca nominativa é um elemento chave da identidade visual da nossa marca, trabalhando em conjunto com o símbolo do logótipo para comunicar o nosso nome com clareza e estilo. Alterações, deformações ou a aplicação de efeitos não aprovados à imagem gráfica da marca nominativa não são permitidos.
A composição da marca combina, simultaneamente, o símbolo do logótipo e a marca nominativa num design unificado, representando a nossa marca na sua forma mais completa. Esta combinação deve ser sempre utilizada conforme fornecido, mantendo as proporções, os espaçamentos e o alinhamento correto entre os elementos. Evita separar, reorganizar ou redimensionar os elementos de forma independente. Consulta sempre as diretrizes sobre o tamanho, espaçamento e posicionamento para preservar a sua integridade.
O espaço livre é o espaçamento mínimo entre o logótipo e qualquer outro elemento num layout. A largura do “o” em world define o espaço livre à volta do logótipo
Ao se mostrar parcerias ou colaborações, o logótipo da World pode ser combinado com o logótipo de outra marca, nos seguintes formatos.
Cores e& Gradiente
Criar um Gradiente (Tutorial em PDF)
- O gradiente da World é um elemento importante utilizado no sistema central da marca. Este transmite esperança e otimismo e pode ser utilizado como um recurso visual identificativo da marca quando utilizado como plano de fundo.
- Só deve ser utilizado nas cores designadas.
- O gradiente deve ser criado como bitmap e depois colorido, assegurando que a resolução do bitmap segue as diretrizes das páginas seguintes.
Gradiente — Resolução
As cores secundárias são utilizadas por motivos expressivos e utilitários dentro da marca World. Exemplos incluem códigos de cores de diferentes níveis para crachás de eventos, cores de gradiente localizados para materiais de lançamento, semântica de cores em interfaces do utilizador e suportes visuais de apoio expressivos.
Tipografia
A Lausanne é uma fonte sem serifa sofisticada e modernista, extremamente versátil para texto e elementos de destaque. Esta destaca-se entre as grandes fontes clássicas sem serifa, enquanto integra particularidades da tipografia digital. É a única fonte utilizada na marca World.
Espessura
Abaixo estão as três espessuras da Lausanne, utilizados na marca World. Estas são a base de todo o conteúdo e qualquer exceção ou acréscimo deve ser aprovado internamente.
De modo geral, as regras a seguir podem ser aplicadas na maioria dos cenários tipográficos dentro das mensagens da marca.
Corpos de texto e secções longas são definidos com espessura 300. Títulos principais e elementos de grande dimensão utilizam uma espessura 400, enquanto subtítulos de menores dimensões e títulos utilizam 450, para manter o negrito enquanto ficam um pouco mais pequenos que os títulos principais.
Espaçamento entre linhas e caracteres
Alinhamento
A coleção Tiempos é uma família serifada moderna para tipografia editorial. A Tiempos Headline foi projetada para títulos maiores, equilibrando praticidade e elegância.
Espessura
Abaixo estão as duas espessuras do Tiempos Headline utilizados na marca World. Qualquer exceção ou acréscimo deve ser aprovado internamente.
A Tiempos Headline é a nossa fonte tipográfica secundária, utilizada apenas em alguns casos específicos, principalmente quando a marca fala diretamente ao utilizador e quer criar um sentimento de proximidade.
A utilização pode ser para publicidade, merchandising e alguns ecrãs. Todo o conteúdo e qualquer exceção ou acréscimo devem ser aprovado internamente.
Função da Fonte
Publicações em redes sociais, campanhas, exclusividade
A Tiempos adiciona um toque humano e uma voz direta à linguagem visual da marca. É ideal para criar um tom acolhedor, próximo e elevado em contextos específicos quando se deseja comunicar de forma mais íntima com os utilizadores.
Utilizamos a fonte Noto juntamente com os nossos tipos de letra latinos principais, para garantir um suporte abrangente a todos os alfabetos não latinos. A Noto foi escolhida pela sua ampla cobertura de idiomas globais, oferecendo tipografia consistente e, visualmente, harmoniosa para diferentes alfabetos, incluindo o chinês, árabe, cirílico e japonês.
Esta abordagem permite-nos manter a consistência e a inclusão da marca, garantindo que a nossa comunicação alcança todos os utilizadores ao redor do mundo nos seus alfabetos nativos, sem comprometer a legibilidade ou a coerência estética.
Em situações restritas onde a Lausanne não está disponível, por exemplo, em Google Slides, uma fonte tipográfica alternativa da biblioteca Google Fonts pode ser utilizada: para corpo de texto, utiliza-se a fonte Inter; para títulos, a fonte Inter Tight. Só estas fontes da biblioteca Google Fonts podem ser utilizadas e apenas quando não for possível utilizar a Lausanne.
Composição
A grelha é uma das ferramentas mais importantes no sistema de design. É essencial para todos os layouts e composições, sendo a sua utilização obrigatória. Ser uma grelha de 2, 4, 6 ou 8 colunas depende do tamanho da área de trabalho e da quantidade de elementos, no entanto, todos os elementos de uma composição devem estar alinhados com a grelha subjacente e espaçados proporcionalmente às margens.
Materiais internos
Para todos os materiais internos e da marca, onde o logótipo aparece junto de outros recursos e conteúdos, este deve ser posicionado no canto superior esquerdo do layout para garantir consistência.
Logótipo isolado
Em layouts onde o logótipo é o único elemento, como em vídeos promocionais ou em determinadas campanhas ou comunicados, o logótipo deve ser utilizado no centro no layout.
Perfis de redes sociais
Logótipo sobre o gradiente
Quando o logótipo é posicionado sobre o fundo em gradiente, deve ser colocado sempre na área clara para não interferir com a sua legibilidade.
Ilustração
Cada um dos produtos principais da World tem uma ilustração associada, baseada na natureza do produto ou serviço.
Apesar de existirem várias formas de representar dados, é necessário aplicar um estilo consistente. Contornos, formas geométricas para gráficos e tabelas, preenchimentos discretos e intencionais e a utilização criteriosa de cores compõem os elementos consistentes nas representações visuais de dados.
Gradientes gráficos servem como gráficos coloridos e expressivos, que são utilizadas de duas formas:
- Como representações localizadas, que utilizam as cores do mapa de um país como base para a transição do gradiente
- Gráficos ambiente, que não estão associados a cores específicas, expressando apenas um clima ou energia.
Iconografia
Para ajudar na identificação e navegação, cada produto possui um ícone associado, desenvolvido como uma versão simplificada da respetiva ilustração do produto.
Os ícones dos produtos devem manter uma sensação visual consistente entre diferentes tamanhos no que diz respeito à espessura. A espessura padrão utilizada é de 1,0 px quando o ícone tem 60 px de largura; ao ser redimensionado, a espessura deve ajustar-se para que a aparência visual padrão se mantenha.
Quando os ícones são utilizados juntamente com outros elementos de um layout, como na web, devem estar sempre alinhados no canto superior esquerdo. Em situações onde os ícones são apresentados em conjunto, sem elementos adicionais, podem ser centralizados na composição.
Recursos
Recursos para elementos visuais principais, gradiente, símbolo da moeda WLD, Orb, World App, World Chain, etc.
