# data[].attributes.body
Fuentes Tipográficas
La fuente para texto en general debe ser Arial por ser una fuente que se encuentra almacenada por defecto en los computadores que al ser de la familia de fuentes de palo seco permite una mayor legibilidad en pantalla.
En algunos casos se podrá acompañar con la tipografía institucional Times New Roman.

Colores
El uso cromático debe ser acorde al manual institucional, teniendo como criterio principal los tres colores institucionales: Azul (R:192, G:160, B:98), Dorado (R:1, G:71, B:108) y el color de acompañamiento para la web será Gris (Desde el 5% hasta el 20%, R:240, G:240, B:240).

Imágenes
Las imágenes deberán ser en formato jpg o png a una resolución de 72 dpi con un peso máximo de 200 Kb. Cuya visualización en pantalla sea comprensible para el usuario y que no estén pixeladas.

Estructura
La estructura general de la web ha sido resultado de un proceso evolutivo e investigativo desde lo técnico y funcional, por tanto deberá ser respetada y de ser necesaria la inclusión de nuevos sitios o enlaces, éstos se deberán adecuar a la estructura previamente designada o si se requiere su inclusión en la parte estructural dicho caso deberá ser estudiado y resuelto por el Web Master y el comité web.

# data[].attributes.body
Como vamos a ver mas adelante a lo largo de los capítulos, una interfaz web esta compuesta de elementos de todo tipo. En sus inicios la web era un conjunto de documentos de hipertexto donde lo principal era tener texto con enlaces o links a otros documentos. El enlace es el componente clave en la web, ya que proporciona el nexo entre distintos documentos para conformar la World Wide Web

# data[].attributes.body
La guía de estilo es la que indica las fuentes, los tamaños de texto (para párrafos, títulos de varios niveles)  y, sobre todo, los colores principales y secundarios que aplicaremos a lo largo del sitio o la aplicación.

# data[].attributes.body
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.

# data[].attributes.headline
¿Qué es una guía de estilos y por qué debes tener una?

# data[].attributes.subject
¿Qué es una guía de estilos y por qué debes tener una?

# data[].attributes.body
Cuando desarrollas una aplicación o un sitio web, ¿cuánta importancia le da tu equipo al diseño? El éxito de herramientas como Bootstrap (a pesar de sus problemas) es que traen los elementos de la interfaz resueltos: los títulos, párrafos, botones, navegación, listas, etc. Así el equipo de desarrollo puede olvidarse del diseño, personalizar un poco algunas cosas sobre Bootstrap y ya está. En ciertos proyectos esta es una solución elegante y funciona muy bien porque evitamos diseños inconsistentes con poco esfuerzo. Sin embargo, tener un diseño que se parezca a todos no es la estrategia de marca más eficiente (en realidad es la peor). Cada marca posee un logotipo, colores, tipografía y otros estilos que la identifican y todo proyecto que lleve su nombre debe respetarlos. Por ejemplo, el sitio web de una joyería para damas tendrá un estilo muy diferente al de un un restaurante de comida mexicana o a una tienda online de ropa deportiva. Es entonces cuando frameworks o templates preconstruidos dejan de ser útiles y se requiere una guía de estilos (aka sistema de diseño) que es un conjunto de lineamientos y patrones de diseño que deben respetarse en todos los productos.

# data[].attributes.headline
¿Cómo crear una guía de estilo de diseño de páginas web?

# data[].attributes.subject
¿Cómo crear una guía de estilo de diseño de páginas web?

# data[].attributes.body
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 del diseño de pagina 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.

# data[].attributes.headline
Pasos para crear una guía de estilo de diseño web:

# data[].attributes.subject
Pasos para crear una guía de estilo de diseño web:

# data[].attributes.body
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.

# data[].attributes.body
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.

# data[].attributes.body
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.

# data[].attributes.body
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 terciarios 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.

# data[].attributes.body
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”.

# data[].attributes.body
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.

# data[].attributes.body
Ú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.

# data[].attributes.body
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.

# data[].attributes.body
Estos son los elementos básicos para construir una marca. Las técnicas para crear una paleta de color o escoger las tipografías adecuadas son muy amplias y escapan de este artículo. Pero ten presente que con los colores correctos y la tipografía adecuada ya tienes lo suficiente para que tu marca sea identificable.

# data[].attributes.body
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.

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.

# data[].attributes.body
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.