Login / Registre-se Account
Jump to section

Os ícones simbolizam conceitos abstratos e literais, ajudando a representar uma variedade de ideias e tecnologias. Cada ícone do nosso conjunto tem um significado específico e design consistente para que possamos nos comunicar com coerência e eficácia em toda a empresa.

Dependendo da escala, pode ser necessário um tipo diferente de ícone ou uma ilustração.

Ícones de IU

Os ícones de interface de usuário (IU) são muito pequenos e usados nos sites ou soluções.

Ícones padrão

Os ícones representam um conceito único ou uma relação entre duas coisas.

Mini-spots

Os mini-spots são pequenas ilustrações que representam um conceito simples.

Ilustrações

As ilustrações têm uma estrutura narrativa ou demonstram um conceito complexo.

Temos dois tipos de ícones: padrão e UX. Os ícones padrão são usados em materiais de marketing, slides, infográficos e diagramas, enquanto os ícones UX são usados em interfaces.

Ícones padrão

Nosso sistema de ícones é simples, claro e aberto. Todos os ícones usam as mesmas espessuras de traço e raios de canto, mostram os objetos de frente, usam perspectiva plana e são feitos exclusivamente com formas geométricas. Por padrão, nossos ícones estão disponíveis em duas versões: preenchido e vazado. Eles também estão disponíveis em três cores (vermelho, preto e branco), mas podem ser alterados para qualquer cor da paleta da nossa marca.

Use ícones padrão em materiais de marketing, apresentações, conteúdo web, infográficos e diagramas. Eles funcionam melhor com tamanhos entre 32 e 100 pixels.

Criando ícones padrão

Nossa biblioteca de ícones é construída de forma contínua e colaborativa. Se você criar novos ícones, compartilhe-os conosco. Para ter certeza de que os ícones que você criar funcionarão com o conjunto existente, use o template e siga as orientações abaixo.

1. Desenhe ícones em um canvas de 36 pixels. Estenda na direção da margem interna conforme necessário para manter cada ícone em proporção e tamanho semelhantes, mas mantenha a margem externa livre.

2. Todos os ângulos devem ter 0°, 45°, 90° ou um desses ângulos menos ou mais 12°. Usamos ângulos de 12° porque eles correspondem ao ângulo dos ascendentes e descendentes da nossa fonte.

3. Crie ícones vazados primeiro. Use uma espessura de traço de 1,5 e certifique-se de que os terminais e cantos estejam arredondados.

4. Use apenas formas geométricas para estabelecer a forma básica do ícone.

5. Use pontos e linhas retas para adicionar detalhes. Use uma lacuna de 1,5 ponto no traçado para criar abertura ou mostrar profundidade. Para linhas pontilhadas, use um traço 0 e uma lacuna de 2,5 pontos.

6. Setas pequenas devem ter 90° e 2 pixels de comprimento nas duas extremidades. Setas maiores devem usar as mesmas proporções que as menores.

Criando ícones preenchidos

1. Para criar um ícone preenchido, comece com a versão vazada e faça o preenchimento da mesma cor do traço. Mantenha a mesma espessura do traço.

2. Altere todos os detalhes para branco.

3. Modifique o tamanho de todos os detalhes para manter uma lacuna de 1,5 ou 0,5 ponto entre os elementos. Dependendo do ícone, talvez você precise estender a linha.

Ícones de IU

As interfaces baseadas em tela apresentam desafios especiais para o design de ícones, especialmente tamanho e escala. Elas precisam de ícones que sejam imediatamente compreendidos e permaneçam nítidos em tamanhos muito pequenos. Nesses tamanhos menores, use os mesmos princípios dos ícones padrão para ícones de IU: 12° e ângulos retos, cantos e terminais arredondados e formas geométricas. 

Nossos ícones de IU são planos, simples e legíveis com 16 pixels. As cores usadas são normalmente cinza ou branco.

1. Comece com um canvas de 16 pixels e traço de 1 ponto. Defina uma margem de 1 pixel em volta do desenho.

2. Verifique se o ícone se encaixa em uma grade de 14 pixels.

3. Consulte os ícones padrão e se inspire nos que já existem. Use apenas os elementos necessários para identificar o ícone.

Ícones como textura

As texturas são uma forma de usar nossos ícones para criar gráficos atraentes e visualmente interessantes com rapidez. Use texturas para fundos ou para preencher espaços.

Abordagens para as texturas

Ao criar texturas, tente mudar um ou dois de seus elementos para torná-los mais dinâmicos. Uma textura deve ser dinâmico e interessante, e não sem graça ou monótona. 

Use um ícone e varie o tamanho, cor ou preenchimento. 

Use um conjunto de ícones relacionados do mesmo tamanho.

Adicione linhas de conexão aos ícones em um conjunto.

Experimente cores e escalas.

Ícones em uso

Crie ícones bidimensionais com o mínimo de elementos de design.

Não faça ícones complicados ou tridimensionais.

Use a mesma espessura de linha em todos os ícones.

Não use várias espessuras de linha.

Encontre uma imagem concreta que possa representar a ideia abstrata.

Não crie um ícone tão abstrato a ponto de o usuário não entender seu significado.

Use um ícone para representar apenas um conceito por vez.

Não combine dois conceitos para ilustrar um conceito mais complexo.

Varie um ou dois elementos em uma textura para criar ritmo e interesse.

Não use o mesma textura sem variações. Isso é chato e repetitivo.

Use texturas que não sejam muito complexas e que não interfiram com o texto.

Não use texturas que atrapalhem a mensagem.

Os ícones padrão são uma maneira rápida de agregar interesse visual e reforçar os pontos principais das apresentações.

Na interface do redhat.com, os ícones da IU permitem que os usuários naveguem em nosso site de maneira mais rápida e intuitiva.