nucliweb
12/17/2015 - 6:50 PM

Styleguides

Styleguides

Styleguides.md
content_copyfile_download
  • Rendered
  • Source

Tipos de Guias de estilo

  • Content & editorial style guides
  • Branding & identity style guides
  • Development style guides & coding standards
  • Human Interface Guidelines
  • Frontend style guides

Content & editorial style guides

Voz y tono de MailChimp es uno de esos recursos, y es fantástico. Incluye ejemplos de cómo MailChimp proporciona información a los usuarios y también es educativo, proporcionando explicaciones de por qué algo se debe escribir de esa manera.

Es bueno para mantener lo que constituye la voz y tono de un sitio para evitar la confusión cuando varias personas diferentes escriben el contenido.

Branding & identity style guides

Las guías de estilo de marca varían en detalle y complegidad. Algunos son bastante ligeros, tales como Firefox, que establece los colores corporativos y la forma de utilizar el logotipo.

Otras marcas son mucho más estrictas y proporcionan una gran cantidad de detalles, como British Airways guidelines (PDF), que cubren todos los aspectos imaginables de la marca.

Una gran cantidad de guías de estilo de la marca no se traducen bien del papel a la web, por lo que es importante tomar en cuenta las diferencias entre los medios de comunicación al ponerlas enconjunto.

Ejemplos Brand Style Guide Examples

Development style guides & coding standards

Estas son útiles cuando varias personas están trabajando en la misma base de código. Definen convenciones como si utilizar espacios o tabuladores, guiones bajos o camelCase. Mantienen código mantenible, y hacer que sea más fácil la colabaroación. Github tiene guidelines sobre su propio CSS o las de JavaScript de Airbnb.

Human Interface Guidelines

Aunque no son estrictamente sobre cuestiones de estilo, como los métodos de entrada por voz y gestos son más populares, las pautas de interacción se han convertido en algo muy importante.

Un ejemplo interesante es cómo Microsoft ha escrito sus guideline para el diseño de interfaces que define cómo se puede interactuar con el uso de Kinect para Xbox (PDF).

Frontend style guides

Las Frontend style guides se presentan de muchas formas, pero todas comparten un objetivo común: hacer que el mantenimiento del site más fácil.

Están construidas específicamente para la web. La principal diferencia con los otros tipos de guías, es que utiliza código real y funciona en el navegador.

No es un PDF o una serie de capturas de pantalla.

Una Frontend style guides es una guía de documentación viva y crece orgánicamente con el site a lo largo de su vida útil.

Markup Guide

Beneficios de una Frontend style guides

  • Mejor código
  • Educación
  • Pruebas en navegadores y dispositivos
  • Prototipos
  • Integración con CMS
  • Presentación del proyecto

Inconvenientes

  • "Tiempo para generar la guía"
  • Generar una guía de un proyecto finalizado

Ejemplos

Lo primero que tenemos que tener en cuarta es publicar la guía lo antes posible.

Herramientas

KSS Node

Aplicación

Plantillas

Generator

Grunt