Sobre a construção da biblioteca de ícones de pixels do HackerNoon

Na atual era digital de designs em rápida evolução, cada pequeno detalhe pode afetar significativamente a experiência geral do usuário (UX). Os ícones, por exemplo, podem melhorar notavelmente o apelo visual de um produto.

O que começou como um esforço para diminuir a nossa dependência de recursos de terceiros transformou-se num empreendimento mais significativo.

Esta coleção de ícones pixelados de código aberto foi projetada usando uma grade de 24px para alinhamento e consistência perfeitos, enriquecendo assim sua experiência na web/aplicativo/produto/página/vida. Inspirados na vibração de design retrô do HackerNoon, esses ícones encapsulam a essência da era de ouro da Internet.

O conceito por trás de nossa biblioteca de ícones de pixels

Como designers, muitas vezes buscamos soluções para agilizar nossos processos.

No HackerNoon, inicialmente recorremos aos ícones Font Awesome para adicionar a funcionalidade e estética necessárias ao site. Esses ícones nos serviram bem, oferecendo consistência e uma ampla gama de opções. No entanto, ao contarmos com uma biblioteca pré-existente, não poderíamos mais servir a identidade da nossa marca à medida que ela evoluía.

Nossos fundadores, David e Linh , propuseram inicialmente a ideia de fazer a transição para uma biblioteca interna de ícones durante uma de nossas reuniões de produto. A primeira fase se concentrou na substituição dos ícones Font Awesome existentes no HackerNoon pelos nossos próprios. Este último se concentrou em compartilhar esses ícones como uma Biblioteca de Ícones para a comunidade.

Essa transição nos permitiu nos desafiar criativamente. Embora a jornada tenha seus desafios, cada ícone pixelado que criamos permitiu que a personalidade da nossa marca brilhasse. Esses ícones pixelizados tornaram-se mais do que meros elementos visuais; eles agora são um reflexo do HackerNoon.

Projetando nossos ícones internos: do conceito à criação

Criar uma biblioteca de ícones foi uma jornada emocionante através da criatividade, precisão e resolução de problemas. Aqui está uma olhada no processo de criação desses ícones pixelados, imbuídos da essência do HackerNoon.

1. Definindo a linguagem de design

2. Ideação e esboço

3. Projetando e dando vida a ideias

4. Preparando-se para publicação na comunidade: Figma e GitHub

   
   

Definindo a linguagem de design

Nossa jornada começou definindo uma linguagem de design coesa. Isso envolveu decidir o nível de detalhe, o estilo de ilustração e o clima que queríamos que nossos ícones transmitissem. O estabelecimento dessa base garantiu consistência em toda a biblioteca.

• Pelo nível de detalhe, optamos por uma abordagem minimalista e buscamos ícones limpos. Garantimos que os ícones não criariam confusão visual quando dimensionados, o que nos ajudou a eliminar detalhes desnecessários.

• Nosso estilo de ilustração foi particularmente inspirado no logotipo HackerNoon . O estilo de design retro de pixel block inspirado nos anos 80 está perfeitamente alinhado com a nossa marca. Isso garantiu que a linguagem do design fosse consistente com a identidade visual geral. Nós os chamamos de Ícones Pixelados.

  
  

  
  

  

• Para manter a consistência, optamos por uma grade de 24px. (Uma grade de 24px é considerada ideal ao projetar ícones, já que a maioria dos ícones do sistema são exibidos em 24x24). Isso nos permitiu criar ícones para visualização em escala de 100% com precisão de pixels perfeitos, fornecendo-nos:

  
  

  • Uma área ativa de 22px para conteúdo de ícones

  • E 1px de preenchimento ao redor da área ativa

    
    

    

    
    

    
    

Ideação e esboço

O processo de idealização começou com a listagem das funções representadas pelos ícones atuais e seus respectivos casos de uso. Em seguida, discutimos como poderíamos redesenhar ícones para essas funcionalidades. E então continuei com rabiscos e esboços rápidos. Esses esboços nos ajudaram a visualizar os ícones em uma escala menor, permitindo iterações mais rápidas e descartando ideias que não cabiam.

Projetando os ícones pixelados

A próxima etapa crucial foi converter esses conceitos desenhados à mão em ícones pixelados. Esta fase envolveu principalmente o uso do Adobe Illustrator para criar esses ícones pixelados e posteriormente exportá-los em diferentes formatos e tamanhos para testar a escalabilidade.

