{"id":1976,"date":"2022-01-14T04:00:28","date_gmt":"2022-01-14T05:00:28","guid":{"rendered":"http:\/\/www.webolto.com\/es\/?p=1976"},"modified":"2023-09-25T11:10:43","modified_gmt":"2023-09-25T12:10:43","slug":"manual-identidad-visual-web","status":"publish","type":"post","link":"https:\/\/www.webolto.com\/es\/blog\/manual-identidad-visual-web\/","title":{"rendered":"C\u00f3mo crear el manual de identidad visual de tu sitio web"},"content":{"rendered":"

El manual de identidad visual de un sitio web es el conjunto de reglas y s\u00edmbolos que definen el aspecto gr\u00e1fico de una web. El objetivo de un manual de identidad visual es doble. Por un lado, garantiza una coherencia gr\u00e1fica en todas las p\u00e1ginas de un sitio web, que debe hacerse extensiva en la medida de lo posible a otros soportes de comunicaci\u00f3n. De esta forma, se refuerza la imagen corporativa<\/strong><\/a> y se facilita la navegaci\u00f3n por usar referencias visuales constantes.<\/p>\n

Adem\u00e1s, el manual de identidad visual desempe\u00f1a una funci\u00f3n determinando en la primera impresi\u00f3n y la credibilidad de tu sitio web. Por tanto, es necesario dedicarle tiempo y recursos.<\/p>\n

<\/a>Elementos del manual de identidad visual de un sitio web<\/h2>\n

El anual de identidad visual de un sitio web debe ser una parte (importante) de la identidad corporativa de la empresa. Algunos elementos, como los banners<\/em> o los botones, son espec\u00edficos del manual de identidad visual del sitio web, pero la mayor\u00eda de componentes son comunes a la identidad visual general.<\/p>\n

Esta es la lista de los principales elementos del manual de identidad visual de un sitio web:<\/p>\n

Colores<\/h3>\n

\"manual<\/p>\n

Para tener una identidad visual m\u00e1s consistente, debes elegir una gama de colores<\/a><\/strong> vinculados con tu marca, que servir\u00e1 para crear un universo visual que se distinga con rapidez. Esto contribuye asimismo a que el p\u00fablico reconozca y recuerde tu empresa.<\/p>\n

Los colores se pueden identificar con el c\u00f3digo de color RVB, hexadecimal o HTML. En general, se recomienda elegir solo uno o dos colores principales para tu identidad visual.<\/p>\n

Tipograf\u00eda<\/h3>\n

\"Partes<\/p>\n

La tipograf\u00eda est\u00e1 presente en todas partes: en los libros que leemos, en los sitios web que visitamos y tambi\u00e9n en la vida cotidiana, en los carteles y los embalajes de productos. Es crucial en un manual de identidad visual: \u00a1algunas marcas se conocen \u00fanicamente gracias a su tipograf\u00eda!<\/p>\n

Por ello, elegir una fuente tipogr\u00e1fica apropiada para el texto y el mensaje de la empresa es importante. La fuente puede ser sans serif<\/em> (los a\u00f1adidos en los extremos de las letras) o con remates.<\/p>\n

La tipograf\u00eda en el manual de identidad visual debe incluir la fuente elegida, su grosor, tama\u00f1o y los colores para cada nivel de t\u00edtulos. Igual que con los colores, en general no se recomienda sobrepasar las dos fuentes tipogr\u00e1ficas: una para los colores y otra para los t\u00edtulos.<\/p>\n

Logo<\/h3>\n

\"manual<\/p>\n

El logo<\/a><\/strong> es una pieza primordial en toda identidad visual: representa tu estrategia de marca. A primera vista, debe atraer la atenci\u00f3n y generar una impresi\u00f3n fuerte, para diferenciarte de la competencia. Un buen logo favorece la fidelidad a la marca, ya que se recuerda con facilidad.<\/p>\n

El logo debe estar disponible en todos los soportes de comunicaci\u00f3n que la empresa pueda utilizar y para ello debe tener diferentes variantes: sobre fondo blanco y negro, sobre fondo transparente, en blanco y negro, con las referencias de color y en diferentes tama\u00f1os.<\/p>\n

Iconos<\/h3>\n

\"manual<\/p>\n

Todos los elementos gr\u00e1ficos vinculados con tu marca, de tipo iconos o emoticones, deben estar armonizados y seguir la misma l\u00ednea directriz.<\/p>\n

En general, recomendamos usar iconos de una misma serie para garantizar la coherencia gr\u00e1fica. En la web Dryicons<\/strong><\/a> puedes descargar 74\u00a0series de iconos gratis.<\/p>\n

Botones<\/h3>\n

\"Formatos<\/p>\n

Por \u00faltimo, los botones constituyen una de las particularidades del manual de identidad visual del sitio web, ya que no existen en la versi\u00f3n en papel. Aunque no lo parezca, son elementos esenciales para la creaci\u00f3n que contribuyen a contar una historia sobre tu marca y guiar a los visitantes hacia tus productos o servicios.<\/p>\n

Suele ser \u00fatil tener dos o tres variaciones de los botones: un bot\u00f3n con texto simple, un bot\u00f3n con texto y un icono y tambi\u00e9n pueden tener un bot\u00f3n espec\u00edfico para la llamada a la acci\u00f3n de la p\u00e1gina de inicio.<\/p>\n

Otros elementos que las agencias web<\/a><\/strong> incluyen en el manual de identidad visual son los campos de texto, las casillas de verificaci\u00f3n, las listas desplegables, las ventanas emergentes, el mensaje de error, etc. Lo ideal es integrar todos los elementos comunes a m\u00e1s de una p\u00e1gina en el manual de identidad visual: esto facilitar\u00e1 el trabajo posterior de los dise\u00f1adores y reforzar\u00e1 la identidad visual.<\/p>\n

<\/a>\u00bfC\u00f3mo crear tu manual de identidad visual?<\/h2>\n

Naturalmente, todo depende del contexto: presupuesto disponible, trabajo ya hecho, competencias internas, etc. Para simplificar, podemos diferenciar dos casos: el sitio web se realizar sobre una plantilla, lo que suele ser el caso cuando se usa un programa para crear p\u00e1ginas web, o el sitio web se crea con un dise\u00f1o a\u00a0medida.<\/p>\n

Manual de identidad visual de un sitio web: el arte de la adaptaci\u00f3n<\/h3>\n

\"Plantillas<\/p>\n

Cuando utilizas un programa para crear p\u00e1ginas web<\/strong><\/a> de forma asistida, el trabajo consiste principalmente en adaptar la plantilla que hayas elegido para reflejar la identidad de tu marca. Algunos consejos para esta tarea:<\/p>\n