Diseño de logotipos para la web

Qué debe 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 sellos han aumentado. Le mostramos las pautas y herramientas para crear los logotipos de la web tu.

Diseño de logotipos para impresión y web

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, crean sitios web, Newsletter, banners y, por supuesto, logotipos.

Algunos mezclan ambas áreas de negocio, ofrecen diseño para la impresión y la web. El cliente final no tiene claro quién puede hacer qué y quizás quién no debe 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 el contrario, es más bien la excepción que los diseñadores web desarrollen toda la papelería de la empresa.

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 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.

3 Directrices para crear un logotipo

Hay tres puntos fundamentales que puede tener en cuenta a la hora de diseñar su logotipo:

  • Formato apaisado: El logotipo aparece en la parte superior izquierda, es lo que 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.
  • Estructuras claras: Es fundamental 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.
  • 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. El texto en la imagen, en otras palabras. Eso tiene poco sentido. No es sólo una cuestión de espacio, sino que además es difícilmente legible en los smartphones. Por no hablar de que excluye el 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, 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 sean geniales? La mejor manera de averiguarlo es observar los logotipos y/o rótulos 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 variado que nunca.

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 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 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 encuentras esta M en la parte superior izquierda de la navegación - y la navegación 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 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. La página web me parece bastante acertada (TYPO3, por cierto), pero no clavan la navegación principal. Esto se resuelve de forma inteligente. Ocupa un poco de espacio, pero contiene todo lo esencial.

Con la tecnología Mega Menu, el segundo nivel de la navegación muestra todo lo que hay que ver en el sitio web. Si se abre el megamenú pasando el ratón por encima, sólo queda visible el panda. Se trata de un logotipo vertical, pero su aplicació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

Consentimiento*
Este campo es de validación y no debe ser modificado.

Ejemplos con logotipo en formato apaisado

Raidboxes es un interesante ejemplo de diseño de logotipos. Una marca de palabra, en formato apaisado por supuesto - de lo contrario no se puede leer. Yo llamo a este logo exitoso. Porque tiene un alto valor de reconocimiento, que es la esencia de un buen logotipo. Además, también funciona en formato reducido en los dispositivos móviles. Esto se aplica a muchos sitios de la Internet moderna, como Google, Facebook, Amazon, Microsoft, YouTube y muchos más.

Raidboxes diseño de logotipos
El logotipo de Raidboxes: Diseño del logotipo

Lo mismo podemos decir del sitioWordPress.org digamos. Existen especificaciones para la presentación del logotipo de 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 de canto. 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.

Nuestro relanzamiento Raidboxes

Nuevo logotipo, nuevo sitio web, nuevos colores, pero el mismo nombre. ¡Celebramos nuestro relanzamiento en Raidboxes ! Junto con nuestra agencia asociada 360Vier, hemos replanteado nuestra identidad corporativa y hemos dado una nueva capa de pintura a nuestro sitio web.

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 bastante débil en la navegación fija después del 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 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. 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 un 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: con su ojo gráficamente entrenado y unas cuantas reglas sencillas, puede crear un buen logotipo para usted y los clientes de tu. 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 red, lo hemos adivinado, hay portales que subcontratan estos servicios en el extranjero. De este modo, se puede 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 Estados Unidos, 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 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 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 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

Diseño de logotipos: herramientas de investigación

Así es exactamente como procedo con mis clientes. Si se desea el diseño de un logotipo, sugiero que primero se elija un signo que se ajuste a la idea de negocio y al nombre. No sólo uso 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 muestro al cliente, elijo uno o dos junto con él y construyo un logotipo en formato apaisado.

Preste atención a la ley de derechos de autor, tulogotipo no debe ser demasiado parecido a uno existente. Incluso si compras los sellos, tienes que comprobar la licencia (o hacerla comprobar): ¿es válida para tu propósito profesional sin restricciones temporales y espaciales? ¿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 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. Necesita un concepto claro y una idea excelente. 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 que ser brillante, lo adecuado puede ser suficiente, lo bueno ya sería más que suficiente. Puede buscar logotipos o rótulos 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. Quién iba a pensar en 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. Le deseo buena suerte y que se divierta.

tuPreguntas sobre el diseño del logotipo

¿Tiene preguntas sobre el diseño de logotipos para sitios web? No dude en utilizar la función de comentarios. ¿Quieres estar informado de los nuevos artículos sobre diseño web y WordPress? Entonces síganos 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á.