10 formas en que el diseño web y la marca deben trabajar juntos

Lo más probable es que si está ejecutando (o ayudando a administrar) un negocio, tendrá un sitio web o necesitará uno. La web, y su diseño, puede ser un campo minado si se aborda sin la debida consideración y tiempo.

En este artículo, exploraré cómo considerar esta parte importante de su negocio cuando se trata de la marca, el cambio de marca o incluso el refinamiento de su marca, para garantizar que los dos se complementen y, en última instancia, trabajen juntos para impulsar su negocio y sus objetivos.

Una gran parte de lo que hacemos es trabajar con las startups en sus necesidades de diseño de marca y sitio web, que estar bajo un mismo techo tiene beneficios obvios en términos de comprender todo el proceso de ambas áreas de diseño. Ayudamos a guiar a los clientes a través del proceso. Sin embargo, esto no siempre es posible, ya que actualmente puede tener un diseñador web sólido que usa que no ofrece marca, o tal vez su agencia de marca preferida no facilita el diseño web.

Al revisar nuestros proyectos recientes y las conversaciones que surgieron una y otra vez, he reunido una lista de 10 consideraciones para actuar como consejo e investigación adicional cuando se trata de hacer que su marca funcione para la web, especialmente si está trabajando con especialistas en marcas que quizás no sean expertos en la web …

1. Colores, accesibilidad y jerarquía visual

El paso en falso número uno al elegir los colores de la marca es la falta de consideración para su aplicación. La marca es complicada, ya que realmente está abstrayendo todo un nivel, más allá de los sitios web, volantes, señalización, etc. y presentando un conjunto de reglas y principios que se pueden aplicar a varios medios diferentes con una estética consistente.

Con eso, a veces se puede eliminar tanto de las posibles aplicaciones que los colores se pueden elegir para que sean complementarios entre sí y se alineen con los valores de la marca y el tono de voz, pero al tratar de usarlos en un contexto de la vida real, el diseño puede faltar La usabilidad que necesita.

Lo principal a considerar con el color es el contraste y la legibilidad. Si no está demasiado familiarizado con la web, es posible que no haya encontrado el término de ‘accesibilidad’ al diseñar para la web, que simplemente es la práctica de hacer que los sitios web sean utilizables para personas con discapacidades.

Una gran parte de eso se reduce a que las personas con discapacidad visual puedan tener acceso al texto con un contraste suficientemente bueno entre el color del texto y el color de fondo, además de poder navegar por el sitio en general.

Para verificar sus colores, puede usar cuadros de contraste como este. Asegúrese de hacer esto al principio del proceso de creación de la marca, mucho antes de que se realice cualquier diseño web. No tiene sentido enamorarse de los colores si no son utilizables. La otra consideración principal con el color es que usted y sus diseñadores web tienen suficiente en su arsenal para establecer una clara jerarquía visual con el diseño web. Todas las páginas web tendrán un objetivo y cosas en las que desea que se centre un usuario, por lo que tener una paleta demasiado monótona significará que esto no se puede lograr, y demasiados colores igualmente destacados harán que las páginas estén demasiado ocupadas y difíciles de manejar orientarse.

2. Imágenes

Cualquier buen proceso de marca primero explorará cuáles son los valores de la marca (quién eres) y el tono de voz (cómo lo dices), que luego se conecta en cascada a todo lo demás, desde la elección de fuente y tamaño, hasta el uso de espacios en blanco.

En esta etapa, comience a pensar a qué imágenes tendrá acceso en términos de fotografía de estilo de vida y fotos de archivo, para que se alineen con estos principios. Esto ayudará a mantener su marca consistente, pero también ayudará a sus diseñadores web a saber con qué tienen que jugar.

Con imágenes, intente elegir o capturar imágenes que tengan mucho espacio exterior para recortar a la izquierda, derecha, arriba y abajo (básicamente para no tener partes importantes de la imagen a un lado) como cuando se coloca en una página web, la web el desarrollador podría necesitar recortar la imagen.

Actualmente, un patrón de diseño bastante común son las imágenes de pancartas grandes con texto superpuesto, por lo que es posible que el recorte deba realizarse allí para retener la altura. Con texto sobre imágenes, también considere tener algunas imágenes que sean más abstractas que mostrar detalles, por lo que son más adecuadas para este tipo de uso.

3. Tamaño del logotipo, formato y complejidad

Si bien una marca es más que un logotipo, siempre encontrará mucho enfoque y atención en la creación del logo, ya que es uno de los elementos más personalizados para su marca, y aparecerá en casi todo lo que produce, incluido el sitio web.

