Scroll to top
This post is part of a series called Top Design Tips.
10 Top Tips for Creating Your Own EPUBs and eMagazines
10 Design Tips for Effective Product Mock-Ups

Spanish (Español) translation by Naudys Angulo (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Bueno, ya estoy de vuelta, pero esta vez voy a hacer algo diferente, algo que espero que te resulte interesante.

Hoy, voy a dar un paso atrás de los habituales "tutoriales técnicos en profundidad/consejos rápidos" y hablaré un poco sobre el diseño de iconos desde una perspectiva más general. Voy a compartir diez consejos con ustedes, que se me han ocurrido después de investigar tanto mi trabajo como el trabajo de otros.

Así que si te gusta el diseño de iconos tanto como a mí, coge una taza de café caliente (yo ya tengo la mía), y abróchate el cinturón, ya que en el siguiente artículo, vamos a repasar algunas cosas que podrían cambiar/mejorar tu proceso creativo a la hora de diseñar estas pequeñas ilustraciones.

Además, antes de empezar, quiero que sepas que todos los paquetes de iconos utilizados en este artículo, y miles más, se pueden encontrar en Envato Market, donde diseñadores de todo el mundo suben regularmente nuevos trabajos.

1. Conocer la historia de los iconos

Sé que algunos de ustedes probablemente no estarán de acuerdo, pero el hecho es que no importa lo que hagas en la vida, si eres un diseñador o un ingeniero mecánico (o cualquier otra cosa por esa lógica), siempre debes encontrar el tiempo y la energía para reunir información sobre el tema, ya que no solo le debes tu carrera a esas personas, sino que también descubrirás algunas cosas interesantes y educativas durante el proceso.

Ahora bien, no es necesario que te vuelvas loco en la investigación, pero al menos deberías intentar encontrar una respuesta a estas tres sencillas preguntas:

  • ¿Quién?
  • ¿Cuándo?
  • ¿Por qué?

¿Quién?

El "Quién" se refiere a los primeros creativos que tuvieron la idea de utilizar iconos como símbolos digitales. Este aspecto suele pasarse por alto y no entiendo muy bien por qué, ya que sin los "creadores" originales, el diseño de iconos podría no haber sido lo que es hoy; estas personas sentaron las bases de todo lo que usamos ahora. Así que abre una pestaña y rinde un homenaje leyendo todo lo que puedas encontrar sobre ellos. Probablemente entenderás por qué estas personas son tan importantes para el nacimiento y la evolución del diseño de los iconos y las interfaces de usuario.

¿Cuándo?

El "Cuándo", como probablemente ya habrás adivinado, se refiere a "esa ventana específica en el tiempo" en la que apareció la necesidad real de los iconos como símbolos visuales digitales. Para los que no lo sepan, el diseño de iconos no apareció hasta 1981 con el nacimiento de la Xerox 8010 Star, que fue básicamente el primer ordenador que tuvo una GUI o Interfaz Gráfica de Usuario, lo que significa que la forma de arte en sí no es en absoluto antigua en comparación con otras. Pero tampoco es "joven", ya que ha evolucionado increíblemente rápido a lo largo de los años, y todavía no ha alcanzado su pleno impulso.

¿Por qué?

El "Por qué" es probablemente el más importante de los tres, ya que explicará cómo surgió todo, pero para ser sinceros, todos ellos están profundamente interrelacionados, porque las tres variables se influyeron mutuamente en un alto grado.

Tomémonos un minuto y consideremos lo diferentes que podrían haber sido las cosas si las razones que motivaron el nacimiento de la interfaz gráfica de usuario fueran diferentes, o si las personas que estuvieron detrás del proyecto nunca hubieran nacido. Probablemente seguiríamos usando interfaces de línea; bueno, probablemente no, pero las cosas serían un poco diferentes, ¡créeme!

Ahora bien, no te voy a dejar tan fácil dándote todas las respuestas, ya que no quiero estropearte el viaje. Pero te dejaré un enlace a un hermoso sitio web interactivo que tiene toda la información reunida en un solo lugar y la presenta tan condenadamente bien.

Al fin y al cabo, esto es solo un ejercicio destinado a ayudarte a entrar en contacto con las raíces del diseño de iconos, lo que te aconsejo encarecidamente que hagas, ya que entenderás por qué algunas cosas son como son hoy. Además, comparando lo que se ha hecho hasta ahora, deberías ser capaz de ver cómo han evolucionado los iconos en términos de estilo y complejidad, y captar la dirección hacia la que van las cosas, o quién sabe si incluso cambiar esa dirección produciendo algo nuevo e innovador.

2. Realiza una investigación básica para cualquier nuevo proyecto

Ahora bien, si el primer consejo fue un pequeño y agradable ejercicio que pensé que podías hacer para potenciar tus conocimientos sobre el diseño de iconos, este es, en mi opinión, una regla que deberías intentar cumplir, ya que te ayudará a definir el estilo y el lenguaje visual de los elementos que tienes que diseñar dentro de cada nuevo proyecto.

Viniendo de una formación en ciencias sociales, he logrado entender y apreciar los beneficios de desarrollar y aplicar una fase de investigación previa en casi todo lo que hago, incluso en el diseño de iconos, ya que me permite entender mejor el "tema" y cómo puede afectar tanto a mí como a las otras personas/usuarios finales con los que está destinado a cruzarse en el camino.

Ahora bien, en nuestro caso, el "tema" es en realidad un producto digital que se crea para mantener una conversación visual con los usuarios que al final van a interactuar con él. Esta interacción tiene que ser fácil de establecer y, lo que es más importante, tiene que resultar natural, en el sentido de que el símbolo tiene que hablar con claridad y desencadenar una emoción/palabra específica común en los corazones y las mentes de quienes lo ven, sin importar si es la primera o la trigésima vez que lo ven.

Así que los grandes iconos tienen que ser universales, y tienen que ir más allá de barreras como el género, la raza, la edad, etc., y comunicar el mismo mensaje sin importar quién sea el usuario final.

Ahora bien, como ocurre con cualquier otro producto, los iconos suelen crearse teniendo en cuenta una función determinada. Tanto si se van a utilizar en un sitio web como si se van a mostrar dentro de una aplicación, siempre hay que dedicar algo de tiempo a pensar en las diferentes variables que hay que tener en cuenta a la hora de crear todos y cada uno de ellos, ya que el estilo y la "sensación" se verán afectados casi con toda seguridad por estos factores.

Esto se puede conseguir fácilmente dedicando un par de horas y participando en una fase de investigación en la que hay que averiguar las respuestas a estas tres breves preguntas:

  • ¿Quién?
  • ¿Qué?
  • ¿Cómo?

¿Quién?

El "quién" significa "usuario" y describe todas las variables que lo definen a él o a ella. Esta pregunta es esencial, ya que, según el público al que te dirijas, tendrás que adaptar tus patrones de diseño para que satisfagan algunas condiciones que pueden variar de un proyecto a otro.

En otras palabras, tienes que "averiguar" quién es tu usuario construyendo una lista exhaustiva de características que al final pueden afectar la experiencia de él o ella con los iconos y la propia interfaz de usuario misma.

Normalmente, estas características son:

  • Edad (usuarios jóvenes frente a los mayores)
  • Género (usuarios masculinos frente a femeninos)
  • Raza (diferencias culturales)
  • Educación (usuarios con estudios frente a usuarios sin estudios)
  • Conocimientos técnicos (usuarios expertos en tecnología frente a usuarios que temen a la tecnología)

Tomemos un ejemplo rápido y pensemos en cómo la edad, como variable sociodemográfica, afecta a la forma en que las generaciones más jóvenes interactúan con las interfaces de usuario en comparación con las mayores.

Si tu usuario final es más joven, lo más probable es que sus ojos estén más preparados para lidiar con iconos de menor tamaño, pero para un usuario mayor, las cosas pueden ser diferentes. Con la edad llega el deterioro de la vista, lo que supone un grave problema si has creado una interfaz superpequeña.

Además, existe el problema de que los usuarios mayores tienen miedo de cambiar y utilizar las nuevas tecnologías, ya que les resulta más difícil entender y comprender cómo funcionan las cosas nuevas en comparación con las antiguas que utilizaban en sus días.

El estilo del icono en sí puede ser percibido y aceptado de forma diferente por los usuarios de mayor edad, especialmente en los casos en los que utilizamos colores brillantes y saturados que podrían no ser tan atractivos para ellos, ya que sus ojos reaccionan de forma diferente a estos estímulos en comparación con los ojos de los más jóvenes.

example of bright colors used with darker onesexample of bright colors used with darker onesexample of bright colors used with darker ones
Cómo crear un paquete de iconos para Team Awesome en Adobe Illustrator

Ahora, si añadimos la "educación" como tercera variable, entonces tenemos una división aún mayor, ya que dentro de ambos grupos de edad habrá usuarios que tienen una educación básica y usuarios que no han tenido la oportunidad de asistir a un instituto de aprendizaje adecuado.

Aunque no creo que haya necesariamente una regla general cuando se trata del nivel de educación y la capacidad del usuario para utilizar una tecnología específica, definitivamente hay situaciones en las que los usuarios que nunca se han encontrado con un símbolo específico pueden no ser capaces de entender el significado de un icono, ya que nunca han tenido la oportunidad de conceptualizarlo de esa forma.

example of icons that might be harder to understand due to the symbolistics behind themexample of icons that might be harder to understand due to the symbolistics behind themexample of icons that might be harder to understand due to the symbolistics behind them
Cómo crear un conjunto de iconos de línea inspirados en el grafiti utilizando Adobe Illustrator

Además, la raza es otra cosa en la que tenemos que pensar, ya que algunos símbolos pueden ser leídos de forma diferente por usuarios de otras regiones del mundo dependiendo del contexto en el que se pongan.

Una vez que empieces a encontrar respuestas, verás cómo tu "usuario" va tomando forma, ya que con cada cualidad que descubres, te acercas más a la creación de un patrón definitivo que deberás implementar y utilizar dentro de tu diseño, y por tanto de tu lenguaje visual.

Por otro lado, el "quién" también debe servir para averiguar quién es la persona o empresa que inicia la comunicación, ya que conociendo tanto el origen como el receptor podemos identificar el punto dulce perfecto en el que los iconos y la interfaz de usuario se comunican sin esfuerzo, y lo hacen de forma que reflejan la personalidad de la empresa que está detrás.

Esta última parte se suele hacer creando variaciones personalizadas de los símbolos que ya se están utilizando, para darles un estilo único que la gente pueda relacionar fácilmente con una marca.

¿Qué?

El "qué" significa "mensaje", o más exactamente lo que yo, como creador visual, tengo que comunicar a mi público. Puede ser una simple palabra, o una emoción. Sea lo que sea lo que queramos transmitir a nuestros usuarios, tenemos que asegurarnos de que se hace de una manera lo suficientemente sencilla como para que la persona que interactúa con él lo entienda.

Ahora bien, es bastante obvio que nuestro "mensaje" está directamente relacionado con nuestra audiencia, así que dependiendo de las variables que hayamos identificado en el usuario final, tenemos que hacerlo lo suficientemente sencillo para que pueda interpretarlo y entenderlo.

Así, si nuestro público se compone principalmente de jóvenes que tienen un nivel de educación más alto, eso nos permite crear iconos de aspecto más complejo. Si los usuarios fueran mayores y tuvieran un nivel educativo más bajo, entonces tendríamos que adaptar nuestro lenguaje visual para que nuestros iconos fueran lo suficientemente sencillos como para transmitirles la idea.

El "qué" también puede representar la "misión", o más exactamente el núcleo de un producto, donde en algunos casos se requiere de que los usuarios tengan una base de conocimiento de símbolos visuales básicos para que puedan interactuar con este.

example of simple ui iconsexample of simple ui iconsexample of simple ui icons
Iconos de reproductores multimedia

Por supuesto, hay que intentar construir un lenguaje que sea fácilmente accesible para el público principal, pero a veces hay que obligarles a aprender cosas nuevas, ya que al final les interesa hacerlo.

Un ejemplo perfecto de esto es el uso de un nuevo software creativo/técnico como Adobe Illustrator, AutoCad o cualquier otro en el que, aunque los iconos se hayan creado pensando en la simplicidad y la facilidad de uso, el usuario tiene que ampliar su base de conocimientos visuales familiarizándose con las funciones y los botones específicos disponibles como iconos.

example of icons used in Illustrator that the user has to get familiar withexample of icons used in Illustrator that the user has to get familiar withexample of icons used in Illustrator that the user has to get familiar with
Ejemplo de iconos utilizados en Illustrator

¿Cómo?

El "cómo" significa múltiples cosas, desde "¿cómo va a interactuar mi usuario con mi interfaz de usuario?" hasta las diferentes formas en que puedo adaptar el lenguaje visual para facilitar una interacción más sencilla. Así que el "cómo" nos mostrará el camino que debemos seguir una vez que hayamos encontrado las respuestas a las dos preguntas anteriores. Es nuestra guía que nos permite construir y perfeccionar nuestro lenguaje visual, permitiéndonos mantener una clara conexión con nuestro público objetivo, nuestros usuarios finales, que en este momento deberían tenerlo más claro que nunca.

El "cómo" también nos permitirá definir el estilo y la dirección de nuestros iconos, ya que ahora deberíamos saber si debemos utilizar iconos más pequeños frente a los más grandes, o más complejos frente a los básicos.

Una vez que hayas encontrado las respuestas a estas tres preguntas, puedes pasar a trabajar en los iconos propiamente dichos, ya que deberías tener una base sólida de la cual partir.

3. Averiguar el tema

El tema suele ser el siguiente paso lógico que hay que dar a la hora de crear iconos, y es algo profundamente relacionado con el contexto en el que se van a utilizar. Se puede pensar que el "tema" es una historia que se cuenta a través de los elementos que la componen, los iconos.

Como en cualquier historia, los hechos tienen que estar sincronizados, ya que no puedes nombrar tu historia como "El viejo y el mar" y luego empezar a hablar de naves espaciales y cohetes, eso sería bastante confuso. Así que tu "tema" se reflejará en los iconos cuidadosamente elaborados, que tendrán que estar en contacto con la idea/concepto que hay detrás.

example of christmas themed icon packexample of christmas themed icon packexample of christmas themed icon pack
Paquete de iconos navideños

Dependiendo de para quién estés creando los iconos, ya sea para ti o para un cliente/empresa, verás que los caminos para elegir el tema adecuado son bastante diferentes porque el contexto puede darte más o menos libertad de la que desearías.

Por lo general, si estás creando un paquete de iconos solo para ti, para utilizarlo como parte de tu cartera o para venderlo en línea, tienes plena libertad creativa a la hora de encontrar un tema, ya que nadie más está involucrado en la creación y el intercambio del producto. El problema es que a veces esto puede resultar un reto difícil, ya que es complicado saber exactamente lo que quieres hacer en todo momento.

Lo que suelo hacer cuando me encuentro en un aprieto es coger un papel y anotar cinco palabras clave diferentes que me gustaría transformar en iconos. Una vez que he hecho mi selección, empiezo a pensar en los diferentes objetos que podría incluir en mi paquete y los escribo también, asegurándome de reunir al menos 20 elementos para tener un buen comienzo. A continuación, me tomo un par de minutos para revisar mi lista, ya que normalmente se añaden más elementos que podría haber pasado por alto. Cuando he llegado a un número con el que me siento cómodo, paso al siguiente paso.

Ahora bien, cuando se crea un tema para un cliente, la decisión suele tomarse en colaboración con una o, a veces, varias personas que intentarán presentarte su visión y luego esperarán a que tú propongas algo que cumpla esa visión. La mayoría de las veces esto te resultará útil, ya que los clientes siempre sabrán más que tú sobre su producto/servicio, lo que significa que pueden ser un gran recurso que puedes utilizar para hacer tu trabajo.

Otras veces, el cliente estará totalmente desprevenido y querrá que crees algo similar a lo que el diseñador "X" o "Y" hizo para otra persona. Si alguna vez te encuentras en esa situación, recuerda siempre a tu cliente que ser original es más importante que tener una identidad visual similar a la de otra persona. Es en estos momentos cuando tienes que tomar el control y guiar al cliente hacia un terreno común, en el que no se sienta fuera del proceso de toma de decisiones, y mostrarle por qué tu visión podría funcionar mejor.

4. Definir un estilo para tus iconos

Una vez que tengas un tema, lo siguiente que tienes que empezar a pensar es en el estilo que quieres utilizar para crear tus iconos. Ahora bien, si el "tema" es tu historia, el "estilo" es la forma de contar esa historia, y es realmente importante, ya que te da la oportunidad de diferenciarte de todos los demás, haciendo algo único.

Hoy tenemos dos grandes estilos, no tan diferentes, que son tendencia: los iconos planos y los de línea.

4.1. Iconos planos

El primero es el "plano", que es probablemente lo más fácil de llamar, ya que no tiene todo el brillo y el pulido que el skeuomorfismo tenía, pero en su lugar sigue un principio más simple donde el símbolo es una representación más juguetona de su contraparte o función en la vida real.

Si tuvieras que caracterizar brevemente este estilo, dirías que es fácil de entender, ya que no hay que desarrollar ni dominar ninguna habilidad loca con los degradados, y que es divertido trabajar con él, ya que se puede jugar con muchas formas y colores y conseguir algo realmente interesante al final.

Example of flat style iconsExample of flat style iconsExample of flat style icons
Iconos planos universales

4.2. Iconos de línea

El segundo estilo es "línea", y es una combinación de plano con un sabor de trabajo de línea de la vieja escuela, donde se aíslan las diferentes secciones de la composición mediante la adición de líneas más finas o más gruesas o contornos. En comparación con el estilo anterior, los iconos de línea pueden construirse utilizando tanto formas de relleno como contornos.

example of line icons with fill shapesexample of line icons with fill shapesexample of line icons with fill shapes
Paquete de iconos de Navidad

O puedes hacerlo utilizando solo líneas.

Example of naked line iconsExample of naked line iconsExample of naked line icons
Paquete de iconos navideños de líneas

Otra cosa que es diferente con este estilo es que te obliga a trabajar mucho más con la Herramienta Pluma (P) en comparación con los iconos planos en los que te basarías en formas básicas como rectángulos y círculos que ajustarías usando el panel Buscatrazos en combinación con algunas otras herramientas de ajuste.

Ahora bien, tanto si se trata de "iconos de línea" como de "iconos planos", no importa realmente mientras se crea algo que lleve tu propia firma personal, que si es lo suficientemente buena hará que la gente sepa al instante quién es el autor.

Para mí, el estilo es una suma de tres aspectos diferentes:

  • Color
  • Forma
  • Expresión

Color

El color es una de esas cosas que ayudan a definir un estilo personal, pero no es tan fácil de dominar, ya que hay toda una teoría detrás, que debes dominar, ya que te ayudará mucho. Puedes pensar en el color como el "tono" que estableces para tu historia. Cuanto más brillantes y cálidos sean los colores, más feliz y cálida será la historia.

warm colored icons examplewarm colored icons examplewarm colored icons example
Iconos de colores cálidos

Cambia la calidez de tus colores y entonces el "tono" pasará de ser algo amigable a algo un poco más distante.

Example of cold colored iconsExample of cold colored iconsExample of cold colored icons
Iconos de colores fríos

Por supuesto, esto es solo una pequeña interpretación, ya que hay todo tipo de significados asignados a los colores, que no voy a repasar, ya que hay un artículo muy bien escrito que explica todo lo que necesitas saber en profundidad.

Forma

Ahora bien, si el color establece el "tono" de la historia, la forma define las habilidades del "narrador", ya que hay diseñadores que pueden crear ilustraciones muy detalladas, mientras que otros logran el mismo efecto utilizando formas simples que son igual de expresivas.

Además, la forma también ayuda a establecer el "estado de ánimo" de la historia o, más exactamente, cómo perciben los usuarios los iconos. Se puede optar por una sensación más lúdica, que se puede conseguir utilizando esquinas y formas redondeadas suaves, o por algo más formal, utilizando esquinas y líneas rectas.

También puedes elegir entre formas y líneas que tengan un aspecto más orgánico, que parezcan más naturales, y otras que parezcan más artificiales. Al final, todo depende de ti y de las necesidades del proyecto.

example of icons built using simple shapesexample of icons built using simple shapesexample of icons built using simple shapes
Cómo crear un conjunto de iconos de productividad en Adobe Illustrator

Expresión

La expresión puede ser vista como la "emoción" que tus iconos desencadenan dentro de la mente de la persona que los ve. Como probablemente has adivinado, esto se hace principalmente mediante la combinación de esquemas de color inteligentes con el tipo correcto de formas. Sin expresión, tu estilo sufrirá inevitablemente, ya que no tendrás ese "algo" único capaz de atraer la mente del espectador.

Ahora bien, el problema del estilo es que es algo difícil de encontrar, ya que normalmente las mentes creativas están conectadas de forma diferente, lo que significa que un diseñador concreto puede desarrollar su estilo más rápidamente mientras que otros pueden tener que trabajar un poco más para descubrir el suyo.

Normalmente, esta es la mayor pregunta que se hace la gente en el diseño de iconos, pero la verdad es que no existe una fórmula universal para conseguir un estilo alucinante. Todo es subjetivo para cada uno de nosotros, y solo depende del tiempo y la energía que pongamos en el proceso de ser mejores en lo que hacemos. El estilo no te encontrará hasta que demuestres que eres digno de él, pero créeme, cuando lo haga, estarás sonriendo durante días.

Además, no hay nada malo en probar diferentes estilos, ya que es una buena manera de descubrir en qué eres bueno y qué podrías hacer para mejorar. ¿No me crees? Pues solo tienes que elegir un par de tus diseñadores de iconos favoritos y retroceder hasta sus inicios para ver cómo se desarrolló y cambió su estilo con el tiempo.

Hoy en día, la tendencia en el diseño de iconos se centra sobre todo en el "trabajo de líneas", en el que la composición se hace con colores de relleno y líneas duras y gruesas que delimitan las diferentes secciones que conforman el icono real. La razón de su popularidad se debe principalmente a la simplicidad con la que se puede expresar una idea/emoción utilizando solo un par de formas y colores, en comparación con los viejos tiempos del skeuomorfismo, en los que los iconos se creaban para parecerse a sus homólogos del mundo real lo más posible desde el punto de vista técnico.

example of my personal styleexample of my personal styleexample of my personal style
Cómo crear un conjunto de mini iconos piratas en Adobe Illustrator

Lo que ocurre con el estilo es que siempre está cambiando, ya que los diseñadores siempre encuentran nuevas formas de mejorar lo que se hacía hasta cierto punto, lo que al final lleva a una transición hacia algo nuevo, algo "fresco" que es lo suficientemente potente como para que todo el mundo se adhiera a él. Además, al igual que en la moda, las tendencias icónicas siempre encuentran la manera de revivir por sí mismas, por lo que siempre existe la posibilidad de que veamos una tendencia moribunda volver a la vida en un momento lejano.

5. Crea teniendo en cuenta la variación de tallas

El tamaño, o más exactamente los "tamaños", es probablemente el aspecto más importante que debes decidir, independientemente del proyecto en el que estés trabajando, ya que tus iconos probablemente se utilizarán en una gama de pantallas de diferentes tamaños y densidad de píxeles. Esto significa que tienen que seguir ciertos tamaños predefinidos establecidos por la interfaz o por el propio sistema operativo.

Este suele ser el caso de los sistemas operativos móviles, en los que las empresas responsables de su creación y desarrollo hacen públicas estas especificaciones y piden a los desarrolladores que se adhieran a ellas para mantener la coherencia.

Por lo tanto, tanto si se trata de Android de Google como de iOS de Apple, puedes encontrar fácilmente el tamaño o los tamaños adecuados que necesitas para crear un conjunto de iconos para una aplicación móvil.

Otras veces estarás trabajando en un sitio web o una pieza de software que te dará más libertad, pero eso significa que tienes que tomarte tu tiempo e investigar qué tamaño funciona mejor dependiendo de las diferentes variables que tienes que considerar.

Ahora bien, no es necesario que te sepas de memoria cada variación de tamaño para cada dispositivo y sistema operativo, pero tienes que saber que dependiendo de las necesidades del proyecto, tendrás que adaptarte y utilizar valores predefinidos en lugar de idear unos por tu cuenta.

Por otro lado, si estás construyendo un paquete de iconos para venderlo en un mercado online, también tienes las mismas reglas aquí, ya que normalmente estos paquetes vienen con variaciones de tamaño predefinidas, que empiezan desde 16 x 16 px hasta 256 x 256 px.

size variation examplesize variation examplesize variation example
Iconos de E-commerce y finanzas

Sabiendo exactamente qué tamaños tienes que crear, será mucho más fácil gestionar cualquier proyecto, ya que no tendrás que desconectar el proceso creativo y perder tiempo en hacer una investigación que deberías haber hecho antes de empezar a crear nada.

Como regla general, independientemente del uso que se le vaya a dar a tu icono, empieza siempre por el tamaño más pequeño y utilízalo como retícula base para construir todos los más grandes, ya que cuando se trata de objetos pixelados es más fácil ampliarlos que reducirlos, lo que suele provocar la ruptura del diseño.

Puedes leer más sobre el proceso de escalar correctamente tus iconos en este pequeño tutorial que escribí hace poco.

6. Conseguir consistencia y coherencia usando retículas de referencia

Como regla general, si estás creando un paquete de iconos, tanto más de un icono para un proyecto, el producto tiene que ser coherente todo el camino, de lo contrario el "estilo" terminará siendo inexistente, ya que tus iconos no estarán en armonía visual.

Dicho esto, lo siguiente que deberías empezar a aprender y aplicar en todo tu flujo de trabajo son las cuadrículas de referencia. Por definición, una cuadrícula es una "estructura formada por una serie de líneas guía rectas (verticales, horizontales y angulares) o curvas que se cruzan y que sirven para estructurar el contenido. La cuadrícula sirve como la armazón sobre la que un diseñador puede organizar los elementos gráficos de forma racional y fácil de absorber" (Wikipedia).

En el diseño de iconos, las cuadrículas de referencia suelen ser una necesidad, ya que permiten crear paquetes de iconos cohesionados, lo cual es algo imprescindible, ya que no se puede vender un producto que tenga un estilo desequilibrado en todos sus recursos.

7. Evita siempre el uso de texto dentro de tus iconos

Seamos sinceros: si tu icono no es capaz de contar su historia con solo echarle un vistazo, probablemente has hecho algo mal, ya que el símbolo que hay detrás tiene que superar la necesidad de utilizar cualquier palabra.

Piensa en lo extraño que sería tener un icono de un reloj con la palabra "reloj" escrita debajo de este. Es decir, debería ser obvio que lo que has creado es un reloj sin tener que expresarlo con palabras.

Más allá de eso, piensa en lo difícil que sería crear un icono superpequeño (24 x 24 px) y poner una palabra con un grosor de fuente de 6 px al lado, y luego esperar realmente que el usuario sea capaz de leerlo.

Sí, claro que hay un par de situaciones en las que se puede utilizar una letra o un número, por ejemplo, un icono de documento de texto o uno de calendario, pero suelen ser casos raros, en los que estos símbolos podrían realmente añadirse al estilo y al significado del icono.

example of icons that use text to add to the messageexample of icons that use text to add to the messageexample of icons that use text to add to the message
Iconos que utilizan texto para aumentar su valor

Como regla general, siempre hay que evitar el uso de texto y, en su lugar, encontrar una forma de crear un icono que tenga una voz clara y exprese lo que representa desde el principio, sin necesidad de ninguna ayuda externa.

En lo que respecta a las fotos, hay situaciones en las que se siguen utilizando imágenes, pero tengo que ser sincero, nunca se me ha ocurrido utilizar fotos como parte de un icono. Quiero decir que es simplemente extraño, ya que toda la razón para usar iconos en primer lugar es traducir una función o parte de la realidad en una interfaz de usuario.

8. Intentar alcanzar la perfección de los píxeles

Para aquellos que han leído algunos de mis otros tutoriales, puede que ya sepan que soy un verdadero fanático cuando se trata de crear ilustraciones de píxeles perfectos, ya que soy un firme creyente en un "trabajo bien hecho".

icon created using a pixel perfect foundationicon created using a pixel perfect foundationicon created using a pixel perfect foundation

Independientemente de lo que hagas, ya sea diseño de iconos o relojes mecánicos, hay una línea clara entre los que crean con calidad en mente y los que crean solo por el mero motivo de ganar dinero rápido. Créeme, siempre querrás formar parte del primer grupo, ya que de lo contrario no durarás mucho.

Este es el caso del diseño de iconos, en el que para ser bueno tendrás que aprender a crear para el medio digital asegurándote de que cada pequeña forma y línea se ajusta perfectamente a la cuadrícula de píxeles para que el icono sea lo más nítido y claro posible.

He visto montones de iconos mal construidos que parecen blandos cuando se visualizan en dispositivos con más ppp, y siempre me he preguntado por qué no hicieron las cosas de la manera correcta. Al final, fue esto lo que me motivó a investigar todo lo que pude sobre el tema y a crear un tutorial instructivo que explicara el proceso de creación de ilustraciones con píxeles perfectos.

Si el aprendizaje mediante la observación es más de tu gusto, entonces también hay un buen curso de vídeo que he creado hace unos meses, que te llevará a través del proceso paso a paso de la creación de un conjunto de iconos de píxeles perfectos.

example of icons created using a pixel perfect workflowexample of icons created using a pixel perfect workflowexample of icons created using a pixel perfect workflow
Creación de iconos de pixeles perfectos en Adobe Illustrator

9. Aprende a dominar el arte de la simplicidad

Esto cae bajo el principio de "menos es más", ya que la idea de diseño de iconos es crear un símbolo visual que habla por sí mismo, mientras que es tan simple como sea posible en términos de su construcción general.

La razón es que los iconos suelen venir en paquetes de pequeño tamaño, lo que significa que tú, como diseñador y artista visual, tienes que encontrar la cantidad óptima de detalles que te permitan mantener tu paquete informativo y, al mismo tiempo, perder todo el "peso visual" innecesario posible. De este modo, permitirás que los usuarios tengan más confianza en su capacidad para entender y utilizar tanto el icono como las diferentes funciones integradas en él, creando así una interacción más eficiente.

example of icons built using simplicity as a principleexample of icons built using simplicity as a principleexample of icons built using simplicity as a principle
Iconos de oficina

Algunos podrían argumentar que al reducir el icono a sus "elementos esenciales" se pierde gran parte de su atractivo visual, pero permíteme que discrepe rotundamente, ya que he visto algunos iconos espectaculares que son hermosos en su simplicidad.

Recuerda, al final tu misión como diseñador de iconos es crear algo funcional que sea fácil de usar y que tenga un bonito atractivo.

10. Siempre hay que iterar

Nunca, nunca te detengas en la primera versión de un diseño. Oblígate siempre a crear tantas iteraciones como sea posible hasta que encuentres esa versión dorada que no solo dice mucho, sino que también tiene el mejor aspecto. Al hacerlo, siempre te empujas a ti mismo a crecer y desarrollar habilidades más rápido y, lo más importante, a hacer un mejor trabajo, que es algo a lo que todos y cada uno de nosotros deberíamos aspirar.

No importa si lo haces en un papel normal o en una Artboard de 800 x 600 px. Lo que importa es que explores tantas direcciones como sea posible antes de decidirte por la versión definitiva, porque tus primeras ideas no siempre son las mejores.

Si quieres llevar al máximo tus habilidades y tu imaginación, limítate a seis u ocho iteraciones y da lo mejor de ti en todas y cada una de ellas. Luego, cuando hayas terminado, tómate un par de minutos para analizar y ver cuál hace mejor el trabajo y por qué.

Si consigues tomar esto y convertirlo en una rutina diaria, te garantizo que podrás abordar nuevos proyectos más rápidamente, ya que sabrás desde el principio qué estilo funciona mejor, y mejorarás en la creación de iconos que al final reflejarán tu nivel de profesionalidad.

En conclusión

Ahora, para terminar, todos estos consejos son cosas sencillas que probablemente se les habrían ocurrido a todos y cada uno de ustedes, pero lo que los hace especiales (al menos para mí) es que proceden de mi propia experiencia, de mis propios viajes creativos con sus altibajos para que puedas mejorar la forma en que afrontas la creación de iconos.

Espero de verdad que te hayan resultado útiles, y si tienes algún otro consejo que querías compartir con el resto de nosotros, asegúrate de dejarlo en la zona de comentarios, ya que estoy seguro de que tanto yo como todos los que lo lean te lo agradecerán.

Además, antes de irme les dejo un enlace a todos los paquetes de iconos que he utilizado como referencia, por si quieres echarle un vistazo.