Sistemas de diseño específicos, quiero decir. Los sistemas de diseño, como concepto, son algo de lo que cualquier sitio puede beneficiarse.
Mucho alboroto entra en los sistemas de diseño en estos días. Justo el otro día, una organización publicó su sistema de diseño públicamente y recibí una gran cantidad de mensajes directos, correos electrónicos y mensajes de Slack animándome a revisarlo. Me parece bien dije. Pero simplemente estoy tocando el capó de un coche nuevo, por así decirlo. No me he sentado en él. No lo he conducido alrededor de la manzana, y mucho menos a campo traviesa, ni he intentado sacar Cheerios de entre los asientos. Estoy seguro de que tendría más opiniones después de construir un sitio o 10 con él (disculpen las metáforas mezcladas).
Eso me lleva a algunas preguntas. ¿Puedo construir un sitio con este sistema de diseño? ¿Debo construir un sitio con él? ¿Es para mi? O espera… ¿para quién es esto?
Todos tienen acordeones.
Bueno, no todos ellos, pero tengan paciencia conmigo, porque hay un punto que debe señalarse.
¡Bootstrap también tiene un acordeón! Los desarrolladores entienden totalmente Bootstrap.
Independientemente de lo que piense, no veo mucha confusión en torno a Bootstrap. Vinculas el CSS, usas el HTML que te dan y, 💥, tienes componentes que están listos para funcionar.
Es posible que Bootstrap sea más una “biblioteca de patrones” que un “sistema de diseño”. No se. Probablemente haya algo en esa distinción, pero la semántica de nombres (si la hay) parece usarse indistintamente, por lo que distinguir Bootstrap como uno u otro no alivia la confusión.
Los desarrolladores buscan Bootstrap porque…
- Les ayuda a construir más rápido.
- Obtienen buena calidad “listos para usar” si no son particularmente buenos en HTML y CSS.
- Quieren ser accesibles y Bootstrap ha pasado por el timbre de accesibilidad.
- [Insert your reason.]
Atractivos, sin embargo, estos parecen estar en juego en la mesa para cualquier sistema de diseño y no son exclusivos solo de Bootstrap.
Hmmmm… Tal vez le eche un vistazo y elija una solución que no sea Bootstrap para mi próximo proyecto.
Mucha gente está en este barco.
Tal vez el próximo proyecto sea React, por lo que queremos un sistema de diseño que haga de React un ciudadano de primera clase. Tal vez tuvimos problemas para personalizar Bootstrap a nuestro gusto. Tal vez solo vimos el aspecto predeterminado de otro sistema de diseño y pensamos que encajaría mejor. Tal vez solo estamos aburridos de Bootstrap. Muchas razones para buscar fuera de Bootstrap, al igual que hay muchas razones para buscarlo.
Dado que otros sistemas de diseño también tienen acordeones, ¿no puedo simplemente… elegir uno?
¿Algo así?
Una consideración inmediata es la licencia. Lightning Design System de Salesforce a menudo se señala como líder en el mundo de los sistemas de diseño y ha influido mucho en el pensamiento actual en torno a ellos. Sin embargo, no tiene licencia de código abierto. En realidad, es de código abierto con licencia. Utiliza BSD Clause-3 (similar a MIT) para todo menos las fuentes y los íconos, que son Creative Commons Attribution-NoDerivatives 4.0. Me dijeron: “cualquiera podría reutilizar el código en su proyecto que no tenga nada que ver con Salesforce. Simplemente no pueden reutilizarlo de una manera que imite demasiado el sistema”.
Eso no es un problema, probablemente sea algo bueno para Lightning. No es un objetivo general para todos los desarrolladores web de la Tierra como público objetivo. Es para Salesforce y la gran cantidad de equipos en diferentes pilas de desarrollo que crean cosas para Salesforce. Si no está creando algo de Salesforce, no es para usted.
Entonces, ¿por qué es público y no un documento interno del equipo de Salesforce? No puedo responder por ellos, pero según tengo entendido, Salesforce es tan enorme que tienen equipos internos y externos que lo utilizan. Entonces, quizás hacer de Lightning un documento público sea la forma más útil de ponerlo a disposición de todos los que lo necesiten.
Esto es algo que estamos discutiendo activamente en el equipo de SLDS. ¿Qué significa exactamente “código abierto” para diseñar sistemas cuando el uso es tan específico? ¿Es más “fuente disponible”?
— Alexis Córdova (@acordova) 9 de abril de 2019
También existe el agradable efecto secundario de que obtienen buena prensa por ello, y eso no puede perjudicar los esfuerzos de contratación. También escuché que tener un sistema de diseño público puede generar conversaciones interesantes y útiles.
Carbon Design System, por otro lado, tiene licencia de código abierto. También tienen una sección completa que explica quién debe usar el sistema:
Carbon es la implementación oficial de IBM Design Language para diseñadores web y de productos, y representa un ecosistema en constante crecimiento de activos y orientación de diseño. Con un conjunto integral de pautas de interfaz humana, kits de diseño y documentación, Carbon ayuda a los diseñadores a trabajar de manera más rápida e inteligente.
Eso no me dice exactamente lo que quiero saber. Parece algo de IBM listo para usar, por lo que definitivamente es para IBM.
Es de código abierto, así que puedo usarlo si quiero. ¿Pero es realmente para mí y mis proyectos aleatorios? ¿Quieren que lo use para eso? ¿Soy yo, un desarrollador aleatorio, en quien están pensando con este proyecto? ¿O es IBM primero, desarrollador aleatorio en segundo lugar?
La empresa primero, el mundo segundo.
Si un sistema de diseño es de una empresa, entonces es para la empresa. También puede ser de código abierto, pero cualquier desarrollador aleatorio que quiera usarlo no es el público objetivo.
Puede que ni siquiera sea técnicamente una empresa la que lo fabrique. ¡Podría ser un gobierno!
Un sistema de diseño realmente excelente es el Sistema de diseño web de EE. UU., que acaba de convertirse en 2.0. ¡Es espectacular! Se ve muy completo y tiene algunas características geniales. Tiene una fuente personalizada con clase, se diseñó teniendo en cuenta la adopción incremental, tiene tanto componentes útiles como utilidades, y se creó de manera atómica a partir de tokens de diseño. Quizás la mejor característica es que es extremadamente accesible porque tiene que ser por ley.
El Sistema de diseño web de EE. UU. es en su mayoría de dominio público, por lo que puede usarlo totalmente. Pero no está diseñado pensando en usted; está diseñado para ayudar a las personas que crean sitios web para el gobierno.
(Por cierto, el Sistema de diseño web de EE. UU. está abierto a contribuciones, lo cual es genial porque es una forma en que podrías tener un impacto significativo en los sitios web que son muy importantes para la vida de las personas).
Mi mentalidad es que los sistemas de diseño de código abierto no están destinados a ser reutilizados y desarrollados por ti mismo, sino para aprender y aplicar a los tuyos.
—Mike Dick (@miked1ck) 9 de abril de 2019
Aquí hay otro truco: hay un espectro de personalización para diseñar sistemas, a propósito.
Incluso si técnicamente puede usar un sistema de diseño público que haya encontrado y le guste, podría considerar el ángulo de personalización. Hay todo un espectro para esto, pero consideremos los bordes extremos y el medio:
- Personalización cero: Construimos esto para hacer cumplir fuertemente la consistencia para nosotros mismos.
- Variaciones preseleccionadas: Tenemos acordeones en tres colores diferentes.
- Tema te permite traer tu pripia bedida alcohólica: Te daremos un esqueleto que logre holgadamente el estampado y le apliques los estilos a tu gusto.
Hay sistemas de diseño en todos los puntos de este espectro. Bootstrap puede estar entre los dos últimos, donde obtienes un tema completamente diseñado, pero la personalización se logra en gran medida mediante la configuración de variables Sass y eso crea infinitas variaciones.
Polaris, el sistema de diseño de Shopify, es de código abierto, pero definitivamente para las cosas de Shopify. Intencionalmente no están tratando de hacer lo que hace Bootstrap (me dicen). Se trata mucho más de reforzar la consistencia y adherirse a una marca cohesiva que de juntar y personalizar una página.
Material Design definitivamente es cosa de Google. La historia de Material Design es que Google tiene una gran cantidad de productos en todo tipo de plataformas. Esto podría convertirse fácilmente en un desastre de diseño y marca inconsistentes. En cambio, Google desarrolla Material Design y lo envía con éxito a lo que parece ser todo su imperio. Una increíble historia de éxito en sistemas de diseño. Así que no creo que esté fuera de lugar decir que Material Design es de Google para Google.
Pero en estos días, definitivamente alientan a otros desarrolladores a usarlo también. De forma predeterminada, eso hace que su cosa se vea como una cosa de Google.
Pero están tratando activamente de hacer que Material Design sea más personalizable para que puedas traer tu propia marca. Hasta ahora, parece que hay un complemento de Sketch que ayuda con eso. Para nosotros, los programadores, su repositorio de componentes materiales parece estar construido con Sass y muchas cosas están configuradas con variables que puede anular. Vea este tutorial sobre cómo personalizar.
Hay muchas historias de éxito con la personalización de Material Design. Empresas como Lyft, Zappos y NPR, que tienen fuertes identidades de marca propias, utilizan Material Design personalizado.
Eso hace que los mensajes para Material Design sean aún más complicados e interesantes. Definitivamente es para Google, pero claramente también está destinado a cualquier otra persona que quiera usarlo. Ese mensaje podría funcionar ya que Google tiene los recursos y la percepción para lograrlo de una manera que creo que es más difícil de hacer para otros sistemas de diseño de marca de la empresa.
En caso de que esto no sea obvio (y mucho me temo que no lo es), los sistemas de diseño no son una mercancía. No podemos elegir simplemente el que tiene el mejor acordeón y usarlo en el próximo proyecto. Es posible que ni siquiera se nos permita usarlo. Podría tener una marca intencional para una empresa específica. Hay todo tipo de factores a considerar aquí.
Mi consejo de despedida es en realidad para los creadores de sistemas de diseño público: identificar claramente para quién es este sistema de diseño y qué pueden hacer con él.
También me gustaría señalar que todas las personas a las que les mencioné esto en las últimas semanas han tenido diferentes opiniones sobre todo este tema de los mensajes de la audiencia objetivo en los sistemas de diseño. Por supuesto, me encantaría leer tus comentarios sobre cómo te sientes al respecto.