Transformación organizacional – Cuarta parte

4. Aprovechando el diseño atómico

Terminamos nuestra serie de blogs analizando cómo los principios del Diseño Atómico permiten la creación más rápida de aplicaciones que son más fáciles de mantener, gracias a componentes jerárquicos que se pueden combinar y recombinar para agregar nuevas características y funcionalidades.

Uno de los aspectos que más se pasa por alto en una transformación es la importancia del sistema de diseño y la biblioteca de componentes.

El objetivo de la mayoría de las transformaciones digitales es permitir a los equipos crear productos más rápido o servir páginas más rápido, mejorando el SEO y la experiencia del cliente, todo al mismo tiempo.

Sin embargo, esto puede resultar verdaderamente desafiante para las organizaciones que han estado luchando con su tecnología durante algún tiempo y ahora están desesperadas por un rediseño, un cambio de marca o alguna otra campaña de marketing importante.

Crear un modelo tecnológico para el diseño es importante, ya que garantiza que el resultado final sea alcanzable, escalable y reutilizable. Aquí es donde Diseño atómico viene en.

Nuevo llamado a la acción

¿Qué es el diseño atómico?

Atomic Design es una metodología para diseñar y desarrollar interfaces de usuario de forma sistemática y altamente estructurada.

Creado por primera vez por Brad Frost, quien se inspiró en los principios de la química, se basa en la idea de que las interfaces de usuario complejas se pueden dividir en bloques de construcción más pequeños y manejables.

En otras palabras, Atomic Design ayuda a los ingenieros de software y UI/UX a especificar, diseñar y construir componentes a partir de componentes pequeños y discretos. Esto permite probar los componentes de forma similar a como probamos el resto de nuestro código.

  • Átomos: los componentes más pequeños se pueden probar con el equivalente a pruebas unitarias. Esto incluye elementos de la interfaz de usuario como tipografía, espaciado, botones y entradas.
  • Moléculas: grupos de átomos que trabajan juntos para formar elementos de interfaz de usuario más complejos, como campos de entrada de texto, menús desplegables y barras de búsqueda. Requieren pruebas un poco más complicadas, similares a las pruebas funcionales que utilizamos para probar código más complejo.
  • Organismos: grupos de moléculas y átomos que forman los componentes de la interfaz de usuario que formarán la base de toda la interacción del usuario en una página, como carruseles y ventanas de recomendación o barras de navegación. Los organismos requieren las pruebas unitarias y funcionales que se implementaron en los átomos y moléculas, pero también se benefician de las pruebas de integración para garantizar que funcionen bien en el contexto específico en el que se utilizarán.

Esta capacidad de probar átomos, moléculas y organismos como probamos otros códigos es el superpoder del Diseño Atómico. Entonces, si un nuevo organismo está compuesto de átomos existentes, entonces lo único que hay que probar es el uso de ese componente en la página donde se utilizará. Todas las demás pruebas unitarias y de tipo funcional ya se han ejecutado. De manera similar, si se realizan cambios en los componentes base, estos cambios se representarán en todo el sistema de diseño.

Además de hacer que la construcción de componentes sea mucho más predecible, la belleza de esta metodología significa que los bloques de construcción se pueden combinar y reutilizar en múltiples proyectos para crear interfaces de usuario consistentes y escalables.

Los beneficios: diseño rápido y responsivo

Una de las cosas más difíciles para las organizaciones que intentan transformar su tecnología y sus formas de trabajar es la imprevisibilidad del logro de la transformación. Lo cual, lamentablemente, es la razón por la cual muchas partes interesadas han perdido la confianza en la capacidad de sus organizaciones tecnológicas para cumplir.

Ganarse la confianza de las partes interesadas lleva tiempo, pero comienza con la capacidad de entregar pequeñas cosas rápidamente. Y tener un sistema de diseño y una biblioteca de componentes bien definidos es una excelente manera de mostrar cambios visibles rápidamente.

101 Ways recomienda utilizar una herramienta de código abierto llamada Storybook para facilitar el diseño, probar y compartir componentes y presentar la biblioteca de componentes a todos en la organización. Con Storybook, los líderes de TI pueden demostrar los componentes y mostrar el progreso incluso antes de que se hayan creado las páginas web.

Con un sistema de diseño incipiente y una biblioteca de componentes implementados, un diseñador junto con un desarrollador pueden entregar un nuevo componente en menos de un día. Exhibir este tipo de desempeño puede contribuir en gran medida a establecer credibilidad y recuperar esa confianza.

Si desea ayuda para impulsar su transformación, póngase en contacto.


Source link

About David Lopez

Informático y experto en redes. Redactor en varios blogs tecnológicos desde hace 4 años y ahora en Steamachine.net

Check Also

Más allá del código y detrás del navegador Vivaldi con nuestro desarrollador iOS, Priyonto

En la última edición de nuestra serie detrás de escena, Priyonto M Rahman nos da …

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *