7 principios para un diseño de iconos eficaz

Antes de abordar el diseño de iconos, hay algunas directrices y principios que vale la pena estudiar. Si quieres crear diseños de iconos eficaces, debes adoptar un enfoque holístico de cuestiones como el público, el tamaño, la simplicidad, la iluminación, la perspectiva y el estilo. Este artículo te ofrece un buen punto de partida para crear iconos que funcionen bien y encajen a la perfección en tus diseños.

1. Enfoque holístico del diseño de iconos

Los iconos encajan en los sistemas gráficos. Tanto si se diseñan para aplicaciones de escritorio como para sitios web, un icono es uno de los muchos elementos gráficos que deben funcionar juntos de forma armoniosa. Aplica esta lógica también a los conjuntos de iconos. Los iconos pueden ser apreciados por sus valores estéticos individualmente, pero no funcionan solos. Evalúa tus diseños de iconos en relación con el sistema gráfico en el que los utilizas. Asegúrate de que cada icono se diferencie de los que le rodean, sin dejar de funcionar como un todo.

En el artículo Diseñando un lenguaje icónico de Turbo Milk, el autor Yegor Gilyov afirma: "Si tienes que dibujar varios iconos, tienes que pensar en las imágenes para todo el conjunto de iconos antes de proceder a ilustrar las actividades". Este es uno de los dos puntos principales de este artículo sobre el diseño de iconos. Continúa explicando que no planificar desde el principio cómo funcionará todo el conjunto de iconos garantizará una enorme pérdida de tiempo, ya que el rediseño será inevitable.

2. Considera tu audiencia

Tus consideraciones son diferentes si diseñas una intranet para una pequeña empresa, en lugar de para un producto que puede venderse a nivel internacional. Al crear iconos, las consideraciones culturales son importantes. Los símbolos pueden ser diferentes para los elementos comunes que puedes utilizar en tus diseños.

Turbo Milk tiene otro gran artículo llamado 10 errores en el diseño de iconos. En él, señalan algunos ejemplos claros de dónde se equivocan muchos diseños de iconos. En el punto siete del artículo hablan de las características nacionales y sociales. "Siempre hay que tener en cuenta las condiciones en las que se va a utilizar el icono. Un aspecto importante son las características nacionales. Las tradiciones culturales, el entorno y los gestos pueden diferir radicalmente de un país a otro". Siguen poniendo un ejemplo de cómo los buzones de correo difieren mucho entre países. Apple utiliza el mismo ejemplo en sus Guías de Interfaz Humana.

Así que diseñar un icono internacional basado en un buzón rural de un país es una mala idea, un ejemplo concreto de lo que no se debe hacer. Señalan cómo el icono de Correo de Apple es más reconocible ya que las estampillas tienen más universalidad cultural.

3. Diseña en función del tamaño en el que se utilizará el icono

Si decides hacer un icono vectorial en Illustrator, existe la tentación inherente de escalar el diseño y tratar de utilizarlo en cualquier tamaño. Esto no funciona con los iconos. Lo que se ve bien a 512px parece una mancha borrosa a 16px. Los iconos deben tener un diseño base que se utilice como punto de partida, pero cada tamaño de salida debe tener su propio diseño optimizado.

Sin embargo, el diseño de iconos no es un medio de solución escalable con un solo diseño. Esta es una de las razones por las que Photoshop es una solución tan buena como otros programas. Los diseñadores que hacen iconos en Illustrator, igualmente van a retocarlos en Photoshop, o van a tener que atravesar algunos obstáculos para conseguir que sus iconos se vean bien en tamaños pequeños cuando se exportan directamente desde Illustrator. Así que no te creas el mito de que el diseño de iconos es un medio puramente vectorial. Al fin y al cabo, estamos produciendo píxeles.

También hay herramientas vectoriales en Photoshop y máscaras que se pueden aprovechar para igualar el campo de juego escalable entre los programas. Si estás igualmente familiarizado con Illustrator y Photoshop, es posible que encuentres un flujo de trabajo que vaya bien entre los dos programas. Considera la posibilidad de utilizar objetos inteligentes. También puedes considerar el uso de un complemento de Photoshop llamado Icon Builder.

El enfoque adoptado para los iconos pequeños y el diseño de iconos grandes es inmensamente diferente. Firewheel tiene un buen artículo que cubre el tema del escalamiento llamado Diseño de Iconos: Mapa de bits vs. Vector. También, revisa este artículo sobre el Tamaño del diseño de iconos en Mezzoblue. Cubre algunos problemas inherentes al diseño de iconos para tamaños pequeños.

4. Mantén los iconos simples e icónicos

