• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal
  • Saltar al pie de página
logo webolto

Webolto

Centro de recursos para creadores de sitios web

  • Crear paginas web
    • Opinión de Wix
    • Opinión de WordPress.com
    • Opinión de Weebly
    • Opinión de Strikingly
    • Opinión de Jimdo
    • Opinión de Squarespace
  • Crear tienda online
    • Opinión de Shopify
    • Opinión de BigCommerce
    • Opinión de WooCommerce
    • Opinión de Wix Ecommerce
  • CRM
    • Mejores software de CRM para pymes
    • Atención al cliente
  • Gestión de proyectos
    • Mejores software de gestión de proyectos
    • Mejores herramientas de retroplanning
    • Opinión de monday.com
    • Opinión de Notion
    • Opinión de ClickUp
  • Recursos negocios web
  • Blog

Cómo crear el manual de identidad visual de tu sitio web

enero 14, 2022 by pablo Deja un comentario

El manual de identidad visual de un sitio web es el conjunto de reglas y símbolos que definen el aspecto gráfico de una web. El objetivo de un manual de identidad visual es doble. Por un lado, garantiza una coherencia gráfica en todas las páginas de un sitio web, que debe hacerse extensiva en la medida de lo posible a otros soportes de comunicación. De esta forma, se refuerza la imagen corporativa y se facilita la navegación por usar referencias visuales constantes.

Además, el manual de identidad visual desempeña una función determinando en la primera impresión y la credibilidad de tu sitio web. Por tanto, es necesario dedicarle tiempo y recursos.

Diseñar el manual de identidad visual de tu sitio web. Índice:

  • Elementos del manual de identidad visual de un sitio web
  • Cómo crear tu manual de identidad visual
  • 7 ejemplos de identidad visual de sitios web
  • 5 buenas prácticas para optimizar el manual de identidad visual de tu sitio web

Elementos del manual de identidad visual de un sitio web

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 o los botones, son específicos del manual de identidad visual del sitio web, pero la mayoría de componentes son comunes a la identidad visual general.

Esta es la lista de los principales elementos del manual de identidad visual de un sitio web:

Colores

manual de identidad visual colores

Para tener una identidad visual más consistente, debes elegir una gama de colores vinculados con tu marca, que servirá para crear un universo visual que se distinga con rapidez. Esto contribuye asimismo a que el público reconozca y recuerde tu empresa.

Los colores se pueden identificar con el código de color RVB, hexadecimal o HTML. En general, se recomienda elegir solo uno o dos colores principales para tu identidad visual.

Tipografía

Partes de la tipografía

La tipografía está presente en todas partes: en los libros que leemos, en los sitios web que visitamos y también en la vida cotidiana, en los carteles y los embalajes de productos. Es crucial en un manual de identidad visual: ¡algunas marcas se conocen únicamente gracias a su tipografía!

Por ello, elegir una fuente tipográfica apropiada para el texto y el mensaje de la empresa es importante. La fuente puede ser sans serif (los añadidos en los extremos de las letras) o con remates.

La tipografía en el manual de identidad visual debe incluir la fuente elegida, su grosor, tamaño y los colores para cada nivel de títulos. Igual que con los colores, en general no se recomienda sobrepasar las dos fuentes tipográficas: una para los colores y otra para los títulos.

Logo

manual de identidad visual logo

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

El logo debe estar disponible en todos los soportes de comunicación 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ños.

Iconos

manual de identidad visual iconos

Todos los elementos gráficos vinculados con tu marca, de tipo iconos o emoticones, deben estar armonizados y seguir la misma línea directriz.

En general, recomendamos usar iconos de una misma serie para garantizar la coherencia gráfica. En la web Dryicons puedes descargar 74 series de iconos gratis.

Botones

Formatos de botones de un sitio web

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

Suele ser útil tener dos o tres variaciones de los botones: un botón con texto simple, un botón con texto y un icono y también pueden tener un botón específico para la llamada a la acción de la página de inicio.

Otros elementos que las agencias web incluyen en el manual de identidad visual son los campos de texto, las casillas de verificación, las listas desplegables, las ventanas emergentes, el mensaje de error, etc. Lo ideal es integrar todos los elementos comunes a más de una página en el manual de identidad visual: esto facilitará el trabajo posterior de los diseñadores y reforzará la identidad visual.

¿Cómo crear tu manual de identidad visual?

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áginas web, o el sitio web se crea con un diseño a medida.

Manual de identidad visual de un sitio web: el arte de la adaptación

Plantillas web de Wix

Cuando utilizas un programa para crear páginas web 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:

  • Elegir el programa de creación de sitios web

Elige un programa para crear la página web adaptado a tus necesidades. Puede ser un programa flexible si vas a querer modificar muchos elementos gráficos de la plantilla inicial, o una herramienta muy intuitiva si deseas una solución más rápida.

