Primeros pasos con módulos y desarrollo front-end modular

Todos conocen y aman los ladrillos Lego. Estaba enganchado a los Legos cuando era niño, y todavía los amo hoy. Puede ensamblar su juguete de todo tipo de Legos en todo tipo de formas, una pieza a la vez. Luego puede comenzar de nuevo y construir un juguete diferente a partir de esas mismas piezas. Las posibilidades son infinitas.

Los módulos en un sitio web se parecen mucho a los Legos. Piense en los módulos como piezas de Lego que le permiten construir su sitio web. Cuando los conectas entre sí de la manera correcta, forman páginas web. Para construir sitios web como Legos, debe pensar en los sitios web como una colección de módulos independientes. Este artículo lo ayudará a hacer exactamente eso con su desarrollo y diseño de front-end.

Collages de módulos

Cuando entro en la fase de diseño de un proyecto, tiendo a comenzar ensamblando collages de inspiración de diseño y collages de módulos. Es un proceso muy parecido al de Dan Mall, quien llama a estos collages productos de diseño para una era posterior a las computadoras. Los collages de inspiración son colecciones de capturas de pantalla que le presento al cliente, solo para tener una idea general de la dirección visual en la que nos dirigimos. Son simplemente capturas de pantalla de sitios web que nos gustan tanto a mí como al cliente.

Una vez que recibimos la confirmación de que estamos en la misma página en términos de estilo, puedo acceder a mi editor gráfico (prefiero Sketch) y crear collages de módulos. Estos collages son colecciones de los módulos más utilizados: botones, formularios, encabezados, párrafos, listas, imágenes, etc. Los collages de módulos me permiten crear rápidamente piezas de cómo se verá y se sentirá el sitio web.

Aquí hay una parte de un collage de módulo reciente mío, un ejemplo de un botón que diseñé en Sketch al comienzo de un proyecto:

Tal vez se esté preguntando cuándo entran en juego las composiciones estáticas y la presentación de diseños perfectos de píxeles al cliente. No lo hacen, me los estoy saltando casi por completo en mi proceso. Omitir esa parte del proceso me permite ingresar al código muy temprano en el proyecto y codificar prototipos (los abordaré pronto), o en otras palabras, diseñar en el navegador. Estas son algunas de las ventajas de diseñar en el navegador:

• El navegador es el entorno natural de un sitio web, y apegarse a las ideas creadas en un editor gráfico puede ser contraproducente. Es natural probar y tomar decisiones de diseño en los navegadores. Lo ha escuchado antes, lo escuchará nuevamente: no se trata de cómo se ve, se trata de cómo funciona.

• Siempre habrá inconsistencias de diseño entre los simulacros estáticos y lo que termina obteniendo en el navegador una vez que se traducen en código. Para evitar esas inconsistencias, acceda al editor de código y al navegador para resolver problemas de diseño reales.

• Es posible que las composiciones estáticas no transmitan el mensaje correcto. La apariencia será muy diferente una vez que integre la interactividad, como los estados de desplazamiento, las transiciones y las animaciones.

• En lugar de pasar horas y horas diseñando varias maquetas estáticas para varias resoluciones, puedo ahorrar mucho tiempo ingresando al código temprano. Ajustar el CSS me permite demostrar rápidamente los cambios y el aspecto receptivo al cliente en varios dispositivos: teléfonos inteligentes, tabletas, etc.

Por lo tanto, ahorre tiempo y abra su editor de código y el navegador para comenzar a crear la UX lo antes posible. En mi experiencia, la mayoría de los clientes solicitarán una maqueta completa de una o dos páginas antes de que podamos proceder con la codificación, y eso está completamente bien. Es importante que el cliente tenga una buena idea del diseño futuro. Usualmente uso InVision, que es una gran herramienta para realizar un seguimiento de las primeras maquetas, los cambios, los comentarios y más. Sin embargo, es muy importante que los clientes entiendan que Sketch e InVision no los llevarán muy lejos.

Construyendo los módulos para el desarrollo front-end

Una vez que el cliente está satisfecho con el collage de módulos y las maquetas que he diseñado, puedo comenzar a codificar y definir la apariencia real de esos elementos.

El diseño modular se entrelaza con el desarrollo modular en un proceso iterativo. Codifico un módulo, luego lo pruebo en el navegador para ver cómo funciona, luego itero si es necesario. Nuevamente, este proceso es muy parecido a construir Legos: básicamente diseñas y desarrollas al mismo tiempo y pruebas diferentes variaciones hasta que te sientas bien al respecto.

