CoComo ya sabemos, los iconos son una herramienta visual muy potente, puesto que sirven para dar una información clara y comprensible de acciones y funciones específicas. Por ello es imprescindible que sean diseñados de forma correcta, siguiendo algunos consejos básicos para que sean efectivos:
Los iconos deben ser concisos y comunicar claramente la función para la que se está utilizando. También es importante que sean fáciles de reconocer y que el concepto esté claro.
Para un mismo set, deben estar en sintonía entre ellos, con un mismo look and feel y siguiendo las mismas reglas de diseño.
Cuando los iconos se usan de manera correcta y está bien diseñados mejoran claramente la navegación y forman parte de una experiencia de usuario de éxito.
Para el mundo digital, tanto en web y app, los iconos aportan mucho más. Y es que no todas marcas son iguales, y como cada empresa y cada marca tiene su seña de identidad, los iconos tienen que acompañar y estar en sintonía. Con los iconos podemos aportar a la estética de la web. Es importante que los iconos tengan una coherencia entre ellos y con la marca y la web.
En resumen, los iconos juegan un papel muy importante, por ello no hay que descuidar ningún detalle.
Pero cuando ya no cuentas con uno o dos iconos en tu web, si no que tienes todo un paquete de iconos, lo más eficiente sería cargar una fuente de iconos, donde cada carácter está vinculado a un icono diferente.
Al igual que fontwasome o LineIcons, podemos hacer nuestra propia tipografía iconográfica. Utilizar en nuestra web una tipografía de iconos está llena de ventajas.
Cargaremos un solo archivo para introducir infinidad de iconos, lo que hará que nuestra web sea más eficiente en el tiempo de carga. Podremos no solo escalar los iconos fácilmente y sin pérdida de calidad dependiendo del tipo de pantalla, si no que nos permite el cambio de color a través de atributos CSS. De igual manera podemos imponerles sombras y degradados. Y por último y no menos importante, el cambio de iconos será ágil y fácil.
Ahora vamos a aprender con este pequeño tutorial, como podéis crear vuestra propia tipografía de iconos al modo de fontawsone
¡EMPEZAMOS!
Primero selecciona los iconos que quieres introducir. Tienes varias librerías donde puedes descargar los iconos que necesitas, como Flaticon, Iconfinder o Icon-icons, desde donde podrás descargarlos en formato svg. Si prefieres trabajar en modo experto, puedes diseñarlas con herramientas de diseño vectorial como illustrator y exportar las mesas de trabajo a svg. Recuerda que cada icono tiene que ser un archivo svg diferente. Crea tu librería como quieras, incluso mezcla métodos o iconos de diferentes bancos, pero nunca olvides los consejos que debamos al inicio de este tutorial.
Una vez que tengas preparada tu librería de iconos, en la que te aconsejamos que siempre cuentes con iconos básicos como los de navegación, menú, teléfono, redes sociales y otros genéricos, vamos a empezar a montarla.
En este tutorial vamos a utilizar IcoMoon App . Una app online fácil e intuitiva, pero sobre todo efectiva.
Empezaremos con un nuevo proyecto. En la primera página aparecerán los iconos básicos de la app que puedes añadir. Pero en nuestro caso solo importaremos iconos de nuestra propia librería que ya teníamos preparada anteriormente. Así que seleccionamos el set existente y lo borramos en el menú sándwich.
Después en la barra del menú superior a la izquierda hacemos clic en Import icons. Seleccionaremos los archivos svg de nuestros iconos previamente diseñados y colocados en nuestra librería.
En el menu superior tenemos cuatro opciones diferentes: selecionar, borrar, mover y editar. Con la primera opción de este menú seleccionamos todos los iconos que queremos meter en la tipografía.
Se abrirá una nueva página donde aparecerán los iconos que habíamos seleccionado y que serán los que formarán parte de nuestra nueva tipografía. En el menu superior encontramos preferencias, podremos asignarle el nombre que queramos a la tipografía.
Muy interesante es que nos dá la posibilidad de cambiar el código Unicode, que lo encontraremos dentro del menú superior en el botón de Resert. También podremos cambiar el nombre de los iconos, lo cual es muy interesante para poder encontrarlos fácilmente.
Una vez que hemos ajustado todos los iconos, podemos exportarlo en el menú inferior y obtendremos una carpeta con nuestra tipografía.
Ya puedes añadir tu fuente al proyecto web designado.
Marian Sadornil, es directora creativa de Marketing digital en Indicus y es una apasionada de la fotografía profesional y de los gusanitos rojos.