Ilde Cabeza

0 %
Ilde Cabeza
Motion Graphics
& UX Designer
  • Ciudad:
    Valencia
  • Edad:
    44
Castellano
Inglés
After Effects
Premiere
Illustrator
Photoshop
Figma
HTML5
CSS3
Wordpress

Elementos UI – Colores

Elementos UI

Los colores de las aplicaciones tendrán un tono de color determinado acompañado de sus variantes más claras u oscuras.

El resto serán colores neutros para crear una armonía visual e identificar inmediatamente cual es la aplicación en la que nos encontramos trabajando.

La etiqueta Main representa el color principal de cada aplicación. Este color tendrá dos tonos más claros y otros dos más oscuros, denominados con cifras entre el -2 y el -2.

Puntualmente podrán incluirse otros colores auxiliares para destacar ciertos elementos siempre y cuando sea imprescindible para visualizarlos correctamente. Esa gama de auxiliares podrá sustituirse por una gama alternativa más adecuada para usuarios con
daltonismo.

Aplicando los colores

La paleta de colores de cada aplicación se utilizará siguiendo el mismo orden para todas.

El color primario o main color, lo llevará la primera barra de menu (excepto una suite de varios productos, que llevará el color “Dark”), los elementos activos de la segunda barra de menú y los elementos del body que tengan que destacar sobre el resto.

El color main +1, será utilizado para el estado activo de algunos botones y otros elementos que se le quieran dar énfasis pero algo menos que “main color”.

El color main -1, se usa para el texto de algunos botones y algunos iconos.

El color main +2, se emplea para resaltar el fondo de las líneas de las tablas seleccionadas.

Para el resto se usa la gama de los cinco tonos neutros que comparten todas las aplicaciones:

  • Light: Es el blanco puro #FFFFFF, usado para la mayoría de los fondos de las aplicaciones, empezando por el del body.
  • Light Grey: Es el usado para el fondo de la segunda barra de menú.
  • Grey: Como fondo de las líneas de las tablas y líneas que separan elementos.
  • Dark Grey: Se usa como borde de muchos elementos
  • Dark: Para el fondo de la primera barra de menu de la suite de aplicaciones, para los iconos de la segunda barra de menu y para los textos en general.

Detalles del proyecto

Descripción

Esto es parte de un Design System centralizado para todas las aplicaciones generadas para combatir el cibercrimen por parte de la empresa de ciberseguridad S2 Grupo.

Esta guía de uso siempre está en constante evolución y se va actualizando a medida que se añaden nuevos elementos y funcionalidades.

  • Fecha inicio:
    20.3.2020
  • Fecha final:
    01.9.2023
  • Estado
    Completado
  • Cliente:
    S2 Grupo
  • Location:
    Valencia
15 +
Años de experiencia
157
Proyectos completados
135
Clientes satisfechos

Listo para entrar en tu proyecto!

Trabajemos juntos!
Contactame