Ahora que los sistemas operativos disponen de iconos de gran tamaño (512px por 512px es un tamaño gigantesco para un icono), crece la tentación de ser ilustrativo con los diseños de los iconos. Aunque un nivel de realismo puede añadir interés a un diseño de icono, no debería sustituir su capacidad de funcionar de forma sencilla y eficaz.

Smashing Magazine tiene un gran resumen de las Guías de Interfaz Humana de Apple en el Diseño de Iconos. La sección sobre el Realismo en Aqua hace algunos buenos comentarios sobre las limitaciones del realismo en el diseño de iconos y señala cuándo es necesario el simbolismo. En esta sección se discuten los problemas que existen entre el realismo y la simplicidad en el diseño de iconos.

Intenta no complicar en exceso el diseño de los iconos. Hay que tener cuidado con colocar demasiados elementos en un diseño de icono, o con ilustrar demasiado un icono. Seguro que todo el mundo está familiarizado con el símbolo común de los iconos RSS. Mira el siguiente ejemplo de Smashing Magazine. Estos iconos rozan la ilustración pero mantienen las fuertes cualidades simbólicas del icono. Sin embargo, ilustrar y adornar demasiado los iconos da lugar a un menor reconocimiento, especialmente en tamaños pequeños. Así que hay que tener cuidado con poner demasiado en el diseño de un icono.

Hay ocasiones en las que el valor estético del icono puede compensar la pérdida de parte de su impacto icónico. Siempre se trata de un juicio de valor, y las necesidades varían con cada diseño. Compara uno de los conjuntos de iconos que aparecen a continuación con un diseño de iconos RSS más sencillo, como el que aparece aquí en Psdtuts+. Es necesario equilibrar la incorporación de los iconos al estilo del diseño de tu sitio web. Quieres añadir interés y complementar el diseño, pero no perder el impacto icónico del icono.

Los iconos que se muestran a continuación son muy atractivos. Sin embargo, hay que decidir si la pérdida del reconocimiento rápido del símbolo vale la pena por el diseño añadido alrededor del mismo. En un tamaño grande, funciona bien, ya que son similares a las ilustraciones. Sin embargo, en tamaños más pequeños, puede ser preferible una solución menos recargada.

5. Proyecta una iluminación, unos reflejos y unas sombras coherentes

Es importante que el realismo que añadas a tus diseños funcione de forma coherente. Si utilizas una fuente de luz que viene de una dirección, cíñete a ella. De lo contrario, te arriesgas a perder el diseño integrado de tus iconos. Ten en cuenta también la fuente de luz del diseño en el que se colocarán tus iconos. Si la fuente de luz de los iconos no concuerda con el diseño de la página web o de la aplicación en la que los vas a utilizar, el diseño parecerá amateur.

En la Guía de Experiencia de Usuario de Windows Vista hay una sección sobre la iluminación y el sombreado de los iconos. La guía ofrece normas muy específicas para el conjunto de iconos de Vista. Esto proporciona normas más exigentes para los diseñadores de iconos y garantiza un sistema de iconos unificado. A continuación, una regla específica para ver un ejemplo: "Utiliza las sombras para elevar visualmente los objetos del fondo, y para hacer que los objetos 3D parezcan asentados en sus bases, en lugar de flotar torpemente en el espacio". Hay muchas más reglas en esta guía.

6. Utiliza una perspectiva limitada

El rango de perspectiva dentro de tu conjunto de diseño de iconos debería funcionar en conjunto. Si los iconos se miran de frente, sigue con esa perspectiva. Si colocas uno en un ángulo específico, entonces asegúrate de que todos los iconos funcionen de esa manera. Imagina una cámara colocada desde un punto de vista específico, apuntando a todos los objetos desde la misma perspectiva. Esto ayuda a mantener la coherencia en los diseños de los iconos.

Sin embargo, un sistema de diseño a gran escala, algo así como un sistema operativo de software, puede necesitar más flexibilidad que eso. Apple cubre la perspectiva de los iconos en sus Guías de Interfaz Humana. Tienen un uso más flexible de la perspectiva. "Las distintas perspectivas se consiguen cambiando la posición de una cámara imaginaria que capta el icono". La imagen de abajo muestra la diferencia de perspectiva entre un icono de aplicación (arriba) y un icono de barra de herramientas (abajo).

7. Crea conjuntos de iconos con un estilo coherente

La iluminación y la perspectiva ciertamente contribuyen al estilo de un icono, aunque hay muchos otros factores que pueden contribuir al estilo también. Si estás tratando de incorporar tu icono a un diseño de sitio web de estilo grunge, es probable que añadas textura al estilo del diseño del icono.

