Guía de estilo

Una de las formas para asegurarse que el equipo esté es sintonía al momento de diseñar distintas partes del sitio web o guardar diseños de los desarrolladores, es crear una documentación de diseño o una guía de estilo de diseño de páginas web.

Es de mucha ayuda tener una guía de estilo para crear una experiencia consistente entre las diferentes páginas. Además, ayuda a garantizar el futuro desarrollo o que la producción de terceros siga los mismos lineamientos de la marca y que se perciba como parte de esta.

El año pasado, Luke Clum llegó a la cima del uso de guía de estilo como primer paso para el diseño web y, por lo tanto, me gustaría profundizar en cómo crear una guía de estilo de diseño web utilizable para tus proyectos.

¿Qué es una guía de estilo?

Una guía de estilo es una colección de elemento prediseñados gráficos y reglas que diseñadores o desarrolladores web deben seguir para asegurarse que partes separadas del sitio web sean consistentes y creen una experiencia cohesiva al final.

¿Por qué es importante?

Es extremadamente importante cuando varios diseñadores están trabajando juntos en un sitio web grande o aplicaciones web para asegurarse que no interpreten mucho y que no cambien o ajusten los estilos basados en gustos personales. En el desarrollo, tener los elementos del sitio web definidos hace más fácil la labor de los desarrolladores web al momento de utilizar estos elementos. Además, es más fácil porque ellos sabrán qué elementos tienen que codificar y podrán ver exactamente lo que necesitan desde el comienzo.

Para hacer el trabajo de los desarrolladores más fácil, es deber del diseñador incluir todas las posibles interacciones tales como desplazar, cliquear, visitar y otros estados para botones, títulos, link, etc.

Pasos para crear una guía de estilo de diseño web

  1. Estudia la marca

Primero, necesitas estudiar la marca para que así entiendas que es lo que representa. Conoce la historia detrás de la marca, observa al equipo y descifra su visión, misión y valores de la empresa. Es importante profundizar en la marca para que de ese modo la guía de estilo que estás trabajando represente visual y emocionalmente a la organización.

Si eres un diseñador que no sabe codificar, simplemente abre Photoshop y dale un título a tu documento y una breve descripción de lo que el documento es o para qué será utilizado.

Si puedes codificar, es mejor crear un documento html con herramientas precodificadas para que sea fácil de reutilizar.

  1. Define la tipografía

De acuerdo a Oliver Reichenstein, la tipografía es el 95 por ciento del diseño web.

Debes hacer bien la tipografía ya que es una de las herramientas más importantes entre los visitantes y tu sitio web.

Establece una jerarquía e identifícala. Existen tipos de titulares: h1, h2, h3, h4, h5 y h6. Luego el cuerpo, negrita y variaciones de cursiva. Piensa fuentes que sean usadas para links cortos, texto de introducción, etc. Ofrece fuentes, colores y tamaño familiar.

guía-estilo-2

3. La paleta de colores

Es increíble cómo los seres humanos perciben los colores y los asocian tonalidades con marcas conocidas. Piensa en Coca-Cola, apuesto a que ves el color rojo en tu mente.

Empieza estableciendo en tu guía de estilo los colores primarios que predominaran en tu sitio web, los colores dominantes solamente deben incluir tres tonos. Sin embargo, en algunos casos necesitarás colores secundarios e incluso terciaros para ilustrar tu interfaz de usuario, asegúrate de también definirlos. Además, incluye colores neutrales como el blanco, gris y negro para que los colores primarios resalten.

guía-estilo-3

  1. Voz

La voz que me refiero es la copia real. Anteriormente ya has estudiado a la marca, antes de empezar la guía de estilo y te diste cuenta que la marca es juvenil y moderna. Si no hay instrucciones para la voz, tendrás que definirla. Puede ser un sencillo ejemplo que muestre que la voz tenga que ser profesional pero también divertida y acogedora. En lugar de afirmar “Error 404” puedes decir “Hola, se han roto los parámetros interwebs, error 404”. Si la voz fuera algo más empresarial, no se recomienda hacerlo. Lo más importante se esconde en las pequeñas cosas.

  1. Iconografía

Los íconos han existido por miles de años y son más antiguos incluso que los libros y las palabras. Aprovecha usar iconos en tus proyectos ya que brindarán una idea rápida a los visitantes sobre de qué trata y que pasará a continuación. Escoger los íconos correctos proporcionará más contexto al contenido que las paletas de colores, las copias o los gráficos. Cuando uses íconos, asegúrate de tomar en cuenta la religión e historia del público objetivo para que así evites conceptos erróneos y malos entendidos. Algo más para mencionar: toma en cuenta la marca y sus valores, no uses íconos hechos a manos en el sitio web de un gran banco, por ejemplo.

guía-estilo-4

  1. Las imágenes

Las imágenes hablan más que mil palabras. Asegúrate de incluir imágenes que definan el estilo y las direcciones de imágenes que el sitio web debe usar. Una vez más, toma en cuenta los valores de la marca y su misión. Por ejemplo, las organizaciones benéficas de agua usan imágenes impactantes que expresen fuertes emociones, una buena causa y llamar a las emociones humanas en aquellos que son afortunados en tener comodidades esenciales para vivir como agua, comida, electricidad y educación.

guía-estilo-5

  1. Formas

Las formas son las que hacen que tu sitio web o aplicaciones web sean interactivas y dinámicas para que el usuario pueda buscar información y manipularla y hacer el trabajo.

Asegúrate de establecer una jerarquía e incluir todos los posibles feedback, Mensajes de aviso como activar, desplazar o añadir error incluyendo otros como contraseña muy débil, email inválido o simplemente mensajes de aviso como “el correo ha sido enviado”.

  1. Botones

Los botones son una mezcla de paletas de colores, formas y voces. Contar con estas herramientas previamente creadas para crear botones con apariencia consistente y funcional con diferentes diseños establecidos.

9 El espaciado

¿Por qué el espaciado debe estar en la guía de estilo? Es muy importante mencionar al espaciado. Puede ser en forma de una rejilla usada para el diseño; puede ser el espaciado entre el encabezamiento, botones, imágenes, formas y otros elementos.

10. ¿Qué es lo que debes y no debes hacer?

Último pero no menos importante: la sección de lo que debes y no debes hacer, similar a una sección de Preguntas y Respuestas que muestran los errores más frecuentes y da ejemplos de cómo las cosas deberían hacerse.

guía-estilo-6

 

Conclusión

Debes estudiar la marca para la que estás creando la guía de estilo, asegúrate de tener todas las partes del diseño bien hechas y que la guía de estilo sea consistente e incluya todos las posibles situaciones al momento de convertir diseños en productos operativos.

[Traduccion1 url=»https://designmodo.com/create-style-guides/» nombre=»Designmodo»]

2 Comments

Deja una respuesta