Diseño de logotipos para sitios web

Qué debes tener en cuenta al diseñar un logotipo para un sitio web

El diseño de logotipos para sitios web sigue reglas completamente diferentes a las de la comunicación impresa o de otro tipo. Los requisitos de los logotipos y los signos han aumentado. Te mostramos las pautas y herramientas para crear los logotipos de la web tu .

Diseño de logotipos para impresión y web

Existe una frontera muy permeable entre el diseño web y el diseño gráfico. El diseño gráfico suele centrarse en la impresión, con el diseño de papelería comercial, carteles, anuncios y logotipos. En cambio, en el diseño web se diseñan sitios web, Newsletter, banners y, por supuesto, logotipos.

Algunos mezclan ambas áreas de negocio, ofreciendo diseño para impresión y web. El cliente final no tiene claro quién puede y quizá no deba hacer qué. Entonces, los diseñadores gráficos, que se sienten más a gusto en la impresión, crean diseños para sitios web, y llevan los logotipos impresos a la web. Por el contrario, es más la excepción que la regla que los diseñadores web desarrollen toda la papelería empresarial.

Debería ser obvio para cualquier persona con "ojo gráfico" o con una profesión de diseño gráfico que un logotipo en un sitio web tiene requisitos diferentes que uno en un membrete o en un edificio de la empresa.

Con la llegada de los teléfonos inteligentes y de Internet móvil, los requisitos de los logotipos y de los signos (son pequeños gráficos que pueden utilizarse como logotipos) en la web han cambiado de nuevo y se han vuelto más específicos, pero también más estrictos. Al final, no es tan complicado. Sin embargo, se necesita cierta experiencia y aplomo para desarrollar un buen logotipo para un sitio web.

3 Pautas para crear un logotipo

Hay tres puntos primordiales que puedes tener en cuenta al diseñar tu logotipo:

  • Formato apaisado: El logotipo aparece en la parte superior izquierda, que es lo que esperan los usuarios. A veces también se permite que aparezca en el centro del sitio web. Pero para ahorrar un espacio valioso y atraer la atención de los usuarios hacia lo esencial, tiene sentido tener en cuenta los hábitos generales de visualización de la gente: con un logotipo en formato apaisado en la parte superior izquierda sitio.
  • Estructuras claras: Es esencial tener en cuenta el tamaño del logotipo en un smartphone o una tableta. Pero muchos ordenadores de sobremesa y portátiles también tienen una resolución muy alta, es decir, mucho espacio, o una diagonal de imagen más bien pequeña. En ambos casos, el logotipo puede parecer bastante pequeño. Sin embargo, debe seguir funcionando bien en tamaños pequeños.
  • Sin reivindicaciones: Muchos sienten la inclinación, a veces irresistible, de colocar una reivindicación bajo el logotipo. Texto en la imagen. No tiene mucho sentido. No sólo es una cuestión de espacio, sino que además es casi imposible de leer en los smartphones. Aparte de que así se excluye texto valioso de la indexación de Google (SEO).

Soy consciente de que estas tres sencillas "reglas" para crear un buen logotipo están abiertas al debate. Porque, por supuesto, puedes encontrar algunos contraejemplos o marcas que más o menos (quieren) tener sus propias reglas. Pero en ese caso se trata de marcas muy especiales y exitosas, y las excepciones también confirman la regla.

Pero, ¿qué hace que los logotipos sean geniales? La mejor manera de averiguarlo es mirar los logotipos y/o los letreros de las grandes empresas de éxito. Los logotipos más ingeniosos que conozco son los de Daimler (la estrella de Mercedes), Apple (con la manzana), VW, BBC o la M de McDonalds. Por supuesto, hay muchos más ejemplos. Y la mayoría de ellos se remontan a una época en la que no existía Internet. Sin embargo, los logotipos evolucionan con el tiempo, al igual que las marcas y las empresas.

diseño de logotipos para weblogos
El diseño de logotipos es más diverso que nunca.

Lo ideal es disponer de logotipos personalizados para los distintos formatos de salida. Los logotipos favoritos que acabamos de mencionar son brillantes ejemplos de ello. Funcionan en todas partes y se adaptan a los respectivos soportes con sus requisitos específicos. Lógicamente, un membrete necesita algo distinto que un letrero de neón en un edificio, y un sitio web tiene requisitos distintos que una tarjeta de visita.

Signet & word mark en la red

