El anuncio de Apple sobre los íconos de “modo oscuro” me ha hecho pensar en cómo abordaría la adaptación de los íconos de “modo claro” para el modo oscuro. Tomé 12 íconos que creamos en Parakeet para nuestros clientes para ilustrar algunas formas de hacerlo.
(Si necesitas un hermoso ícono de aplicación, ¡puedes contratarnos!)
Antes de eso, hagamos un inventario. De los 28 íconos en la imagen de vista previa de esta característica de Apple, solo nueve tienen fondos blancos en modo claro. Sin embargo, todos los íconos en modo oscuro tienen fondos negros.
En realidad, vale la pena señalar que cinco íconos en “modo claro” tienen fondos negros, que Apple ajustó ligeramente para tener un discreto degradado negro consistente que se encuentra en todos sus nuevos íconos de modo oscuro. Cuatro de estos: Stocks, Wallet, TV y Watch, parecen ser iguales en ambos modos. Sin embargo, no hay otros íconos (visibles) que lo sean.
Me parece que todos los íconos en modo oscuro con glifos blancos usan su color de fondo como color de primer plano. El sobre blanco de Mail se vuelve azul. El fondo azul se vuelve negro. Un sobre azul es un poco extraño, pero se representa como un símbolo, a diferencia de Wallet o Files, que tienen un ligero sombreado.
Los íconos con fondo blanco simplemente se convierten en íconos con fondo negro. Maps utiliza una paleta de colores de modo oscuro de la propia aplicación, Weather convierte el cielo en negro, pero extrañamente mantiene el sol en lugar de cambiar a la luna. Esto podría ser una regla que Apple aplica solo para ellos, donde sus íconos de aplicaciones no cambiarán de forma, solo de coloración. Los pétalos de Photos ahora son de color aditivo en lugar de sustractivo.
Desafortunadamente, algunos íconos parecen haber perdido o ganado peso en modo oscuro. Por ejemplo, el engranaje de Configuración no cambió de tamaño en modo oscuro, pero parece ocupar menos espacio porque el círculo oscuro que lo rodea se fusiona con su fondo. Esto hace que parezca más pequeño que el icono de Find My, que ahora parece enorme al lado de FaceTime. Esto es un remanente de algunas elecciones de diseño cuestionables en iOS 7 que han perdurado durante la última década.
Las Directrices de interfaz humana de Apple recomiendan proporcionar el objeto de primer plano de su ícono con un fondo transparente para configurarse programáticamente encima de su degradado negro estándar debajo. Sin embargo, no parece ser un requisito, y podemos colocar una imagen totalmente opaca allí si queremos nuestro propio fondo.
Ahora, veamos algunos íconos que adapté al modo oscuro para ver cómo podríamos abordar este nuevo desafío.
El primer ejemplo es un glifo colorido sobre blanco. Según la recomendación de Apple, simplemente podemos proporcionar la capa de primer plano para utilizar su degradado negro estándar detrás de él. He aclarado un poco la flor, y creo que esa solución es en su mayoría adecuada, pero creo que podemos hacerlo mejor.
Mientras que Apple solo utiliza el negro en escala de grises para sus fondos, creo que introducir color al mismo valor de brillo es bastante agradable. Puedo aclarar un poco más la flor, lo que hace que se sienta más sinónimo del original.
A continuación, veamos un glifo blanco sobre un fondo azul oscuro. En esta situación, Apple recomienda usar el color dominante del ícono de la aplicación normal en el glifo, pero eso no funcionará bien aquí ya que el fondo es demasiado oscuro. Una versión más clara de ese degradado es aceptable para el equipaje, pero no es ideal en el fondo negro. Un fondo azul aún más oscuro que el original junto con ese degradado más claro para el equipaje es mucho mejor.
Aquí hay otro ícono con un fondo oscuro, pero no es un glifo. Además, la parte más brillante del degradado está en la parte inferior. Esto es un poco importante dadas las luces que apuntan hacia abajo. El degradado negro estándar que es más claro en la parte superior mata la atmósfera, por lo que la mejor opción aquí probablemente sea un fondo ligeramente más oscuro que el original. En un caso como este, tal vez aconsejaría usar esta modificación también para el modo claro, solo porque son tan similares.
En este ícono, la llama debe seguir siendo la forma más brillante, por lo que intercambiar los componentes rojos y negros es suficiente. Sin embargo, dado que la llama está ahora en un fondo rojo, necesita ser un poco más brillante para aumentar el contraste. Una vez más, el negro estándar está bien, pero el ícono original tenía un poco de rojo en la forma negra, que creo que es importante para que este ícono parezca adecuadamente cálido y similar al original.
Los íconos que tienen dimensión probablemente necesitarán algunos ajustes de contraste al intercambiar colores claros por negro, por lo que en este ejemplo, las enredaderas verdes se han aclarado y se utiliza un color marrón tierra para el fondo.
Algunos íconos tienen un fondo que no es solo un degradado o color sólido. Para esto, el fondo segmentado es un atributo de la marca, por lo que si usamos el degradado negro estándar de Apple, querremos incluir formas translúcidas para manipular el fondo en el resultado.
Además, si eliges un fondo negro, es posible que debas desaturar objetos plateados como este. Sin embargo, si simplemente utilizas una versión más oscura del fondo que ya tienes, es posible que no necesites ajustar el objeto de primer plano en absoluto.
Este es un poco frustrante porque el negro en el ícono original se usa para representar un objeto del mundo real que debe ser negro. Si usamos un fondo negro, los usuarios no podrán identificar fácilmente esto como un pincel de caligrafía apoyado en un tintero. Al reintroducir el fondo medio azul para el ícono de modo oscuro, podemos aclarar el destello ligeramente azul en la tinta, lo que ayuda a distinguirlo mejor del fondo. ¡Aún así, complicado!
Muchas aplicaciones utilizan un borde. Ese borde probablemente sea de un color brillante, y eso va a resaltar (de manera negativa) en el modo oscuro. Atenuarlo lo más que puedas sin que parezca que el ícono se encoje es tu mejor opción.
Esto es ridículo. Este ícono tiene un componente que quiere ser negro (la tinta) y también un componente que quiere ser blanco (el sobre). Colocar esta mancha de tinta negra en un fondo gris oscuro no es una opción viable, con o sin un sobre blanco. Y te diré que hacer que la tinta sea de cualquier otro color, especialmente blanco, tampoco es una opción. Nos deja en un lugar complicado, pero tal vez el color pueda ayudar. Podemos reducir el punto blanco y aclarar el fondo un poco con la ayuda de un morado oscuro que no sea demasiado diferente del valor del fondo estándar.
Aquí estamos de nuevo, con un ícono de algo que no puede cambiar fácilmente de color. Las belugas son bastante… realmente blancas. Oscurecer un poco está bien, pero desaturado sobre negro hace que esta imagen sea un poco sombría. Una variación del mar profundo es, creo, una excelente manera de hacer una versión de modo oscuro y mantenerla también en el tema.
A veces, un ícono de aplicación puede que no tenga un objeto de primer plano en absoluto, como este. No hay realmente nada que separar, y convertirlo a grises hace que un ícono muy enérgico se convierta en uno muy soso. La solución correcta probablemente sea reducir el brillo manteniendo la saturación. Lo suficientemente oscuro como para encajar, pero lo suficientemente brillante como para tener un peso igual con otros íconos.
Por último, este ícono tiene un objeto de fondo que no queremos eliminar. Podemos cambiar el color del portapapeles a los mismos tonos de gris oscuro que tienen otros íconos de modo oscuro, aunque curiosamente, ya habíamos creado una versión de “modo oscuro” de la mariposa. Pero el gris-negro no concuerda con el ícono original. Al hacer que la tabla sea un marrón más oscuro, el clip de metal un metal más oscuro y la hoja un púrpura oscuro, este ícono se siente más como el ícono de modo claro.
Diseñar un ícono de aplicación de modo oscuro adecuado es importante tanto para ti como para tus usuarios, porque si es demasiado brillante entre el resto, destacará (de forma negativa). Un resultado probable es que tu aplicación sea eliminada de las pantallas de inicio.
Si necesitas ayuda para diseñar tus íconos de aplicación, incluidos los íconos de modo oscuro, contáctanos en Parakeet. Estamos encantados de ayudar.
LMNT
✉ Responder por correo electrónico
© 2006– Louie Mantia, Jr.
Junior® and Crown®, de Mantia LLC.
Parakeet®, de Parakeet Inc.