Los iconos, aunque suelen ser un elemento que pasa desapercibido en las interfaces, es parte importante de un sitio web o aplicación. Como gráficos, los iconos representan un objeto y pueden ayudar a explicar un concepto más rápidamente.
Aunque los iconos son figuras sencillas tal vez puedes pensar que también es fácil crear tu propio paquete de iconos, ya sea porque deseas ofrecerlo de forma gratuita, venderlo en un mercado online o utilizarlo en algún proyecto web. Sin embargo, crear iconos no es una tarea tan sencilla como imaginabas y en muchos casos aprender a sintetizar objetos puede ser una tarea complicada.
Si recién estás pensando en diseñar iconos para tus proyectos, te listamos una serie de consejos para crear iconos.
Haz uso de una cuadrícula
Trabajar con una cuadrícula simple podría hacer maravillas por el diseño de tus iconos. Incluso podrías empezar desde el mismo boceto si utilizas una hoja cuadriculada, tal como se suele utilizar en las escuelas. De esta manera, al trasladar el diseño a un formato digital puedes hacerlo con mayor exactitud y no debes preocuparte mucho de las proporciones ya que basta con ver el boceto en papel para verificar cuanto espacio ocupa una de las líneas que forma la figura.
Otra recomendación a tener en cuenta es considerar que la mesa de trabajo sea cuadrada, ya que la mayoría de iconos necesitan ser dispuestos en espacios cuadrados. Si comienzas a observar diversos iconos de aplicaciones te darás cuenta que gran parte de ellos están colocados en espacios con proporciones iguales tanto en ancho como en alto, es decir, se colocan dentro de un cuadrado que en ocasiones puede ser visible pues el icono posee cierto fondo. Un ejemplo común suelen ser los iconos de aplicaciones móviles.
Utiliza figuras geométricas en su construcción
Ya que en los iconos se utiliza la síntesis y deben ser sencillos para que el usuario los reconozca rápidamente, es una buena idea hacer uso de figuras geométricas al construir tu icono. Círculos, cuadrados y rectángulos son figuras que tus usuarios reconocen fácilmente. Adicionalmente, puedes uso de otros polígonos no tan comunes para tus iconos, pero usualmente con las formas más básicas es suficiente para la construcción de un buen icono.
Al combinar o conectar estas figuras puedes crear formas totalmente nuevas de elementos que son fácilmente reconocibles para tu usuario. Por ejemplo, un smartphone es creado a partir de dos rectángulos con bordes redondeados: uno para la pantalla y otro para la carcasa. Se suele añadir un círculo en la parte central baja. Este icono es común por representar un móvil iPhone, pero en otros contextos su significado se extiende para ser una representación de los dispositivos móviles.
Emplea los colores representativos del sitio web o la marca
Cuando empieces a trabajar en iconos es probable que empieces con dos colores: blanco y negro. Blanco es el color de fondo, mientras que negro se emplea como relleno. Empezar con estos dos colores te ayuda no complicarte con la combinación de colores en esta fase del proceso.
Más adelante, cuando los iconos ya estén terminados y quieras añadirlos a tu sitio web puedes comenzar a pensar en colores. Y de hecho es mucho más sencillo pues ya tienes la combinación de colores del sitio web o la marca. Es necesario que mantengas todos los elementos del sitio coherente, así que aplicar la combinación de colores del sitio es la opción común.
Sé coherente con el diseño de tus iconos
En el punto anterior mencionamos que es importante mantener coherencia con la marca y por esta razón debemos usar la combinación de colores establecida para el sitio web en nuestros iconos. Pero eso no es todo lo que deberíamos tener en cuenta para mantener la coherencia. Si estás creando un paquete de iconos entonces es importante que estos tengas ciertas características específicas. Un ejemplo es hacer que todos los iconos posean bordes redondeados para que se vean como parte de un mismo grupo.
Recuerda que hay una serie de características que pueden tener tus iconos y si los están diseñando mucho depende el propósito de los mismo y también la identidad visual de la marca.
Olvídate de las decoraciones
Ya que los iconos son síntesis de elementos y deben ser fácilmente reconocidos, debes mantener la decoración al mínimo y sólo considerar las características más representativas del elemento al cual deseas hacer síntesis. Finalmente de eso se trata una síntesis de objetos.
Las síntesis no solo poseen la ventaja de ser reconocidos fácilmente, sino que mientras más simple sea la forma, mejor se verá en menor tamaño y menos dificultades tendrán los usuarios para reconocer la figura. Esto es esencial en la actualidad pues obviamente en dispositivos móviles la pantalla es de menor tamaño y una página web o aplicación se adapta a esta dimensiones.
1 Comment
Traducir las características “icónicas” de un objeto en algo que es metafóricamente significativo e instantáneamente reconocible no es una tarea fácil – sobre todo cuando el diseño debe ser tan eficaz en 48×48 píxeles como en 256×256!
Un icono memorable y funcional es hermoso, icónico, significativo y funcional.