Las guías de estilo son documentos que contienen instrucciones o pautas a seguir cuando se trabaja en un proyecto. Como sugiere el nombre, las guías de estilo de diseño web se utilizan cuando se trabaja en proyectos de sitios web.
En este artículo, le proporcionaremos ejemplos de guías de estilo de diseño web de alta calidad. El propósito de esto es ayudarlo a implementar uno de los mejores consejos de diseño web de un artículo reciente que recomienda usar estos manuales de estilo en sus proyectos.
Las guías de estilo pueden variar en tamaño y alcance, desde simplemente delinear las fuentes y los colores que se utilizarán, hasta catalogar cada aspecto de un proyecto, incluido el tono de voz, el contenido fotográfico, el espacio entre columnas, las opciones de mercadería y cualquier otra cosa que se te ocurra.
La mayoría de los proyectos pueden beneficiarse de tener una guía de estilo, ya sea la creación de un nuevo sitio web, la formulación de una estrategia de marketing, la creación de una marca o incluso la publicación de una publicación de blog. El uso de una guía de estilo puede ayudar a documentar decisiones importantes antes de comenzar a trabajar y garantizar que usted, su equipo y su cliente estén todos en la misma página desde el principio.
Otro beneficio de usar una guía de estilo de diseño web es que crean consistencia a lo largo de un proyecto y aseguran que si alguien continúa donde lo dejó, tendrá un conjunto claro de instrucciones a seguir.
Entonces, si necesita inspiración para su próximo proyecto, quiere saber cómo crear su propia guía de estilo, o simplemente es un empujador de píxeles que disfruta de la tipografía y los diseños de cuadrícula, aquí hay 10 guías de estilo de diseño web para consultar. 2016.
Las 10 mejores guías de estilo de diseño web en 2016
Para aprovechar al máximo esta colección, puede seguir una de estas guías de estilo de diseño web al pie de la letra, mezclar y combinar sus elementos favoritos, o usarlos como inspiración para su propio conjunto de pautas.
1. Diseño de materiales de Google
Una muestra de la guía de estilo de Google Material Design
Comencemos con la guía de estilo con la que la mayoría de ustedes estarán familiarizados, ya sea que la conozcan por su nombre o no, Material Design de Google . Esta guía de estilo aparentemente se basa en papel y tinta, aunque está lejos de mirar hacia atrás en su enfoque del diseño.
Con suerte, te habrás topado con Material Design siendo utilizado en la naturaleza. Ya sea por usar los propios productos y servicios de Google, como el sistema operativo móvil Android y la herramienta Google Now, o los muchos otros productos que han sido influenciados por esta popular tendencia de diseño web, de cualquier manera, Material Design no debería ser nuevo en tú.
Material Design continúa donde la tendencia de la interfaz de usuario plana se quedó y ayuda a los diseñadores a agregar más profundidad y personalidad a su trabajo al mismo tiempo que aprovecha el atractivo moderno de las interfaces de usuario minimalistas. Las características típicas de esta popular guía de estilo de diseño web incluyen diseños basados en cuadrículas, animaciones y sombras.
La buena noticia es que si desea adoptar este lenguaje de diseño, el manual de diseño de materiales de Google está disponible gratuitamente en línea y ayuda a explicar la intención de esta guía de estilo de diseño web. También es un gran ejemplo de una guía de estilo muy detallada para cualquiera que tenga la tarea de crear un documento de este tipo.
Más información
2. Idioma de la experiencia global de la BBC
La guía de estilo en línea de la BBC no deja nada al azar
Si está buscando una guía de estilo que no deje nada al azar, entonces las instrucciones que conforman el documento BBC Global Experience Language son un gran ejemplo.
Creada para diseñadores web que crean sitios web para la BBC, esta guía de estilo comienza exponiendo la filosofía detrás de las reglas. A partir de ahí, este documento profundiza en los detalles. Encontrará información que cubre los anchos de píxel de las medianeras de las columnas, las reglas de diseño de la cuadrícula, las pautas de posicionamiento del logotipo y todo lo demás que pueda pensar cuando se trata de crear contenido en línea.
Para obtener inspiración sobre cómo crear una guía de estilo que vincule una amplia gama de entidades bajo una marca principal, no se sentirá decepcionado con este recurso de la BBC.
Más información
3. Guía de estilo de Mozilla
Todo lo que necesita para un diseño de sitio web consistente
Si desea obtener más información sobre el espíritu de diseño del equipo responsable del segundo navegador web más popular del mundo, vale la pena consultar la Guía de estilo de Mozilla en línea.
En esta guía de estilo, encontrará excelentes ejemplos de cómo producir instrucciones que cubran el uso de logotipos, combinaciones de colores, tono de voz y marcas denominativas. Si desea crear una guía para que la sigan sus clientes o su equipo, el conjunto de instrucciones de Mozilla le mostrará cómo hacerlo.
Más información
4. Directrices de activos de marca de Twitter
La guía de estilo de Twitter cubre todo, desde logotipos hasta marcas denominativas
Los diseñadores de logotipos y aquellos de ustedes que utilizan logotipos y gráficos como parte de sus proyectos apreciarán las instrucciones limpias y claras de este gigante de las redes sociales.
En la guía de estilo de activos de marca de Twitter, encontrará algunos buenos ejemplos de cómo escribir instrucciones que ayuden a garantizar que sus logotipos y otros activos se utilicen de la manera correcta. Esta guía de estilo en línea incluye detalles que cubren las paletas de colores, la orientación del logotipo, el espaciado de los elementos y un glosario de términos.
Ya sea que desee asegurarse de que sus clientes de diseño web no maten su arduo trabajo o que los logotipos y la marca detrás de su proyecto no se distorsionen, la guía de estilo de activos de marca de Twitter es un buen modelo a seguir.
Más información
5. Directrices de la marca corporativa de Adobe
El documento Directrices de la marca corporativa de Adobe es un ejemplo impresionante de cómo asegurarse de que su marca y la filosofía de su empresa se apliquen de forma coherente en una amplia gama de plataformas y medios. Aquí se cubre todo, desde sitios web y correos electrónicos, hasta carteles impresos y productos, sin mencionar el conjunto de aplicaciones de Adobe CC que los diseñadores web deberían usar .
Aunque son de gran escala, las pautas de la marca Adobe combinan instrucciones detalladas con ejemplos de uso para demostrar cómo crear una guía de estilo grande que sea relativamente fácil de entender, a pesar de su alcance.
Si está trabajando en un proyecto que abarca varias plataformas, esta guía de estilo de Adobe puede mostrarle cómo crear un conjunto de instrucciones que se aplican a todos los aspectos de su trabajo.
Más información
6. Brandbook y guía de marca de Foursquare
El libro de bandas de Foursquare cubre el uso interno y externo de su marca.
La aplicación y el sitio web del buscador de ubicaciones de Foursquare siguen un conjunto estricto de pautas para garantizar que su contenido sea fácilmente reconocible, ya sea que ese contenido se publique en sus propias plataformas o se comparta en las redes sociales y en otros lugares.
Si desea agregar este nivel de identidad de marca a su trabajo, explorar el libro de marcas y los documentos de la guía de marcas de Foursquare es una valiosa inversión de su tiempo.
En estas dos breves guías de estilo, encontrará muchos pros y contras que cubren todo, desde el uso y el posicionamiento del logotipo, hasta las reglas iconográficas, el diseño de insignias, las pautas de redacción y las recomendaciones de tono de voz.
Si está trabajando con íconos o diseñando para la web, así como para dispositivos móviles y redes sociales, las guías de estilo de Foursquare ofrecen muchos consejos sobre cómo entregar un mensaje coherente, tanto dentro como fuera de sus propias propiedades.
Más información
7. Identidad gráfica del MIT
La Identidad Gráfica del MIT tiene como objetivo simplificar las cosas
Si ha encontrado que las guías de estilo más grandes de Adobe y Google son un poco abrumadoras, entonces la sección de diseño web del libro de marca del MIT debería ofrecer un contraste bienvenido.
Simplemente presentando información básica sobre el posicionamiento y la redacción del logotipo, este es un buen ejemplo de cómo puede crear coherencia en sus proyectos de diseño web sin exagerar.
Más información
8. Guía de estilo de Ubuntu
El documento de Ubuntu incluye HTML y CSS para ayudar a mejorar la consistencia
El objetivo de la guía de estilo de Ubuntu es traer esta marca a la web con precisión. Para ayudar con ese objetivo, esta guía de estilo de diseño web incluye instrucciones para agregar el archivo CSS de Ubuntu a cualquier página web en la que un desarrollador o diseñador pueda estar trabajando.
Proporcionar un archivo CSS es una idea interesante. Es una forma rápida de garantizar que todos los elementos de una página web tengan el mismo aspecto, ahora y en el futuro. Luego, el documento continúa explicando los diversos estilos que se requieren para elementos específicos, como enlaces y encabezados, antes de pasar a cubrir cuadrículas de diseño, tipografía, formularios, tablas, medios y más.
Vale la pena echarle un vistazo a la guía de estilo de diseño web de Ubuntu. Esto se debe a que no solo incluye las pautas e instrucciones, sino que también se proporciona el marcado HTML y CSS necesario para lograr el resultado.
Más información
9. Guía de experiencia de usuario de MailChimp
La guía MailChimp UX incluye muchos ejemplos útiles
MailChimp es uno de los servicios de marketing por correo electrónico más populares , por lo que es genial ver que han hecho pública su guía de estilo.
Además de proporcionar a los seguidores ejemplos de cómo se deben diseñar los elementos, también se ofrece el código subyacente para que la implementación de estas pautas sea lo más sencilla posible. Este documento en línea también tiene un formato agradable, lo que lo convierte en una de las guías de estilo de diseño web más fáciles de seguir.
Como aquí se cubre todo, desde los diseños de cuadrícula y la tipografía, hasta los iconos y los cuadros de diálogo, sin importar para qué plataforma estés diseñando, deberías poder obtener algunos consejos de la guía de estilo de MailChimp.
Tanto los diseñadores web como los especialistas en marketing por correo electrónico encontrarán en la guía de estilo de MailChimp una buena fuente de inspiración cuando se trata de reforzar la coherencia en sus proyectos. Puede conocer la historia detrás de esta guía en una entrevista con Federico Holgado , el diseñador principal de UX en MailChimp.
Más información
10. Guía de estilo web: principios básicos de diseño para crear sitios web
Para una guía de estilo más general, mantenga este libro en su escritorio.
Si está buscando un recurso fuera de línea que pueda tener en su escritorio, entonces la Guía de estilo web de Patrick J. Lynch y Sarah Horton es un clásico.
Es cierto que el libro de la Guía de estilo web no se ha actualizado durante un tiempo. Sin embargo, debe encontrar que el asesoramiento sobre los fundamentos del diseño web y las necesidades de los diseñadores web en una variedad de organizaciones aún ofrece algo de valor.
Algunas ideas nunca pasan de moda, y tener un libro impreso como referencia cuando se toman decisiones de diseño puede ser invaluable, incluso en la era digital.
Más información
Otras guías de estilo para creadores en línea
A menudo, hay más en un proyecto de diseño web exitoso que solo el sitio web en sí.
Si se le encomendó la creación de contenido o el diseño gráfico, buscar guías de estilo para esas disciplinas puede ayudarlo a producir un trabajo que sea más consistente. Nuevamente, también puede usarlos como plantilla para crear sus propias instrucciones detalladas para que otros las sigan. Así que aquí hay algunas otras guías de estilo que le gustaría considerar:
Esta guía de estilo de Associated Press es imprescindible para los escritores en línea.
El Libro de estilo de AP se describe como la biblia del periodista y está disponible como libro encuadernado en espiral y como libro electrónico interactivo. Esta guía de estilo de escritura se actualiza regularmente, por lo que debería poder brindar orientación al escribir sobre los temas más recientes.
¡Yahoo! Style Guide es un recurso popular para escribir, editar y crear contenido para el mundo digital. Es una opción asequible que cualquier persona que escriba para la web podrá beneficiarse de tenerla a mano. Si desea asegurarse de que su escritura se mantenga consistente, tener una guía de estilo como esta a su lado puede ser de gran ayuda.
Si está buscando un software que pueda ayudarlo a producir guías de estilo de aspecto profesional, consulte nuestra colección de las mejores herramientas de diseño web en 2016 .
Reflexiones finales sobre las guías de estilo de diseño web
Como puede ver, las guías de estilo de diseño web pueden tomar muchas formas. Desde documentos de una sola página que simplemente describen las opciones de color y fuente, hasta documentos grandes que cubren todo, desde la filosofía de diseño hasta el ancho de píxel entre los elementos de una página, tiene mucha libertad cuando se trata de crear uno propio.
Después de explorar estas guías de estilo de diseño web, ahora debería tener una mejor idea del trabajo que implica crear un estilo coherente y reconocible en una amplia gama de propiedades y medios.
Inspirándose en estas guías, ahora podrá escribir instrucciones efectivas para que las sigan usted, sus clientes o su equipo. Esto, a su vez, aumentará las posibilidades de que se entienda su visión y que el proyecto se convierta en un éxito.
Si desea escuchar las historias detrás de las guías de estilo de organizaciones como Lonely Planet, Captial One y Starbucks, vale la pena escuchar el podcast Style Guide .
¿Cuál de estas guías de estilo de diseño web te impresionó más? Por favor, comparta sus pensamientos en los comentarios a continuación.
Imagen en miniatura del artículo de Axsimen / shutterstock.com