Manual de diseño con sugerencias para crear Dark Themes

julio 15. 2019,
 Autor: Roberto Ortiz
Elementos de diseño Dark Mode

Elementos de diseño para interfaz tipo Dark Mode

Dark Themes, temas oscuros o modo oscuro es una modalidad de interfaz de usuario que se caracteriza por utilizar un esquema de color donde el fondo es de color negro. Mientras que los demás elementos del diseño, como textos o iconos son de color cloro.

Las aplicaciones para móviles más populares tienen un modo oscuro o un Dark Mode. iPhone en su versión iOS 13, tendrá un Dark Mode. En Windows 10 también puedes activar un modo oscuro.

Dark Mode o Dark Themes, no significa que al hacer un diseño sólo se deben de utilizar color negro de fondo y los demás elementos en color blanco.

Existen directrices que hay que seguir para conseguir una buena experiencia de usuario (UX Design), al momento de crear un Dark Theme.

Elementos de diseño Dark Mode

Elementos de diseño y recursos para diseñar Dark Mode

Encontré un artículo con material de diseño, un manual con un buen número de sugerencias, que te serán de mucha utilidad al momento de diseñar.

Como por ejemplo las variantes y combinación de colores, que puedes utilizar en el diseño en una interfaz Dark Mode. Puedes utilizar color blanco –#FFFFFF– color negro –#121212– y color azul –#3700B3-.

Dentro del manual de diseño encontrarás que puedes utilizar una serie de combinaciones de colores, para utilizar en enlaces que han sido activados o visitados por el usuario.

También puedes utilizar una serie de combinaciones de colores que se activan cuando un elemento es arrastrados por el usuario, para moverlo de lugar.

Elementos de diseño Dark Mode
Elementos de diseño Dark Mode

En total son 4 los elementos de estados de un elemento.

Habilitado: color negro de fondo #121212, con texto de color blanco #FFFFFF.

Cuando el usuario coloca el puntero del ratón sobre el elemento, el color Negro se aclara un 4%. Seria un #201C1C.

Si el elemento está seleccionado, el color Negro se aclaran un 12% #302C2C .Y la línea se aclara un 100%.

Cuando el elemento es preciado, el color negro se aclara solo un 10% #181414.

Y por último cuando el elemento es arrastrado, el color Negro se aclara un 8% #282424 y aparece una sombra de 08dp.

Los mismos porcentajes se aplican, si se utiliza un color azul -#3700B3- como fondo.

Elementos de diseño Dark Mode
Elementos de diseño Dark Mode

En el artículo encuentras mucha información y ejemplos de cada uno de los elementos que se utiliza en una interfaz: menús, iconos, textos, etcétera.

También hay ejemplos de diseños bien hechos y diseño mal hechos. Para que veas la diferencia entre un diseño que se hizo utilizando las recomendaciones. Y un diseño en donde las combinaciones y colores fueron mal empleados.

Elementos de diseño Dark Mode

Dark Themes o Dark Mode es algo que vas a estar escuchando muy seguido, si eres diseñador de interfaces, diseñador web o diseñador de aplicaciones móviles, este es un artículo que te puede ser de mucha ayuda.

Además de los materiales de diseño, también podrás descargar distintos recursos. Por el momento solo encuentras materiales relacionados con Android, pero dentro de pronto habrá recursos para iPhone.

También hay un tutorial con guías para diseñar en dark mode, que fue presentado en el Google I/O 2019.





Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

➱ ¡Sigue el blog!
botones sociales Twitter Facebook Pinterest YouTube Society6 Instagram Feedly RedBubble
✉ ROC21 en tu correo

➱ ¡Suscríbete a nuestro boletín! Recibirás ofertas especiales en cursos y recursos gráficos, una vez a la semana.