A menudo empiezo el desarrollo de los módulos con la construcción de algo simple, como un botón. Imagina que estás construyendo uno tú mismo y necesitas codificar un botón naranja, generalmente usado para un formulario de contacto. Esto es lo que se te podría ocurrir:

 .submit-button { background: orange; color: #fff; padding: 10px 20px; font-size: 16px; }

 <a href=“#” class=“submit-button”>A link</a>

Bastante simple, ¿verdad? Aplicaría la clase .submit-button a su HTML y eso resolvería su problema actual. Ahora, ¿qué pasaría cuando necesites crear un nuevo botón, como ese, pero con un color de fondo azul? Probablemente copiaría esa clase exacta, luego cambiaría el nombre de la clase y el color de fondo. Rápido y sucio. Ahora, imagine que necesita usar el mismo botón, pero con un fondo naranja. Puede ver a dónde va esto: puede terminar con una gran cantidad de CSS que se repite. En un proyecto súper pequeño, esto puede no convertirse en un problema real, pero en proyectos más grandes probablemente lo sea. Antes de que te des cuenta, tu CSS se hincha y es difícil de mantener.

Si alguna vez ha desarrollado un proyecto de mediana a gran escala, sin duda ha experimentado una buena cantidad de dolores de cabeza. Esos pueden haber sido causados ​​por cualquiera de las siguientes razones:

• Código desordenado, inconsistente, difícil de escanear y entender.
• Código inflado y archivos CSS XXL con mucha duplicación.
• Código que es difícil de mantener.
• La falta de separación de la estructura y la piel.

No te preocupes, no estás solo. Apuesto a que todos los desarrolladores front-end han experimentado esos dolorosos problemas de vez en cuando, y probablemente muchos más. Puedo decir con seguridad que he tenido muchos proyectos en el pasado en los que me he encontrado con todos esos problemas típicos.

Una forma de evitar o minimizar esos problemas es construir de forma modular.

El botón modular

¿Cómo codificar ese botón de forma modular? Un enfoque modular sería escribir código que pueda reutilizar. Recuerda esos Legos, que se pueden usar y reutilizar de nuevo.

 .button { padding: 10px 20px; font-size: 16px; } .button-orange { background: orange; color: #fff; }

 <a href=“#” class=“button button-orange”>A link</a>

Lo que hemos hecho es una inteligente separación de estilos. La clase .button contiene los estilos que usa cada botón en su proyecto, por lo que no tiene que repetirlo. La clase .button-orange usa solo los estilos relevantes para el botón naranja. Haría lo mismo con todos los demás botones y definiría sus colores de fondo y texto.

Su módulo de botones podría terminar con varios botones independientes, listos para usar cuando los necesite.

¿Qué pasa con cosas más complejas?

Sigue los mismos principios para todos los demás componentes que pueda necesitar. El objetivo es crear módulos que sean elementos independientes, independientes de otros módulos. Cuando se combinen, estos módulos formarán plantillas, donde simplemente reutilizará los módulos según sea necesario y trabajará para completar su diseño.

Para leer más sobre el desarrollo modular de front-end, recomiendo encarecidamente SMACSS, que es la arquitectura que tiendo a usar en todos mis proyectos, grandes o pequeños.

Recuerde, el proceso modular se trata de construir, probar e iterar. Primero se produce un módulo en su editor, luego se prueba en un navegador y luego se itera si es necesario. Repita ese ciclo siempre que sea necesario.

Involucrar al cliente

No olvide las necesidades del cliente: quieren estar informados y obtener la confirmación de que están obteniendo el valor de su dinero. La belleza de este proceso de desarrollo es que los clientes pueden ser miembros activos de su equipo. Puede mostrarles los módulos de manera segura y ellos pueden pasar por alto el proceso de desarrollo y colaborar en todo momento para mejorar el producto. No tienen que esperar a que se termine una compilación estática o se alcance un hito antes de ver un progreso real. Si se toma un tiempo para explicar la forma en que funcionan los módulos a sus clientes, comprenderán y apreciarán mejor el proceso de diseño y el tiempo dedicado a construirlos.

La forma en que suelo presentar módulos a un cliente es muy parecida a como lo hace Bootstrap: configurar un módulo aislado junto con su código es una excelente manera de involucrar a todos los diseñadores, desarrolladores y clientes en el proceso.

Utilice los módulos que ha creado como bloques de construcción para las páginas. Para su página de índice, puede colocar el módulo de navegación en la parte superior, un módulo de héroe a continuación, algunos de los módulos de contenido a continuación, luego su pie de página en la parte inferior. Antes de que te des cuenta, ya tienes una página para un prototipo HTML. Pero, ¿qué es un prototipo, exactamente? Siempre me ha gustado la definición de Leah Buley de un prototipo de su gran libro The User Experience Team of One:

Ejemplos de funcionamiento o semifuncionamiento de cómo debe comportarse y operar el diseño una vez implementado.

Al construir un prototipo, eso es exactamente lo que obtendrá en la fase inicial del proyecto: un sitio web semifuncional. Donde las maquetas estáticas e InVision se quedan cortas, los prototipos HTML sobresalen. El prototipo sirve como un entregable receptivo perfecto para sus clientes. Y una vez que el cliente esté de acuerdo con la apariencia de su prototipo, todo lo que necesita hacer es pulirlo hasta que funcione como debe hacerlo. Construir, probar, iterar.

Reutilizar los bloques de construcción

Los módulos y prototipos le permitirán reutilizar el código para el proyecto actual, pero también para proyectos futuros. Ajustar un módulo de su último proyecto puede ahorrarle mucho tiempo: los módulos que necesita en cada proyecto suelen ser similares. Tengo una gran biblioteca de módulos que a menudo reutilizo: pestañas, menús de navegación, botones, migas de pan, formularios, tablas, paginación, listas, etc. Si bien el código de esos módulos no es exactamente el mismo en todos los proyectos, buena parte de él se puede reutilizar, ahorrándome mucho tiempo de desarrollo. Mi consejo para ti es que también crees módulos reutilizables para ti. Echa un vistazo a BASSCSS, Pure y Refills para inspirarte.

No se desanime si cambiar al diseño y desarrollo modular lleva tiempo. Naturalmente, si los principios modulares son nuevos para usted, requerirán un ajuste de su proceso de diseño y desarrollo, pero el cambio puede valer la pena.

Los métodos y técnicas modulares que cubrí en este artículo solo están arañando la superficie. Sin embargo, espero sinceramente que este artículo haya sido útil y que te haya intrigado para sumergirte en el diseño y desarrollo modular.