Le système de couleurs : SoCreate définit des standards avec les propriétés personnalisées CSS

Lauren Spence présente le système de couleurs

Notre récent Lunch Meet - une série d'apprentissage dirigée par l'équipe SoCreate - a peut-être été le plus coloré à ce jour ! Lauren Spence, développeur UX, a pris la parole pour enseigner à l'équipe les pratiques avancées utilisées du côté UX dans les projets SoCreate. Alors que le reste d'entre nous a satisfait nos appétits avec un déjeuner servi par un traiteur, Lauren a ravi nos sens visuels avec sa présentation sur le système de couleurs SoCreate.

Le Color System est une approche innovante qui contrôle et regroupe par thèmes les couleurs dans toutes les applications que nous créons. Le système ajoute des couches et des règles au-dessus du CSS simple, ce qui nous donne un système facile à utiliser, facile à documenter et facile à thématique. Il est construit sur une bibliothèque de propriétés personnalisées CSS globales, chacune avec un nom unique pour son utilisation prévue.

Grâce à cette bibliothèque de noms de couleurs uniques, nous pouvons facilement sélectionner la bonne couleur pour n'importe quel usage et changer de couleur en toute confiance, sans effets involontaires , explique Lauren. "Nous avons un catalogue complet de couleurs avec l'application, une sorte de "guide de style" intégré au code.

De plus, grâce à la puissance de Custom Properties, Lauren explique que nous pouvions définir des thèmes dans l'application presque sans aucun effort de développement supplémentaire. Tout le monde y gagne !

Le principal avantage du système couleur est triple puisque le système couleur a été créé pour résoudre plusieurs problèmes auxquels de nombreux développeurs UX sont confrontés :

Prise de décision facile, réalisée grâce à notre catalogue de couleurs globales. Deux développeurs qui créent un nouveau composant peuvent maintenant facilement prendre la même décision quant à la couleur à utiliser.
Thématisation sans effort. Alors qu'auparavant nous devions créer manuellement un thème pour chaque composant de l'application, maintenant nous obtenons des thèmes gratuitement avec la puissance des propriétés personnalisées CSS.
Texte incassable. Le texte ne deviendra jamais illisible (et donc votre application inutilisable), à cause du manque de contraste des couleurs. Nous y parvenons en contrôlant étroitement les couleurs d'arrière-plan dans l'application, et en documentant les couleurs au-dessus de chaque arrière-plan de sorte que lorsque nous introduisons une nouvelle couleur, il est facile de voir si elle casserait à un niveau quelconque.

Lauren termine en expliquant que l'équipe SoCreate UX est ravie d'explorer davantage les propriétés personnalisées de CSS. C'est une approche assez nouvelle. Les développeurs qui doivent s'inquiéter de la prise en charge des anciens navigateurs n'ont pas été en mesure d'utiliser et d'expérimenter les propriétés personnalisées CSS depuis très longtemps.

"Cela signifie que nous sommes à la pointe de l'exploration de la puissance de cette technologie, et nous pensons que nous avons trouvé un moyen vraiment cool d'exploiter leur puissance."

A la pointe du progrès... oui, ça rejoint tout à fait les valeurs de SoCreate ! Je suis continuellement impressionné par la curiosité impressionnante de notre équipe : comment pouvons-nous faire mieux, plus vite ou différemment ?

Ce sont là des questions que nous devrions tous nous poser dans notre quête pour continuer à apprendre.

Allez, l'équipe, allez !