Un error que estamos cometiendo en nuestro estudio es poner el logotipo bastante grande por sí solo para su revisión, al enviar nuevos conceptos de marca. Creo que estamos repitiendo el mismo sentimiento de que la gente nunca lo verá de esta manera, por lo que los clientes deben alejarse antes de confirmar sus comentarios. Ahora estamos comenzando a establecer una mejor manera de presentar los diseños de logotipos, lo que significa que la opción del logotipo no está demasiado influenciada por su entorno, sino que también el cliente lo ve en un tamaño más natural.

Muchas computadoras y dispositivos ahora tienen una pantalla muy nítida (a menudo denominada retina), por lo que significa que podemos permitirnos tener una mayor complejidad de lo que solíamos tener, pero siempre debe mirar su logotipo y discutir si hay algo que exceda los requisitos.

Los logotipos más exitosos de la historia han sido los más simples (Nike, Apple, FedEx, BBC), por lo que esta es una buena práctica de marca de todos modos, pero también disfrutarás del beneficio de que se representará fácilmente y será identificable en un sitio web, que suele ser bastante pequeño (como debería ser) en el encabezado. Una vez más, puede optar por romper este molde, pero sigue siendo una consideración que vale la pena.

Asegúrese de que el resultado final de su logotipo sea algo que esté en formato vectorial, que es un formato de archivo que crea formas a partir de líneas en lugar de píxeles, para que pueda escalar indefinidamente. Estos formatos de archivo suelen ser .SVG (mejor para la web), o .EPS y .PDF (que luego se pueden entregar a un diseñador web para convertirlos en .SVG). Si no está seguro y está abordando esto usted mismo, vea si puede obtener ayuda en esta etapa.

4. Audiencia

Diseñar sin una audiencia es una tarea un poco inútil, y ya sea que sea una startup o una empresa con más de 10 años de experiencia, tendrá algunas ideas sobre con quién quiere conectarse.

Durante las conversaciones con el público en la fase de desarrollo de la marca, asegúrese de mantener documentación sobre a qué público le atrae su marca, de modo que tenga algo en qué confiar más que memoria más adelante.

Si la marca y el diseño web están sucediendo de forma consecutiva como un alcance de trabajo más amplio, también podría valer la pena ver si sus diseñadores web pueden participar en las reuniones iniciales para que puedan escucharlo e involucrarse de primera mano.

5. Palabras clave y micro copia

El contenido es una gran parte de lo que hace una marca, y esto puede ser cualquier cosa, desde un eslogan hasta la declaración completa de la misión de la empresa. Al igual que con otros elementos de la marca, los valores de la marca y el tono de voz deben alimentar esta escritura de contenido.

Al escribir (o revisar el contenido de un redactor) asegúrese de verificar que haya referencias claras y directas a lo que hace / ofrece y que no es demasiado abstracto. Un eslogan es más parecido al famoso “Just do it”, pero probablemente querrás un titular sólido y descriptivo como “ropa deportiva y deportiva de alta calidad”. De esta forma, los desarrolladores web pueden hacer que el eslogan sea visualmente grande y la declaración de posicionamiento relativamente pequeña, pero el texto más descriptivo es el que se centra cuando Google indexa la página. Para texto más largo, revíselo para palabras clave. Hacer esto de ninguna manera garantiza que terminarás en la primera página de una búsqueda, pero ayudará a tus esfuerzos de SEO.

Además de la noción más tradicional de contenido en la página, asegúrese de comparar cosas como la copia de botones, cómo se refiere a elementos como la cesta / bolsa / carrito y las etiquetas para elementos más interactivos, para verificar que se alinean con El tono de voz de tu marca. Tener la palabra ‘Bolsa’ para la página de la cesta en un sitio web de joyería, por ejemplo, puede parecer mucho más premium y de alta gama que ‘Carrito’.

6. Fuentes

Las fuentes son geniales y pueden transmitir mucho más que las palabras que están deletreando. La práctica del diseño y creación de fuentes también es muy activa y hay literalmente decenas de miles para elegir.

Todo depende de su marca, por lo que no hay una fuente correcta o incorrecta, pero siempre asegúrese de verificar que las fuentes elegidas para su marca estén disponibles en formato web y pueda obtener la licencia para ellas. Puede hacer esto usando una fuente gratuita que permita la conversión web (que un diseñador web podrá aconsejar), comprando una fuente y luego asegurándose de seleccionar opciones para el escritorio y el uso web, o usando una web servicio de alojamiento de fuentes como Typekit o Fonts.com, que le permite pagar una pequeña tarifa mensual por las fuentes. En última instancia, las fuentes que se usan en línea (las que lees dentro de un sitio web) y fuera de línea (las que tú o tus diseñadores han instalado en una computadora para usar) son muy diferentes en términos de cómo deben funcionar.

