Guías de estilo front-end: Respuesta a tus dudas

Recientemente proporcionamos a los seguidores de nuestro Twitter la oportunidad de preguntarnos cualquier cosa que deseasen sobre las Guías de estilo para el front-end. Aquí tienes las mejores preguntas y, por supuesto, ¡las respuestas!

1. Semántica

@anna_debenham @wdtuts ¿Cuál es la diferencia entre una hoja de estilo y una librería de patrones? (Tanto en la teoría como en la práctica).

— Jack Appleby (@jackappleby) 12 de mayo de 2014

Existen un montón de interpretaciones, pero así es como yo lo veo: guía de estilo es un término general que abarca un amplio rango de posibilidades; guías de estilo editorial que explican el tono, guías de estilo de diseño que exploran la tipografía y los colores que pueden usarse en el sitio, e incluso guías de estilo para el código de manera que este mantenga su consistencia mientras varias personas trabajan en el código base.

Una librería de patrones es un tipo de guía de estilo muy parecida a un completo framework. Las librerías de patrones son un excelente recurso para los desarrolladores, contienen todos los fragmentos de código para los módulos que aparecen en el sitio. Puede decirse que es como un manual de instrucciones para mantener los estilos de un sitio y para el código del front-end.

En palabras de Dave Rupert: “Los productos responsivos deberían tener un aspecto muy similar y totalmente funcional al estilo de los sistemas de Bootstrap de Twitter creados de forma personalizada para cubrir las necesidades de tus clientes.” Esta es una descripción bastante buena de lo que creo que es una librería de patrones.

2. Guías de estilo y rediseños

@anna_debenham ¿Con cuánta anticipación empiezas a crear la guía de estilo de un rediseño? @wdtuts

— Matt Quirk (@MattQuirk) 12 de mayo de 2014

Justo al inicio. Es la primera pieza que creo en mis desarrollos. Cada sitio tiene elementos comunes como párrafos, enlaces, titulares, listas, formularios… y disponer de un archivo predefinido con todos estas piezas de código de marcado es realmente útil para colaborar con los diseñadores en un proyecto desde el principio.

Un buen lugar desde el que empezar es Barebones de Paul Lloyd, ya que contiene todo el HTML estándar que probablemente sea utilizado en un sitio. Es fácil construir tomando esta base como andamiaje en cada parte de la funcionalidad que sea añadida.

3. Una cuestión de mantenimiento

@anna_debenham @wdtuts ¿Cómo gestionas el proceso de creación/mantenimiento de SG junto con los productos en alta fidelidad que entregas: librerías de patrones, composiciones?

— James Nettik (@jnettik) 12 de mayo de 2014

En anteriores proyectos en los que he trabajado, el diseñador ha utilizado TypeCast para construir sus estilos de manera que puedan probar la tipografía básica en el navegador y comprobar si tiene buen aspecto en distintos dispositivos, antes de comprometerse con un diseño concreto. Eso funcionaba bastante bien tanto para ambos, ya que ayudaba a detectar los problemas con las fuentes web de apariencia poco fiable o problemas con el contraste del color en pantallas de bajo dpi desde el principio.

Algunos diseñadores, como Dan Mall, construyen los elementos de sus librerías en su software gráfico durante el proceso de diseño. Al desglosar el diseño en módulos, convertir esto en una guía de estilo es bastante fácil. Jon Aizlewood uso este enfoque durante el rediseño de Code for America, y esto significó que podía empezar a construir componentes e ideas de prototipos mientras el resto del diseño todavía estaba avanzando.

4. Clientes y comunicación

@anna_debenham @wdtuts ¿Algún consejo sobre la comunicación con los clientes y su aprobación? ¿Cómo consigues captar los clientes mediante algo que no pueden visualizar?

— James Nettik (@jnettik) 12 de mayo de 2014

@anna_debenham @wdtuts ¿Cómo presentas, involucras o consigues que los clientes se familiaricen con la guía de estilos? (Especialmente con aquellos que no tienen conocimientos sobre la web)

— natalie (@talkanatalka) 12 de mayo de 2014

(He agrupado estas dos preguntas juntas porque son bastante similares.)

Dependerá en gran medida del cliente. Yo he descubierto que las guías de estilo son muy fáciles de vender a equipos web internos porque si están manteniendo un sitio web disperso, reescribiendo constantemente el mismo código y gestionando con inmensas hojas de estilo, reconocerán de inmediato en beneficio de disponer de una.

Los clientes que no trabajan directamente con el diseño o el código a diario probablemente no entenderán los beneficios de disponer de una (no es algo que muestre normalmente al CEO), pero no obstante cree una porque sé que a mí me ayuda, y con suerte, ayudará a cualquiera que tenga que añadir código a su sitio después de un año. Está bien ser capaz de entregar el proyecto al siguiente desarrollador al final del mismo. Es como los buenos modales.

5. Convencer a tu jefe

@anna_debenham @wdtuts ¿Cómo promover el uso de guías de estilo en organizaciones que no las usan por falta de cultura o plazos de entrega?

— Daniel Fosco (@notdanielfosco) 12 de mayo de 2014

