Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
Cuando te inicies en los procesos de creación y aplicación de tus propias Guías de Estilo, debes saber que no estás sólo. Las Guías de Estilo hace ya algún tiempo que existen así que hay un montón de información disponible. Puedes aprender un montón examinando lo que hay por ahí fuera.
También existen algunas herramientas y recursos estupendos que puedes usar en tus proyectos, la mayoría de los cuales son gratuitos. En este artículo vamos a revisar todo el material de Guías de Estilo que tienes a tu disposición. También añadiremos, así que si apareciesen nuevos recursos que llamasen nuestra atención, ¡puedes esperar que se extiendan más allá de los 50!
Nota: Como ya habrás leído en nuestra introducción a esta serie sobre Guías de Estilo, en ocasiones el término "Guía de Estilo" se emplea indistintamente con otros términos similares. Siguiendo esta línea, algunos de los recursos que vamos a citar podrían con razón caber dentro de una clasificación diferente.
Recursos para Aprender sobre Guías de Estilo
Echa un vistazo a los siguientes excelentes artículos y tutoriales sobre el trabajo con Guías de Estilo:
Entrada para guía de estilo de Wikipedia
Primer gran intento de definición clásica de Guías de Estilo.
Mantener la Consistencia Con una Guía de Estilo
Tuts + Aaron Lumsden nos llevan a través de la creación de una Guía de Estilo.
Crear una Marca para una Estrella del Rock, Logo y Guía de Estilo en Illustrator.
Un fascinante recorrido detrás de las escenas de la creación de la marca "Rockable Press" y de su Guía de Estilo.
La Forma en la que Construimos La Web está Cambiamdo
Un vistazo a algunos de las fuerzas que han llevado al surgimiento de las Guías de Estilo, desde Natasha Postolovski en el blog "Dentro de Envato".
Una Guía de Estilo Mantenible
Una discusión de Ian Feather sobre como mantener las Guías de Estilo de un modo eficiente y actualizadas.
Guías de Estilo para el front-end y para los patrones de librerías
Una considerable colección de guías de estilo de ejemplo y Librerías de Patrones de Anna Debenham
Guías de Estilo de Identidad de Marca de todo el mundo
La gran lista de Guías de Estilo para crear imagen marca e identidad de las principales compañías e instituciones.
Crear Guías de Estilo
Por Susan Robertson en A List Apart.
Guías de Estilo para el front-end
Por Anna Debenham en 24 Ways.
Guías de Estilo para el Front-end: una Guía de Bolsillo
Otro recurso de Anna Debenham. Parte de la colección Guías de Bolsillo Cinco Simples Pasos.
Ejemplos de Guías de Estilo
Echa un vistazo a algunas de las Guías de Estilo de algunos de las mayores y mejores marcas de la web, además de algunos geniales comentarios de personalidades:
Manual de los Estándares Gráficos para la Autoridad del Tránsito de Nueva York
Primero tenemos la icónica primera edición del Manual de Normas gráficas de NYCTA diseñado por Massimo Vignelli. Si sigues un enlace de este resumen, que sea éste.
Guía de Estilo de Tuts+
Voz y tono, imagen de marca, formateado y mucho más.
Elementos y Guías para la Imagen de Marca
Manual para el uso del logo, paleta de color y tipografía.
Guía de Imagen de Marca de Adobe Corporate
Una comprensible guías de seis páginas sobre todo lo que te puedas imaginar hacer con Adobe, incluyendo logos, marca, fotografía, papelería corporativa y objetos promocionales.
Guía de Estilo Web de BBC GEL
La BBC ha intentado precisar con exactitud todo lo que tenga que ver con su presencia web, apodando a su Guía de Estilo "Global Experience Language" (Lenguaje de Experiencia Global).
Guía de Estilo de Mozilla
La Guía de Estilo de Mozilla es extremadamente exhaustiva. En ella aíslan la identidad y la imagen de marca de para cada uno de los principales aspectos de su oferta; Mozilla, Firefox, Familly Brownser, Firefox OS, Marketplace, Webmaker y Thunderbird. Después continúan tratando sobre los estilos de sus sitios web, presentaciones, vídeos, tipografía y texto de los contenidos. Por último, proporcionan una Guías de Estilo para Firefox OS. Este es uno de los mejores ejemplos de Guía de Estilo.
Guía de Estilo de Lonely Planet
La Guía de Estilo de Lonely Planet cubre completamente todo lo relativo a sus Elementos de Diseño, Componentes UI, Componentes JS y CSS, con cada categoría desglosada en subcategorías que enumeran componentes individuales.
Guía de Estilo de Skype
La Guía de Estilo de Skype realiza un excelente trabajo transmitiendo la identidad de la compañía a través de su imagen de marca y estilo global de diseño.
Guía de Estilo de Salesforce
Una Guía de Estilo que traza sus directrices de una forma muy visual, color, tipografía e iconos con componentes y ejemplos.
facebookbrand.com
Los recursos para la imagen de marca y las guías de estilo de la mayor red social del mundo.
Guía de Estilo de Salesforce
Algunos bellos elementos visuales del gigante de la Gestión de Relaciones con el Cliente.
findguidelin.es
¡La forma más rápida de encontrar elementos para la imagen de marca!
Todas las Guías de Estilo
Esto está empezando a convertirse en todas las guías de estilo, curadas en un pulcro Tumblog.
Apple
Guías para desarrolladores que crean apps para Mac OSX e iOS.
Directrices para las Interfaces para Humanos en OSX
Directrices para las Interfaces para Humanos en iOS
Directrices para desarrolladores trabajando con Google Glas, más una segunda parte extensa que realiza un recorrido por cada aspecto de la guía de estilo de Google.
Directrices para los Recursos Visuales - Parte 1
Directrices para los Recursos Visuales - Parte 2
Sitios Individuales
Dos sitios que muestran cuan útiles pueden llegar a ser las Guías de Estilo incluso para sitios web personales.
Guías de Estilo para el Código
Guías de Estilo de GitHub
La guía de GitHub para formatear CSS, JavaScript y Ruby para proyectos en GitHub.
Guías de Estilo para los Proyectos de Código Abierto de Google
Convenciones para proyectos alojados en Google Code, relativos a diez diferentes lenguajes.
Herramientas para Guías de Estilo
Pon a funcionar estas herramientas para generar y mantener tus propias Guías de Estilo:
Modelo de Guía de Estilo
El Modelo de Guía de Estilo es esencialmente un paquete de inicio para crear Guías de Estilo básicas - se describe a sí mismo como un generador de "diminutos Bootstraps".
Stylify.me
Este es muy divertido: introduce la url de un sitio que quieras analizar, después observa como se genera una guía de estilo. Una vez completada, podrás descargarla como PDF.
Generadores en Vivo de Guías de Estilo de CSS
Cada una de estas tres herramientas generan Guías de Estilo en "vivo" que pueden ser actualizadas fácilmente para mantener la consistencia en el desarrollo de tu CSS. Funcionan analizando comentarios formateados con CSS en un documento individual para la Guía de Estilo.
StyleDocco
StyleDocco es un módulo Node.js que analiza los comentarios formateados del código y los convierten en Guías de Estilo pre-temáticas.
Kalei
Kalei también funciona analizando los comentarios formateados del CSS, pero se ejecuta como un navegador basado en JavaScript y nos devuelve una Guía de Estilo similar a la de Twitter Bootstrap.
KSS (Hojas de Estilo Knyle)
KSS necesita Ruby y emplea su própia sintaxis para los comentarios. La Guía de Estilo de GitHub está generada con KSS.
Recursos para Aprendizaje Estilos para Módulos
Empecemos aplicando nuestro conocimiento de una forma práctica.
StyleTil.es
La web donde se fundó el concepto original para Estilos de Módulos por Samantha Warren.
Los Estilos de Módulos: Una Alternativa a los Diseños de Composiciones Completas
Chris Brown en Tuts+ nos explica las ventajas del uso de los Estilos de Módulos.
Herramientas para el Estilo de Módulos
Estilos de Módulos para Sketch
Una plantilla de Sketch gratuita y de código abierto para crear Estilos de Módulos.
Informació de Patrones
Atomic Design
Brad Frost describe la teoría que lidera la creación de su herramienta Pattern Lab.
patternlab.io
El anteriormente mencionado Pattern Lab.
Ejemplos de Librerías de Patrones
Librería de Patrones de MailChimp
La librería de patrones de MailChimp incluye su sistema de retícula, tipografía, formularios, navegación, tablas, listas, iconos y más.
Librería de Patrones de A List Apart
A List Apart documenta sus esquemas de color, tipografía, formateado de imágenes, titulares, sumarios para los artículos y otros aspectos del diseño de su sitio.
Librería de Patrones de Diseño de Yahoo!
La Librería de Patrones de Diseño de Yahoo! es un recurso de 59 patrones diferentes que emplean en sus propiedades, y que ponen a disposición de cualquier desarrollador.
UI Patterns
Los UI Patterns es un sitio muy amplio que documenta patrones de varios sitios de entre toda la web. Los patrones pueden ser consultados según categoría y ser votados en positivo o negativo por los usuarios.
Herramientas para Patrones
Pattern Primer
Pattern Primer te permite guardar fragmentos de código en una "carpeta de patrones" y generarlo en forma de lista con previsualizaciones y con área "copiar y pegar" para cada fragmento. Ejemplo de pattern primer
Pea.rs
Pears es un tema para WordPress gratuito y de código abierto diseñado para ayudarte a configurar un sitio con previsualizaciones de código de ejemplo con el que puedes después trabajar aplicándole tus propios patrones personalizados.
Patternry
Paternry es un servicio comercial que permite el diseñar, compartir, organizar patrones y trabajar en colaboración sobre los mismos.
Pattern Lab
Pattern Lab es una creación de Brad Frost, basada es sus conceptos de "Atomic Design". Te ayuda a crear librerías de patrones de acuerdo con el sistema de atoms > molecules > organisms > templates > pages. Ejemplo de Pattern Lab.
En Resúmen
Si no estabas muy seguro de por dónde empezar con tu propia Guía de Estilo, ahora deberías ser capaz de encontrar un montón de fuentes de inspiración y ayuda extra.
Te recomiendo que reserves un poco de tiempo para leer los artículos, echa un vistazo más de cerca a los ejemplos para ver cómo funcionan "en la realidad", y prueba alguna de las diferentes herramientas para ver cual se adapta más a ti.
Esta lista no es ni mucho menos exhaustiva, así que nos encantaría escuchar tus sugerencias en los comentarios. Todavía, existe mucho que aprender y con lo que jugar, así que ¡diviértete!
By