Los conjuntos de iconos tienen características únicas que los hacen destacar. En las Guías de iconos de Echo, el conjunto se describe como "un nuevo conjunto de iconos propuesto para su inclusión en Fedora". Diseñados con una perspectiva dinámica, los iconos Echo pretenden parecer más realistas a la vez que mantienen un diseño limpio y sencillo utilizando un alto contraste y puntos de colores vibrantes". Otra forma en que este conjunto destaca es a través del uso consistente de los contornos. Véase un ejemplo en la siguiente imagen.

Comenzar con el diseño de iconos

Diseñar iconos para sitios web es una buena manera de iniciarse en el diseño de iconos. A menudo solo se necesitan unos pocos iconos para el diseño de un sitio. Comienza de forma sencilla con un pequeño proyecto de diseño de un sitio web en el que se te pida que diseñes solo una cantidad reducida de iconos. Es una buena manera de adquirir experiencia en el diseño de iconos.

Comienza el proceso de diseño de iconos con una investigación. Considera la metáfora simbólica común utilizada para describir el icono que quieres hacer. Haz tantos bocetos como sea necesario para fijar el concepto. Complementa el estilo de los diseños de iconos con el diseño del sitio web en el que los utilizarás. Ten en cuenta el color, la perspectiva y el aspecto gráfico del sitio.

Hicks Design tiene una rápida presentación en SlideShare sobre el diseño de iconos. Una sección de la presentación cubre su proceso de diseño. Da algunos excelentes ejemplos visuales. A continuación se muestra un ejemplo de la etapa de boceto.

Conjuntos de iconos profesionales inspiradores

Una vez que hayas creado un conjunto único o pequeño de iconos para sitios web, puedes plantearte crear iconos para aplicaciones. Una vez que hayas hecho esto unas cuantas veces, puede que te pique el gusanillo de crear un gran conjunto de iconos profesionales. La venta de iconos puede ser una actividad rentable para un diseñador. Si creas un conjunto único y profesional, puedes venderlo. A continuación se presentan dos conjuntos de iconos profesionales de diseñadores que sirven como grandes fuentes de inspiración.

Conjunto de iconos Classic Pack de Icon Drawer

Este conjunto de iconos tiene una combinación de profesionalidad, excelente elección de símbolos, realismo caricaturesco y diseño divertido. Cuando Jesse Bennett-Chamberlain de 31three utilizó estos iconos para el rediseño de Expression Engine, me quedé impresionado. Es un estupendo diseño de sitio web, y los iconos encajan muy bien con el estilo.

La familia Chalkwork de Mezzoblue

"Chalkwork es un conjunto visualmente unificado de iconos libres de derechos cuidadosamente diseñados. Construido para cubrir algunas de las necesidades de iconos más comunes de los diseñadores web y de software, toda la familia Chalkwork ofrece cientos de metáforas relacionadas con la informática e Internet en un estilo visualmente consistente en 3 tamaños diferentes en hasta 6 formatos de archivo." Se trata de un conjunto de iconos bien diseñado por Dave Shea.

Tutoriales de iconos de Psdtuts+

Sumérgete a fondo en el diseño de iconos. Puedes empezar con algunos proyectos aquí en Psdtuts+ para mojarte los pies. Justo esta semana, publicamos un tutorial de diseño de iconos de Constantin llamado Cómo crear un diseño de icono de birrete brillante. Anteriormente publicamos un tutorial de la sección PLUS de Fabio sobre el diseño de iconos llamado Nuevo Tutorial Plus-Cómo crear un icono tipo "Máquina del tiempo". Fabio también publicó un tutorial hace un tiempo llamado Práctico iconos Web 2.0 en Photoshop.

Vaclav ha publicado un par de excelentes tutoriales aquí en diseño de iconos llamado Ilustrar un icono de cono de tráfico en Photoshop y Crear un icono de casco amarillo genial. Si nos remontamos al pasado, puedes consultar el tutorial de Collis titulado Creación de un escudo en Photoshop. Todos estos son excelentes puntos de partida para empezar o practicar el diseño de iconos.

Conclusión

Anímate cuando el próximo proyecto de un cliente requiera la creación de iconos. O practica la creación de iconos a través de nuestros tutoriales. Una vez que domines estas técnicas, intenta crear un pequeño conjunto de iconos. O hazlo a lo grande y crea un conjunto completo para revenderlo. Indícanos otros recursos de iconos en los comentarios.

Recursos adicionales

Si estás interesado en obtener ayuda con el diseño de los iconos de tu aplicación, Envato Studio tiene una gran colección de diseñadores de iconos de aplicaciones que quizás quieras explorar. También puedes echar un vistazo a los iconos de Envato Market.