Style Prototype: Una herramienta fácil, rápida y reutilizable de Web design

June 18, 2021

El desarrollo de una página Web, como todo proyecto, conlleva un gran número de entregables previos al entregable final, uno de los principales siendo el diseño final de la página, el objetivo final de todo diseñador.

Suena sencillo: un diseño detallado e implementado de la plataforma, que cuente con la aprobación final del cliente y demás interesados; sin embargo, todo diseñador sabe el largo proceso que el mismo conlleva: wireframes, colores a implementar, logos, prototipos en Photoshop y muchos cambios que eventualmente tendrán que ser pasados a código, con la posibilidad que los mismos reciban ulteriores cambios a lo largo del desarrollo.

¿Y si existiera una forma de unir todos estos pasos en uno solo?

Les presento el Style Prototype: una solución moderna a los nuevos retos de Web Design. Un compromiso entre mockups detallados y prototipos de baja fidelidad, el Style Prototype es una página HTML que resume gráficamente el conjunto de componentes que se utilizarán en el diseño final. Cosas como los colores a usar, tipografía, estilos de imágenes, estilos de botones y más pueden ser incorporados en un Style Prototype para presentarse al cliente final y reiterarse rápidamente basándose en la retroalimentación dada, dejando al cliente con una clara idea de la dirección del diseño y a usted con componentes listos para ser reutilizados en la página final.

Ventajas del Style Prototype

  • Desarrollo rápido: es más fácil realizar un diseño cuando solo se requiere de una herramienta, en lugar de tener que pelear con varios prototipos e imágenes.
  • Fácil de modificar: el código está diseñado para ser fácilmente modificado y reutilizado, al contrario de los documentos.
  • Presentación más efectiva de elementos dinámicos: no hay mejor forma de presentar elementos como carouseles, sliders y dropdowns que mostrarlos en vivo y funcionando.
  • Altamente reutilizable: una vez se cuente con un Style Prototype muy cerca a la versión final, solo es cuestión de reciclar el código de los componentes en la página final.

Cómo desarrollar un Style Prototype

Hay varias herramientas y guías para el desarrollo de un Style Prototype. En Rootstack, hemos adoptado el uso del Style Prototype Generator de North, un scaffolder para crear Style Prototypes basados en Angular y Node, ya listos para trabajar. En este artículo, les mostraré cómo instalarlo y configurarlo para que puedan empezar a desarrollar su propio Style Prototype.

Paso 1: Preparación

Antes de iniciar, asegúrense de tener instalado lo siguiente:

  • Ruby, versión 2.0.0 o más
  • Rubygems
  • Node.JS. Les recomiendo altamente el uso de nvm para su instalación, sobre todo para los usuarios de distros Linux basadas en Debian (bajar el Node a través del apt-get puede conllevar problemas)
  • NPM

Paso 2: Instalación

Ejecuten lo siguiente en su terminal:

$ npm install -g yo gulp bower generator-style-prototype

Una vez se terminen de descargar los módulos indicados, ya debería contar con el Style Prototype generator en su equipo.

Paso 3: Creación de un Style Prototype

Desde el directorio en el que desea almacenar su Style Prototype, ejecuten la siguiente línea de comando:

$ yo style-prototype

Ingresen el nombre del proyecto y la estructura que desean utilizar (entre las disponibles están Atomic Design, North based, o ninguna estructura definida). Al final del proceso de creación, un nuevo proyecto de Style Prototype estará disponible para empezar a trabajar de una vez.

Para arrancar el servidor del proyecto, entren en el directorio raíz e ingresen lo siguiente:

$ gulp

y listo! En la página oficial de Style Prototype Generator podrán encontrar más documentación sobre cómo trabajar con la herramienta, así que les recomiendo que le echen un vistazo.

Algunas de las funciones que integra esta herramienta que la hacen tan poderosa son: desarrollo en Sass, implementados automática e inmediata de los cambios en la estructura y estilizado, sincronización de la navegación entre varios dispositivos a través de BrowserSync, entre otros.

Observaciones

He tenido la oportunidad de trabajar con Style Prototypes recientemente para el desarrollo e implementación del diseño de una página basada en Drupal, aquí en Rootstack, y definitivamente me he llevado una muy buena impresión: el proceso de diseño y desarrollo se dió de forma mucho más fluida y eficiente, sobre todo bajo la necesidad de tener entregables listos para mostrar. Tener un modelo avanzado sobre el cual es posible recibir un feedback también nos ayudó a alcanzar una versión tentantiva satisfactoria rápidamente. Llegados a este punto, solamente fue necesario exportar el diseño realizado a nuestra versión demo y todas las piezas cayeron en su lugar. Les exhorto a que le echen un vistazo a este modelo, como una posible solución para acelerar los viciosos ciclos de retroalimentación y ajustes de Web design.