Lo que hay que tener en cuenta a la hora de diseñar logotipos para sitios web

Mark Max Henckel Última actualización 21.10.2020
9 min.
Diseño de logotipos para la web
Última actualización 21.10.2020

Los logotipos para los sitios web siguen reglas completamente diferentes a las de la comunicación impresa o de otro tipo. Los requisitos de los logotipos y los sellos han aumentado. Le mostramos las pautas y herramientas para crear los logotipos de la web tu .

Hay una frontera muy permeable entre el diseño web y el diseño gráfico. Los diseñadores gráficos suelen centrarse en la impresión, diseñando papelería comercial, carteles, anuncios y logotipos. Los diseñadores web, por su parte, diseñan sitios web, newsletters, banners y, por supuesto, logotipos. Algunos mezclan ambas áreas de negocio, ofrecen diseño para la impresión Y la web. Por lo que para el cliente final no es reconocible quién puede y quizás deba hacer qué. Luego, los diseñadores gráficos, que se sienten más cómodos con la impresión, crean diseños para sitios web, y ponen los logotipos de la impresión en la web. Por otro lado, es más bien la excepción que los diseñadores web desarrollen diseños empresariales completos.

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 papelería o en un edificio de la empresa. Con la llegada de los teléfonos inteligentes y de Internet móvil, los requisitos para los logotipos y 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.

Tres pautas para crear un logotipo web

Hay tres puntos generales que se pueden tener en cuenta a la hora de diseñar un logotipo:

  1. Formato apaisado: El logotipo aparece en la parte superior izquierda, así es como lo esperan los usuarios. A veces también se permite en el centro de la página web. Pero para ahorrar un espacio valioso y atraer la atención de los usuarios a 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 del lado izquierdo sitio.
  2. Estructuras claras: Es muy importante tener en cuenta el tamaño del logotipo en un smartphone o una tableta. Pero también muchos ordenadores de sobremesa y portátiles tienen una resolución muy alta, por lo que ocupan mucho espacio, o una diagonal de imagen más bien pequeña. En ambos casos, el logotipo puede parecer bastante pequeño. Sin embargo, todavía tiene que funcionar bien en tamaños pequeños.
  3. No hay reclamaciones: Muchos clientes, pero también los diseñadores, sienten la inclinación, a veces irresistible, de colocar un reclamo bajo el logotipo. Texto en la imagen. Esto tiene poco sentido. No sólo es una cuestión de espacio, sino que además es casi imposible de leer en los smartphones. Por no hablar de que esto excluye el texto valioso de la indexación de Google (SEO).

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

Pero, ¿qué hace que los logotipos tengan éxito? La mejor manera de averiguarlo es fijarse en los logotipos y/o rótulos de las grandes empresas de éxito. Los logotipos más brillantes 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.

weblogos

Lo ideal es que haya logotipos adaptados a los distintos formatos de salida. Los logotipos favoritos que acabamos de mencionar son también ejemplos brillantes de esto. Funcionan en todas partes y se adaptan a los respectivos medios con sus requisitos específicos. Lógico: un membrete necesita algo diferente a un letrero de neón en una casa, y un sitio web tiene condiciones diferentes a las de 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 individuo 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 PLAYBOY, SHELL y MERCEDES. Pero la mayoría de las veces, 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, por ejemplo, a McDonald's con la M distintiva que todo el mundo conoce. El logo 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 encontrarás esta M en la parte superior izquierda de la navegación, y ésta se desplaza a medida que 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 de la página web del WWF, por poner un ejemplo del ámbito más políticamente correcto. El famoso oso panda, que también podría sostenerse por sí solo, está colocado sobre las letras WWF, la abreviatura del Fondo Mundial para la Naturaleza. Creo que la web está bastante bien hecha (TYPO3, por cierto), pero se abstienen de clavar la navegación principal. Esto se resuelve de forma inteligente. Ocupa algo de espacio, pero contiene todo lo esencial.

A través de la tecnología del mega menú, se muestra todo lo que hay que ver en el sitio en el segundo nivel de la navegación. Si se llama al megamenú pasando el ratón por encima, sólo queda visible el panda. Es un logotipo vertical, pero su implementación es muy buena. 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 un logotipo diferente hoy en día, uno en formato apaisado.

Ejemplos con el logotipo en formato apaisado en el sitio web

RAIDBOXES es, por supuesto, un ejemplo. Una marca de palabra, en formato apaisado, por supuesto; de lo contrario, no se podría leer. Yo llamo a este logo un éxito. Porque tiene un alto valor de reconocimiento, que es la esencia de un buen logotipo. Además, también funciona en pequeño en los dispositivos móviles. Esto es cierto para muchos sitios de la Internet moderna, como Google, Facebook, Amazon, Microsoft, YouTube y muchos más.

RAIDBOXES logo
El logotipo de RAIDBOXES