• Começamos importando esses esboços para o Illustrator.

  
  

  

• Em seguida, criamos uma grade de 24px usando a ferramenta Grid para iniciar o processo de pixelização.

• Utilizamos a ferramenta Live Paint e preenchemos cada quadrado que tinha> 50% do espaço ocupado.

  
  

• Quando ficamos satisfeitos com o design, expandimos o Live Paint (Menu Objeto → Expandir) para formar formas.

• A seguir, utilizamos a ferramenta Shape Builder para simplificar essas formas e voilà! Nosso ícone pixelizado estava pronto.

  
  

• Em seguida, exportamos o ícone como SVG, PNG em 12px, 16px, 24px e 48px. (Selecionamos esses tamanhos com base nos casos de uso listados durante a fase de idealização)

  
  

• Além disso, documentamos detalhes específicos sobre os ícones, como seu tipo. Atualmente, temos três tipos: Ícones Sólidos (Preenchimento), Regulares e Claros . Existe outro tipo para os ícones que não se enquadram nos três primeiros, nomeadamente os Logotipos de Marca . (Documentar ícones ajuda a manter a consistência do design e facilita atualizações futuras)

  
  

Preparando-se para publicação na comunidade: Figma e GitHub

Depois de exportarmos todos os ícones nos formatos desejados, organizamos esses ícones e os preparamos para publicação na comunidade. Escolhemos o arquivo da comunidade Figma e um repositório GitHub para essa finalidade.

Veja como preparamos tudo:

• Agrupamento e organização: Organizamos os ícones em quatro conjuntos com base em seu tipo: Sólido, Regular, Leve e Logotipos de Marca, facilitando aos usuários a busca por ícones específicos.

  
  

• Convenção de nomenclatura e estrutura de pastas: Estabelecemos uma convenção de nomenclatura clara e descritiva para facilitar a identificação dos ícones pelos usuários. Para o GitHub Repo, optamos por uma estrutura de pastas como segue: file-type/color-theme(se houver)/size/icon-type/icon-name.file-extension (por exemplo: PNG/For Dark Mode/24px/ Sólido/Ad.png e SVG/Sólido/Ad.svg )

  
  

• Criando biblioteca de componentes e definindo variantes no Figma: O sistema de componentes do Figma nos permitiu criar componentes mestres para cada ícone. Criamos variantes de tamanho para cada ícone, permitindo que os usuários dimensionem os ícones diretamente nas instâncias, sem complicações. Isso simplificou o processo de atualização de ícones e garantiu a consistência entre diferentes arquivos de design.

• Configurando o repositório GitHub: Criamos um repositório GitHub dedicado para nossa biblioteca de ícones Pixel, permitindo-nos gerenciar e compartilhar nossos ícones com a comunidade mais ampla de design e desenvolvimento.

  
  

• Documentação no Github: Criamos um arquivo README abrangente em nosso repositório GitHub. Isso incluiu uma introdução à Pixel Icon Library, informações sobre todos os métodos possíveis para usar esses ícones pixelados em seu projeto, detalhes de licenciamento, diretrizes de contribuição bem definidas e outras considerações especiais.

  
  

  
  

• Documentação sobre Figma: Para Figma, criamos uma página Sobre separada, que incluía uma introdução detalhada à biblioteca de ícones de pixels e um tutorial sobre como usar a biblioteca de componentes e variantes. Também incluímos uma lista de ícones com seus nomes para fácil referência.

  
  

• Licenciamento: Definimos claramente os termos de licenciamento da nossa biblioteca de ícones. O Pixel Icon Library GitHub Repo e o arquivo Figma são licenciados sob a licença CC BY 4.0, que permite o uso com a devida atribuição ao HackerNoon.

O produto acabado:

Nossa jornada para criar a Pixel Icon Library foi repleta de exploração criativa, desafios e crescimento. Desde nosso começo humilde usando ícones Font Awesome até o uso de ícones internos em todo o site e, finalmente, a criação de nossa própria Biblioteca de Ícones Pixel.

Este processo ensinou-nos que os ícones não são apenas símbolos, mas também contadores de histórias por direito próprio.

Junte-se a nós nesta jornada criativa e seja um dos primeiros a experimentar a Pixel Icon Library da HackerNoon.

Mantenha-se criativo, permaneça icônico.