Este post no es un taller completo sobre cómo crear un logotipo perfecto. Sin duda, hay algo más que leer una entrada en el blog. Pero debería ayudarle a entender mejor el asunto del logotipo en el sitio web tus - y por ello a encontrar soluciones más exitosas para ello.

Sólo un resumen rápido: ¿Qué es un logotipo? La Wikipedia dice:

"Un logotipo es un signo gráfico que representa un tema concreto. Puede ser una empresa, una organización, un particular o un producto".

Hasta ahora, todo va bien. Un logotipo puede ser una marca denominativa, como Coca Cola, Google o Acer. Puede ser un sello, como en el caso de Playboy, Shell y Mercedes. Sin embargo, la mayoría de los logotipos consisten en una marca denominativa y un sello. En los ejemplos anteriores de sellos, siempre hay una variante con y sin la palabra marca.

Esto también se aplica a McDonalds, por ejemplo, con la distintiva M que todo el mundo conoce. El logotipo de McDonalds está disponible con el nombre y con el reclamo (me encanta), pero la M siempre está ahí. En el sitio web de McDonalds, por las razones mencionadas anteriormente, lo han resuelto de tal manera que sólo encuentras esta M en la parte superior izquierda de la navegación, y ésta se desplaza hacia dentro cuando te desplazas. Sólo la M sigue ahí en algún momento. Me parece inteligente y que ahorra espacio, porque lo más importante está siempre visible: el sello, la "M".

Veamos el logotipo del sitio web de la WWF, por poner un ejemplo del ámbito más políticamente correcto. El famoso oso panda, que también podría sostenerse por sí mismo, está colocado sobre las letras WWF, la abreviatura del Fondo Mundial para la Naturaleza. Creo que el sitio web está bastante logrado (TYPO3, por cierto), pero se abstienen de clavar la navegación principal. Esto se resuelve de forma inteligente. Ocupa un poco de espacio, pero contiene todo lo esencial.

Gracias a la tecnología del Mega Menú, el segundo nivel de la navegación muestra todo lo que hay que ver en el sitio web. Si abres el megamenú pasando el ratón por encima, sólo queda visible el panda. Se trata de un logotipo vertical, pero su ejecución es impecable. Este logotipo también procede de una época en la que no existían los sitios web. Estoy seguro de que la WWF mandaría crear hoy otro logotipo, uno en formato apaisado.

"*"indica que los campos son obligatorios

Me gustaría suscribirme a newsletter para estar informado sobre nuevos artículos del blog, ebooks, funciones y noticias sobre WordPress. Puedo retirar mi consentimiento en cualquier momento. Ten en cuenta nuestra Política de privacidad.
Este campo es de validación y no debe modificarse.

Ejemplos de sitios web con WordPress

Otro sitio web fascinante que nos sirve de ejemplo es VOGUE América. La aplicación me parece coherente y adecuada a la marca. Pero es bastante débil en la navegación fija tras el desplazamiento. Esto se debe a que el gran logotipo del centro desaparece y aparece en Klein en la parte superior izquierda, donde esperamos que esté. Se trata de un reto general con las marcas denominativas que deben ser reducidas en el sitio web. Los bordes se "deshilachan" y se vuelven borrosos.

El mismo fenómeno puede observarse en SPIEGEL Online (SPON). La excusa para ambos es que los logotipos se crearon antes de la era de Internet. Vemos lo mismo que con VOGUE en la revista estadounidense TIME, que funciona con WordPress.

En la NASA abierta tiene un aspecto un poco diferente, también alimentado por WordPress y también con un logotipo. Sin embargo, rodeado de un fino elemento gráfico. Este logotipo -esta vez dentro de una navegación fija- es lo suficientemente grande como para mostrar el elemento de una órbita aún reconocible. Me parece un éxito, aunque aquí también se ve el deshilachado de las letras. Por eso no soy partidario de las marcas denominativas puras, prefiero los sellos con abreviaturas.

BBC AMERICA también es un sitio web de WordPress. Ha hecho un trabajo brillante con el diseño y el logotipo. Sí, soy fan de la BBC. Pero también me parece que el logotipo es ingenioso y memorable, como ejemplo exitoso de diseño de logotipos en formato apaisado. Por cierto, este sitio web también prescinde de la navegación fija tras el desplazamiento: aquí el contenido está en primer plano.

Crear (haber creado) un buen logotipo para la web

