Estas gu\u00edas de estilo contienen pautas de dise\u00f1o a dos niveles:<\/p>\n
- \n
- Funcional<\/strong>: pautas de comportamiento de los elementos interactivos.<\/li>\n
- Gr\u00e1fico<\/strong>: pautas gr\u00e1ficas como color, tipograf\u00eda, ret\u00edcula, forma de los diferentes elementos, etc.<\/li>\n<\/ul>\n
\u00bfPara qu\u00e9 sirven?<\/strong><\/h2>\n
En el dise\u00f1o y desarrollo de un proyecto interactivo puede haber muchas personas implicadas, y es importante que todas ellas conozcan las pautas de dise\u00f1o, para que no existan incoherencias fruto de la improvisaci\u00f3n.<\/p>\n
Por otra parte, un proyecto presenta una evoluci\u00f3n a lo largo de su vida, ya sea porque los contenidos se actualizan o porque sufre modificaciones, ampliaciones, etc.<\/p>\n
Las gu\u00edas de estilo, por lo tanto, son importantes para:<\/p>\n
- \n
- Garantizar la coherencia a lo largo de las diferentes p\u00e1ginas o pantallas del interactivo<\/strong>. Aunque cada p\u00e1gina o pantalla tenga unos contenidos \u00fanicos, la aplicaci\u00f3n de unas pautas coherentes permite que todo el conjunto resulte coherente. A este respecto, la usabilidad es muy importante, ya que el usuario se encuentra con una experiencia coherente a lo largo de la interacci\u00f3n.<\/li>\n
- Garantizar la coherencia a pesar de las actualizaciones\/ampliaciones<\/strong>. A lo largo de su vida, el proyecto puede cambiar. La gu\u00eda de estilo es una herramienta de consulta que permitir\u00e1 despejar dudas sobre c\u00f3mo realizar estas modificaciones manteniendo la coherencia con las p\u00e1ginas\/pantallas ya existentes.<\/li>\n
- Comunicar el estilo a los diferentes miembros del equipo<\/strong>. En un proyecto de interacci\u00f3n puede haber implicados perfiles muy diversos: dise\u00f1adores, documentalistas, investigadores, desarrolladores. Es importante que todos ellos puedan recurrir a una gu\u00eda de estilo en el que se determinen las pautas de dise\u00f1o, para el caso de que tengan que a\u00f1adir nuevos contenidos o modificar los existentes. En el caso espec\u00edfico de los desarrolladores, la gu\u00eda de estilo es una herramienta esencial para los dise\u00f1adores, ya que permite comunicar detalladamente a los desarrolladores el estilo del interactivo, de manera que estos puedan consultarlo en caso de dudas y no tengan que improvisar buscando soluciones al vuelo.<\/li>\n<\/ul>\n
Qu\u00e9 deber\u00eda contener una gu\u00eda de estilo<\/strong><\/h2>\n
Antes de empezar a preparar la gu\u00eda de estilo, es muy importante tener claro cu\u00e1les son los objetivos del proyecto y qu\u00e9 condiciones impone la marca, si las hay. Cuando se trabaja en un proyecto para corporaciones o instituciones, hay que tener en cuenta que ciertas caracter\u00edsticas gr\u00e1ficas (como la tipograf\u00eda o la gama crom\u00e1tica) pueden venir ya definidas por la gu\u00eda de estilo corporativo general.<\/p>\n
Teniendo en cuenta estos condicionantes, una gu\u00eda de estilo deber\u00eda incluir los siguientes contenidos (pueden incluirse otros si se considera procedente para el proyecto):<\/p>\n
1. Gama crom\u00e1tica<\/strong><\/h3>\n
La gama crom\u00e1tica o paleta de colores presenta los colores utilizados como base del proyecto (colores primarios o dominantes).<\/p>\n
Como pauta general, se recomienda no definir m\u00e1s de tres colores primarios, para que el dise\u00f1o no se resienta de demasiada variaci\u00f3n crom\u00e1tica. Por supuesto, la inclusi\u00f3n de fotograf\u00edas, v\u00eddeos u otros media<\/em> en las p\u00e1ginas puede introducir colores distintos a los definidos, pero lo que se est\u00e1 definiendo aqu\u00ed son los colores utilizados en el dise\u00f1o de la interfaz (independientemente de los que tengan los media<\/em> integrados).<\/p>\n
En algunos casos puede ser interesante incluir tambi\u00e9n colores secundarios, como por ejemplo los que utilizaremos para establecer puntos de atenci\u00f3n en la p\u00e1gina, o los correspondientes a las opciones call-to-action<\/em>.<\/p>\n
En la gu\u00eda de estilo web, los colores se describen en c\u00f3digo alfanum\u00e9rico, el mismo que se utiliza en CSS.<\/p>\n
![\"\"](\"\/wp-content\/uploads\/2021\/01\/20010_68.jpg\")
Colores principales de la gu\u00eda de estilo de la UOC<\/p><\/div>\n
2. Tipograf\u00eda<\/strong><\/h3>\n
Adem\u00e1s de las fuentes tipogr\u00e1ficas (se recomienda no utilizar m\u00e1s de una o dos fuentes en un proyecto), hay que identificar las jerarqu\u00edas correctas y, a partir de ellas, definir los estilos.<\/p>\n
En una gu\u00eda de estilo web, los estilos se definen de acuerdo con los estilos CSS. Por ejemplo, el estilo de base es el p\u00e1rrafo o body<\/em>, y los t\u00edtulos son h1, h2, h3, etc.<\/p>\n
Hay que incluir cualquier estilo utilizado en el proyecto: por ejemplo, enlaces, texto de pie de imagen, etc.<\/p>\n
En la gu\u00eda de estilo web, los estilos tipogr\u00e1ficos se describen incluyendo:<\/p>\n
- \n
- la fuente utilizada<\/li>\n
- el tama\u00f1o<\/li>\n
- la variaci\u00f3n (regular, bold<\/em>, cursiva, etc.)<\/li>\n
- el color (en alfanum\u00e9rico)<\/li>\n<\/ul>\n
3. Ret\u00edcula y layout<\/em><\/strong><\/h3>\n
La gu\u00eda de estilo debe indicar qu\u00e9 ret\u00edcula se utiliza para el proyecto y sus variaciones, si corresponde (por ejemplo, si se trata de un proyecto que puede visualizarse en diferentes dispositivos, hay que indicar cu\u00e1l es la ret\u00edcula para cada uno de ellos).<\/p>\n
En proyectos en los que existan modelos de p\u00e1gina (es decir, estructuras que funcionan como plantilla para diversos tipos de p\u00e1gina), es recomendable incluir tambi\u00e9n el layout<\/em> (es decir, el esquema de la estructura) de estas p\u00e1ginas.<\/p>\n
En el enlace siguiente encontrar\u00e9is una descripci\u00f3n de la ret\u00edcula y sus variaciones en el sistema BBC Gel: http:\/\/www.bbc.co.uk\/gel\/guidelines\/grid<\/a>.<\/p>\n
4. Elementos interactivos<\/strong><\/h3>\n
En un proyecto interactivo existen varios tipos de elementos con los que el usuario puede interactuar: botones, opciones de men\u00fa, enlaces, etc.<\/p>\n
La gu\u00eda de estilo debe incluir una muestra y descripci\u00f3n de cada uno de los tipos de elementos interactuables del proyecto, mostrando sus diferentes estados. Por ejemplo, para un bot\u00f3n podemos tener el bot\u00f3n en estado normal, hover<\/em>, clicado, visitado o desactivado.<\/p>\n
Respecto a los botones, hay que incluir tambi\u00e9n todas sus variaciones: si por ejemplo hay botones primarios, secundarios y call-to-action<\/em>, todos ellos deber\u00edan formar parte de la gu\u00eda.<\/p>\n
![\"\"](\"\/wp-content\/uploads\/2020\/12\/20110_69.jpg\")
Tipos de botones en la gu\u00eda de estilo web de la UOC<\/p><\/div>\n
5. Iconograf\u00eda<\/strong><\/h3>\n
La colecci\u00f3n de iconos utilizados en el proyecto debe formar parte de la gu\u00eda de estilo. Esto tiene dos objetivos:<\/p>\n
- \n
- Prevenir la utilizaci\u00f3n de iconos diferentes para indicar funcionalidades o contenidos que ya est\u00e1n previstos.<\/li>\n
- Mostrar el estilo gr\u00e1fico de los iconos del proyecto, para que si hay que crear un nuevo icono, pueda seguir las mismas pautas estil\u00edsticas que los existentes.<\/li>\n<\/ol>\n
En el enlace siguiente encontrar\u00e9is el apartado de iconograf\u00eda de la gu\u00eda de la Carbon Design System (gu\u00eda de estilo de IBM): https:\/\/carbondesignsystem.com\/guidelines\/icons\/library<\/a>.<\/p>\n
6. Estilo de las im\u00e1genes<\/strong><\/h3>\n
La gu\u00eda de estilo ha de contener indicaciones acerca de los formatos de imagen previstos para el proyecto. En una web o app<\/em> no se utiliza cualquier tama\u00f1o de imagen, sino que estas se adaptan a unos formatos determinados, que no deber\u00edan ser muchos para que no exista demasiada variabilidad (que conducir\u00eda a una alta complejidad en la gesti\u00f3n de im\u00e1genes del proyecto).<\/p>\n
Adem\u00e1s de las indicaciones de formatos de imagen, la gu\u00eda puede tambi\u00e9n incluir, opcionalmente, pautas sobre el estilo visual de las im\u00e1genes.<\/p>\n
En el enlace siguiente encontrar\u00e9is el apartado \u00abIm\u00e1genes de la gu\u00eda de estilo de Luther College\u00bb: http:\/\/www.luther.edu\/style-guide\/images\/<\/a>.<\/p>\n
7. Estilo de redacci\u00f3n (copy<\/em>)<\/strong><\/h3>\n
El estilo de redacci\u00f3n de un proyecto interactivo determina la voz o tono con el que este se comunicar\u00e1 con los usuarios. Este estilo debe mantenerse coherente para que el usuario experimente una comunicaci\u00f3n un\u00edvoca, y tiene que aplicarse tanto a textos de contenido como a elementos textuales m\u00e1s breves (por ejemplo, el rotulado de las opciones).<\/p>\n
Aunque generalmente las gu\u00edas de estilo de redacci\u00f3n son mucho m\u00e1s breves y menos detalladas, Voice & Tone<\/a> (de Mailchimp) es un excelente ejemplo de gu\u00eda de estilo de redacci\u00f3n para la web.<\/p>\n
Ejemplos de gu\u00edas de estilo web<\/strong><\/h2>\n
Gu\u00edas de sistemas operativos<\/strong><\/p>\n
- \n
- Material design (Google)<\/a><\/li>\n
- iOS Human Interface Guidelines (Apple)<\/a><\/li>\n
- Fluent Design System (Microsoft)<\/a><\/li>\n<\/ul>\n
Gu\u00edas de sistemas de dise\u00f1o<\/strong><\/p>\n
- \n
- Carbon Design System (IBM)<\/a><\/li>\n
- GOV.UK Elements (gu\u00eda de estilo de las webs del Gobierno brit\u00e1nico)<\/a><\/li>\n
- BBC Gel System (Global Experience Language<\/em> de la BBC)<\/a><\/li>\n<\/ul>\n
Otras gu\u00edas<\/strong><\/p>\n
- \n
- Mailchimp<\/a><\/li>\n
- Lonely Planet<\/a><\/li>\n
- Dropbox<\/a><\/li>\n<\/ul>\n
Referencias<\/strong><\/h2>\n
Laurinavicius, T.<\/strong> \u00abHow to create a web design style guide\u00bb [en l\u00ednea]. <https:\/\/designmodo.com\/create-style-guides\/<\/a>>. [Fecha de consulta: 25 de enero de 2021].<\/p>\n
Neville, K.<\/strong> (2010). \u00abHow To Design Style Guides For Brands And Websites\u00bb [en l\u00ednea]. <https:\/\/www.smashingmagazine.com\/2010\/07\/designing-style-guidelines-for-brands-and-websites\/<\/a>>. [Fecha de consulta: 25 de enero de 2021].<\/p>\n
Rocheleau, J.<\/strong> \u00ab29 Well-Designed Online Style Guides\u00bb [en l\u00ednea]. <https:\/\/webdesignledger.com\/29-online-style-guides\/#d7eff6170a<\/a>>. [Fecha de consulta: 25 de enero de 2021].<\/p>\n
- Lonely Planet<\/a><\/li>\n
- GOV.UK Elements (gu\u00eda de estilo de las webs del Gobierno brit\u00e1nico)<\/a><\/li>\n
- iOS Human Interface Guidelines (Apple)<\/a><\/li>\n
- Material design (Google)<\/a><\/li>\n
- el color (en alfanum\u00e9rico)<\/li>\n<\/ul>\n
- Garantizar la coherencia a pesar de las actualizaciones\/ampliaciones<\/strong>. A lo largo de su vida, el proyecto puede cambiar. La gu\u00eda de estilo es una herramienta de consulta que permitir\u00e1 despejar dudas sobre c\u00f3mo realizar estas modificaciones manteniendo la coherencia con las p\u00e1ginas\/pantallas ya existentes.<\/li>\n
- Gr\u00e1fico<\/strong>: pautas gr\u00e1ficas como color, tipograf\u00eda, ret\u00edcula, forma de los diferentes elementos, etc.<\/li>\n<\/ul>\n