Share
En la última entrega, aprendió sobre la historia del diseño de íconos y cómo ha evolucionado desde representaciones en blanco y negro de artículos de oficina a representaciones isométricas en color, vitrales, hiper-renderizadas, de ... artículos de oficina. En esta entrega profundizaré en el mundo de los iconos y exploraré lo que los iconos significan para nosotros hoy..
Esta publicación es el día 8 de nuestra sesión de diseño de interfaz. Sesiones creativas "Sesión día 7icono - sustantivo (Computadoras) una imagen o símbolo que aparece en un monitor y se usa para representar un comando, como un cajón de archivos para representar archivos - dictionary.com
Entonces, conocemos el significado de "Icono" en el sentido de computación tradicional de la palabra, pero ¿cómo explica esto todos los iconos ilustrativos que vemos hoy? ¿Cómo se supone que una imagen bellamente representada de una tetera, nave espacial o cubo de pollo representa algo dentro de la interfaz de usuario? Hay algunas respuestas a esta pregunta..
No importa lo estricto o inusual que sea su diseño, todos los íconos deben hacerse de acuerdo con las especificaciones; pronto habrá más información al respecto..
A continuación verá un desglose del diseño moderno de los iconos. Algunas personas pueden argumentar que los íconos en el lado de "ilustración" del cuadro no deben considerarse íconos. Esto es en parte cierto, no son íconos tradicionales, sino que son íconos modernos en el sentido de que podrían representar aplicaciones, juegos o un contexto específico..
Los íconos en el lado izquierdo de la gráfica son íconos que serían considerados íconos tradicionales con un toque moderno. Inmediatamente asociamos estos iconos con su función, esto se logra mediante más de 30 años de lenguaje visual, lo cual es un factor poderoso en el éxito de los diseños..
Los iconos que se encuentran en el centro del cuadro son iconos que no son ilustrativos ni informativos, sino una combinación de ambos. El Sobre es tradicional debido a su forma, pero podría percibirse de manera diferente debido a su representación, un diseño como este funciona mejor dentro de un cierto contexto. El Blue Twitter Bird tiene un reconocimiento inmediato por parte de los usuarios de Internet, pero se reduce a una ilustración de un pájaro azul para no usuarios (como mi madre) y la estilística GTalk Bubble también es bastante dependiente de la asociación de marca..
Enlaces a los iconos anteriores (sin ningún orden en particular)
Pump It Up, por mgilchuk, My Breafast, por blink, SNOW.E 2 XP, por RADE8, CS3 iKons - Win, por -kol, iChat Bubble, por Delta909, Icecream icon set, por Miniartx, Batman Mask, por Svengraph, En Spirited We Love, por Raindropmemory, Twitter Bird, por freakyframes, StarWars Vehicles Archigraphs, por Cyberella74, Systematrix Full, por royalflushxx, New Moshii World, por anekdamian, Somatic Rebirth Extras, por The Iconfactory y David Lanham
Cuando diseñas íconos para una interfaz no puedes ir más allá de lo convencional. Compruebe los diseños anteriores para obtener una indicación de cómo acercarse al suyo. Encontrará que la mayoría de los paquetes de software e interfaces de usuario tienen íconos similares, esto se debe a la experiencia del usuario (UX). Si un usuario se enfrenta repentinamente a un diseño que no espera ni se siente cómodo, es probable que se confunda..
Si está diseñando para una plataforma específica, siempre revise las notas de los desarrolladores antes de comenzar, estas le darán una idea del tamaño, la perspectiva y la paleta de colores que debe usar. Puede encontrar enlaces a las notas de los desarrolladores de Apple y Microsoft en la sección "Recursos y lecturas adicionales" al final de esta publicación..
Verde = Bueno - Azul = Ayuda - Amarillo = Alerta - Rojo = Error
Las especificaciones de los iconos se complican con cada nueva tecnología o sistema operativo. Windows y Mac están en una carrera de armas sobre el tamaño del icono, con el icono más grande hasta la fecha que mide 512 píxeles masivos. La tendencia de los iconos grandes tiene mucho que ver con las resoluciones de pantalla modernas, pero también hay una cierta factor de babeo Con un icono gigante, perfectamente renderizado. Mira los siguientes ejemplos si no me crees.!
Iconos de aplicaciones de AppZapper, Billings, Things and Coda para Mac (¡reducido para ajustarse a esta publicación!)
Ahora que te he mostrado el Drool Digno Íconos, pasemos a algunos íconos que yo mismo he diseñado. El siguiente ejemplo es un archivo .ICO destruido en mi vida anterior como diseñador de íconos y interfaces (aquellos que me conocen como LoungeKat probablemente no sabían este hecho). El icono principal de 256 píxeles se hizo en Adobe Photoshop con formas y estilos de capas, luego se redimensionó para cada tamaño individual (64, 48, 32, 16) y se importó a Microangelo Toolset para combinarlo como un archivo .ICO. El ícono de 256 píxeles no forma parte del archivo del ícono en sí, pero se incluye en el software como un PNG transparente que Windows llama si el tamaño es requerido. Esto mantiene el tamaño del archivo hacia abajo.
Como puede ver, he usado algunas variaciones en el diseño dependiendo de la profundidad de color y el tamaño del icono. Los iconos incluyen todos estos tamaños y espacios de color para adaptarse a todas las diferentes formas en que pueden ser vistos por el sistema operativo.
Es importante diseñar cada tamaño por separado, escalar una imagen grande puede hacer que el diseño se vea borroso. Cuando diseñas un ícono de 16px, siempre es mejor pasar a la vista de píxeles. Como puede ver, unos pocos píxeles bien colocados pueden transmitir mucho más de lo que cree. Puede leer información adicional sobre Íconos, diversas especificaciones y recomendaciones de la industria en la guía de íconos de Axialis Software.
Un ejemplo de escalado.
Para obtener una mejor comprensión de los íconos, sugeriría ver la mayor cantidad posible de sistemas operativos, programas, interfaces y portales diferentes. Piense en la forma diferente en que se utiliza el color y la metáfora para cada aplicación. ¿Qué iconos se destacan por ser fáciles de entender (tal vez la carpeta o la papelera te parezcan más reconocibles?), ¿Qué iconos necesitan más explicación? Confíe en mí, se sorprenderá de lo que descubra sobre la psicología detrás del lenguaje visual que usamos todos los días y que a menudo damos por sentado..
Accentsconagua