Saluda a la nueva imagen de los íconos de las apps

Hola, soy Marie y soy diseñadora en Apple. Hoy les presento una apariencia totalmente renovada de los íconos de las apps. En esta sesión, veremos las actualizaciones que tendrán los íconos. Veremos también el detrás de escena de la creación de este nuevo lenguaje de diseño. Luego, conoceremos el sistema de diseño subyacente y te compartiré algunos consejos y trucos muy útiles para cuando diseñes. Al finalizar, tendrás una visión general útil sobre cómo dominar los nuevos efectos de materiales y, lo más importante, sobre cómo crear íconos hermosos y únicos. Comenzaremos con la visión creativa detrás del diseño y lo que lo hace tan especial. Presentaré también lo nuevo sobre modos de apariencia.

Este año, nos inspiramos en los íconos en capas de visionOS e investigamos las propiedades del vidrio real para combinarlas en el material Liquid Glass para los íconos de las apps.

Se combinan elementos como reflejos en los bordes, densidad y transparencia, y se agrega una sensación de profundidad, como si los íconos se iluminaran desde adentro. Además de estas propiedades, el material cobra vida en la pantalla de inicio de iOS. Gracias al giroscopio, puedes ver una luz moverse en el borde del ícono, como si reflejara el mundo que te rodea.

Este efecto luce bien en los modos Claro y Oscuro, y también presentamos una gama de nuevos modos de apariencia translúcida con Liquid Glass. Un vidrio monocromático en versión clara u oscura con dos tintes diferentes: el oscuro que agrega color al primer plano y el claro donde el color se infunde en el vidrio. Así, seleccionar los colores es aún más divertido, vibrante y expresivo. Además, el vidrio teñido luce increíble al combinarlo con una pantalla de bloqueo teñida.

Todos los modos están disponibles en el iPhone, el iPad y la Mac. En el Apple Watch también verás los íconos en Modo Claro con el nuevo aspecto.

También verás la versión actualizada de tu ícono en la página de producto del App Store. Ahora, veamos el sistema de diseño subyacente.

Antes, los diseños se realizaban por dispositivo y algunos íconos se veían algo diferentes según la plataforma. Pero con el lenguaje de iconografía unificado, facilitamos el diseño en todos nuestros dispositivos con formatos de rectángulo redondeado o círculo.

Empecemos con la forma de rectángulo redondeado. Actualizamos la cuadrícula de diseño a una estructura más simple y uniforme. La nueva cuadrícula tiene un radio de esquina más redondeado, con lo cual los íconos se centran más con la interfaz y dentro del hardware.

Con el lienzo de 1024 pixeles, las ilustraciones circulares tienen un marco designado en la cuadrícula y más espacio. La nueva cuadrícula facilita la creación de ilustraciones equilibradas de diversas proporciones.

Quizá te preguntes cómo afectan todos estos cambios de diseño a los íconos en macOS. Veámoslo. Hasta ahora, algunos íconos de macOS tenían elementos secundarios que podían ampliar la forma compuesta. Como en el ícono de Contactos anterior, donde las pestañas aparecen al costado del libro. Para evitar formas irregulares, la forma del lienzo ahora actúa como una máscara. Aquí puedes ver cómo rediseñamos el ícono para aprovechar mejor el lienzo e incluir las pestañas divisorias en su forma.

Los íconos de la Mac que tienen una forma similar al rectángulo redondeado se extienden automáticamente para encajar en la plantilla y reciben la nueva apariencia sin que debas hacer nada.

Éste es interesante, el ícono tiene una forma muy única. En este caso, el sistema elimina todas las sombras y lo ajusta automáticamente en un rectángulo redondeado.

Aunque este es un ajuste automático inteligente, es mejor rediseñar el ícono y usar todo el lienzo, como lo hicimos para Photo Booth.

Ya cubrimos iOS y macOS, sigamos con la apariencia de los nuevos íconos translúcidos en Watch.

Alineamos la cuadrícula circular de watchOS con la nueva cuadrícula rectangular redondeada.

El lienzo de 1088 pixeles supera el rectángulo redondeado, por lo que puedes crear con más facilidad versiones consistentes entre plataformas.

Los íconos circulares se alinean más con nuestros otros productos, incluso a pequeña escala en tu Apple Watch.

También actualizamos las plantillas de nuestro nuevo sistema de diseño, que son muy útiles para comenzar a trabajar en tus diseños. Están disponibles para Figma, Sketch, Photoshop e Illustrator.

Puedes encontrarlas en la página de recursos de diseño de Apple en developer.apple.com. Ahora hablemos de lo que debes tener en cuenta al diseñar íconos para aprovechar los nuevos materiales y modos de apariencia. Hablaremos sobre la importancia de las capas, cómo las transparencias y el desenfoque mejoran la apariencia del material, la diferencia que puede generar la simplicidad y los fondos. Primero, las capas son un componente clave del nuevo lenguaje de diseño y una parte esencial que debes conocer al trabajar con los materiales. En su forma básica, los íconos tienen un fondo y un primer plano, como el ícono de Mensajes.

