IslaVisual
Ultima revisión 20/08/2020
Directrices para la creación de guías de estilos
Dado que, últimamente, algunos de vosotros me habéis preguntado por esto de forma privada, he decidido realizar un escrito detallando qué es y cómo diseñar una guía de estilo de diseño web. Pero, qué es una Guía de Estilos... Una guía de estilos es un documento que representa, de forma visual y emotiva, la imagen corporativa de una organización o empresa.
Aunque pueden codificarse en formato de documentos electrónicos como PDF, PhotoShop o, incluso, Microsoft Word, lo más frecuente y recomendable es que estén codificadas en HTML5 y CSS3.
Cabe destacar que, antes de empezar a diseñar una guía de estilos web, primero se debe estudiar la marca y tener muy clara la imagen que quiere proporcionar teniendo en cuenta los ideales y valores que se desean transmitir sin perder el objetivo final ni fracturar o desprestigiar su historia.
En lo referente a su contenido y estructura, no se debe entrar en detalles ni justificaciones ya que es un documento informativo y no, un libro educativo. Tampoco suelen seguir un estándar, no obstante, sí que presentan unos puntos comunes que definen diferentes aspectos.
A continuación, se muestran las directrices que se deben cumplir para crear una guía de estilo de diseño web que cubra todas las necesidades de los desarrolladores. Aunque algunas de ellas pueden ser secciones o titulares, no todos están descritos con ese fin.
Tipografía
La elección de la tipografía debe ir acorde a la imagen de la empresa u organización y no debe presentar características que puedan hacerla perder legibilidad.
Entre los datos que debe proporcionar, se deben incluir el nombre de las fuentes a utilizar, todos los posibles niveles de jerarquía (H1...H6), todas las posibles variaciones de texto incluyendo cursiva y negrita, y todas las características referentes al tamaño, espaciado interlineal, espaciado entre caracteres y, la alineación y color, si procede.
Paleta de colores
Se deben describir todos los colores utilizados, incluyendo su contexto.
Deben proporcionar una identidad de marca y estar bien combinados con colores neutros para facilitar la lectura. Además, se debe de intentar evitar la inclusión de más de múltiples de colores dominantes, aunque, si se necesita para definir la interfaz, pueden incluirse colores terciarios.
El tono y la jerga
El tono y la dialéctica empleadas en la página o aplicación deben transmitir el espíritu de la marca y ser compresibles para todo su público real y potencial.
Piénsese que, no es lo mismo un sitio web para profesionales informáticos, que una web de compras. Por este motivo, hay que elegir una terminología y tono adecuado a los usuarios finales
Iconografía
Si la página utiliza iconos, que es lo más frecuente, se deben especificar todos y cada uno de ellos incluyendo su ámbito de aplicación y/o significado.
En lo referente a su elección, se debe intentar basarse en alguna fuente vectorial que permita su fácil manipulación y transmita, inequívocamente, el concepto que se desea percibir sin ningún lugar a dudas. Además, se debe tratar de que sigan una línea gráfica adecuada para el sector y la empresa u organización.
Para estos casos en los que, los iconos pertenecen a una fuente vectorial como pueda ser Material Design Icons o FontAweSome, se también es muy interesante especificar el nombre de la misma y el identificador del icono (nombre de clase CSS o código hexadecimal asignado).
Imágenes
Con respecto a las imágenes, debe especificarse el estilo o características especiales que deban tener. Además, se debe indicar dónde se deben guardar y en qué formato.
Si existe un CDN o banco de imágenes dónde extraer los posibles elementos gráficos, también es importante dejarlo claro para que todos los desarrolladores sigan la misma línea de diseño.
Formularios y acciones
Se debe asegurar la jerarquía e incluir los mensajes e identificadores más frecuentes y destacados. Esto es, mensajes típicos de error, advertencia y éxito y posibles etiquetas recurrentes o frecuentes.
Navegación
Se debe indicar dónde debe estar localizado el menú de navegación principal y poder distinguir los diferentes estados de los menús de navegación y enlaces. Por ejemplo, se debe indicar si el elemento cambia de color y/o clase CSS al estar seleccionado o activo.
Además, si uno de estos elementos puede tener, a su vez, elementos adicionales como un valor numérico, se debe establecer su significado y un ejemplo.
Botones
Los botones deben poder distinguirse por forma, color y nombre de la acción. Es decir, debe mostrase un ejemplo de todos y cada uno de los botones con sus acciones y nombres específicos. Si, además, utilizan una regla CSS o deben estar ubicados en alguna zona de la pantalla o componente, también debe especificarse.
Espaciado
El espaciado entre textos, imágenes, botones, titulares y demás elementos debe ser tenido en cuenta. Es decir, si un elemento de título debe llevar asociado un margen de cualquier tipo, o un espaciado entre caracteres, debe especificarse de forma gráfica con un ejemplo claro de uso.
Especiales
Si hay componentes o comportamientos predefinidos, se debe especificar cómo implementar con un ejemplo claro. Por ejemplo, si se utiliza un componente de pestañas, se debe proveer un ejemplo con todas las posibles casuísticas.
Qué hacer y qué no
Es muy importante que se indiquen todas las directrices para que no se comentan errores de adaptación o creatividad. Es decir, se debe indicar si al logo se le pueden cambiar los colores del isotipo o fondo, las combinaciones permitidas de color y jerarquías, las palabras prohibidas si las hay, etcétera.
Ejemplos de guías de estilo
A continuación se muestran enlaces a algunas guías de estilos:
Más información diseño y maquetación en el libro Diseño y construcción de páginas Web, de la editorial RA-MA y disponible también en Amazon.
