Sazerac, metodología para agilizar el desarrollo de proyectos web

Morcuende, Alfonso

Resumen: Se presenta Sazerac, una colección de documentos y ficheros con los que desarrollar rápidamente un proyecto web. Sazerac contiene documentos que ayudan a desarrollar las partes iniciales de cualquier proyecto; análisis, diseño de aplicación y prototipado. Además, esta información puede ser traspasada a la fase de diseño web mediante plantillas predefinidas. Finalmente, Sazerac incluye una colección de estilos CSS con los que transformar los diseños web en una robusta maquetación multidispositivo.

Introducción

El diseño profesional de proyectos web es un trabajo multidisciplinar que implica la participación de distintos departamentos y perfiles profesionales. Un esquema bastante común es el que divide el trabajo en tres equipos o áreas: diseño de interacción, diseño visual y maquetación. Aunque cada uno de los equipos desarrolle su trabajo de forma profesional, puede darse el problema de que una vez finalizado emerjan malentendidos o decepciones respecto al trabajo de los demás. Esto se suele deber a la existencia de desajustes entre lo que un equipo planeó y el otro ejecutó, es decir, a un problema a la hora de documentar y compartir información. Una de las causas puede ser, por ejemplo, la utilización de retículas (grids) no exactamente iguales entre los diferentes profesionales involucrados.

Sobre estas premisas se presenta Sazerac (www.sazerac.es), una metodología orientada a que todos los elementos comunes de un proyecto estén documentados de forma unitaria, ayudando a eliminar duplicidades y malentendidos entre equipos, y agilizando así el desarrollo del proyecto.

Sazerac surge de la necesidad de una metodología global para las áreas de diseño de interacción, visual y maquetación; pero también de que esta metodología pueda adaptarse a proyectos de muy diversa tipología. Por ello Sazerac se ha pensado como un boilerplate (fórmula con la intención de ser copiada y modificada), y no como un framework (estructura encapsulada y cerrada).

A continuación se describen los diferentes elementos que forman Sazerac.

Sazerac Design Book

Se trata de un documento para la toma de requisitos. Contiene tres apartados: análisis, diseño de aplicación y prototipado. En el análisis se proponen trece preguntas mediante las que profundizar en el conocimiento del producto o servicio, y de los diferentes tipos de usuarios y sus características.

Sobre esta información se define el diseño de aplicación. En esta parte del libro hay disponibles plantillas para definir "personas" - usuarios arquetípicos - (Costa; 2011), "scenarios" - descripciones de situaciones de uso - (Wechsler; 2010); y "task flows" - pasos en los que se subdividen estos "scenarios" - (Unger, Chandler; 2009).

Figura 1. Sazerac Design Book

Sazerac Templates

Tras definir el producto, el sistema de plantillas de Sazerac permite a los diseñadores visuales plasmar sus diseños. Estas plantillas se basan en el mismo sistema de retículas de las páginas de Sketching: 16 columnas para desktops y tablets y cuatro columnas para smartphones.

Figura 2. Sazerac Templates

Sazerac Boilerplate CSS

Una vez finaliza el diseño del producto y su aspecto visual, se procede a su maquetación. Los estilos CSS ofrecidos por Sazerac permiten empezar a dar formato a al HTML. Las retículas de los prototipos y los diseños visuales realizados con sus plantillas vuelven a aparecer aquí. Además, Sazerac permite que el código pueda ser visualizado perfectamente en distintos dispositivos, mediante el uso de "responsive design" (Marcotte; 2010).

Aunque utiliza muchas de las ideas y código existentes en los principales frameworks CSS, Sazerac no pretende ser un framework CSS. Sazerac quiere ser un punto de partida, un producto adaptable a cualquier tipo de proyecto web, por lo que todos sus ficheros y documentos están ideados para solucionar problemas comunes a cualquier trabajo. Todos los ficheros de Sazerac se pueden modificar. El Design Book es un PDF editable; Templates, un conjunto de ficheros PNG editables con Fireworks; y Sazerac Boilerplate CSS trabaja con “less” (Sellier; 2010), un lenguaje que permite tratar tus estilos de manera dinámica, con lo que muchos de los valores almacenados en ellos se pueden usar como variables que pueden contener valores cambiantes.

Figura 3. Sazerac Boilerplate CSS

La organización de estos ficheros se asemeja mucho a la forma de trabajar de Bootstrap (http://twitter.github.com/bootstrap/). Toda la maquetación CSS puede ser modificada desde el fichero variables.less, donde se encuentran definidas todas las variables que pueden personalizarse, desde el color de los enlaces, hasta el número de columnas definidas en la retícula.

Por último señalar que Sazerac se publica bajo licencia Creative Commons.

URL de Sazerac: http://www.sazerac.es

Bibliografía

Costa, J. (2011). Personas: Putting the Focus Back on the User. UX Booth. Disponible en: http://www.uxbooth.com/blog/personas-putting-the-focus-back-on-the-user/

Marcotte, E. (2010). Responsive Web Design. A list apart. Disponible en: http://www.alistapart.com/articles/responsive-web-design/

Sellier, A. (2010). Less: The dynamic stylesheet language. Disponible en: http://lesscss.org/

Unger, R.; Chandler , C. (2009). A Project Guide to UX Design: For User Experience Designers in the Field or in the Making. New Riders.

Wechsler, J. (2010). Using Scenarios. UX think. Disponible en: http://uxthink.wordpress.com/2010/11/30/using_scenarios/