8 sencillos pasos para mejorar el diseño de iconos
Los iconos están por todas partes. Desde íconos de aplicaciones en pantallas de inicio hasta representaciones gráficas que guían a los usuarios a través de un diseño, el diseño de íconos es un gran problema.
Hay un buen arte en el buen diseño de iconos. El elemento no solo tiene que renderizarse de manera reconocible en el tamaño más pequeño, sino que también se pueden escalar buenos íconos basados en vectores para usarlos en proporciones de gran tamaño. Algunos diseñadores incluso están usando imágenes de estilo de iconos para efectos visuales dominantes.
Entonces, ¿por dónde empiezas? Aquí hay una guía para diseñar un mejor ícono en ocho (algo) simples pasos.
1) Comience con una cuadrícula
Un buen diseño de iconos comienza con una base sólida. Una simple cuadrícula de bloques cuadrados es todo lo que necesita para comenzar a dibujar un ícono.
Utilice 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ía diseñar en un lienzo cuadrado, ya que la mayoría de los íconos terminan necesitando encajar en espacios cuadrados. (Esto incluye todo, desde íconos para aplicaciones hasta íconos en diseños de sitios web o para perfiles de redes sociales).
Una vez que tenga una cuadrícula, asegúrese de tener 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 ícono se corte en aplicaciones que puedan tener bordes redondeados u otros tipos de biselado.
El hecho de que su cuadrícula sea cuadrada no significa que su icono deba serlo. Puede ser redondo o más rectangular. Recuerde: cuando diseñe algo que no sea cuadrado, debe alinearse horizontal y verticalmente centrado en la cuadrícula para facilitar su uso más adelante. También le 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 utilizar la cuadrícula para ayudar a dibujar elementos del icono; use líneas de cuadrícula para dibujar ángulos rectos o determinar la ubicación de los trazos dentro del diseño.
2) Construye 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 íconos tienen sus raíces en formas geométricas.
Los círculos, cuadrados y triángulos son las combinaciones de formas más populares. Los usuarios no tienen que pensar en ellos ni cuestionarse qué son. Cada forma es simple e identificable. Luego, se pueden fusionar y conectar para crear otros elementos con el mismo estilo geométrico.
Mira el icono de Dropbox, por ejemplo. No es más que unos pocos cuadrados unidos entre sí para formar una caja. El concepto es creativo, simple y fácil de leer en cualquier tamaño.
Otra opción «geométrica» popular es utilizar una sola letra de imprenta 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, desea crear una forma que sea suya. Esto es más importante si está trabajando con un ícono de identificación de marca. Incluso los íconos 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 en los que pensar.
- Manténgase 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 merecen la pena. Los estilos de iconos planos y casi planos hacen maravillas.
- Trabaja con líneas rectas y ángulos conectados por puntos en la cuadrícula. Las curvas pueden volverse incómodas rápidamente.
- Los mejores iconos funcionan en color, pero también se reconocen como contornos en blanco y negro.
4) Dale mucho espacio
Los iconos necesitan mucho espacio para respirar. Piense en cómo se utilizan los iconos. En particular, si está diseñando el ícono de una aplicación que los usuarios verán sobre 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) Cíñete a los colores de la marca.
No te vuelvas loco con las paletas de colores de iconos solo porque puedes. Si está creando algo para el trabajo de la marca, apéguese a su paleta de colores. Si bien puede diferir de su logotipo de marca normal para un ícono, el color debe permanecer constante.
Si está trabajando en un conjunto de iconos para un paquete de diseño web u otro uso, comience primero con iconos en blanco o negro. Luego agregue color a medida que se acerque a completar el diseño. Al trabajar con elementos simples con alto contraste (negro sobre blanco o blanco sobre negro), realmente se tiene una idea de cómo se ve cada ícono en el espacio. Si funciona independientemente del color, es más probable que funcione bien con el color añadido también.
6. Use divots consistentes
Preste atención a cada detalle en el diseño del icono. ¿Cortaste una esquina en ángulo en el diseño? Entonces considere hacerlo en todas las esquinas.
Si bien estos pequeños detalles pueden no parecer importantes, es posible que ni siquiera sean completamente visibles en los tamaños más pequeños, pueden agregar un estilo clásico a los íconos utilizados en más pantallas gráficas.
Más diseñadores están utilizando iconos como botones en los diseños y para ayudar a guiar la vista entre más elementos de texto. Los íconos cuidadosamente diseñados pueden ayudar a deleitar al usuario y fomentar las conversiones del sitio web.
7. Diseño para el tamaño más pequeño.
Si bien los íconos se pueden usar en casi cualquier tamaño, desea crear el diseño para que funcione en los tamaños más pequeños. Por lo general, los íconos de favicon se cargan con solo 16 por 16 píxeles. ¿Es su icono descifrable a este tamaño?
Si la respuesta es no, tiene dos opciones:
- Empiece de nuevo con el diseño del icono.
- Cree un icono alternativo para espacios pequeños, como favicons.
8) No decores
Finalmente, manténgalo simple. Resista la tentación de decorar el diseño de su icono. Algunas de las mejores aplicaciones todavía sufren de iconos incómodos. (Wunderlist me viene a la mente de inmediato. Solo piense en cuánto mejor se vería sin las sombras y los contornos).
La decoración acaba pareciendo incómoda en estos pequeños espacios. También puede abrumar el diseño. Piense en los iconos como marcas de acento de diseño, no son el enfoque principal. Si un usuario permanece demasiado tiempo en un ícono porque está tratando de averiguar su significado, puede perder la noción de lo que se supone que debe hacer. Los iconos deben indicar 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á comenzando con el diseño de iconos, vale la pena descargar uno de estos conjuntos. Mezcle los iconos en una cuadrícula y sepárelos. Puede aprender mucho sobre cómo crear mejor sus propias formas simples con este ejercicio.