En este artículo, te explicamos las alternativas que tienes a tu disposición para crear un sitio web gratis (o casi).

  • Elección de la plantilla

Una vez que hayas elegido el programa para crear tu sitio web, tómate tu tiempo para definir con claridad los elementos básico de tu manual de identidad visual antes de elegir una plantilla. La plantilla elegida debe ser coherente con la temática de tu sitio web.

Algunos programas para crear sitios web de forma asistida ofrecen una amplia variedad de plantillas agrupadas por temas, para que elijas la más adecuada para tus necesidades. Pon a prueba todas las posibilidades de personalización de cada plantilla antes de elegir la plantilla final, ya que a posteriori es mucho más difícil cambiarla.

El manual de identidad visual a medida: el valor de un buen briefing

Cuando optas por delegar la elaborar del manual de identidad de un sitio web a una agencia web o a un/a profesional freelance especializado, debes proporcionar al proveedor del servicio un briefing: un documento que explica la actividad de tu empresa, los objetivos del sitio web y la identidad corporativa que deseas reflejar en tu sitio web. A partir de este documento, el proveedor de servicios diseñará una identidad visual a medida.

A menudo, debido a un briefing poco claro, o incluso inexistente, las empresas se sienten decepcionadas con la identidad gráfica que ofrece una agencia. Preparar un briefing claro y completo no es una pérdida de tiempo. Si el proveedor del servicio no entiende lo que quieres transmitir con tu web, las propuestas iniciales de la agencia no serán las adecuadas y ambas partes perderán el tiempo.

Además de una sección de marketing con el público objetivo del sitio web y una parte más técnica que presenta la estructura del árbol web deseada, el resumen debe incluir una parte sobre la identidad visual. Para ello, deberá presentar detalladamente lo siguiente:

  • Público objetivo de tu empresa
  • La identidad visual actual, si ya tienes: ¿has creado un logotipo?, ¿tienes colores y tipografía corporativos?
  • Posicionamiento de la imagen de tu empresa: ¿cómo deben sentirse los visitantes que llegan a tu sitio web?
  • Las acciones que deseas que realicen los visitantes de tu sitio web
  • Las inspiraciones de tu marca desde un punto de vista estético
  • Estructura del árbol web deseada, si tienes alguna ya en mente

7 ejemplos de identidad visual de sitios web

Coca-Cola

Ejemplos de identidad visual Coca-Cola

Coca-Cola se creó en 1886 y, aunque la identidad gráfica de la marca haya experimentado algunos cambios con los años, conservas las características básicas que tenía en sus inicios. Los colores rojo y blanco de la marca se reconocen de inmediato, sobre todo cuando aparecen junto a la tipografía de Coca-Cola.

Más adelante, Coca-Cola añadió osos polares a su imagen de marca y explota esta recurso sobre todo en fin de año.

Mastercard

Ejemplos de identidad visual Mastercard

Todo el mundo reconoce el logo de Mastercard a primera vista: dos círculos que se entrecruzan con una paleta de colores roja, amarilla y naranja. Sin embargo, la identidad visual de Mastercard no ha sido idéntica desde el principio. Se rediseñó recientemente, en 2016.

El cambio fue apenas perceptible y esa es la clave de un rediseño eficaz de identidad visual: conservar las características y los elementos fundamentales del diseño que tu público reconoce incorporando un toque de frescor y modernidad.

Pandateatox

Ejemplos de identidad visual Panda Tea

Esta marca de té helado emplea un diseño protagonizado por un panda en blanco y negro en todos sus productos. Algunos envases adoptan la forma del animal como en la siguiente ilustración. Pandateatox utiliza una paleta de colores cálidos e pastel sobre fondo blanco, lo que inspira armonía y bienestar, valores asociados con la marca.

En sus redes sociales, publican muchas imágenes de animales bebés, despertando la ternura y creando un universo «mono» n torno a su marca.

Starbucks

Ejemplos de identidad visual Starbucks

Starbucks tiene una identidad corporativa consistente en promocionar el café como un producto de calidad, incluso de lujo, generando emociones en sus consumidores. Siempre se ha presentado como una empresa que pretende servir el mejor café posible.

Cuando la empresa se creó, en la década de 1970, tenía el objetivo de imitar la cultura del café italiana. Por tanto, se trata de una identidad de marca que trata de aportar una cultura y cierto exotismo a una bebida corriente para muchos como es el café.

Apple

Ejemplos de identidad visual Apple

Apple ha logrado posicionarse como una marca de productos de alta gama con un diseño único, con tiendas físicas luminosas y minimalistas y empleados simpáticos y competentes. Los productos de Apple son emblemáticos y se pueden diferenciar fácilmente de los de otras marcas. Gracias a esto, la marca cuenta con una clientela fiel, siempre lista para comprar las últimas novedades.

Los sitios de Apple utilizan una gama de colores monócroma, protagonizada por el blanco y el gris, que inspira modernidad y sencillez.

