Diseño de Logos para Sitios Web

Para que el diseño de un logo para sitio web sea visualmente efectivo, debe exhibir ciertas características de diseño fundamentales relacionadas:

– Forma
– Presencia
– Peso
– Contraste

Éste artículo describe cómo emplear estas simples características para crear un logo fuerte usando ejemplos del mundo real.

Para ayuda profesional, puedo recomendar LogoMaid para un diseño de logos accesible y de alta calidad

Característica 1: Forma

Un logo (o ícono) distintivo tiene una forma reconocible, así que aún es reconocible desde el esquema.
El cerebro adora usar la forma para identificar objetos, porque puede hacerlo muy rápidamente. (Nota: ésta es también la razón principal por la que el espacio en blanco es importante).

¿Qué es lo que le da distinción a un logo? El esquema debe ser simple, pero no demasiado, y claro.
Además, los elementos con significado deben estar diferenciados claramente, con el uso de espacios en blanco donde se requieran.

Haga la prueba de estrabismo en los siguientes logos…

Ejemplos de buena forma

No importa cómo trate el logo de Apple, su fuerte esquema de forma es inconfundible.

La forma original de Lotus funciona muy bien, enmarcado en un círculo de color contrastante. Las demás formas con significado (la palabra y el símbolo) calzan muy bien dentro de la forma, con suficientes espacios en blanco para mantener agudos a los elementos.

el logo de Nike (el símbolo y el texto de ‘Nike’, o el ‘Nike’ o sólo el símbolo) son figuras tan reconocibles, que pueden ser desplegadas en casi cualquier combinación de colores.

Ejemplos de formas pobres

A pequeña escala, este logo falla en varios sentidos. Uno de los problemas es que la forma está hecha de una combinación de elementos finos y gruesos. En el test de estrabismo, los elementos más finos son los primeros en desaparecer, así que la forma restante tiene que ser firme y clara. Esta forma no es lo suficiente firme, debido a: una falta de integridad en una forma sólida; espacios en blanco insuficientes entre los elementos; proyección de sombra que agrega ‘suciedad’ visual.

Éste logo tiene también un peso inconsistente, empleando juntas secciones gruesas y muy finas. Ignorando éstas, la forma central restante no queda bien descrita. La imagen está demasiado abigarrada, formada por varios planos adyacentes que no presentan un contraste suficiente como para tener peso.

Característica 2: Presencia

Su logo tiene una buena presencia si llena lo suficiente del espacio disponible con formas que tengan significado (p.ej. palabras, símbolos reconocibles). Esto lo hace más firme y claro, y por lo tanto más reconocible. Cuanto más espacio llene con elementos que no ayuden al reconocimiento o agreguen significado, menos presencia tendrá su logo.

Ejemplos de buena presencia

Vea cuánto de los rectángulos que ocupan son llenados por estos 2 logos. El logo de City Hall records es incluso más grande que sus bordes.

Ejemplo de presencia pobre

Las palabras ocupan muy poco de este logo, sólo alrededor de un 13% del área. La forma elíptica es muy común, e irreconocible por sí sola. Note cómo la fuente usada es una negrita demasiado gruesa como para que sea clara de leer. La única fortaleza de este logo es una coloración firme.

Los elementos clave "FTL" son demasiado débiles para atraer la atención. Las letras FTL carecen de espacios en blanco suficientes para diferenciarlas y sugerir que son significativas. Las formas más fuertes son la línea en espiral y el óvalo oscuro, pero ninguno de los dos tienen significado.

Característica 3: Peso

Un buen peso significa que un logo (o ícono o logotipo) no debe apoyarse en otras características para ser reconocible. Si un logo es firme, puede ser efectivo en varios ambientes. Los mejores logos tienen un peso de presencia que es reconocible al ser visto junto con otras imágenes fuertes. (ver Picadilly Circus)

El uso del color es vital para tener un logo o ícono claro y firme. Demasiados colores, gradientes, efectos 3D y patrones complejos pueden ser perjudiciales para el peso de su logo y para el diseño de su pagina de internet

Consejo: Trate de usar tan pocos colores diferentes como sea posible.

Recuerde, cuantos más colores tenga un logo, más difícil será reproducirlo en diferentes formatos.

Consejo: Evite efectos 3-D gratuitos – su logo debe funcionar sin ellos.

Ejemplos de buen peso

En el logo de IBM, las líneas horizontales son una característica secundaria con respecto a la forma principal. El logo es aún reconocible sin ellas.

Un peso, color y forma fuertes hacen reconocible al logo de Dell.

Ejemplos de peso pobre

El texto es demasiado claro, así como la otra pista visual (la forma de paleta).
El efecto de realce 3D en el texto reduce además el contraste y la legibilidad. ¿Qué tiene que ver una granja con una paleta de pintor?

"Te invitamos a visitar OK hosting.com, web host profesional y economico en mexico, registro de dominios .com y los novedosos dominios MX. visita okhosting y lleva tu negocio al poder de la internet "

Característica 4: Contraste

El contraste ayuda al reconocimiento de formas haciendo a los bordes entre los elementos más claros. Los buenos logos (e íconos) tienen un montón de contraste en los bordes de los elementos visuales con significado.

El test de estrabismo es excelente para chequear el contraste. Considere también que los usuarios pueden ser daltónicos.
Otro test de ayuda es probar desaturando su logo en una aplicación gráfica, y chequearlo mientras todavía es claro y reconocible.

Ejemplos de buen contraste

(Ver también todos los buenos logos de arriba).
El logo de RockShox usa juntos contrastes color sobre blanco e inverso (claro sobre oscuro), para lograr un buen efecto. Una gran presencia y unos colores fuertes lo hacen impactante y altamente reconocible.

El logo de McDonald’s tiene menos contraste tonal, pero el contraste percibido entre colores fuertes y lisos hace claras a las formas. Note el espacio en blanco alrededor del texto.

Ejemplos de contraste pobre

La forma del logo detrás del texto es demasiado clara para verla bien. Además, el importante texto "venture capital" está demasiado débil en gris claro. En el test de estrabismo, usted se queda rápidamente sólo con la fuerte palabra "Mobius", que puede no tener significado.

El texto tiene demasiado poco contraste en los bordes, al ser menos brillante que el resaltado del efecto 3d.

El texto es demasiado fino para lograr demasiado poco contraste con respecto al fondo.

Normal
0

21

false
false
false

ES
X-NONE
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabla normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Calibri”,”sans-serif”;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:”Times New Roman”;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}

Normal
0

21

false
false
false

ES
X-NONE
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabla normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Calibri”,”sans-serif”;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:”Times New Roman”;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}

Normal
0

21

false
false
false

ES
X-NONE
X-NONE

<w:lsdexception locked="false" priority="69" semihidden="fa