Share
Recientemente les dimos a nuestros seguidores de Twitter la oportunidad de preguntar lo que quisieran sobre el tema de las Guías de estilo de Front End. Aquí están las mejores preguntas y (por supuesto) las respuestas.!
@anna_debenham @wdtuts ¿Cuál es la diferencia entre una guía de estilo y una biblioteca de patrones? (Tanto en teoría como en práctica).
- Jack Appleby (@jackappleby) 12 de mayo de 2014
Hay muchas interpretaciones, pero así es como lo veo: las Guías de estilo son un término general para un rango de posibilidades; guías de estilo editorial que tratan el tono de voz, guías de estilo de diseño que exploran la tipografía y los colores que se pueden usar en el sitio, e incluso guías de estilo de código para mantener la coherencia cuando varias personas están agregando al código base.
Una biblioteca de patrones es un tipo de guía de estilo que se acerca a un marco completo. Las bibliotecas de patrones son excelentes resultados para los desarrolladores: contienen todos los fragmentos de código de los módulos que se encuentran en el sitio. Se puede armar como un manual de instrucciones para mantener los estilos de un sitio y el código de usuario..
En palabras de Dave Rupert: "Los entregables sensibles deben parecerse mucho a los sistemas de estilo Bootstrap de Twitter completamente funcionales, adaptados a las necesidades de sus clientes". Esa es una descripción bastante buena de lo que creo que es una biblioteca de patrones.
@anna_debenham ¿Qué tan pronto comienza a crear la guía de estilo en un proyecto de rediseño? @wdtuts
- Matt Quirk (@MattQuirk) 12 de mayo de 2014
Justo al principio. Es la primera pieza de desarrollo que hago. Cada sitio tiene elementos comunes como párrafos, enlaces, encabezados, listas, formularios ... y tener un archivo preparado con todas estas etiquetas es realmente útil para colaborar desde el principio en el proyecto con los diseñadores..
Un buen lugar para comenzar es con Barebones de Paul Lloyd, ya que contiene todo el HTML sin formato que probablemente se usará en un sitio. Entonces es fácil construir sobre esta base con cada pieza de funcionalidad que se agrega.
@anna_debenham @wdtuts ¿Cómo gestiona el proceso de creación / mantenimiento de SGs junto con los entregables de alta fidelidad: patrones de patrones, comps
- James Nettik (@jnettik) 12 de mayo de 2014
En los proyectos anteriores en los que he trabajado, el diseñador ha utilizado TypeCast para crear sus estilos para poder probar la tipografía básica en el navegador y probar que se ve bien en diferentes dispositivos, antes de comprometerse con un diseño específico. Eso funcionó muy bien para los dos, ya que ayudó a detectar problemas con cosas como fuentes web de aspecto poco fiable o problemas con el contraste de color en las pantallas de bajo dpi desde el principio..
Algunos diseñadores, como Dan Mall, crean bibliotecas de elementos en su software de gráficos durante el proceso de diseño. Al dividir el diseño en módulos, convertir esto en una guía de estilo es realmente sencillo. Jon Aizlewood utilizó este enfoque durante el rediseño de Code for America, lo que significaba que podía comenzar a construir componentes e ideas de creación de prototipos mientras el resto del diseño aún estaba en curso..
Tomado de http://codeforamerica.clearleft.com/@anna_debenham @wdtuts ¿Algún consejo sobre la comunicación / aprobación del cliente? ¿Cómo lograr que los clientes participen con algo que no pueden visualizar completamente??
- James Nettik (@jnettik) 12 de mayo de 2014
@anna_debenham @wdtuts ¿Cómo presenta / involucra / familiariza a los clientes con la guía de estilo? (Especialmente aquellos sin conocimiento de la web)
- natalie (@talkanatalka) 12 de mayo de 2014
(Agrupé estas dos preguntas juntas porque son muy similares.)
Dependerá mucho del cliente. Descubrí que las guías de estilo son muy fáciles de vender a los equipos web internos porque si mantienen un sitio extenso, reescriben constantemente el mismo código y tratan con una hoja de estilo masiva, verán inmediatamente el beneficio de tener uno..
Los clientes que no están lidiando directamente con el diseño o el código del día a día probablemente no entiendan los beneficios de tener uno (normalmente no es algo que presumiría ante el CEO), pero construyo uno independientemente porque sé que ayuda a mí, y espero que ayude a quien tenga que agregar un código al sitio un año más tarde. Es bueno poder entregarlo al siguiente desarrollador al final de un proyecto. Se siente como buenos modales.
@anna_debenham @wdtuts Cómo abogar por el uso de guías de estilo en organizaciones que no las usan por falta de cultura / plazos ajustados?
- Daniel Fosco (@notdanielfosco) 12 de mayo de 2014
Explico que, aunque las guías de estilo tardan un poco en desarrollarse y mantenerse, en realidad ahorran tiempo a largo plazo. Tal vez sea más consciente de ello como contratista, pero lleva bastante tiempo familiarizarme con un nuevo proyecto y no tener toda la información que necesito cuesta tiempo..
Con un sitio que tiene una biblioteca de patrones preexistente, puedo agregar una nueva pieza de funcionalidad al sitio mucho más rápido que si tuviera que buscar en el sitio buscando estilos similares o recreando algo que nadie sabe que ya existe.
Tener una guía de estilo en la que puedo basarme también ahorra mucho tiempo, por lo que producir uno para un proyecto no requiere mucho esfuerzo. Asegurarse de que la gente lo mantenga es el trabajo duro..
@anna_debenham Me encantaría saber qué piensa acerca de estos generadores automáticos de guía de estilo que he escuchado recientemente ... @wdtuts
- Westley Knight (@westleyknight) 12 de mayo de 2014
Hay algunos generadores de guías de estilo, Welch Canavan escribió una lista de ellos aquí: http://welchcanavan.com/styleguide-roundup/
Un par de otros que no se mencionan incluyen Stylify Me y Frontify, así que también deberías revisarlos. Me gusta mucho el sonido de KSS (Knyle Style Sheets) porque genera una guía de estilo de vida a partir de comentarios en tu CSS.
Los generadores de guías de estilo pueden ser útiles en algunos casos, pero uno de los beneficios de crear una guía de estilo a medida que se desarrolla un sitio es que lo obliga a pensar más detenidamente sobre su código: cada patrón es como un bloque lego, por lo que ayuda a mantener Usted está en la mentalidad correcta si va por un enfoque más orientado a objetos.
Creo que los generadores son útiles si ingresa en un proyecto para un sitio que ya ha sido diseñado, tiene una fecha límite muy ajustada y está buscando qué colores y diferentes estilos de encabezado se utilizan. Es útil si quieres agarrar una lista de códigos hexadecimales.
El Tipo-o-matic de Nicole Sullivan también es bueno para esta situación. Es un complemento del navegador que cuenta todas las fuentes en una página y las ordena por color y tamaño..
@anna_debenham @wdtuts ¿Cómo se comunica de manera efectiva con los diseñadores y con los desarrolladores back-end dentro de la guía de estilo BEYOND que muestra el código? TY
- Joseph James (@joeaugie) 12 de mayo de 2014
Cuando cree su guía de estilo, póngase en el lugar de un contratista o nuevo empleado al que se le ha pedido que agregue una nueva sección al sitio. ¿Qué información necesitarán??
Si agrega información para diferentes roles, se convierte en un lugar centralizado para que las personas vayan y encuentren lo que necesitan. Esto es algo que GOV.UK ha logrado lograr con su Manual de Diseño de Servicios..
@anna_debenham @wdtuts ¿Cuáles son algunas buenas maneras de usar las guías de estilos en el desarrollo del diseño, así como una referencia una vez que el sitio esté en funcionamiento??
- Marc Drummond (@MarcDrummond) 12 de mayo de 2014
@anna_debenham @wdtuts En particular, el desafío de mantener la guía de estilo relevante y precisa si el diseño evoluciona una vez que está activo.
- Marc Drummond (@MarcDrummond) 12 de mayo de 2014
Prototipo de código y diseños con él, y refiérase a él delante de otras personas tanto como sea posible. Cuando esté creando una nueva funcionalidad para el sitio, cámbiela primero en la guía de estilo para que si está desarrollando eso antes de impulsar cambios, no quede obsoleto. Al hacer esto, también puedes verificar que otros estilos no entren en conflicto con los nuevos.
La versión controla tu guía de estilo. Si es posible, conviértalo en código abierto: es más probable que las personas lo mantengan actualizado si está disponible a la vista..
Ian Feather escribió recientemente sobre cómo Lonely Planet mantiene su guía de estilo con una API. Esto no será adecuado para cada proyecto, pero puedo ver cuán útil sería para un sitio grande que está en constante desarrollo. Se siente como una buena técnica para apuntar.
¡Espero haber podido responder algunas de sus preguntas sobre las guías de estilo de front-end! Si tiene otros, no dude en preguntar en la sección de comentarios..
Accentsconagua