Share
Cuando comience con el proceso de crear y aplicar sus propias Guías de estilo, tenga en cuenta que no está solo. Las guías de estilo han existido por un tiempo, por lo que hay una montaña de información útil disponible. Puedes aprender muchísimo al examinar lo que ya existe.
También hay varias herramientas y recursos excelentes que puede utilizar en sus proyectos, la mayoría de los cuales son gratuitos. En este artículo redondeamos todo el material de la Guía de estilo que tiene a su disposición. También le agregaremos más, por lo que si nos llama la atención sobre nuevos recursos, puede esperar que esto vaya más allá de 50!
Nota: Como habrá leído en nuestra introducción a la serie de Guías de estilo de esta semana, a veces el término "Guía de estilo" se usa indistintamente con otros términos similares. En consonancia con esto, algunos de los recursos que se enumeran a continuación podrían incluirse en diferentes clasificaciones.
Eche un vistazo a estos excelentes artículos y tutoriales sobre cómo trabajar con las Guías de estilo:
Guía de estilo de la entrada de Wikipedia.
Una gran introducción a la definición clásica de guías de estilo..
Mantenga la coherencia con una guía de estilo de sitio web
Tuts + Aaron Lumsden nos lleva a través de la creación de una guía de estilo.
Creación de una marca, logotipo y guía de estilo de Rockstar en Illustrator
Un fascinante recorrido entre bastidores de la creación de la marca "Rockable Press" y la Guía de estilo..
La forma en que construimos la web está cambiando
Un vistazo a algunas de las fuerzas motrices que han llevado a la aparición de Style Guides, de Natasha Postolovski en el blog "Inside Envato"..
Una guía de estilo mantenible
Una discusión de Ian Feather sobre cómo mantener las Guías de Estilo al día de manera eficiente.
Guías de estilo y bibliotecas de patrones frontales
Una colección considerable de ejemplos de guías de estilo y bibliotecas de patrones de Anna Debenham
Guías de estilo de identidad de marca de todo el mundo.
La gran lista de marcas y guías de estilo de identidad de las principales empresas e instituciones..
Creación de guías de estilo
Por Susan Robertson en una lista aparte.
Guías de estilo front-end
Por Anna Debenham en 24 maneras.
Guías de estilo front-end: una guía de bolsillo
Otro recurso de Anna Debenham. Parte de la colección original de Five Simple Steps Pocket Guides.
Echa un vistazo a algunas guías de estilo de algunas de las marcas más grandes y conocidas en la web, además de algunas entradas geniales de individuos:
Manual de estándares de gráficos de la Autoridad de Tránsito de la Ciudad de Nueva York
Primero debe aparecer el icónico Manual de Estándares Gráficos de la NYCTA, diseñado por el difunto Massimo Vignelli. Si sigue un enlace en este resumen, hágalo este.
Tuts + Guía de estilo
Voz y tono, marca, formato y mucho más..
Activos y directrices de la marca de Twitter
Pautas de uso del logotipo, paleta de colores, tipografía..
Directrices de la marca corporativa de Adobe
Una guía completa de sesenta páginas sobre todo lo que puede imaginar hacer con Adobe, incluidos logotipos, fotografías, marcas registradas, papelería y productos..
BBC GEL Web Style Guide
La BBC ha intentado concretar completamente todo lo que tiene que ver con su presencia en la web, doblando su Guía de estilo como "Global Experience Language" (GEL)..
Guía de estilo de Mozilla
La guía de estilo de Mozilla es extremadamente completa. Aislan la identidad y la marca de cada aspecto principal de su oferta; Mozilla, Firefox Family, Firefox Browser, Firefox OS, Marketplace, Webmaker y Thunderbird. Luego continúan cubriendo estilos para sus sitios web, presentaciones, videos, tipografía y contenido de texto. Por último, proporcionan una guía de estilo completa para Firefox OS. Este es un ejemplo de guía de estilo en su mejor momento..
Guía de estilo de Lonely Planet
La guía de estilo de Lonely Planet ofrece una cobertura completa de sus elementos de diseño, componentes de UI, componentes de JS y CSS, y cada categoría se divide en categorías adicionales que incluyen componentes individuales en ella..
Guía de estilo de Skype
La Guía de estilo de Skype hace un excelente trabajo al transmitir la identidad de la empresa a través de su marca y estilo de diseño general. Abarca el logotipo, el tipo de letra, los colores, la ilustración, la fotografía y muchos otros temas..
Guía de estilo de Salesforce
Una guía de estilo muy visual que presenta pautas, color, tipografía e iconos con componentes y ejemplos..
facebookbrand.com
Activos de marca y guías de estilo de la red social más grande del mundo..
Guía de estilo de Salesforce
Algunas imágenes hermosas del gigante de gestión de relaciones con el cliente.
findguidelin.es
La forma más rápida de encontrar activos de marca.!
Todas las guías de estilo
Esto realmente está empezando a ser todas las guías de estilos, Curado en un Tumblog limpio.
Guías para desarrolladores que crean aplicaciones para Max OSX y iOS.
Pautas de interfaz humana de OSX
Pautas de interfaz humana de iOS
Pautas para desarrolladores que trabajan con Google Glass, además de un extenso recorrido en dos partes de casi todos los aspectos del estilo visual de Google.
Guía de estilo de Google Glass
Pautas de los recursos visuales de Google - Parte 1
Pautas de los recursos visuales de Google - Parte 2
Dos sitios que demuestran cuán útiles pueden ser las Guías de estilo para sitios web personales.
PaulRobertLloyd.com
Oli.jp
Guías de estilo GitHub
Guía de GitHub para formatear proyectos CSS, JavaScript y Ruby para GitHub.
Guías de estilo de proyectos de código abierto de Google
Convenciones para proyectos que se alojarán en Google Code, que cubren diez idiomas diferentes.
Ponga estas herramientas a trabajar para generar y mantener sus propias guías de estilo:
Guía de estilo
Style Guide Boilerplate es esencialmente un paquete de inicio para crear guías de estilo básicas, se describe a sí mismo como generando "pequeños Bootstraps".
Stylify.me
Esto es muy divertido: ingrese la url del sitio que desea analizar y luego observe cómo se genera una guía de estilo. Una vez completado, puedes descargar la guía en formato PDF..
Reconoce estos colores?Cada una de las siguientes tres herramientas genera Guías de estilo "vivas" que se actualizan fácilmente para mantener la coherencia con el desarrollo de su CSS. Funcionan al analizar los comentarios CSS con formato especial en un documento independiente de la Guía de estilo.
EstiloDocco
StyleDocco es un módulo Node.js que analiza los comentarios formateados de Markdown en una Guía de estilo pre-temática.
Kalei
Kalei también trabaja analizando los comentarios formateados de Markdown desde CSS, pero se ejecuta como JavaScript basado en navegador y genera una Guía de estilo similar a la de Bootstrap de Twitter..
KSS (Hojas de estilo Knyle)
KSS requiere Ruby y utiliza su propia sintaxis de comentarios. La Guía de Estilo de GitHub se genera con KSS..
Comencemos poniendo en práctica nuestros conocimientos..
StyleTil.es
El hogar del concepto original para Style Tiles por Samantha Warren.
Azulejos de estilo: una alternativa a Comps de diseño completo
Chris Brown de Tuts + nos muestra las ventajas de usar Style Tiles.
Azulejos de estilo para Sketch
Una plantilla gratuita y abierta de Sketch para la creación de Style Tiles..
Diseño atómico
Brad Frost describe la teoría que condujo a la creación de su herramienta Pattern Lab..
patternlab.io
El Laboratorio de Patrones mencionado anteriormente..
Biblioteca de patrones de MailChimp
La biblioteca de patrones de MailChimp cubre su sistema de cuadrícula, tipografía, formularios, navegación, tablas, listas, iconos y más.
A List Apart Pattern Library
La documentación de A List Apart de sus muestras de color, tipografía, formato de imagen, títulos, resúmenes de artículos y otros aspectos del diseño de su sitio..
Yahoo! Biblioteca de patrones de diseño
El Yahoo! La Biblioteca de patrones de diseño es un recurso de 59 patrones diferentes que utilizan en sus propias propiedades, que están disponibles para que otros desarrolladores puedan usarlos..
Patrones UI
UI Patterns es un sitio muy grande que documenta patrones de varios sitios en toda la web. Los patrones pueden ser examinados por categoría y votados hacia arriba o abajo por los usuarios del sitio.
Patrón Primer
Pattern Primer le permite guardar fragmentos de marcado en una "carpeta de patrones" y generarlos en una lista con vistas previas y un área de copiar y pegar para cada fragmento. Ejemplo de cebador de patrón
Peras
Pears es un tema gratuito de código abierto de WordPress diseñado para ayudarlo a configurar un sitio con ejemplos de vistas previas de marcado que puede utilizar para aplicar sus propios patrones personalizados a.
Patronaje
Patternry es un servicio comercial que permite que los patrones se diseñen, compartan, organicen y colaboren en un equipo..
Laboratorio de patrones
Pattern Lab es la creación de Brad Frost, basada en sus conceptos de "Diseño atómico". Te ayuda a crear bibliotecas de patrones según el sistema de átomos> moléculas> organismos> plantillas> páginas. Demo de Pattern Lab.
Si anteriormente no estaba seguro de por dónde empezar con sus propias Guías de estilo, ahora debería descubrir que tiene muchas fuentes de inspiración y ayuda adicional..
Recomiendo que dedique un poco de tiempo para leer los artículos, observe de cerca los ejemplos para ver cómo funcionan "en la naturaleza" y pruebe algunas de las diferentes herramientas para ver cuál le conviene más..
Esta lista no es de ninguna manera exhaustiva, por lo que nos encantaría escuchar sus propias sugerencias en los comentarios. Aún así, hay mucho que aprender y jugar, así que diviértete!
Accentsconagua