Iconografia

A iconografia do Kosmos tem como base principal o Material Design, por ser amplamente utilizado as metáforas visuais utilizadas pelo o material devem ser priorizadas na construção de novos ícones.

A aplicação dessa abordagem visual é essencial para garantir uma experiência intuitiva e consistente para os usuários. No entanto, no contexto específico do Letras e Letras Academy, pode ser necessário priorizar a metáfora visual já estabelecida, desde que seja facilmente identificável pelos usuários.

Criando ícones

Benchmark

O benchmark da iconografia é uma etapa fundamental no processo de design e para garantir que as soluções propostas estejam alinhadas com as tendências atuais e as melhores práticas é importante seguir essas recomendações.

Material design como referência principal

É recomendado utilizar o Material Icons, especialmente os ícones presentes nos principais produtos do Material Design, como Google, Gmail, Drive, Agenda e outros, como referência principal para a construção da iconografia. Esses ícones são familiares aos usuários e garantem facilidade de reconhecimento em nossas interfaces.

Inspire-se em grandes produtos do mercado

Ao buscar referências para ícones específicos que são poucos ou nada utilizados no Material Design é recomendado buscar referência em grandes produtos do mercado que possuam foco na área em questão daquele ícone. Por exemplo: para ícones de pagamento, podemos buscar inspirações em e-commerces líderes do setor. Da mesma forma, para ícones de música, podemos explorar plataformas de música de renome para obter insights.

É importante ressaltar que nem todos os ícones precisam ser substituídos. Se o ícone atual é amplamente reconhecido pelos usuários e se alinha bem com a identidade visual da marca, é recomendável mantê-lo. Para isso:

• Avalie a familiaridade e a usabilidade do ícone atual;

• Se o ícone atual já é bem estabelecido no Letras, mantenha-o e busque melhorias;

• Ajuste o ícone atual para se alinhar com as recomendações de construção definidas.

Criação

Para garantir a consistência e padronização na criação de iconografias, foram estabelecidas keylines e recomendações de criação abaixo.

Keylines

As keylines são linhas guias que formam a base do grid de uma iconografia. São como a estrutura esquelética que sustenta todo o conjunto de ícones. Essas linhas guias garantem que cada ícone seja projetado respeitando os mesmos tamanhos, bordas e peso visual em relação aos demais elementos do sistema.

Cada linha colorida é referente a uma forma na qual os ícones normalmente são baseados. Utilize as linhas como referência para o tamanho de cada ícones. Círculos e formas não quadradas precisam ser visualmente maiores para equilibrar visualmente com os quadrados.

Como utilizar?

Utilize o componente de keyline como guia levando em consideração a forma que melhor se assemelha ao ícone que será desenhado e, então, utilize o keyline correspondente a essa forma. Como no exemplo abaixo:

Construção

1. Frame

2. Stroke

3. Gap

4. End Point

5. Corner

Frame

Nosso ícones devem ser construídos em um frame de 24 x 24px e como forma de garantir um espaçamento adequado ao redor dos ícones, é recomendado manter todo conteúdo do ícone dentro da área útil e respeitando a margem de segurança de 2px.

O frame do ícone deve obrigatoriamente conter os seguintes elementos:

1. Frame com o nome do ícone: O nome do frame que contém o ícone deve ser exatamente o nome do próprio ícone. Para o ícone vetorizado, adotaremos o prefixo "ic_" seguido do nome do ícone.

2. Uma layer com o ícone em "outline stroke" e "flatten" visível:
Deixar o ícone em outline stroke garante a variação proporcional da espessura do traçado e a camada bloqueada evitar edições acidentais, preservando a integridade do ícone.

3. Um grupo com o ícone em "stroke editável" e em "hide" e bloqueado:
Dentro desse grupo, o ícone deve ser criado com um traçado editável (stroke) para possibilitar futuras personalizações. Essa camada deve estar oculta (hide) para que não interfira na visualização do ícone final.

1. Layers com os constraints em “scale”:
Utilizar os constraints em “scale” possibilita escalar o ícone para diferentes contextos.

1. Utilizar style Icon Fill para o Fill do frame:
Para garantir que os desenvolvedores consigam exportar o ícone adequadamente adicione o style Icon Fill ao fill do frame.

2. Desativar a opção do fill “Show in exports”:
Como forma de preservar a margem de segurança do ícone e também permitir que os desenvolvedores alterem a cor do ícone sem interferir no BG, é importante deixar a opção “Show in exports” do fill desativada.

   Para isso é necessário:

   a) Selecionar o ícone


   b) Clicar em “Export” Em seguida irá ser exibida uma caixa de seleção abaixo da opção de fill e basta desmarcá-la.

Stroke

Para garantir a consistência visual em todos os ícones, siga as seguintes diretrizes:

1. Traçado (Stroke): Utilize um traçado com 1.5px de espessura em todos os ícones e para definir a cor do traçado utilize o token de cor "Appearance 600 contrast".

2. End point: Configure o end point para "round", para deixar as extremidades do traçado arredondadas.

3. Traçados Externos: Para os traçados mais externos do ícone, utilize a posição "inside" para que a forma fique alinhada dentro da keyline.

A configuração final no figma, ficará como na imagem abaixo:

Em situações em que o traçado mais externo não for uma forma completa, inviabilizando o uso da posição "inside", podemos fazer da seguinte forma:

1. Fazer a forma completa, sem recortes e por na posição “inside”

2. Utilizar a ferramenta de "Subtract selection" para cortar a área vazada

3. Adicionar um "corner radius" de 2 para tornar as bordas arredondadas novamente

Gap

O gap é utilizado para manter a legibilidade dos ícones. É recomendado utilizar o gap sempre que houver sobreposição de objetos diferentes no mesmo ícone. O gap funciona como um espaçamento sutil que separa esses elementos, evitando que se fundam visualmente e comprometam a compreensão do ícone.

Para manter o estilo arredondado da iconografia, o corner radius padrão para o traçado principal é de 2px. Essa é a medida que se encaixa perfeitamente nas keylines, porém pode ser necessário realizar ajustes ópticos nas bordas em algumas situações.

Corner

Para manter o estilo arredondado da iconografia, o corner radius padrão para o traçado principal é de 2px. Essa é a medida que se encaixa perfeitamente nas keylines, porém pode ser necessário realizar ajustes ópticos nas bordas em algumas situações.

Aplicando ícones

Na documentação de iconografia, é fundamental ressaltar a importância da aplicação correta dos ícones na interface. Quando os ícones forem incorporados dentro de outros componentes e precisarem mudar de tamanho conforme o contexto, recomenda-se evitar a aplicação direta e utilizar o componente Icon.

Not found

Essa prática auxilia na manutenção de tamanhos padronizados, especialmente agora que estamos desenvolvendo componentes mais agnósticos. Ao utilizar o componente Icon, os ícones podem ser redimensionados de forma consistente e eficiente.

Histórico de Atualizações