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

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](http://seesparkbox.com/foundry/our_new_responsive_design_deliverable_the_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](https://github.com/north/generator-Style-Prototype) de [North](http://pointnorth.io/), 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](https://github.com/creationix/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](https://github.com/north/generator-Style-Prototype) 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](http://www.browsersync.io/), 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.