Uno de los contenidos del módulo de Diseño de interfaces web del ciclo de grado superior de Desarrollo de Aplicaciones Web es la planificación de interfaces gráficas (ver BOE). En esta parte, además de trabajar con bocetos (wireframes y moockups, todavía no se aclaran muy bien qué es cada uno) es necesario que el alumnado sea capaz de interpretar y elaborar una guía de estilos web.
Por eso diseñé esta presentación en la que explico el por qué de utilizar una guía de estilos, las secciones que debería tener y algunas guías de estilos web a tomar como ejemplo. Ya veremos qué es lo que sale de todo esto.
Después de trabajar en clase el tema de las guías de estilos, un alumno, que no debió escuchar lo que dije en primer lugar, me dijo: “Entonces esto lo tenemos que hacer en la fase de planificación del reto (trabajamos por retos), ¿no?”. No pasa nada, para eso estamos los profes, para repetir las cosas las veces que haga falta :_)
Es necesario recalcar que la guía de estilos es algo que se elabora para el cliente una vez acabado un proyecto, y no para realizarla antes de comenzarlo. En la guía dejamos una serie de especificaciones que los diseñadores o desarrolladores que tomen el control de la página deben saber para seguir con el mismo aspecto. Sin duda, debe haber un trabajo previo de diseño y planificación de colores, tipografías, etc. pero el producto final se entrega con el proyecto terminado.
Toda guía de estilos web debería definir, al menos, las siguientes secciones que detallan:
Las guías pueden elaborarse en una página web o en un documento.
Si se hace de manera web, los propios elementos ya disponen de toda la información necesaria para tomarlos como modelo. Todas las grandes marcas disponen de su propia guía de estilos web: Starbucks, Mozilla, etc.
En caso de que trabajemos con un documento, es necesario especificar tooooodos los detalles (colores hexadecimales, tamaños de letra, fuentes, medidas, etc.).
Para mi uno de los mejores ejemplos de una guía de estilos web en un documento es la Guía de estilos de la Universidad Politécnica de Valencia. Pero estoy segura de que hay muchísimas más tan buenas o mejores.
¿Vosotros también trabajáis este tema en el módulo? 😉
Consulta otros artículos sobre el módulo de Diseño de Interfaces Web.