Cuando hablamos de la implementación del naming a un Design System, hablamos de una herramienta clave para aportar lógica y claridad al sistema de diseño. No se trata de un proceso de originalidad, sino de diseñar un sistema estandarizado, claro y útil.
¿Por qué es importante trabajar el naming de un Design System?
El objetivo del Design System es ofrecer una guía clara de prácticas y componentes que sea fácil de entender por las diferentes personas que participan en el proyecto y que agilice los procesos de la empresa. Contar con un documento donde la nomenclatura de los elementos genera confusión contradice su propósito inicial, resulta ineficiente, crea problemas de entendimiento interno y favorece los errores entre las fases de diseño y código.
Además de crear un universo consistente y claro para todos los implicados, el naming también permite facilitar la comprensión de algunos componentes cuyo funcionamiento puede resultar difícil de visualizar para quienes no trabajan diariamente con ellos. Un ejemplo lo encontramos en la navegación breadcrumb, el menú de navegación que nos indica la página en la que nos encontramos y nos ayuda a comprender la jerarquía entre los niveles y navegar a través de ellos. Su naming «breadcrumb» permite visualizar con claridad su función: dejar una serie de huellas para no perderte cuando quieras volver.
Dedicar cierto tiempo al desarrollo de un naming coherente favorece el trabajo colaborativo, convirtiendo el Design System en un archivo atemporal que puede interpretarse independientemente del momento y de las herramientas de diseño empleadas.
Fuente: Bootcamp
Buenas prácticas aplicadas al naming de componentes
Como ya hemos comentado, el naming que se aplica a los distintos componentes y botones del Design System debe ser sencillo e intuitivo, por lo que existen algunas buenas prácticas a tener en cuenta antes de empezar a trabajar en él. Algunas de las más importantes son:
- Lógica y claridad. El naming debe reflejar la forma o el funcionamiento del elemento, representándolo visualmente o refiriéndose a él de forma directa y objetiva.
- Conceptos escalables. Debe tener en cuenta la posibilidad de crecimiento de la empresa y sus productos, así como la necesidad de un rango más amplio de definición. Incluir una escala basada en las tallas de ropa (XS, S, M, L, XL…), por ejemplo, deja margen para incluir elementos más grandes o más pequeños en el futuro.
- Simplicidad. Es preferible el uso de una o dos palabras por concepto, así como el empleo de palabras cotidianas y fáciles de entender.
- Estandarización. Recurrir a la nomenclatura más utilizada es, la mayoría de las veces, la opción más acertada. El uso de conceptos tan sencillos y aceptados como “botón” asegura un fácil entendimiento por parte de diferentes personas. Te recomendamos consultar páginas web como The Component Gallery para conocer los nombres estandarizados de los componentes más habituales.
Finalmente, también es importante tener en cuenta algunas prácticas más funcionales desaconsejadas vinculadas al uso de números y símbolos, a la descripción de colores o tipografías y a la definición de los roles del componente.
Fuente: Bootcamp
El naming y la definición de estados
El carácter abstracto de los estados hace que su definición sea más compleja que en lo referente a los componentes, cuyo diseño resulta más visual y tangible. Por suerte, hoy en día también existe una estandarización que facilita la nomenclatura de los estados más frecuentes en base a los siguientes conceptos:
- Enabled / Disabled. Define un elemento interactivo que puede encontrarse activo o inactivo.
- Hover. Indica el cambio visual del elemento cuando el usuario se desplaza sobre él.
- Focused. Indica un elemento resaltado por el usuario mediante un método de entrada, como el teclado o la voz.
- Pressed. Indicación visual para el usuario que confirma que un elemento ha sido clicado.
- Visited. Indica que un enlace ya ha sido visitado.
- Error. Elemento visual que señala los errores por parte del usuario.
- Validated. Indica que una acción ha sido completada correctamente.
- Dragged. Comunica que un elemento ha sido clicado y desplazado.
Fuente: Zeroheight
De la misma forma que sucede en el naming de componentes, no se aconseja referirse de forma concreta a los colores que determinan cada estado.
En lugar de utilizar nombres como “rojo” o “verde” y que son susceptibles de modificarse mediante un rebranding, es preferible incluir referencias de marca y funcionales. De esta forma indicaremos que un elemento utiliza el color primario, secundario o terciario, y que se trata de un indicador de éxito, advertencia o información, por ejemplo.
En resumen, prestar atención al naming de los componentes y estados que forman un Design System puede facilitar su interpretación por parte de diferentes miembros y departamentos de la compañía, optimizando los flujos de trabajo y reduciendo la posibilidad de errores.
Si quieres mejorar tu Design System mediante un sistema de naming coherente y estandarizado pero no sabes por dónde empezar, nuestro equipo de especialistas en UX y UI te dará todas las claves y te guiará en el proceso. ¡Contáctanos sin compromiso!