Airbnb

Ejemplos de identidad visual Airbnb

El manual de identidad visual de Airbnb pretende representar los servicios de esta empresa, por lo que se basa en una vida activa, llena de viajes y experiencias auténticas. Gracias a las fotos de personas, paisajes y actividades llenas de naturaleza y a su logo rosa minimalista y con forma de corazón, Airbnb anima a la gente a aprovechar al máximo sus viajes y utilizar su plataforma para ello.

Dropbox

Dropbox

En sus inicios, Dropbox tenía un diseño minimalista y posteriormente su imagen de marca ha evolucionado poco a poco. En 2017, la empresa efectuó un rediseño con una identidad visual dinámica, colorida y rica en imágenes. Desde sus banners de Twitter hasta su Instagram, la empresa transmite una fuerte sensación de creatividad coherente con la variedad de recursos que ofrece en constante evolución.

5 buenas prácticas para optimizar el manual de identidad visual de tu sitio web

Conoce bien a tu público objetivo

Define un segmento preciso de clientes a los que deseas dirigirte: sexo, edad, lugar de residencia, aficiones, clase social, etc. Puedes explorar sus hábitos y comportamientos de compra para conocerlos mejor y crear una identidad visual adaptada a ellos. Conocer a tu público también es importante para el storytelling de tu marca.

No te limites presentar la utilidad de tus productos o su funcionalidad. Las emociones son importantes para que tu marca sea recordada y digna de confianza. Empieza por identificar las emociones que deseas evocar con tu identidad visual y después establece los vínculos con tu carta de colores para encontrar las más adaptadas a las emociones que has elegido.

Mantén la coherencia en todos los canales

Tu manual de identidad visual debe ser coherente con tu labor de comunicación en todas las plataformas y dispositivos disponibles: aplicación móvil, sitio web tanto si acceden desde móvil o desde PC, redes sociales, etc.

De hecho, la creación de una identidad visual obliga a mantener una línea directriz estricta, que ayuda a trasmitir tu mensaje y recordar tu marca.

Inspírate en los mejores

Crea tu manual de identidad visual inspirándote en otros creadores, próximos a tu público objetivo o a las emociones que deseas transmitir. Para ello, Pinterest es una excelente herramienta que puedes usar como punto de partida: puedes usar un «mood board» preconfigurado o crear el tuyo con pines de las imágenes que elijas después de introducir las palabras clave que te interesen.

Puedes usar palabras clave como «Diseño», «Branding», «Identidad visual» o incluso «Combinación de colores» para iniciar tu proceso de descubrimiento.

La simplicidad es tu aliada

No te dejes llevar por un número de opciones demasiado grande. Limita la gama de colores de tu marca a uno o —como mucho— dos colores principales. Limita tus opciones de botones y enlaces, no dejan de ser ante todo elementos funcionales. ¡La simplicidad es siempre una buena aliada!

Realiza modificaciones de vez en cuando

No es buena idea modificar el manual de identidad visual por completo cada tres meses, pero puedes organizar sesiones de evaluación periódicas para aportar pequeñas modificaciones, más o menos cada dos meses. El objetivo es que la navegación en tu sitio web sea lo más fluida posible. No dudes en consultar a tus clientes: ¡son quienes están en mejor posición para aportar comentarios constructivos!

En cualquier caso, insistimos en que no es buena idea modificar tu identidad visual con demasiada brusquedad. Los cambios se deben efectuar de la forma más transparente posible. ¡Tu clientela objetivo apenas deberá darse cuenta!

Publicado en: Uncategorized

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Barra lateral principal

Entradas recientes

  • Aviso legal de un sitio web: cómo redactarlo y ejemplos
  • Qué es un sitio web: definición, tipos y cómo crearlo
  • 21 buenos ejemplos de identidad visual corporativa
  • Las mejores herramientas no-code que te facilitarán el trabajo
  • Las 10 mejores aplicaciones para enviar archivos grandes en línea

Top programas para crear paginas web

wix logo
Wix
95%
weebly logo
Weebly
85%
squarespace logo
Squarespace
80%
Strikingly logo
Strikingly
80%
Jimdo logo
Jimdo
70%
Comparación completa

Footer

Sobre nosotros

Ayudamos a emprendedores y profesionales de la web a construir y hacer crecer sus proyectos.

Categorías

  • Creadores de sitios
  • Crear una tienda online
  • Blog
  • Contacto
  • Menciones legales

publicación reciente

  • Aviso legal de un sitio web: cómo redactarlo y ejemplos
  • Qué es un sitio web: definición, tipos y cómo crearlo
  • 21 buenos ejemplos de identidad visual corporativa
  • Las mejores herramientas no-code que te facilitarán el trabajo
  • Las 10 mejores aplicaciones para enviar archivos grandes en línea

idioma

  • es_ES Webolto ES

© Webolto. All Rights Reserved. Terms & conditions