Así que ahora puedes ver muy claramente que los logotipos no son brujería y a veces son muy simples. Su genialidad radica en la sencillez y la coherencia para reflejar una marca independiente. Por lo tanto, un buen logotipo es muy fácil de hacer, pero no es fácil de pensar o encontrar.

Diseño gráfico o no: puedes crear un buen logotipo con tu ojo gráficamente entrenado y unas cuantas reglas sencillas. Por supuesto, la forma más fácil sería contratar a alguien en diseño gráfico. Es la forma más segura y la que garantiza la máxima calidad -las excepciones confirman la regla-. Pero también es la opción más cara.

En la red, lo hemos adivinado, hay portales que subcontratan estos servicios en el extranjero. De esta manera puedes comprar un buen diseño gráfico en países con salarios por hora más bajos y de alta calidad. Por ejemplo, de Ucrania, India, Indonesia, Sudamérica, pero también de EEUU, etc. Las desventajas son la situación jurídica en caso de litigio. Las desventajas son la situación jurídica en caso de litigio, la comunicación y, por tanto, a veces también la coordinación.

Como yo mismo tengo un ojo gráfico y quiero hacer todo lo posible por mí mismo, tomé un camino diferente con mi logotipo en PUBLICIDAD EN LA RED. Busqué y encontré un sello en Envato. Pensé que conseguiría construir un logotipo para ello. Porque el sello que me gustaba tenía un contenido equivocado. Un logotipo tiene que ajustarse absolutamente al tema y al carácter de tu .

Así que encontré un signo @ que quería utilizar, pero con una "P" en el círculo @. Al principio intenté hacerlo yo mismo, pero tengo muy poca experiencia con vectores en Illustrator. Así que, sin más dilación, pregunté al desarrollador del cartel a través de Envato si podía hacérmelo, y a qué precio. Era posible y el coste era absolutamente razonable. Ahora tengo esta "P" con la palabra marca en formato apaisado:

Ejemplo de logotipo en línea
El logotipo de PUBLIZIEREN IM NETZ

Diseño de logotipos: Herramientas de investigación

Así es exactamente como procedo con mis clientes. Si quieren un diseño de logotipo, les sugiero que primero elijan un logotipo que se ajuste a su idea de negocio y a su nombre. No sólo utilizo Envato o Envato Elements. También busco logotipos en Google, o en Iconfinder, iStockPhoto y otros proveedores de pequeños gráficos. Luego se los presento, elegimos juntos uno o dos y construyo un logotipo en formato apaisado.

Presta atención a los derechos de autor, tu el logotipo no debe ser demasiado parecido a uno existente. Incluso si compras signets, debes comprobar la licencia (o hacerla comprobar): ¿La licencia es válida para tu propósito profesional sin restricciones temporales o geográficas? ¿Y también para utilizarlo como logotipo?

Los buenos logotipos son sencillos y expresan al máximo la idea de negocio. Funcionan en la web porque están en formato apaisado. Se pueden mostrar en blanco y negro. Y pueden aparecer en un membrete o en una tarjeta de visita, ligeramente modificados y adaptados, quizá con un reclamo debajo.

Resumen: Diseño de logotipos para sitios web

Crear un buen logotipo es relativamente fácil. Necesitas un concepto claro y una idea excelente. Puedes inspirarte en otras marcas y sitios web de éxito. Hablar con otras personas también puede ayudarte a tener una idea sencilla y brillante. Pero seamos sinceros: no tiene por qué ser brillante, con que sea adecuada puede bastar, con que sea buena sería más que suficiente. Puedes buscar logotipos o signos en plataformas gráficas.

Por supuesto, los signos más o menos abstractos deben tener algo que ver con la profesión que representan. Pero aquí también puede haber combinaciones divertidas. O derivaciones coherentes, por ejemplo cuando pensamos en la famosa manzana de Apple. A quién se le hubiera ocurrido tomar una manzana con un bocado perdido. Pero este pequeño y divertido "perturbador" es lo que hace que este logotipo sea tan ingenioso.

Espero que ahora tengas algunas pistas para crear un próximo gran logotipo para la World Wide Web. Te deseo buena suerte y que te diviertas.

tu Preguntas sobre el diseño del logotipo

¿Tienes preguntas sobre el diseño de logotipos para sitios web? No dudes en utilizar la función de comentarios. ¿Quieres estar informado de los nuevos artículos sobre diseño web y WordPress? Entonces síguenos en Twitter, Facebook o a través de nuestro Newsletter.

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Escribe un comentario

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