Share
No es tarea fácil traducir las características "icónicas" de un objeto en algo metafóricamente significativo y reconocible al instante, especialmente cuando el diseño debe ser tan efectivo a 48x48 píxeles como a 256x256!
Un icono memorable y funcional es hermoso, icónico, significativo y funcional. Aquí hay diez consejos sabios sobre cómo crear iconos destacados.
Uno de los aspectos más importantes del diseño de iconos es crear un icono que sea inmediatamente reconocible. Ya sea para representar una rana azul o una lata de lápices, lo que trata de retratar debe ser identificable de un vistazo o el propósito del ícono es derrotado. Un icono debe, por supuesto, ser 'icónico' de la metáfora que representa.
En un tutorial de diseño de íconos en Smashing Magazine, los diseñadores de íconos maestros Vu y Min Tran discuten su proceso detrás del gráfico a lápiz como parte de Bright. Conjunto de iconos.
Dibujar un icono significa dibujar las características más típicas de un objeto para que pueda capturar la acción del icono o representar el concepto y el matiz..
Como sabrás, generalmente hay tres tipos de lápices para elegir:
- Cuerpo en forma de prisma con un extremo recubierto de esmalte brillante..
- Cuerpo en forma de prisma con un borrador fijado al cuerpo del lápiz por un anillo de metal blanco brillante.
- Cuerpo en forma de cilindro sin goma de borrar..
Elegimos el segundo tipo para el diseño del icono porque tiene todos los elementos necesarios, lo que facilita al espectador reconocer la imagen..
A veces es mejor elegir la forma más complicada de un objeto porque hay menos elementos que comparten esas características únicas, lo que hace que el objeto específico que está tratando de representar sea más fácil de identificar. Hay muchos objetos cilíndricos con puntas puntiagudas además de lápices (bolígrafos, marcadores, clavos) y en tamaños más pequeños pueden ser indistinguibles, pero solo un lápiz tiene un cuerpo en forma de prisma con un borrador unido por un anillo de metal blanco brillante. Se vuelve 'icónico'.
Para los creadores de íconos DryIcons, un valor clave en su proceso de diseño es mantener sus íconos bastante simples y básicos en cuanto a estilo, en lugar de apuntar a un estilo definitivo. Esto ayuda a que los íconos sean mucho más versátiles y utilizables en una variedad de proyectos que alguna vez se vendieron como un paquete completo para desarrolladores de software. Si su ícono se ve como en casa en una gama más amplia de configuraciones, su mercado potencial se vuelve más grande.
Con respecto a las tendencias, creemos que es muy importante mantener las cosas simples y básicas, para que puedan cumplir su propósito inicial: encajar en el proyecto de uno, ya que parece que esa era la forma en que naturalmente debería ser. Esa es la única tendencia que seguimos..
Una sugerencia particularmente útil cuando se diseñan varios íconos para un paquete es brindar consistencia entre ellos no solo en estilo sino también en detalles como la fuente de luz. Aunque generalmente es un pensamiento secundario, cualquier desajuste de un icono en el paquete podría afectar seriamente la calidad general de los iconos..
En esta descripción general de los iconos de Windows Vista, se observa cómo la fuente de luz ha cambiado entre los sistemas operativos, pero es coherente con todos los iconos de cada conjunto..
Las sombras en los íconos de Vista son indicativos de una profundidad verdadera y realista tal como existe en cualquier objeto en el mundo real. Los iconos de Vista no tienen las sombras planas de abajo a la derecha que están predeterminadas para los iconos de Windows XP. La fuente de luz también es completamente diferente en los iconos de Vista. Todos los objetos ahora se enfrentan directamente a la fuente de luz. Desde Windows 95 hasta Windows XP, la fuente de luz en todos los iconos siempre proviene de la parte superior izquierda y los objetos se giran en sentido contrario a las agujas del reloj, lejos de la fuente de luz. La ubicación y la iluminación de los íconos de Vista serán completamente opuestas en comparación con Windows XP y los íconos del sistema Windows más antiguos.
Los iconos a menudo deben usarse en una gama de tamaños, por lo que es una buena oportunidad para aprovechar al máximo la naturaleza escalable de los gráficos vectoriales para crear un diseño de gran apariencia que se pueda usar para múltiples propósitos..
Además, con paquetes de software vectoriales como Adobe Illustrator, todas las formas, gradientes y trazos que conforman el ícono se pueden modificar y modificar en cualquier momento, a diferencia de un diseño basado en píxeles que se debe volver a dibujar cuando se realizan cambios..
Este excelente tutorial de diseño de iconos aquí en VECTORUTS repasa el proceso de creación de un gráfico impresionante basado en las formas y gradientes básicos de Illustrator..
Por el contrario, los gráficos vectoriales no son siempre El mejor enfoque para los diseñadores de iconos. Con muchos iconos que requieren gráficos vectoriales de escalas muy pequeñas, a menudo no logran reproducir un renderizado nítido cuando se rasterizan. En estos casos, volver a dibujar completamente el icono en una cantidad de tamaños especificados da el mejor resultado.
Los diseñadores de la interfaz web Firewheel Design destacan este enfoque en su discusión de bitmap vs. vector:
Cuando toma una imagen vectorial, originalmente dimensionada en 24x24 y reducida a 16x16, las proporciones relativas no coinciden. No hay forma de que pueda distribuir uniformemente 24 píxeles de información en 16 píxeles de espacio (recuerde, no existe tal cosa como medio píxel). Así que la imagen se desenfoca..
Tampoco hay forma de que puedas escalar uniformemente 24 píxeles de información en 32 píxeles de espacio. De nuevo, la imagen se desenfoca..Además, si toma la misma imagen vectorial, originalmente dimensionada en 24x24 y la escala hasta 48x48, ahora está duplicando las proporciones. Ya no tienes líneas nítidas de 1 píxel. Tienes líneas gruesas de 2 píxeles. Escala más grande (digamos a 96x96) y esas líneas se vuelven aún más gruesas.
Al igual que en el punto número uno, donde se mencionó que es crucial capturar las características "icónicas" de un objeto, también es importante recordar que puede haber grandes diferencias culturales en el reconocimiento de los artículos cotidianos..
Turbomilk discute esto en su útil resumen de 10 errores en el diseño de iconos con el ejemplo de un buzón. ¿Cuál podría ser la forma y el color reconocidos de un buzón en un país? Puede ser totalmente erróneo para otro..
Siempre es necesario tener en cuenta las condiciones en las que se usará su icono. Un aspecto importante aquí son las características nacionales. Las tradiciones culturales, el entorno y los gestos pueden diferir radicalmente de un país a otro..
Usa imágenes universales que las personas reconocerán fácilmente. Evite enfocarse en un aspecto secundario de un elemento. Por ejemplo, para un icono de correo, un buzón rural sería menos reconocible que un sello postal.
Nota: Preste especial atención a esta regla al diseñar íconos basados en señales de advertencia y tráfico, que difieren país por país..
Si un ícono se crea como un gráfico blando presentado en una forma circular, es probable que se pase por alto. El uso de colores fuertes y una forma interesante que refuerce el objeto ayudará a que el icono se destaque. Recuerde que los íconos rara vez se mostrarán en un fondo de un solo color, en la mayoría de los casos habrá muchas cosas detrás de ellos, por lo que deberán destacarse. Considera también usar brillo y sombreado para crear un efecto final más dinámico.
Jasper Hauser, el diseñador detrás del ícono de Camino, toca esto en una entrevista en la que se discute "¿Qué hace que un ícono sea bueno?"
Básicamente, hay dos aspectos que son la base de un buen ícono: 1) la forma y 2) el uso del color. Si observa el icono de Appzapper verá que 1) tiene una forma original y 2) usa colores irregulares y una combinación de colores irregular. Hacer un círculo azul no se destacará..
Ya se ha mencionado que los diseñadores de iconos deben incluir pequeñas escalas en sus creaciones de iconos. Sin embargo, con el desarrollo avanzado de los diseñadores de tecnología también se debe tener en cuenta el uso de iconos a una escala mucho mayor que la estándar. Un ejemplo de esto ocurre en Windows Vista, donde los iconos pueden escalarse hasta 256px de altura!
En una entrevista con Brian Brasher, un artista de Firewheel Design, se le preguntó:
John Marstall: ¿Cuál es su opinión sobre el cambio a iconos más grandes y la independencia de resolución??
Brian: Los íconos más grandes significan más detalles, lo que significa una experiencia de GUI más rica, así como la eliminación de muchas restricciones que un creador de íconos le ha impuesto para hacer que una imagen sea legible. Desafortunadamente, eliminar esas restricciones significa que muchos de los íconos que se ven bastante elegantes en tamaño completo serán horribles y embarrados a 32x32 y más abajo. Una espada de dos filos. Habrá bajas.
El boceto es un proceso común en cualquier aspecto del diseño y continúa en el diseño de iconos. Lograr una serie de ideas en papel realmente ayuda a desarrollar un producto conciso que se ajuste a los requisitos de su propósito. Debido a que el diseño de un icono debe ajustarse a un conjunto definido de proporciones y dimensiones mientras sigue siendo "icónico" e inmediatamente reconocible, la planificación anticipada es increíblemente importante.
Michael Matas, un diseñador gráfico que ha creado íconos para la plataforma Mac OS X comparte sus propias prácticas de trabajo:
Siempre empiezo en mi pizarra blanca. Intento encontrar buenas y claras metáforas para el icono. Hago un bosquejo de ideas diferentes y por lo general termino cubriendo toda la pizarra blanca. Cuando se me ocurre una buena metáfora, empiezo a dibujar el diseño del icono y el ángulo desde el que lo dibujaré. Realizo la búsqueda de imágenes de Google y la búsqueda de imágenes de Watson y trato de encontrar buenas imágenes para el objeto que estoy dibujando. Descargo todo lo que parece decente y lo abro todo en Photoshop. Creo un nuevo archivo de Photoshop para dibujar el icono y rodear esa ventana con las imágenes que descargué de la Web. Utilizo las imágenes web para ayudarme a tener una idea de cómo se ven la textura y la forma. Pero si puedo, siempre trato de mirar objetos reales para inspirarme..
El trabajo de un icono es representar una acción o idea en forma de un símbolo gráfico. Por lo tanto, las metáforas desempeñan un papel crucial en la traducción instantánea de esa acción o idea al usuario. Al encargar un nuevo conjunto de diseños de íconos para Macinstruct, el equipo contempló una variedad de metáforas para representar la dificultad de sus tutoriales en línea:
Quizás los íconos más difíciles de decidir fueron nuestros indicadores tutoriales. Necesitábamos una forma de clasificar la dificultad de nuestros tutoriales, y queríamos una manera realmente creativa y efectiva de mostrar esto. Después de un par de días de lluvia de ideas, se nos ocurrieron las siguientes ideas:
- Termómetros: los tutoriales fáciles son fríos, los tutoriales medianos son medianos y los tutoriales difíciles son calientes.
- Semáforos: verde para fácil, naranja para medio y rojo para duro.
- Cinturones de karate: cinturones blancos, naranjas y negros, niveles de habilidad de karate de ala.
- Puzzles: Un puzzle con 1 pieza a un lado. Las piezas más pequeñas equivalen a más difícil..
- Temas de aviación: Gafas para casco de cuero viejo y fácil, y gafas para casco mediano, y casco y máscara de aire de piloto de caza para más.
- Imágenes de ingeniería: un manual y una placa de circuito, una placa de circuito y algunas herramientas, y un osciloscopio.
Al final, rechazamos todas estas ideas para un voluntario de nuestro propio Ric Getter. Todos estuvieron de acuerdo en que usar protectores de bolsillo para indicar la dificultad era una gran idea!
Accentsconagua