Yo lo explico que a pesar de que la creación y el mantenimiento de guías de estilo conlleva algo de tiempo, a la larga, realmente ahorran tiempo. Quizá soy más consciente de esto como contratista, pero me lleva algo de tiempo familiarizarme con un nuevo proyecto, y no disponer de toda la información que necesito tiene un coste de tiempo para mí.

En un sitio que tiene una librería de patrones preexistente, puedo añadir una nueva pieza de funcionalidad al sitio mucho más rápidamente que si tuviese que rebuscar por el sitio buscando estilos similares o recreando algo que nadie es consciente que ya existe.

Disponer de una guía de estilo a modo de andamiaje sobre la que puedo construir me ahorra mucho tiempo, así que crear una para un proyecto no me supone mucho esfuerzo extra. Asegurarse de que la gente la mantenga es realmente el trabajo duro.

6. Sobre los generadores automáticos de guías de estilo

@anna_debenham Me encantaría saber qué piensas sobre estos generadores automáticos de guía de estilo sobre los que he estado escuchando recientemente... @wdtuts

— Westley Knight (@westleyknight) 12 de mayo de 2014

Existen algunos generadores de guías de estilo, Welch Canavan escribió una lista de los mismos aquí: http://welchcanavan.com/styleguide-roundup/

Entre algunos otros no mencionados se incluyen Stylify Me y Frontify, de manera que puedas probarlos también. A mi me gusta realmente como suena KSS (Knyle Style Sheets), ya que genera una guía de estilo en vivo a partir de comentarios en tu CSS.

Los generadores de guías de estilo pueden ser útiles en algunos casos, pero uno los beneficios de construir una guía de estilo conforme se desarrolla un sitio es que te fuerza a pensar con más cuidado sobre tu código, cada patrón es como un bloque de lego, así que te ayuda a adoptar la mentalidad de un enfoque más orientado a los objetos.

Cuando pienso que los generadores son más útiles es cuando llegas al proyecto de un sitio que ya ha sido diseñado, estás en un plazo de entrega límite y estás buscando qué colores y distintos titulares están siendo usados. Es útil si quieres recopilar un listado de colores hexadecimales.

Type-o-matic de Nicole Sullivan es también bueno en estos casos. Es un plugin de navegador que cuenta todas las fuentes en una página web y las ordena basándose en su color y tamaño.

7. Gente no visual

@anna_debenham @wdtuts ¿Cómo te comunicas eficazmente tanto con los diseñadores como con los desarrolladores de back-end dentro de la guía de estilo MÁS ALLÁ de mostrar el código? TY

— Joseph James (@joeaugie) 12 de mayo de 2014

Cuando construyas tu guía de estilo, colócate en los zapatos de un contratista o un nuevo empleado al que le hayan pedido añadir una nueva sección en el sitio. ¿Qué información necesitarían?

• En algunas de mis guías de estilo, agrego notas de utilización para explicar cuando usar ciertos patrones. Es útil para que los editores de contenido tengan un recurso que les explique cuando usar texto en negrita y cuando usar un titular, o el tipo de lista que es apropiada en distintas situaciones.
• Mientras trabajaba en el diseño de University of Surrey, añadimos algunas fotografías a modo de guía para explicar como se podían usar las imágenes en la web, y el tipo de dirección de arte que era apropiado en la imagen de marca.
• Con frecuencia añado esquemas de color para que los diseñadores encuentren fácilmente el color hexadecimal en caso de que lo necesiten, y también incluyo el nombre de la variable Sass en caso de que exista.

Si añades información para distintos roles, se convierte en un lugar centralizado al que la gente puede acudir y localizar lo que necesiten. Esto es algo GOV.UK ha estado logrando con su Service Design Manual (Manual de diseño de servicio).

8. Una vez hayas acabado

@anna_debenham @wdtuts ¿Cuáles son algunas de los buenos usos de las guías de estilos en el desarrollo de diseño, además de una referencia después de que el sitio entre en funcionamiento?

— Marc Drummond (@MarcDrummond) 12 de mayo de 2014

@anna_debenham @wdtuts En especial el desafío de mantener la guía de estilo relevante y precisa cuando el diseño evoluciona una vez que está publicado.

— Marc Drummond (@MarcDrummond) 12 de mayo de 2014

Prototipa código y diseña con él, y haz referencia a él cuando estés frente a otras personas tanto como te sea posible. Cuando estés construyendo alguna nueva funcionalidad para el sitio, construye primero la guía de estilo de manera que si estás desarrollando esta antes de realizar los cambios, no acabes fuera de plazo. Al hacer esto, también podrás comprobar que otros estilos no entren en conflicto con los nuevos.

Controla la versión de tu guía de estilo. Haz que sea de código abierto si es posible: es más posible que la gente esté al día si es pública y abierta.

Ian Feather escribió recientemente sobre cómo Lonely Planet mantiene su guía de estilo con una API. Esto no será adecuado para cualquier proyecto, pero creo ver lo útil que esto sería para un sitio grande que esté en constante desarrollo. Parece una buena técnica a la que aspirar.

Conclusión

¡Espero haber sido capaz de responder alguna de vuestras consultas sobre las guías de estilos front-end! Si tienes cualquier otra, siéntete libre para responderles en la sección de comentarios.