El consorcio alemán Beiersdorf comienzó el año 2013 con la presentación de un nuevo envase para sus productos Nivea. Es el mayor cambio en el aspecto de sus productos en sus 102 años de historia y este cambio de look comenzó a efectuarse en sus cremas faciales, corporales, productos para el cabello así como en los desodorantes.
Son muchas las formas de dar personalidad a nuestro sitio, pero sin duda una de las mas vistosas, a pesar de su tamaño, un cuadrado desde 16×16, 32×32, 48×48, 64×64 hasta 128×128 píxeles y que parece ocultar una programación de ligas mayores, es la del «favicon«.
Puede parecer un pequeño detalle pero resulta ser más importante de lo que muchos creen. Un favicon, o «favorite icon», es ese pequeño ícono o imagen que originalmente se utilizaba junto al nombre del sitio web en caso de que el usuario lo agregará a sus favoritos. Más adelante, otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestaña del sitio web.
Para crearlo se pueden utilizar muchos programas de diseño gráfico, para este post emplearé Photoshop, y Junior Icon Editor. Pero veamos paso a paso como se hace:
Paso 1
Selecciona la imagen que quieras utilizar como favicon. En mi caso uso mi propia foto. La abro desde Photoshop y usando la herramienta Crop la «corto» en la medida 1×1 que mencioné antes. En este caso 112mm x 112mm con una calidad de 72dpi:
Paso 2
Después de cortar la imagen, se guarda con la opción de «Guardar para web y dispositivos». En la pantalla aparecen las opciones de calidad y formato para la imagen, seleccionamos PNG-8 con las opciones de ajuste preestablecido en el panel de la derecha:
Paso 3
Una vez que hemos guardado la imagen, emplearemos el programa gratuito Junior Icon Editor para generar nuestro favicon. Al ejecutar el programa salen estas dos pantallas, solo hay que hacer click en los botones encerrados en el círculo verde:
Primeras pantallas al abrir Junior Icon Editor
Luego se abre esta pantalla con las opciones de configuración inicial para crear un nuevo favicon, solo la emplearemos si no tenemos de antemano una imagen escogida, si no, simplemente cerramos esta pantalla y pasamos al siguiente paso:
Junior Icon Editor – Configuración inicial
Lo siguiente será abrir la imagen que guardamos con Photoshop en formato PNG-8, por tanto desde el menú «File», abrimos clicamos a «Abrir» y buscamos nuestra imagen, la seleccionamos y le damos al «Abrir»:
primer paso para convertir nuestra imagen en favicon
Al abrir la imagen nos aparece esta ventanita en la que seleccionaremos el tamaño que queremos para nuestro favicon:
Selección de las características de nuestro favicon
Al darle al «ok» automáticamente el programa transforma la imagen en el siguiente patrón de colores:
Patrón de colores
En este punto, si se quiere se pueden hacer retoques con las herramientas del panel de la izquierda, si esta todo ok se pasaría a guardar el favicon:
Guardar en formato .ico
Listo, nuestro favicon esta a punto para que lo usemos:
Favicon con la extensión .ico
Esta es una forma simple y económica de crear un favicon, pero si no quieres descargarte el software, también se pueden utilizar varios servicios online que nos facilitan la tarea, como genfavicon.com, favicononline.es u otros que aparecen con la búsqueda en Google. Solo hay que seguir los pasos que nos indiquen y ya tendremos el favicon con la extensión «.ico».
En cuanto al diseño, debemos tomar en cuenta que, en un espacio muy reducido, deberemos colocar una imagen que nos represente, por lo que sería conveniente emplear o bien el isotipo de nuestra marca como hace Mercedes Benz, un detalle ampliado del logotipo, o una imagen reconocible como es el caso de este blog. En el caso de una marca que tenga alguna mascota que la identifique sería conveniente hacer uso de ella. Tal es el caso de Vía Michelin.
Una vez que tenemos creado nuestro ícono, lo aplicaremos a nuestro sitio web de la siguiente manera: añadiremos el siguiente link en el archivo index.html que es el que por defecto se abre al entrar en una página web. Colocaremos el código entre las etiquetas de la cabecera:
Si hemos creado nuestra web sin ningún gestor o plataforma de contenidos simplemente guardamos el archivo y lo subimos junto con el favicon.ico al mismo folder en el sitio donde se alojan los archivos de nuestra página web.
En Blogger simplemente se accede a la opción «Diseño» del panel izquierdo y en la parte superior izquierda se encuentra un gadget que nos permite cargar un favicon personalizado cuyo tamaño debe ser menor que 100 KB.
En WordPress depende del Theme, Plantilla o Tema que tengamos instalado, generalmente nos dan la opción para cargar nuestro favicon, si no es así, en principio deberemos subir nuestro favicon.ico al directorio raíz de nuestra web, luego accederemos a nuestro panel de control de WordPress o Dashboard y seleccionaremos la opción de «Appearance» en la que accedemos al botón de «Editor» y buscamos en la columna de la derecha el archivo header.php y copiamos el mismo código de líneas arriba antes de la etiqueta
Con eso debería funcionar de maravilla en todos los casos…
El enfoque de esta campaña nos plantea que no solo productos y servicios son susceptibles a ser objeto de una campaña. Un país entero puede lanzar una campaña de marketing tan interesante como la que aquí les traigo, para sacar de ella todos los elementos necesarios para crear la imagen institucional, que en este caso sería «nacional», la creación de un isologo muy significativo y su posterior aplicación a todos los instrumentos empleados en la campaña internacional:
Hablemos ahora sobre los colores, parte fundamental del diseño. En principio, diremos que el color es una parte del espectro lumínico, es una energía vibratoria que afecta de diferente forma al ser humano; produciendo en él diferentes sensaciones de las que normalmente no es consciente.
Prisma – Goethe
Arcoiris
En el mundo de la publicidad y el marketing se utilizan los colores para asociarlos coherentemente al tipo de producto que quieren hacer llegar. Y la cosa, como no podría ser de otra forma, funciona. Desde hace años se han hecho todo tipo de pruebas para analizar las sensaciones que sugieren los colores y hay bastante bibliografía al respecto.
Veamos a continuación las propiedades de los colores básicos generalmente aceptadas. Puede haber discrepancias según autores, pero en lo fundamental, prácticamente todos están de acuerdo.
Propiedad de los colores:
Blanco:
El blanco se asocia a la luz, la bondad, la inocencia, la pureza y la virginidad. Se le considera el color de la perfección.
El blanco significa seguridad, pureza y limpieza. A diferencia del negro, el blanco por lo general tiene una connotación positiva. Puede representar un inicio afortunado.
En heráldica, el blanco representa fe y pureza.
En publicidad, al blanco se le asocia con la frescura y la limpieza porque es el color de la nieve. En la promoción de productos de alta tecnología, el blanco puede utilizarse para comunicar simplicidad.
Es un color apropiado para organizaciones caritativas. Por asociación indirecta, a los ángeles se les suele representar como imágenes vestidas con ropas blancas.
El blanco se asocia con hospitales, médicos y esterilidad. Puede usarse por tanto para anunciar productos médicos o que estén directamente relacionados con la salud.
A menudo se asocia con la pérdida de peso, productos bajos en calorías y productos lácteos.
Amarillo:
El amarillo simboliza la luz del sol. Representa la alegría, la felicidad, la inteligencia y la energía.
El amarillo sugiere el efecto de entrar en calor, estimula la actividad mental y genera energía muscular. Con frecuencia se lo asocia a la comida.
El amarillo puro y brillante es un reclamo de atención, por lo que es frecuente que los taxis sean de este color en algunas ciudades. En exceso, puede tener un efecto perturbador, inquietante. Es conocido que los bebés lloran más en habitaciones amarillas.
Cuando se sitúan varios colores en contraposición al negro, el amarillo es en el que primero fija la atención. Por eso, la combinación amarillo y negro es usada para resaltar avisos o reclamos de atención.
En heráldica el amarillo representa honor y lealtad.
En los últimos tiempos al amarillo también se asocia con la cobardía.
Es recomendable utilizar amarillo para provocar sensaciones agradables, alegres. Es muy adecuado para promocionar productos para el ocio.
Por su eficacia para atraer la atención, es muy útil para destacar los aspectos más importantes de una página web.
Los hombres normalmente encuentran el amarillo como muy desenfadado, por lo que no es muy recomendable para promocionar productos caros, prestigiosos o específicos para hombres. Ningún hombre de negocios compraría un reloj caro con correa amarilla.
El amarillo es un color espontáneo, variable, por lo que no es adecuado para sugerir seguridad o estabilidad.
El amarillo claro tiende a diluirse en el blanco, por lo que suele ser conveniente utilizar algún borde o motivo oscuro para resaltarlo. Sin embargo, no es recomendable utilizar una sombra porque lo hacen poco atrayente, pierden la alegría y lo convierten en sórdido.
El amarillo pálido es lúgubre y representa precaución, deterioro, enfermedad, envidia o celos.
El amarillo claro representa inteligencia, originalidad y alegría.
Naranja:
El naranja combina la energía del rojo con la felicidad del amarillo. Se le asocia a la alegría, el sol brillante y el trópico.
Representa entusiasmo, felicidad, atracción, creatividad, determinación, éxito, ánimo y estímulo.
Es un color muy caliente, por lo que produce sensación de calor. Sin embargo, el naranja no es un color agresivo como el rojo.
La visión del color naranja produce la sensación de mayor aporte de oxígeno al cerebro, produciendo un efecto vigorizante y de estimulación de la actividad mental.
Es un color que encaja muy bien con la gente joven, por lo que es muy recomendable para comunicar con ellos.
Color cítrico, se asocia a la alimentación sana y al estímulo del apetito. Es muy adecuado para promocionar productos alimenticios y juguetes
Es el color de la caída de la hoja y de la cosecha.
En heráldica el naranja representa la fortaleza y la resistencia.
El color naranja tiene una visibilidad muy alta, por lo que es muy útil para captar atención y subrayar los aspectos más destacables de una página web.
El naranja combina la energía del rojo con la felicidad del amarillo. Se le asocia a la alegría, el sol brillante y el trópico.
El naranja oscuro puede sugerir engaño y desconfianza.
El naranja rojizo evoca deseo, pasión sexual , placer, dominio, deseo de acción y agresividad
El dorado produce sensación de prestigio. Significa sabiduría, claridad de ideas, y riqueza. Con frecuencia el dorado representa alta calidad.
Rojo:
El color rojo es el fuego y la sangre, por lo que se le asocia al peligro, la guerra, la energía, la fortaleza, la determinación, así como a la pasión, el deseo y el amor.
Es un color muy intenso a nivel emocional. Mejora el metabolismo humano, aumenta el ritmo respiratorio y eleva la presión sanguínea.
Tiene una visibilidad muy alta, por lo que se suele utilizar en avisos importantes, prohibiciones y llamadas de precaución.
Trae el texto o las imágenes con este color a primer plano resaltándolas sobre el resto de colores. Es muy recomendable para conminar a las personas a tomar decisiones rápidas durante su estancia en un sitio web.
En publicidad se utiliza el rojo para provocar sentimientos eróticos. Símbolos como labios o uñas rojos, zapatos, vestidos, etc., son arquetipos en la comunicación visual sugerente.
El rojo es el color para indicar peligro por antonomasia.
Como está muy relacionado con la energía, es muy adecuado para anunciar coches motos, bebidas energéticas, juegos, deportes y actividades de riesgo.
En heráldica el rojo simboliza valor y coraje. Es un color muy utilizado en las banderas de muchos países
El rojo claro simboliza alegría, sensualidad, pasión, amor y sensibilidad.
El rosa evoca romance, amor y amistad. Representa cualidades femeninas y pasividad.
El rojo oscuro evoca energía, vigor, furia, fuerza de voluntad, cólera, ira, malicia, valor, capacidad de liderazgo. En otro sentido, también representa añoranza.
El marrón evoca estabilidad y representa cualidades masculinas.
El marrón rojizo se asocia a la caída de la hoja y a la cosecha.
Púrpura:
El púrpura aporta la estabilidad del azul y la energía del rojo.
Se asocia a la realeza y simboliza poder, nobleza, lujo y ambición. Sugiere riqueza y extravagancia.
El color púrpura también está asociado con la sabiduría, la creatividad, la independencia, la dignidad.
Hay encuestas que indican que es el color preferido del 75% de los niños antes de la adolescencia. El púrpura representa la magia y el misterio.
Debido a que es un color muy poco frecuente en la naturaleza, hay quien opina que es un color artificial.
El púrpura brillante es un color ideal para diseños dirigidos a la mujer. También es muy adecuado para promocionar artículos dirigidos a los niños.
El púrpura claro produce sentimientos nostálgicos y románticos.
El púrpura oscuro evoca melancolía y tristeza. Puede producir sensación de frustración.
Azul:
El azul es el color del cielo y del mar, por lo que se suele asociar con la estabilidad y la profundidad.
Representa la lealtad, la confianza, la sabiduría, la inteligencia, la fe, la verdad y el cielo eterno.
Se le considera un color beneficioso tanto para el cuerpo como para la mente. Retarda el metabolismo y produce un efecto relajante. Es un color fuertemente ligado a la tranquilidad y la calma.
En heráldica el azul simboliza la sinceridad y la piedad.
Es muy adecuado para presentar productos relacionados con la limpieza (personal, hogar o industrial), y todo aquello relacionado directamente con: El cielo (líneas aéreas, aeropuertos), El aire (acondicionadores paracaidismo), El mar (cruceros, vacaciones y deportes marítimos), El agua (agua mineral, parques acuáticos, balnearios)
Es adecuado para promocionar productos de alta tecnología o de alta precisión.
Al contrario de los colores emocionalmente calientes como rojo, naranja y amarillo, el azul es un color frío ligado a la inteligencia y la consciencia.
El azul es un color típicamente masculino, muy bien aceptado por los hombres, por lo que en general será un buen color para asociar a productos para estos.
Sin embargo se debe evitar para productos alimenticios y relacionados con la cocina en general, porque es un supresor del apetito.
Cuando se usa junto a colores cálidos (amarillo, naranja), la mezcla suele ser llamativa. Puede ser recomendable para producir impacto, alteración.
El azul claro se asocia a la salud, la curación, el entendimiento, la suavidad y la tranquilidad.
El azul oscuro representa el conocimiento, la integridad, la seriedad y el poder.
Verde:
El verde es el color de la naturaleza por excelencia. Representa armonía, crecimiento, exuberancia, fertilidad y frescura.
Tiene una fuerte relación a nivel emocional con la seguridad. Por eso en contraposición al rojo (connotación de peligro), se utiliza en el sentido de «vía libre» en señalización.
El verde oscuro tiene también una correspondencia social con el dinero.
El color verde tiene un gran poder de curación. Es el color más relajante para el ojo humano y puede ayudar a mejorar la vista.
El verde sugiere estabilidad y resistencia.
En ocasiones se asocia también a la falta de experiencia: «está muy verde» para describir a un novato, se utiliza en varios idiomas, no sólo en español.
En heráldica el verde representa el crecimiento y la esperanza.
Es recomendable utilizar el verde asociado a productos médicos o medicinas.
Por su asociación a la naturaleza es ideal para promocionar productos de jardinería, turismo rural, actividades al aire libre o productos ecológicos.
El verde apagado y oscuro, por su asociación al dinero, es ideal para promocionar productos financieros, banca y economía.:
El verde «Agua» se asocia con la protección y la curación emocional.
El verde amarillento se asocia con la enfermedad, la discordia, la cobardía y la envidia.
El verde oscuro se relaciona con la ambición, la codicia, la avaricia y la envidia.
El verde oliva es el color de la paz.
Negro:
El negro representa el poder, la elegancia, la formalidad, la muerte y el misterio.
Es el color más enigmático y se asocia al miedo y a lo desconocido («el futuro se presenta muy negro», «agujeros negros»…).
El negro representa también autoridad, fortaleza, intransigencia. También se asocia al prestigio y la seriedad.
En heráldica el negro representa el dolor y la pena.
En una página web puede dar imagen de elegancia, y aumenta la sensación de profundidad y perspectiva. Sin embargo, no es recomendable utilizarlo como fondo ya que disminuye la legibilidad.
Es conocido el efecto de hacer más delgadas a las personas cuando visten ropa negra. Por la misma razón puede ayudar a disminuir el efecto de abigarramiento de áreas de contenido, utilizado debidamente como fondo.
Es típico su uso en museos, galerías o colecciones de fotos on-line, debido a que hace resaltar mucho el resto de colores. Contrasta muy bien con colores brillantes.
Combinado con colores vivos y poderosos como el naranja o el rojo, produce un efecto agresivo y vigoroso.
Una herramienta muy útil en la combinación de colores es Adobe Kuler que además de brindarnos el espectro de colores y sus combinaciones, nos da la posibilidad de identificar los colores predominantes en una fotografía, con su combinación RGB y el código (HEX) del color para HTML.
Para disfrutar de una aplicación «natural» y viva de los colores les dejo este vídeo:
Esa es la pregunta que genera una media de 20.580 búsquedas mensuales en Google y, en este post, paso a paso y partiendo de cero, trataré de dar una respuesta clara del proceso que se sigue para dar vida a la imagen de la empresa.
El logotipo es la imagen de la empresa de cara al público, es el primer contacto que los clientes tienen con la empresa, con su misión y objetivos.
¿Cómo sumar todo eso en un solo ícono y tipografía?
