8 pasos simples para un mejor diseño de icono
Los iconos están en todas partes. Desde iconos de aplicaciones en pantallas de inicio hasta representaciones gráficas que llevan a los usuarios a través de un diseño, el diseño de iconos es un gran negocio.
Hay una bella arte para un buen diseño de iconos. El elemento no solo tiene que representarse de manera reconocible en los tamaños más pequeños, también se pueden escalar los buenos íconos basados en vectores para utilizarlos en proporciones sobredimensionadas. Algunos diseñadores incluso están usando imágenes estilo icono para imágenes visuales dominantes.
Entonces, ¿dónde empiezas? Aquí hay una guía para diseñar un mejor ícono en ocho pasos (algo) simples.
1) Comience con una grilla
El buen diseño de íconos comienza con una base sólida. Una cuadrícula simple de bloque cuadrado es todo lo que necesita para comenzar a dibujar un ícono.
Use el mismo papel cuadriculado con el que trabajó en la escuela primaria para crear bocetos de iconos con lápiz y papel o comience con una cuadrícula de píxeles cuadrados en el software de diseño. Probablemente deberías diseñar sobre un lienzo cuadrado, ya que la mayoría de los iconos terminan necesitando espacios cuadrados. (Esto incluye todo, desde iconos para aplicaciones hasta iconos en diseños de sitios web o para perfiles de redes sociales).
Una vez que tenga una cuadrícula, asegúrese de darse un elemento de espacio en blanco alrededor del perímetro. Esto le dará la flexibilidad suficiente para agregar un fondo si es necesario y evitar que el icono se corte en aplicaciones que pueden tener bordes redondeados u otros tipos de biselado.
El hecho de que su cuadrícula sea cuadrada no significa que su ícono deba serlo. Puede ser redondo o más rectangular. Recuerde: Cuando diseñe algo que no sea cuadrado, deberá alinearse horizontal y verticalmente centrado en la cuadrícula para facilitar su uso más adelante. También lo ayudará a mantener una escala constante para un conjunto de iconos.
La cuadrícula es solo para ayudarlo a crear un marco en el que pueda diseñar de manera consistente. Como beneficio adicional, también puede usar la cuadrícula para ayudar a dibujar elementos del ícono; utilice líneas de cuadrícula para dibujar ángulos rectos o determinar la colocación de trazos dentro del diseño.
2) Construir con geometría
Los iconos suelen ser pequeños, por lo que es importante crear elementos que los usuarios reconozcan de un vistazo. Es por eso que tantos iconos están enraizados en formas geométricas.
Círculos, cuadrados y triángulos son las combinaciones más populares de formas. Los usuarios no tienen que pensar en ellos o cuestionar cuáles son. Cada forma es simple e identificable. Luego pueden fusionarse y conectarse para crear otros elementos con ese mismo estilo geométrico.
Mire el ícono de Dropbox, por ejemplo. No es más que unos pocos cuadrados unidos para formar una caja. El concepto es creativo, simple y fácil de leer en cualquier tamaño.
Otra opción popular "geométrica" es usar una única letra en bloque como parte de la iconografía. Si bien esto no funciona bien para una aplicación generalizada, puede servir como un identificador de marca funcional. Facebook es un ejemplo principal del uso de este ícono en acción.
3) Crea una forma única
Si bien es útil comenzar con círculos y cuadrados, debes crear una forma que sea tuya. Esto es más importante si está trabajando con un icono de identificación de marca. Incluso los iconos aparentemente complicados a menudo comienzan con formas simples que se transforman en algo más único.
Cuando se trata de singularidad, hay algunos elementos de diseño para pensar.
- Mantente alejado de las imágenes. No se verán bien pequeños.
- Manténgase alejado del texto. Los usuarios no podrán leerlo.
- Algunas tendencias valen la pena. Los estilos de iconos planos y casi planos funcionan de maravilla.
- Trabaja con líneas rectas y ángulos conectados por puntos en la cuadrícula. Las curvas pueden volverse incómodas rápidamente.
- Los mejores íconos funcionan en color pero también son reconocibles como contornos en blanco y negro.
4) Dele suficiente espacio
Los íconos necesitan mucho espacio para respirar. Piensa en cómo se usan los íconos. Particularmente si está diseñando un ícono de aplicación que los usuarios verán encima de fondos de pantalla locos en sus dispositivos, el diseño debe establecerse un poco dentro del marco para hacerlo más legible y distinguible.
Dentro de su cuadrícula, cree un borde consistente alrededor del borde. Piense en este espacio casi como lo haría cuando trabaja con un sangrado en el diseño de impresión. El color debe extenderse a esta parte del lienzo, pero es probable que no se vea.
5) Se adhieren a los colores de la marca
No te vuelvas loco con las paletas de colores del icono solo porque puedes. Si está creando algo para el trabajo de marca, manténgase en su paleta de colores. Aunque puede diferir del logotipo de marca normal de un ícono, el color debe ser coherente.
Si está trabajando en un conjunto de iconos para un paquete de diseño web u otro uso, primero comience con iconos negros o blancos. Luego agrega color a medida que te acercas para completar el diseño. Al trabajar con elementos simples con alto contraste - negro sobre blanco o blanco sobre negro - realmente tiene una idea de cómo se ve cada icono en el espacio. Si funciona independientemente del color, hay más posibilidades de que funcione bien con el color añadido también.
6. Usa divots consistentes
Presta atención a cada detalle en el diseño del icono. ¿Cortaste una esquina en ángulo en el diseño? Luego considera hacerlo en todas las esquinas.
Si bien estos pequeños detalles pueden no parecer importantes, incluso pueden no ser completamente visibles en los tamaños más pequeños, pueden agregar un toque clásico a los iconos que se usan en más pantallas gráficas.
Más diseñadores están usando íconos como botones en todos los diseños y para ayudar a guiar los ojos entre más elementos pesados de texto. Los iconos cuidadosamente diseñados pueden ayudar a deleitar al usuario y fomentar las conversiones de sitios web.
7. Diseño para el tamaño más pequeño
Si bien los íconos se pueden usar en casi cualquier tamaño, usted desea diseñar el diseño para que funcione en el más pequeño de los tamaños. Comúnmente, los iconos de favicon se cargan a solo 16 por 16 píxeles. ¿Tu icono es descifrable a este tamaño?
Si la respuesta es no, tienes dos opciones:
- Comience de nuevo con el diseño del icono.
- Cree un ícono alternativo para espacios pequeños, como favicons.
8) No decorar
Finalmente, mantenlo simple. Resista el impulso de decorar el diseño de su icono. Algunas de las mejores aplicaciones aún sufren de iconos incómodos. (De inmediato me viene a la mente Wunderlist. Solo piensa en lo mucho mejor que se vería sin las sombras y el delineado).
La decoración acaba pareciendo incómoda en estos espacios pequeños. También puede abrumar el diseño. Piense en los iconos como acentos de diseño, no son el foco principal. Si un usuario se demora en un ícono demasiado tiempo porque está tratando de descifrar su significado, puede perder la noción de lo que se supone que debe hacer. Los iconos deben señalar interacciones rápidas.
Conclusión
El diseño de iconos puede ser muy divertido si tienes tiempo para perfeccionar esta habilidad. Pero si no eres un experto, no te preocupes. Hay muchas tiendas excelentes que lanzan conjuntos de iconos para que los use en sus proyectos.
Si recién está empezando con el diseño de íconos, vale la pena descargar uno de estos conjuntos. Mezcle los iconos en una cuadrícula y separarlos. Puede aprender mucho sobre cómo crear mejor sus propias formas simples a partir de este ejercicio.