Iconos, pictogramas, símbolos. Los ves cada día en el móvil, en el metro, en el súper, conduciendo. ¿De qué va cada uno? ¿En qué se diferencian? ¿Fuentes o gráficos? ¿Gratis o de pago? Y no menos importante… cuando sabes que los necesitas, ¿dónde encontrarlos?
Los símbolos son una representación de «algo» a la que se llega desde cierto consenso porque… en realidad no existe, está construido, creado. Piensa en los signos lingüísticos, matemáticos… Y en aquello de signo – significante – significado (que en su momento a nadie nos quedó claro).
Entonces ¿qué diferencia hay entre símbolo e icono? Buena pregunta, tremendo fárrago. Icono viene del griego EIKON, una raíz que habla de imagen, pasada por la coctelera del ruso y el francés. Dice Peirce que es «un signo que representa un objeto en base a una semejanza con cualquiera de sus aspectos». Vamos, que aquí hay una relación real entre lo que se representa (referencia) y el símbolo que se produce (resultado).
En el mundo real, solemos utilizar símbolo e icono como sinónimos (porque vemos señales todos los días, pero pocas veces hablamos de lingüística). Un drama parecido se presenta cuando necesitamos distinguir iconos de pictogramas. Los pictogramas también son símbolos que representan objetos, pero más sintéticos, más esquemáticos, más abstractos.
Para ponerlo fácil, si tienes delante una fantasía, estás viendo un icono. Si es crudo, básico, al punto… probablemente sea un picto. Planteado de otra manera: puedes basarte en un pictograma y engordarlo hasta tener un icono. Ojo, que si te pasas, igual acabas ilustrando.
¿Invisibles? Qué dices
Decimos que son invisibles porque suelen pasar desapercibidos. Porque hay pocos seres humanos que, más allá de interpretarlos, los perciban con toda su fuerza, reflexionen y debatan sobre iconografías… Salvo, quizá, los diseñadores, que soñamos con baterías gráficas y fuentes y paletas cromáticas y necesitamos pasear para decidir si relleno o línea, si con arista o borde redondeado, si blanco y negro o a todo color y ahora… ¿tinta plana o degradados?
«Un buen diseño es un diseño invisible»
Don Norman | The Design of Everyday Things
Los iconos, entendidos en su sentido más amplio, están presentes en todas partes. Y no al trantrán: Alguien los ha pensado (a veces regular). Los verás en aplicaciones, en tu ordenador, en infografías, pero también en la información nutricional de la comida, en las advertencias de los productos de limpieza, en los ascensores, en las señales de tráfico… qué se yo, lo dicho, en todas partes.
Esto ocurre porque son (o deberían ser) universales. ¿Que qué? Que al ver un icono, tú, yo, mi madre, un lapón y un argentino, deberíamos entender más o menos lo mismo, en la pantalla de nuestra cabeza debería aparecer la misma imagen. Con matices, claro. Para entender la representación es necesario que todos conozcamos, aunque sea de aquella manera, a qué se refiere. En fin, su universalidad les da un increíble poder para mejorar la accesibilidad, da igual que hablemos de una web, una app o la señalética de un hospital.
Fuentes iconográficas vs iconos gráficos (jpg, png, gloria-al-svg)
Cuando buscas una buena performance, escalabilidad sin píxeles, poco peso, transversalidad, compatibilidad… el camino es utilizar una fuente iconográfica o formato svg, ya sea desde un recurso ajeno o creados desde cero. Si van a existir en el mundo app o web, son código, así que se cargan a toda velocidad. Si van a vivir en impresiones o aplicaciones gráficas, son vectores, con ampliación y reducción hasta donde tú elijas.
La ventaja de usar fuentes o baterías gráficas de iconos ya existentes, siempre que te asegures de su calidad, es que te quitas de encima, de un plumazo, verificar que todo está bien, con sus ciclos de correcciones y ajustes. Crear tu propia fuente o exportar como svg gráficas creadas por uno mismo parece fácil, pero el código que escupen los programas de diseño es mejorable y crear fuentes que funcionen también tiene su aquel.
Las fuentes son más rápidas en cuanto a carga. Los svgs más controlados y, por supuesto, más fáciles de ejecutar y adaptar a las características particulares de cada marca. Si no quieres encontrarte TUS ICONOS en ningún otro proyecto, el camino es contar con profesionales que desarrollen un planteamiento gráfico personalizado y, a la vez, aseguren su estabilidad.
¿Dónde encontrarlos?
Te has desmayado y lo quieres todo. Quieres las fuentes, quieres los iconos gráficos. Los quieres gratis, los quieres de pago, los quieres solo para ti, los quieres compartir, quieres tatuártelos. Normal, a mi me pasa igual. Ahí va una lista rápida de recursos va-ri-a-di-tos, para que puedas tirar del hilo.
Font icons:
Fontawesome: La fuente iconográfica del CDN de Twitter. Si estás en un proyecto con desarrollo y usas Bootstrap, van de la mano. Sólidos o con línea, incluye marcas (logotipos). Tiene respaldo gráfico (png, svg). Versión free y de pago.
Material Design: La fuente iconográfica de Google. Tienes 5 posibilidades, con distintos acabados. Maravilla: Modulan en simplicidad según tamaños (responsive, alucina vecina). También con respaldo gráfico (png, svg). Free y open source. Fantástico.
We love icon fonts: Un hosting como Google Fonts, pero solo para iconos. Free y open source. Ojo, es público, así que es ideal para husmear y bocetar, pero regulín si tienes que usarlo en producción (digital), puedes tener problemas de seguridad.
Icomoon: Un motor que puedes alimentar con tus iconos para generar una fuente adhoc. Atención: Puede reventar, si no vas con cuidado. Versión free y de pago.
Gráficos:
Ikonate: Su herramienta de customización es intuitiva, fácil y eficaz, que no es cosa menor, si tienes que trabajar con constricciones de marca. Olvídate de importar-retocar-exportar en programas gráficos. Además, aseguran una performance excelente. Open source y gratis-re-gratis.
The noun project: Increíblemente amplio, fantástico para buscar referencias conceptuales. Free (bajo licencia CC, así que tendrás que atribuir autoría) y de pago. Organizado por familias, funciona como un repositorio en red con trabajo de distintos miembros de la comunidad.
Flaticon: Stock free y de pago. La ventaja sobre iStock, Getty Images o similares es que se enfoca en iconos, así que te ahorras el rato de minería buscando y rebuscando en la categoría de ilustración. Freepik también tiene sección, aunque los plantea desagrupados (si necesitas montar una batería, búsqueda infernal y edición asegurada).
¿Estás en pleno síndrome de estocolmo? ¿No eres capaz ni de darle al teclado?
Escríbenos y dinos un concepto, que lo representamos. Buscamos una fuente que encaje con tu proyecto o la desarrollamos desde cero. Iconos, pictogramas, símbolos, en batería o aislados… en Salago hasta ilustramos. ¡Cuéntanos!
