UI Kit vs Sistema de diseño

La principal amenaza que surge es la existencia de visiones de negocio basadas en procesos de entrega. Así, con un modelo basado en la producción de paquetes y no de proyectos vivos, se ha mantenido la existencia de los UI kit cuyo valor se podría limitar al desarrollo de plantillas. Se desestima, por tanto, en la generación de estas guías de estilo el valor del equipo. Su uso viene del fallo estratégico de la propia organización, donde las responsabilidades diluidas generan soluciones de diseño sin consistencia por lograr obtener una rentabilidad inmediata. El resultado es la fricción entre los equipos de desarrollo y el desperdicio de capacidades. En cambio, si se opta por la elaboración de un sistema de diseño o, lo que es lo mismo, un producto digital es posible alinear las aportaciones de todo el equipo de la organización y mejorar el nivel de implementación y tangibilzación.

Finalmente, elegir entre un UI Kit o un Sistema de Diseño dependerá de la metodología de trabajo que se establezca.

UI Kit

Un UI Kit facilita la unificación, homogeneización y la consistencia de los productos y servicios para la adaptación posterior de un desarrollo de una interfaz de usuario ayudando a los equipos a construir rápidamente un producto dado. Del mismo modo que el uso de un framework permite desarrollar proyectos automatizados, el UI Kit ofrece una colección completa de componentes fácil de usar, ampliable y customizable.

Sin embargo, a pesar de resultar una guía útil para un desarrollador, no contiene el respaldo de una estrategia de negocio. Obtener un producto que se comporte como un auténtico agente de cambio requerirá de unos principios solidos amparados por la unión de todo el equipo de una organización. La representación de esa realidad auténtica y genuina pasa por hacer partícipe a todas las áreas de la organización para las que se va a desarrollar el producto. Es entonces cuando entra en consideración la importancia de un sistema de diseño.

Sistema de Diseño

Un Sistema de diseño establece un punto de guía y organización. Permite alinear a todo un equipo en la generación de un producto considerando el tono, la usabilidad, la necesidad práctica, y la emotividad. De esta manera se obtiene a través de una visión más compleja, global y colaborativa un producto digital completo.

La consideración de los componentes para producción pasará por técnicas de medición, evaluación y contenido para lograr la creación de un producto que aporte sencillez, agilidad y reconocimiento para el proyecto. Los componentes serán de esta manera parte singular de la maestría de la entidad. Lo que muy probablemente requerirá un testing continuo al tratarse de un producto vivo y escalable. Resultando la escalabilidad su mayor singularidad.

Del mismo modo que un vehículo se compone de todas las piezas que lo componen no todos los vehículos son iguales, por lo que, aunque se pueda tunear el mismo vehículo siempre se pasan cosas. Y es mediante la participación de un equipo de diferentes ámbitos donde se obtienen los requerimientos necesarios para la elaboración de un diseño de garantía de calidad.

Las generaciones de prototipos, de pantallas en el caso de sitios web, durante el proceso de creación de un sistema de diseño a partir de componentes harán surgir nuevas necesidades que no fueron medidas de inicio con modelos genéricos o iteraciones singulares que requieren soluciones precisas.

No todo vale

Desde hace un par de años la manera de obtener patrones y componentes para construir un producto final pasa por generar un Sistema de Diseño con elementos organizados y reutilizables, usables y accesibles. La principal baza del sistema es proporcionar solidez y coherencia durante toda la vida del proyecto. Las revisiones posteriores definirán oportunidades de mejora.

El Sistema de Diseño surge como solución a un problema de tiempos, costes, expectativas y objetivos. Mediante un diseño atómico con una unidad mínima en base a la definición de la visión del producto objetivo se alcanza la mayor complejidad que pueda concebir cualquier proyecto. Su mayor baza serán los casos de uso.

Un Design System es como una guía de estilo, pero cuya infraestructura progresa y es orgánica. No es un documento fijo, sino una herramienta que se compone de elementos que dentro de un proceso constante de crecimiento podremos volver a usar como modelo de implementación. Contiene un registro de la información necesaria para comprender el comportamiento y el uso individual o combinado de los componentes que forman el repositorio de la interfaz de usuario.

UI Kit vs Sistema de diseño

Sistema de diseño

Aún con cosas en común la principal ventaja de un Sistema de Diseño es que es un organismo vivo. Un Sistema de Diseño (Design System) es un modo de trabajo en equipo, una manera de establecer valores y principios que recogidos en unos componentes medibles con reglas precisas identifican la manera de proceder para la creación de un producto final, el cual se podrá construir aplicando un modelo conceptual reusable en el desarrollo.

A continuación, se citan algunos de sus atributos.

Ventajas de un Sistema de Diseño

