Sobre la construcción de la biblioteca de iconos de píxeles de HackerNoon

En la era digital actual de diseños en rápida evolución, cada pequeño detalle puede afectar significativamente la experiencia del usuario (UX) general. Los íconos, por ejemplo, pueden mejorar notablemente el atractivo visual de un producto.

Lo que comenzó como un esfuerzo por disminuir nuestra dependencia de recursos de terceros se ha convertido en una empresa más importante.

Esta colección de íconos pixelados de código abierto fue diseñada utilizando una cuadrícula de 24 píxeles para una alineación y coherencia perfectas, enriqueciendo así su experiencia web/aplicación/producto/página/vida. Inspirados en el estilo de diseño retro de HackerNoon, estos íconos resumen la esencia de la era dorada de Internet.

El concepto detrás de nuestra biblioteca de iconos de píxeles

Como diseñadores, a menudo buscamos soluciones para agilizar nuestros procesos.

En HackerNoon, inicialmente recurrimos a los íconos de Font Awesome para agregar la funcionalidad y estética necesarias al sitio. Estos íconos nos fueron muy útiles al ofrecer coherencia y una amplia gama de opciones. Sin embargo, al depender de una biblioteca preexistente, ya no podíamos mantener nuestra identidad de marca a medida que evolucionaba.

Nuestros fundadores, David y Linh , propusieron inicialmente la idea de hacer la transición a una biblioteca de iconos interna durante una de nuestras reuniones de productos. La primera fase se centró en reemplazar los íconos de Font Awesome existentes en HackerNoon por los nuestros. Este último se centró en compartir estos íconos como una biblioteca de íconos para la comunidad.

Esta transición nos permitió desafiarnos a nosotros mismos de manera creativa. Si bien el viaje no estuvo exento de desafíos, cada ícono pixelado que creamos permitió que la personalidad de nuestra marca brillara. Estos íconos pixelados se han convertido en algo más que meros elementos visuales; ahora son un reflejo de HackerNoon.

Diseño de nuestros íconos internos: del concepto a la creación

Crear una biblioteca de iconos fue un viaje estimulante a través de la creatividad, la precisión y la resolución de problemas. Aquí hay un vistazo al proceso detrás de la creación de estos íconos pixelados, imbuidos de la esencia de HackerNoon.

1. Definición del lenguaje de diseño

2. Ideación y bocetos

3. Diseñar y dar vida a las ideas

4. Preparación para la publicación comunitaria: Figma y GitHub

   
   

Definición del lenguaje de diseño

Nuestro viaje comenzó definiendo un lenguaje de diseño coherente. Esto implicó decidir el nivel de detalle, el estilo de la ilustración y el estado de ánimo que queríamos que transmitieran nuestros íconos. Establecer esta base aseguró la coherencia en toda la biblioteca.

• En cuanto al nivel de detalle, optamos por un enfoque minimalista y buscamos íconos limpios. Nos aseguramos de que los íconos no crearan desorden visual al escalarlos, lo que nos ayudó a eliminar detalles innecesarios.

• Nuestro estilo de ilustración se inspiró particularmente en el logotipo de HackerNoon . El estilo de diseño de bloques de píxeles retro inspirado en los años 80 está perfectamente en línea con nuestra marca. Esto aseguró que el lenguaje de diseño fuera consistente con la identidad visual general. Los llamamos iconos pixelados.

  
  

  
  

  

• Para mantener la coherencia, optamos por una cuadrícula de 24 píxeles. (Una cuadrícula de 24 píxeles se considera ideal al diseñar íconos, ya que la mayoría de los íconos del sistema se muestran en 24x24). Esto nos permitió crear íconos para verlos a una escala del 100% con una precisión de píxeles perfecta al brindarnos:

  
  

  • Un área en vivo de 22px para contenido de íconos

  • Y 1 px de relleno que rodea el área en vivo.

    
    

    

    
    

    
    

Ideación y bocetos

El proceso de ideación comenzó enumerando las funciones representadas por los íconos actuales y sus respectivos casos de uso. Luego pensamos en cómo podríamos rediseñar los íconos para estas funcionalidades. Y luego siguió con garabatos y bocetos rápidos. Estos bocetos nos ayudaron a visualizar los íconos en una escala más pequeña, lo que permitió iteraciones más rápidas y descartar ideas que no encajaban.

Diseñando los iconos pixelados