Incluso con una capa de primer plano como aquí, los efectos del material ya le dan muchos más detalles. La burbuja tiene una transparencia muy agradable y la sombra sutil la resalta. Si bien solo podemos tener un fondo, los primeros planos se pueden expresar con múltiples capas. Y al apilar las capas comienza lo interesante. Por ejemplo, Podcasts. Antes, el diseño usaba una plantilla que le daba al ícono una sensación de capas. Debido al espacio alrededor de la figura, parecía que esta estaba delante de las líneas circulares.

Ahora, con la técnica de capas, apilamos las formas y creamos un diseño verdaderamente dimensional.

Mientras los íconos adquieren más detalle y riqueza a nivel del sistema, notamos que ciertos estilos de ilustración y perspectivas funcionan mejor que otros.

Objetos 3D realistas y perspectivas como en el ícono de Ajedrez anterior compiten con la calidad del material.

El nuevo diseño presenta una vista frontal y una apariencia más plana.

En lugar de usar un estilo de ilustración complejo, dejamos que el material agregue detalles.

Las formas dimensionales deben usarse a consciencia y es útil diseñarlas para que armonicen con el aspecto vítreo del material. Veamos cómo mejorar el ícono de Vista previa.

Este nuevo diseño funciona mucho mejor con los efectos del material y la perspectiva tiene un propósito claro: enfatiza el área de enfoque de la lupa.

Ahora, hablemos de la transparencia.

Usar la transparencia y el desenfoque con el nuevo material es más fácil y se ve mucho mejor. Puede aportar agradables detalles, ligereza y aún más profundidad a tu diseño.

La transparencia luce muy bien en los modos Claro y Oscuro, y queda perfecto en modos transparentes. Con el fondo transparente, se puede ver el fondo de pantalla a través de las capas translúcidas. Todo el mundo conoce la frase “menos es más”. Veamos por qué esto es muy cierto al trabajar con nuestros materiales. Fotos es un gran ejemplo. En el diseño anterior ya se usaba la transparencia para enfatizar los pétalos y agregar un poco de dimensión a la forma. Al reducir la superposición, permitimos que las intersecciones y los bordes reflectantes del material realmente brillen.

Actualizamos los colores para que se vean más vibrantes como en el vidrio teñido, pero conservamos la paleta de colores exclusiva del ícono de Fotos.

El nuevo diseño también usa la cuadrícula actualizada, que ofrece más espacio libre, y las sombras cromáticas agregan aún más profundidad al material.

Ya que hay muchos efectos dinámicos disponibles, recomendamos disminuir los efectos estáticos integrados en la ilustración original.

Puedes ver algunos de estos efectos en el ícono de Casa anterior, con sombras paralelas o bordes biselados.

Como en Fotos, la nueva ilustración del ícono de la app Casa es una versión simplificada del diseño anterior.

Redujimos la cantidad de capas, hicimos las formas más redondeadas y eliminamos los efectos extra. Así de delicado queda luego de aplicar el efecto de vidrio. Se ve cuánto detalle y sofisticación aporta a una ilustración que podría parecer simple a primera vista.

Esto se debe a que el nuevo diseño aprovecha las características de los materiales:

transparencia, sombras por capa para mayor profundidad y reflejos especulares que dan forma a los elementos. Al diseñar tu ícono, considera hasta el detalle más pequeño.

Lo ideal es evitar los bordes afilados y las líneas finas. Las esquinas más redondeadas facilitan el desplazamiento de la luz por los bordes, como en estas ruedas del ícono de Configuración.

Si bien no todos los elementos deben usar el efecto, en el caso de los que sí, las líneas más gruesas son útiles para conservar los detalles a una escala más pequeña.

Por último, hablemos de los fondos y del impacto que tienen en la apariencia de tu ícono.

Los efectos de iluminación reales son esenciales para esta nueva apariencia y los degradados suaves de claro a oscuro armonizan mejor con la dirección de la luz.

También desarrollamos un degradado claro y uno oscuro para usar en lugar de fondos solo blancos o negros en el sistema. Se diseñaron para garantizar el contraste y ofrecen el lienzo ideal para los efectos de los materiales.

Un último consejo: con el éxito del Modo Oscuro, recomendamos más los fondos de colores, para lograr una distinción más agradable al cambiar entre modos.

Este es el nuevo lenguaje de diseño para íconos de apps. Como lo notaste, no se trata solo de una nueva estética, sino de obtener más oportunidades para expresar tu creatividad. Este sistema permite que cada ícono sea la versión más exclusiva y mejor elaborada posible, reflejando el cuidado y la innovación que pones en tus apps. Creemos que esto marca una nueva era para los íconos, con un rol aún más importante en la narrativa y la identidad de marca. Te animo a aprovechar este nuevo capítulo, explorar las posibilidades, ampliar los límites de lo que puede ser un ícono y crear experiencias que deleiten a primera vista. Ahora que tienes todo para comenzar a diseñar, te recomiendo ver la sesión sobre cómo crear íconos de apps con Icon Composer de mi colega Lyam. Te mostrará todo lo que debes saber sobre esta nueva herramienta y cómo crear tu ícono con el efecto de vidrio. Gracias por acompañarnos.