3

Aprende a crear la iconografía perfecta

2411Puntos

hace 5 años

Llevas un par de días trabajando en una interfaz increíble; ves que todos los elementos funcionan de manera natural. Es el momento de integrar un lenguaje iconográfico a tu trabajo. Te enfrentas a dos posibles caminos: buscar un set de íconos que no se pensaron para tu interfaz, pero puede que se acomoden; o te puedes aventurar a hacerlos tú mismo y darle ese push extra que le hacía falta a tu diseño. En este artículo, revisaremos un par de puntos importantes para que puedas conseguir mejores resultados cuando te aventures a crear tu propio set de íconos.

Antes de empezar

Conseguir excelentes resultados a la hora de diseñar un producto digital va mucho más allá de tu stack personal de trabajo. Crear productos digitales exitosos depende de saber plantearse las preguntas correctas antes de considerar dar un solo clic.
¿Cómo? ¿Para qué? ¿Por qué? (¡Enfócate!)
Estas simples preguntas no sólo te ayudarán a sentar una base para tener claro hasta qué punto quieres llegar; también te trazarán ciertos límites y los límites por naturaleza te ayudarán a encontrar soluciones efectivas.

1. Conceptualización

Consideremos la fuerza que tienen los emojis ahora mismo. Facebook tomó la decisión de complementar su acción de like con las reacciones. Estas, al final del día, ayudan a complementar la forma en la que los usuarios se comunican entre ellos en su plataforma; tumbando la pared del idioma nativo y jugando con el significado que ya tienen cierto tipo grafismos en nuestro imaginario colectivo. Este es el núcleo y alma de la iconografía. Entender cómo asociamos imágenes a acciones o sentimientos para generar una conexión más profunda con el lector (receptor). Un ejemplo puntual es el caso del ícono de guardar, que se representa como un disquete de 3 ½ . Hace ya varios años esta forma de guardar es obsoleta (por la poca capacidad que tenían los disquetes) pero en algún punto se adaptó a las diferentes GUI y eventualmente, se integró en el lenguaje visual con el que interactuamos día a día. Por esta misma razón, a nivel semiótico del lenguaje, ya existen ciertos íconos muy establecidos cuya comunicación es tan efectiva que no vale la pena tratar de darle vueltas para representar esa idea de una forma distinta.iconografia1

2. Cohesión y contexto (iOS y Android)

Ser consciente del formato en el que vamos a mostrar nuestros íconos es importante. Es distinto tanto en tamaño como en la forma en que se va a renderizar en pantalla, iOS, Android o desktop. Esto mismo pasa con las tipografías en los diferentes dispositivos y navegadores. Si estamos pensando en móviles, Apple y Google nos ofrecen cada uno en sus guías de diseño (Human Guidelines y Google Design Guidelines respectivamente) un apartado especial, de la forma en la cual, cada uno le da un tratamiento especial. Otro punto importante a considerar en este apartado es el estilo gráfico (esqueumorfismo, lineal, flat, etc.). Nuestra tarea como diseñadores acá, es explorar distintos caminos y elegir cuál se acomoda mejor en nuestro proyecto. iconografia2

3. Grids, Grids, Grids (Retículas, Retículas, Retículas)

Como en cualquier ejercicio de diseño, para crear nuestro íconos debemos aventurarnos (obligarnos) a tener una retícula. Para la creación de íconos, recomiendo que esta no sea muy compleja, ni tampoco ser estrictos y meticulosos. Repetir formas (en tamaño y característica) entre los distintos canvas para ayudarnos a construir cercanía visual entre uno y otro. iconografia3

4. Funcionalidad sobre valor estético

No debemos olvidar que, al final del día, el objetivo principal de un ícono es comunicar con claridad. En el diseño no existen puntos medios, algo funciona o no funciona. Procura siempre buscar el mejor camino en donde el lenguaje gráfico vaya muy de la mano del estético. iconografia4

Por último:

Procura resolver de forma holística cada uno de los problemas de interfaces a los que te debas enfrentar. Los resultados serán en extremo distintos a aquellos proyectos que no contengan tras de sí una meticulosa planeación.
Jennifer
Jennifer
Hell_McNamara

2411Puntos

hace 5 años

Todas sus entradas
Escribe tu comentario
+ 2