El siguiente paso crucial fue convertir estos conceptos dibujados a mano en íconos pixelados. Esta fase implicó principalmente el uso de Adobe Illustrator para crear estos íconos pixelados y posteriormente exportarlos en diferentes formatos y tamaños para probar la escalabilidad.

• Comenzamos importando estos bocetos a Illustrator.

  
  

  

• Luego creamos una cuadrícula de 24 píxeles usando la herramienta Cuadrícula para comenzar el proceso de pixelación.

• Utilizamos la herramienta Live Paint y completamos cada cuadrado que tenía >50% del espacio ocupado.

  
  

• Una vez que estuvimos satisfechos con el diseño, expandimos Live Paint (Menú Objeto → Expandir) para formar formas.

• A continuación, utilizamos la herramienta Creador de formas para simplificar estas formas, ¡y listo! Nuestro ícono pixelado estaba listo.

  
  

• Luego exportamos el ícono como SVG, PNG a 12px, 16px, 24px y 48px. (Seleccionamos estos tamaños según los casos de uso que enumeramos durante la fase de ideación)

  
  

• Además, documentamos detalles específicos sobre los íconos, como su tipo. Actualmente, tenemos tres tipos: Iconos sólidos (relleno), regulares y claros . Hay otro tipo de íconos que no se encuentran entre los tres primeros, a saber, los logotipos de marca . (Documentar íconos ayuda a mantener la coherencia del diseño y facilita futuras actualizaciones)

  
  

Preparación para la publicación comunitaria: Figma y GitHub

Una vez que exportamos todos los íconos en los formatos deseados, los organizamos y los preparamos para su publicación comunitaria. Elegimos Figma Community File y un repositorio GitHub para este propósito.

Así preparamos todo:

• Agrupación y organización: organizamos los íconos en cuatro conjuntos según su tipo: logotipos sólidos, regulares, claros y de marca, lo que facilita a los usuarios la búsqueda de íconos específicos.

  
  

• Convención de nomenclatura y estructura de carpetas: establecimos una convención de nomenclatura clara y descriptiva para que a los usuarios les resulte más fácil identificar los iconos. Para GitHub Repo, optamos por una estructura de carpetas de la siguiente manera: tipo de archivo/tema-color (si corresponde)/tamaño/tipo-icono/nombre-icono.extensión-archivo (por ejemplo: PNG/para modo oscuro/24px/ Sólido/Ad.png y SVG/Sólido/Ad.svg )

  
  

• Creación de biblioteca de componentes y definición de variantes en Figma: el sistema de componentes de Figma nos permitió crear componentes maestros para cada ícono. Creamos variantes de tamaño para cada ícono, lo que permite a los usuarios escalar los íconos directamente a través de instancias sin ningún problema. Esto simplificó el proceso de actualización de íconos y aseguró la coherencia entre diferentes archivos de diseño.

• Configuración del repositorio de GitHub: creamos un repositorio de GitHub dedicado para nuestra biblioteca de íconos de píxeles, lo que nos permite administrar y compartir nuestros íconos con la comunidad más amplia de diseño y desarrollo.

  
  

• Documentación en Github: Creamos un archivo README completo en nuestro repositorio de GitHub. Esto incluyó una introducción a la Biblioteca de íconos de píxeles, información sobre todos los métodos posibles para usar estos íconos pixelados en su proyecto, detalles de licencia, pautas de contribución bien definidas y otras consideraciones especiales.

  
  

  
  

• Documentación sobre Figma: para Figma, creamos una página Acerca de por separado, que incluía una introducción detallada a la biblioteca de íconos de píxeles y un tutorial sobre el uso de la biblioteca de componentes y sus variantes. También incluimos una lista de íconos con sus nombres para facilitar su consulta.

  
  

• Licencias: definimos claramente los términos de licencia para nuestra biblioteca de íconos. Pixel Icon Library GitHub Repo y Figma File tienen la licencia CC BY 4.0, que permite su uso con la atribución adecuada a HackerNoon.

El producto terminado:

Nuestro viaje para crear la biblioteca de iconos de píxeles ha estado lleno de exploración creativa, desafíos y crecimiento. Desde nuestros humildes comienzos usando íconos de Font Awesome hasta el uso de íconos internos en todo el sitio y, finalmente, la creación de nuestra propia biblioteca de íconos de píxeles.

Este proceso nos ha enseñado que los iconos no son meros símbolos, sino narradores de historias por derecho propio.

Únase a nosotros en este viaje creativo y sea uno de los primeros en probar la biblioteca de iconos de píxeles de HackerNoon.

Manténgase creativo, manténgase icónico.