Para una fuente fuera de línea en su computadora, solo necesita tenerla para verla. Con una fuente en línea en un sitio web, no puede pedirles a todos que instalen su fuente antes de usar el sitio, por lo que deberá incrustar el archivo de fuente en algún lugar para mostrarlo.

7. Activos de marca y disponibilidad

Una vez que la marca esté completa, idealmente producirá pautas de marca que detallen las fuentes que se utilizarán, los colores y su código de referencia web / impresión exacto, y los principios generales para aplicar la marca.

Busque tener esto, junto con todos los formatos de archivo del logotipo, los archivos de fuentes y la biblioteca de imágenes, todo en una ubicación central en línea, ya que esto les ahorrará una gran cantidad de tiempo en el futuro.

Es aconsejable guardarlos localmente en su computadora (y también en el disco duro externo / memoria USB), pero busque servicios gratuitos como Google Drive o Dropbox para colocar estos archivos con un enlace para compartir que luego puede distribuir fácilmente según sea necesario.

8. Adaptabilidad

La aplicación de la marca es difícil de predecir en el momento de la creación, ya que sabe que necesita un sitio web, pero aún no se ha especificado qué forma tomará, y puede haber otro material como aplicaciones o pantallas interactivas que simplemente no están en El horizonte todavía.

La marca final debe ser un conjunto firme de principios, pero aún lo suficientemente fluida como para no restringir el diseño de nada en el futuro. En el diseño, existe una inclinación por las cuadrículas y los sistemas de cuadrícula, que pueden ser encantadores, pero no siempre es posible apegarse al diseño web dependiendo de la funcionalidad y los objetivos de una página en particular.

Revise las pautas de su marca con un diseñador web para ver si algo en ellas podría ser una restricción, como cuadrículas, reglas estrictas de tamaño para las fuentes (ya que esto tendrá que cambiar según el tamaño de la pantalla) o incluso cómo aparecen el texto y los iconos. Imágenes.

9. Visibilidad del proceso

Me referí a esto en la sección cuatro en términos de tener a los diseñadores web presentes en las reuniones sobre audiencia, para que puedan escuchar de primera mano y contribuir.

Si la marca y el diseño web se ejecutan consecutivamente, asegúrese de compartir los hitos clave con cada parte, de modo que a medida que la marca tome forma los diseñadores web puedan ayudar a comentar algunos de los puntos, pero de manera similar, los diseñadores de la marca pueden ver la marca ser aplicado y sugerir cambios si es necesario. Sin embargo, este triángulo de retroalimentación a veces puede ser complicado, lo que nos lleva muy bien al punto final …

10. Pollo vs huevo

La marca general siempre vendrá antes que el diseño web, pero como hemos explorado, una vez que comience, los dos deberán trabajar juntos y apoyarse mutuamente. La pregunta realmente es cuál de estos viene primero en términos de importancia, y qué disciplina tiene la última palabra si hay un conflicto de una decisión a tomar.

Esto no quiere decir que habrá conflicto en el sentido tradicional de la palabra, pero si, por ejemplo, la marca dicta una cosa y el diseño web requiere otra.

Antes de comenzar nuestro estudio, era el Director Creativo de una agencia de diseño más grande, que tenía equipos de marca y de diseño web, así que estaba bien versado en el manejo de estas conversaciones, pero aún es difícil de llamar. Mi regla general era que si la decisión resultaba en un efecto perjudicial para el sitio web (como imágenes grandes en todas partes que causaban un tiempo de carga lento), impedía la usabilidad o simplemente no era posible dentro del código, entonces el sitio web tenía la última palabra.

Es posible que esta diferencia de opiniones ni siquiera ocurra en su proyecto y trabajar con los equipos que tienen una mentalidad positiva y colaborativa significa que las discusiones pueden ser realmente alentadoras y una oportunidad para que todos aprendan unos de otros. Todos buscan el mismo objetivo para el negocio, por lo que trabajar juntos, ser visibles y comprender los diferentes roles en el proyecto ayudará a dar un resultado final fluido y emocionante para su empresa.

Si quieres más información sobre como integrar tu marca y tu diseño we, puedes dar clic en: Agencia de Marketing en México.