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 garante a inclusão, acessibilidade e 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
Boas práticas para o Logótipo e Cor
Más práticas para o Logótipo e Cor
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
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 World Pro foi criada de forma personalizada para dimensionar e fornecer um sistema visual universal para todos os que utilizam, integram e interagem com a World. É a única fonte utilizada na marca World.
Espessura
Existem duas espessuras para a fonte World Pro: Regular e Medium. A Regular é a mais utilizada, enquanto a Medium serve para destacar algo quando for necessário dar ênfase.
Espaçamento entre linhas e caracteres
Alinhamento
A World Pro Regular é geralmente considerada versátil o suficiente para ser utilizada em títulos e textos corridos, com uma espessura frequentemente utilizada para criar hierarquia.
A World Pro Medium pode ser utilizada para subtítulos mais pequenos quando é necessário dar mais peso.
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 World Pro não está disponível, por exemplo, em Google Slides, uma fonte tipográfica alternativa da biblioteca Google Fonts pode ser utilizada: para o 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 World Pro.
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
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
O conjunto completo de todos os ícones que existem atualmente encontra-se abaixo. Mais ícones podem e serão criados, no entanto, devem seguir as diretrizes de construção para se manter a consistência.
Os ícones da World são desenhados como extensões da nossa fonte, refletindo a espessura e as curvas do traço.
É essencial que todos os ícones que estejam combinados com o texto mantenham as mesmas proporções e alinhamento para harmonizar com a tipografia. Os ícones são projetados para que os ícones retangulares horizontais fiquem alinhados ao topo e à base da altura das maiúsculas, sendo centrados verticalmente.
Dimensão de Ícones
Todos os ícones svg estão inseridos numa moldura padrão. Para manter o tamanho consistente em relação à tipografia, podemos aplicar uma fórmula à moldura do ícone: multiplica o tamanho da fonte por 1,07 para obteres o tamanho da moldura do ícone. Exemplo: se o tamanho da fonte for 180px, a moldura do ícone deve ter (180x1,07)=192,6px de largura.
Recursos
Recursos para elementos visuais principais, gradiente, símbolo da moeda WLD, Orb, World App, World Chain, etc.