Podemos decir lo mismo de sitio WordPress .org digamos. Existen especificaciones para la presentación del logotipo WordPress que están a la vista de todos: una guía de estilo. El logotipo tiene la W como sello y la palabra marca en formato apaisado, pero también en vertical. En el sitio web se omite, por supuesto, el logotipo vertical. Por buenas razones, el logotipo con el sello no sólo se muestra apaisado, sino también relativamente grande por encima de la navegación. También en este caso el menú no es fijo, lo que no perjudica la usabilidad del sitio web.

Ejemplos de páginas con WordPress

Otro sitio web fascinante que nos sirve de ejemplo es VOGUE América. Creo que la aplicación es coherente y apropiada para la marca. Pero bastante débil en la navegación fija después del desplazamiento. Porque 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 reducirse en el sitio web. Los bordes se "deshilachan" y se vuelven borrosos. El mismo fenómeno se observa en SPIEGEL Online (SPON). Para ambos, la excusa puede ser que los logotipos se crearon antes de la era de Internet. Lo mismo que con VOGUE se puede ver también con la revista americana TIME, que aparece en 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 es también un WordPress -sitio. Ha hecho un trabajo brillante con el diseño y el logotipo. Sí, soy fan de la BBC. Pero además, creo que el logotipo es brillante y memorable, como ejemplo de éxito de los 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: puede crear un buen logotipo para usted y para los clientes de tu con su ojo gráficamente entrenado y unas cuantas reglas sencillas. Por supuesto: lo más fácil sería contratar a un diseñador gráfico. Esta es la forma más segura y de mayor calidad garantizada - las excepciones confirman la regla. Pero también es la opción más cara. En la web, lo hemos adivinado, hay portales que subcontratan estos servicios en el extranjero. Así que se puede comprar un buen diseño gráfico en países con un salario por hora más bajo y de alta calidad. Por ejemplo, de Ucrania, India, Indonesia, Sudamérica, pero también de Estados Unidos, etc. Las desventajas son la situación jurídica en caso de litigio, la comunicación y, por tanto, a veces la coordinación.

Como yo mismo tengo un ojo gráfico y quiero hacer todo lo posible por mí mismo, adopté un enfoque diferente con mi logotipo en PUBLISHING ON THE NET. Busqué y encontré un sello en Envato. Pensé que lograría construir un logotipo para ella. Porque el sello que me gustaba tenía el contenido equivocado. Un logotipo debe ajustarse absolutamente al tema y al carácter tu de la empresa. Así que encontré un signo @ que quería usar, pero con una "P" en el círculo @. Al principio lo intenté yo mismo, pero no tengo suficiente experiencia con los vectores en Illustrator. Así que, sin más preámbulos, le 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 marca de la palabra en formato horizontal:

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

Herramientas de investigación

Este es exactamente el mismo enfoque que adopto para mis clientes. Si se desea el diseño del logotipo, sugiero que primero se elija un signo que coincida con la idea y el nombre del negocio. No sólo uso Envato o Envato Elements para hacer esto. También busco logotipos en Google, o en Iconfinder, iStockPhoto y otros proveedores de pequeños gráficos. Luego se las muestro al cliente, elijo una o dos junto con él y construyo un logotipo en formato apaisado.

Importante: Preste atención a los derechos de autor, el logotipo de tu no debe ser demasiado parecido a uno ya existente. Incluso si compras sellos, tienes que comprobar la licencia: ¿es válida para tu propósito profesional sin restricciones temporales y espaciales? ¿Y también para el uso 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 una tarjeta de visita, ligeramente modificados y adaptados, quizá con un reclamo debajo.

Resumen

Crear un buen logotipo es relativamente fácil. Se necesita un concepto claro y una muy buena idea. Puede inspirarse en otras marcas y sitios web de éxito. Hablar con tus colegas y amigos también puede ayudarte a dar con esa idea sencilla y brillante. Pero seamos sinceros: no tiene por qué ser brillante, lo adecuado puede ser suficiente, lo bueno sería más que suficiente. Puede buscar logotipos o rótulos en plataformas gráficas.

Por supuesto, los personajes más o menos abstractos deben tener algo que ver con la profesión que representan. Por lo que también puede haber combinaciones divertidas aquí. O derivaciones coherentes, por ejemplo cuando pensamos en la famosa manzana de APPLE. Quién iba a pensar en tomar una manzana con un bocado perdido. Pero este pequeño y divertido "perturbador" 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 la mejor de las suertes y que te diviertas con ello.

Imágenes: Jeff Sheldon, Rohan Vijay

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

Mark Max Henckel - Diseñador web de Hamburgo. Diseñador de medios de comunicación de formación (impresión), trabaja como diseñador de páginas web desde el año 2000. Primero en mobile.de, desde 2003 autónomo. De 2005 blogger sobre diferentes temas en diferentes blogs propios. Como freelance desde 2007 y 2008 en SPIEGEL ONLINE, participó en el lanzamiento de einestages.de en la interfaz entre programación y edición. Más tarde, en la empresa de marketing SPIEGEL Quality Channel (Spiegel QC/Spiegel Media). Trabajador autónomo para libri.de y varias agencias gráficas e informáticas. Desde 2008 especializada en WordPress .

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

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