• Logra orden y consistencia a lo largo de toda la vida del producto. El diseño de pequeños componentes reutilizables facilita la identificación. Una gobernanza eficaz para su aprendizaje y anticipación a un lenguaje visual e interactivo único.
• Logra la identificación con la imagen de marca. A través del alineamiento de un modelo visual unificado, un lenguaje consistente y reconocible que facilita la identificación y asociación de forma clara y funcional de la marca al diseño en cualquier medio unificando criterios para un buen diseño.
• Logra sencillez y agilidad. Se evitan diseños exagerados poco usables concentrando herramientas, guías y recursos para la elaboración de proyectos genuinos, restrictivos y productivos. De manera que se aporta un flujo de trabajo claro e intuitivo.
• Logra potenciar la escalabilidad reduciendo costes. Los componentes poseen un diseño de la experiencia sólido y reutilizable cuyas variaciones, por ejemplo, funcionales no implican una nueva codificación visual. Se trata de datos centralizados con valores de diseño que pueden ser consumidos por cualquier plataforma. Se pueden utilizar en base multiplataforma.

Desventajas de un Sistema de Diseño

• Se puede perder el factor sorpresa. La experiencia de usuario debe transmitir principios conservadores que no permiten variaciones en los patrones establecidos. El sistema de diseño debe ser previsible.
• Se prioriza la consistencia a las necesidades específicas. Las necesidades de cada flujo de trabajo pueden ir variando a lo largo de la evolución del servicio o portal. La necesidad concreta para desarrollar una interfaz singular en un momento dado pasa a un segundo plano.
• Se puede olvidar conceptualizar una visión global del servicio. No hay que olvidar obtener una perspectiva global al iniciar un diseño atómico que posteriormente se irá volviendo más complejo.

UI Kit

En contraposición el kit de herramientas define una visión común.

Un UI kit (User Interface kit) suele resultar en un archivo cerrado con elementos prediseñados que sirve de referencia en el desarrollo de una interfaz de usuario.

Algunos atributos de un UI kit.

Ventajas de UI Kit

• Facilita agilizar el desarrollo de los productos o servicios. Se pueden acelerar el desarrollo, por ejemplo, de las páginas web que si lo hacemos desde cero al disponer de un modelo inicial.
• Facilita el mantenimiento de una línea de diseño. Si se ha desarrollado una página web y sus estilos usando un framework, cualquiera que conozca ese framework, puede mantener la misma línea gráfica.
• Facilita el cross-browsing o compatibilidad entre navegadores. Ahorra tiempo y esfuerzo al garantizar la compatibilidad con todos los navegadores.
• Facilita el mantenimiento al usar frameworks que son mantenidos y evolucionados por una comunidad. El soporte de una comunidad va ampliando sus funcionalidades; además anticipa posibles errores, lo cuales son corregidos ahorrando tiempo y costes.

Desventajas de UI Kit

• Se usan más estilos y librerías de los que estamos necesitando. El rendimiento de una página web puede verse afectado al emplear un framework con una gran cantidad de elementos innecesarios.
• Se requiere customización. La personalización del framework css será indispensable para diferenciarse de una plantilla genérica utilizada en otras páginas web que utilicen el mismo framework CSS.
• Se requiere un proceso de aprendizaje del framework CSS utilizado. Hay que pasar por una curva de aprendizaje para utilizar el framework.
• Se necesita saber el funcionamiento de las hojas de estilo. No es posible hacer cualquier modificación en el framework sin conocer CSS.
• Se puede volver tedioso para un desarrollador. Un desarrollador puede encontrarse con un pdf estándar con mucha información que no le soluciona casos singulares.

¿Cuál es el mejor? UI Kit vs Sistema de diseño

Según la tarea requerida se podrá elegir entre un diseño atómico o un diseño multiplataforma. 

• Diseño atómico. Centrado en obtener una experiencia de usuario uniforme recorrerá los átomos visuales del sistema de diseño para volverlo escalable y consistente. Partiendo de las partes más elementales de la interfaz hasta alcanzar un todo presente en la página final que resalta y transmite la relevancia de una marca personalizada. Lo que generará experiencias de usuario planas, con orden y consistencia, aunque poco impactantes. El producto resultante reúne decisiones entre los dueños del producto, los diseñadores, los desarrolladores y las partes interesadas en la evolución y el mantenimiento del sitio web. 

• Diseño multiplataforma o conjunto de herramientas. El llamado “kit de herramientas” (UI kit) que nace de la necesidad de utilizar un entorno de trabajo​ o marco de trabajo​ estandarizado de conceptos, prácticas y criterios para enfocar el sitio web. Marco de estandarización para diseños elaborados con una guía de estilo. Muy factible para asegurar diseños normalizados.