Envío de correo electrónico con ASP.NET

Envío de correo electrónico con ASP.NET

Envío de correo electrónico con ASP.NET

Al igual que en anteriores artículos, esta sección de Diseño & ASP.NET, pretende conjugar ambos “mundos“, a fin de dotar de la mejor presencia posible los interfaces de usuario.

Para dar ese “plus” de diseño a nuestros programas, hemos elegido el framework Bootstrap, que como sabes fue puesto en escena por Twitter, y que creemos, cumple a la perfección con todos los requisitos para diseñar con profesionalidad y adaptación a diferentes dispositivos (“diseño responsive”).

En este artículo en concreto, vamos a tratar una nueva funcionalidad: Envío de correo electrónico con ASP.NET, mediante la librería System.Net.Mail, sin necesidad de utilizar programas de terceros como ASPEmail.

 

Vamos por partes…

Como puedes ver en la imagen siguiente, el interfaz para la funcionalidad Envío de correo electrónico con ASP.NET, es muy sencillo y se compone de varios controles de servidor asp:Labelasp:TextBoxasp:LinkButton. Recordarás de post anteriores, que para maquetar un botón que contiene un icono, no utililzamos el clásico asp:Button, sino que lo sustituimos por asp:LinkButton.

Estos controles se encuentran dentro de un panel bootstrap (<div class=”panel panel-success”>) y como es obvio, permite introducir los destinatarios del correo electrónico, incluidos los de copia y copia oculta; el asunto del mensaje y el contenido o cuerpo.

Por último, y fuera del panel, hay un botón para enviar el mensaje.

 

Envío de correo electrónico con ASP.NET

Hemos dividido la composición del interfaz en 5 zonas a destacar:

1.- Mensaje de información; 2.- Destinatarios del mensaje (Para, CC y Bcc); 3.- Botones para pasar una dirección de email a la lista general; 4.- Lista general de destinatarios; y 5.- Botón para enviar el Email.

Como el interfaz, la funcionalidad es muy sencilla, y se basa en introducir destinatarios en su correspondientes campos de texto (2) para, con copia y/o con copia oculta. Al pulsar el botón de su derecha (3), el programa validará el formato del email y mostrará un mensaje de error (1) si no es correcto. En caso contrario, el destinatario pasará a la lista general de destinatarios a la derecha del botón (4).

Por último, al pulsar el botón de Enviar Email (5), el programa chequeará las listas de destinatarios y mostrará un mensaje de error en caso de que no haya ninguno. También comprobará que el mensaje tiene contenido. Para ello, creamos un array por cada lista general de destinatarios (para, con copia y/o con copia oculta) -siempre y cuando tengan contenido-. Al pulsar sobre el botón de enviar el email, se añadirán cada uno de los destinatarios al correo mediante los métodos To.AddCC.Add, y Bcc.Add. Se mostrará un mensaje de confirmación javascript: OnClientClick=”return confirm(‘¿Seguro que quiere mandar el mensaje?’);”. Finalmente, si todo está OK, el mensaje de asp:lblInfo mostrará: “Envío correcto”.

Cuando veas el CodeBehind, comprobarás que según necesitemos un mensaje de “error” o de “OK”, utilizaremos las clase bootstrap label label-danger o label label-sucess, para mostrar el fondo del mensaje en rojo o en verde, respectivamente.

A continuación, vamos con el diseño de la web

CodeBehind

Load

 

Clase RegexUtilities para validar el fomato de las direcciones email

 

Enviar el eMail

 

Pulsar el botón para pasar el destinatario introducido a la lista general (para)

 

Pulsar el botón para pasar el destinatario introducido a la lista general (CC)

 

Pulsar el botón para pasar el destinatario introducido a la lista general (Bcc)

 

Para generar el código, hemos importado las siguientes librerías: System.Text.RegularExpressions; System.Globalization; System.Collections.Generic; y System.Net.Mail

Y recuerda incluir en el fichero de configuración Web.config las siguientes líneas (cambia los datos según tu propia configuración)…

 

 

Como siempre, te dejamos el ejemplo para que puedas toquetear y probar todo lo que hemos visto en este post. ¡Espero que te haya gustado!

Ir al Ejemplo 4

Hasta la próxima.

El diseño web en los programas de gestión #1

Hoy volvemos al blog para retomar el tema del Diseño Web, esta vez en los programas de gestión. Anteriormente, nos centramos en tendencias del diseño Web y su evolución. De cómo la tecnología ha permitido que la creatividad ganara terreno en los yermos dominios de la RED.

 

diseño web programas de gestion portada

Como sabes, hoy por hoy, existen otras inmensas parcelas en Internet que son tan grandes o más, que este mundo corporativo. Ya habrás imaginado, que me estoy refiriendo al entorno mundo de la blogosfera, y como no, a las redes sociales como expositores públicos de contenidos. Todas ellas, vertientes que encauzan sus aguas hacia la Sociedad Digital.

Pero en este post, no voy a hablar ni del diseño de una página Web, ni de un blog. Ni siquiera de una página de Facebook. ¡No! Ha llegado el momento de tratar algo mucho menos idílico y por lo general “más espartano” en el sentido más figurativo de la palabra. Nos estamos refiriendo a los programas informáticos.
¡Programas!, cuantas veces oímos o comentamos esta palabra a lo largo del día como el más cotidiano de los términos. Todo gira a su alrededor, y sin ellos, nuestra vida sería un caos. Frases como:

– “…Que porquería de programa tengo en la oficina, funciona fatal…”
– “…Descarga ya el programa de la Renta… que se te pasa la fecha…”
– “…Para subir las fotos optimizadas, he encontrado un programa genial…”
– “…¿Conoces algún programa que me sirva de agenda?…”

Y así continuaríamos hasta aburrirnos, porque los programas, aun sin ser conscientes de ello, se han convertido en una parte fundamental de nuestro funcionamiento diario.

Obviamente, es el entorno laboral quien más uso hace de los programas informáticos, pero esto no debería servir para racanear esfuerzos a la hora de diseñarlos. Más bien al contrario. Si hacemos un cálculo y ponderamos la cantidad de horas que estamos delante del ordenador trabajando sobre un programa informático de gestión o administración de la empresa, llegarás a la conclusión de que un entorno amigable haría que esas horas, se llevasen mejor ¿no te parece?

Quizás, a estas alturas del post, te estarás preguntando ¿Y qué tiene que ver el diseño Web con un programa de gestión?
¡Pues mucho, la verdad!

Los programas informáticos llevan facilitándonos la gestión de nuestras empresas, probablemente, desde antes que nacieras. Por lo tanto, antes también del apogeo del entorno Web.Por aquel entonces, cuando aún la Sociedad Digital no era más que una utopía, la diferencia respecto a los programas actuales radicaba en el entorno sobre el que funcionaban, que no era otro que el propio ordenador o como mucho el de un servidor de la RED de área local de la empresa. Sin entrar en detalles que se alejen del objetivo de este post, diremos que estos programas se denominaban de “Escritorio”.

Sin embargo, en la actualidad, los programas de escritorio han sido casi-absolutamente desterrados por los que corren bajo entorno Web y todos sus protocolos de comunicación basados en TCP-IP.
Como decimos, no entraremos en más detalles técnicos, simplemente resumirte, diciendo que los programas informáticos ahora, son tan páginas Web como la que más. Y por esa razón, le dedicaremos un capítulo especial a su diseño, que como es lógico, tendrá sus características propias, ya que el sentido de su existencia no es el de mostrar la marca al mundo, si no el de gestionar y administrar los activos de la empresa: ventas, clientes, personal…

Como primera medida: Un tirón de orejas a todos aquellos que se dedican al desarrollo de software de gestión, y que siguen considerando que lo importante en un programa, es que funcione correctamente, mientras que el hecho de que sea estético y cercano al usuario, ni se lo plantean, o lo hacen muy por encima –simplemente para cubrir el expediente–.

Quizás, al leer esto, te parezca descabellado e inusual que un programa de gestión hecho a medida de una empresa, y que cuesta “una pasta”, carezca del nivel estético y de confort que requeriría el diseño de su interfaz de usuario, pero te sorprendería la cantidad de ellos que se sirven en el mercado con esas deficiencias.

¿El problema?, ya lo comentábamos en el artículos sobre el diseño Web, la dualidad disciplinar entre informáticos y diseñadores. Por eso, a estas alturas, una empresa de desarrollo de software que se precie, debe disponer en su plantilla, de personal especializado en ambas facetas, de lo contrario seguirá saliendo al mercado productos bastos, feos y enladrillados, por muy funcionales que sean técnicamente.
Para facilitar la tarea, haremos una esquematización, de aquellos aspectos y características fundamentales que requiere un buen diseño de la interfaz de usuario, es decir la parte del programa que el usuario ve, trabaja e interrelaciona con el código.

Vaya por delante, que los puntos a los que nos referiremos a continuación, tratarán exclusivamente del aspecto diseño, no de la funcionalidad del desarrollo de la aplicación informática, la que a priori, vamos a considerar como correcta y optimizada.

Te mostramos un resumen de las partes en las que se compone un proyecto de desarrollo, y de ellas, las que están destinadas al diseño de la interfaz. Fíjate que al mismo nivel que el desarrollo propiamente dicho, aparece el diseño base para la interfaz del programa, lo que llamamos contenedor corporativo.

 

El diseño web en los programas de gestión

El Contenedor Corporativo, sería el recipiente base, es decir, la MasterPage o página principal, que contendrá todas las funcionalidades, bajo un entorno común para todo el programa. Esta parte es fundamental por dos razones:

  • Por un lado tiene que mostrar -en la medida de lo posible- la identidad corporativa de la empresa (colores, estilo, logotipo, etc.)
  • Y por otro, ha de materializar todas las características pedagógicas y de acercamiento al usuario en cuanto a experiencia de usabilidad del mismo se refiere.

En esta fase del proyecto, el departamento de marketing/diseño juega su mejor baza. Se determina la estructura general, lo que conlleva el diseño de la estructura: cabecera, menú  funcional, cuerpo como contenedor, secciones, pie, etc.

Para este diseño/desarrollo estructural, nuestro consejo es que utilices HTML5, a fin de  aprovechar la usabilidad en los navegadores más utilizados: Google Chrome, Internet Explorer, Mozilla Firefox, Safari y Opera.

Este es el momento también de diseñar el estilo corporativo general mediante los correspondientes ficheros CSS3.

Una buena planificación y diseño del estilo mediante skins, temas, hojas de estilo, etc. le será de muchísima utilidad al departamento de desarrollo, que solo tendrá que ocuparse de la capa de código. El resultado final, ha de quedar como si de un armario empotrado se tratase: un montón de cajones, estantes y huecos vacíos (la parte estructural), a la espera de ser rellenados de código y programación.

Tampoco podemos olvidarnos que, como en cualquier fase de diseño, es muy importante que los usuarios “tengan algo que decir” al respecto de cómo quedará el Contenedor Corporativo. Al fin y al cabo son ellos quienes pasarán un montón de horas trabajando con el programa que vamos a desarrollar.

Para ello, aconsejamos:

  • Construir una maqueta con una muestra lo más aproximada posible de cómo será la funcionalidad futura, o sea, un escaparate, una fachada hueca sin código detrás.
  • Una pequeña encuesta a los usuarios con unos sencillos ítems que respondan a su experiencia de usabilidad con la maqueta

Debido a su gran relevancia futura, a la hora de diseñar la maqueta, no debes escatimar esfuerzos. Nosotros sugerimos que se haga en tres fases:

  • Unos “stories” o borradores hecho a mano
  • Posteriormente, pasar esos borradores a sendos ficheros gráficos, que se puede hacer, por ejemplo, con una herramienta como Photoshop
  • Materializar físicamente la maqueta con etiquetas HTML

Respecto a la encuesta, sumando los resultados de la misma, a nuestras propias recetas de usabilidad, navegabilidad y funcionalidad, pondremos en valor los parámetros necesarios para crear un entorno funcional y amigable, que suponga una magnífica experiencia para el usuario.

Ejemplo de encuesta, para un hipotético programa denominado GestPrueba:

 

El diseño web en los programas de gestión

 

Si el resultado de la encuesta es negativo, habrá que plantearse hacer otra maqueta, mostrarla al cliente/usuarios y volver a realizar la encuesta.

Como decíamos, es en esta fase del proyecto, en la que los departamentos técnico y de marketing/diseño han  de aunar criterios para obtener un óptimo resultado.

En el próximo post de esta serie sobre el diseño web en programas de gestión, vamos a desarrollar más a fondo Las Reglas del buen diseño en una interfaz de usuario

¿Qué os ha parecido este post? ¿Os queda alguna duda? ¿Os habéis tenido alguna vez que enfrentar a programas de gestión que os han vuelto locos?

Identidad visual #5: La tipografía

Identidad visual #5: La tipografía

3.- La tipografía

 

La tipografía es la última identidad que vamos a tratar para definir el conjunto Visual de la empresa.

Por regla general, todas estas identidades (que hemos visto a lo largo de la colección de post dedicada a la identidad visual de una empresa/marca), y alguna normas más que veremos a continuación, deberán ser reflejadas en un manual con todas las normas de identidad visual, que será de obligado cumplimiento, ya que el uso de esas normas, mostrará al mundo “qué y como es la empresa/marca” y como les ve el mundo a ellos.

La incorporación de una tipografía en la identidad visual, se puede materializar de varias formas. Puedes utilizar una fuente que ya existe, que es lo más habitual, o crear/diseñar una familia de fuente de letra nueva. Esta última opción suelen emplearla grandes empresas con un buen gabinete de diseño, pues  construir una familia de fuentes de letra, no es precisamente una tarea sencilla.

Por si no lo sabes, existen portales Web que contienen infinidad de fuentes de letra de todo tipo, creadas, en muchos casos, por diseñadores excelentes, que te permiten hacer uso de ellas con  diferentes fórmulas de derechos de uso. ¡Es muy importante seguir las indicaciones que marque el diseñador de las fuentes que vayas a utilizar!

Mala imagen daremos de nuestra marca, si utilizamos una fuente de letra sin consentimiento o sin seguir las directrices de su creador. ¿Te imaginas que un diseñador te denunciara por hacer uso indebido de su fuente de letra?

Cuando hablamos de tipografía, hay que diferenciar entre el tipo o tipos de letra que utilizaremos para crear el logotipo, y el/los que destinaremos para nuestro uso habitual de trabajo y gestión (cartas, sobres, memorandos), así como para otros usos: cartelería, mecheros, bolígrafos, camisetas, etc.

Las normas que rigen el cómo se deben utilizar estos documentos u otros usos, formarán también parte de la identidad corporativa, ¡no lo olvides!

Y te preguntarás ¿Qué tipo de letra debo elegir para mi identidad visual?

La respuesta te la dará por un lado tu creatividad (o la de tu equipo de diseño) y por otro, el sentido común.

Pongamos un ejemplo de poco sentido común. Imagínate que una empresa de asesoría jurídica utilizara un logotipo con la tipografía siguiente:

 

identidad visual - tipografía 1

 

Evidentemente, el “cante”, sería del tamaño de una catedral. Y no nos referimos al color (que obviamente también canta lo suyo), sino al tipo de letra. Esta fuente puede representar juventud, moda, ocio, diseño, etc. Pero de ninguna manera derecho, justicia, asesoría, etc.

A la hora de decidir que fuente/s de letra se pueden utilizar para el trabajo documental del día a día de tu empresa, conviene también aplicar el mismo sentido común, para hacer que no desentone en la imagen general corporativa de la empresa.

Sigamos con el mismo ejemplo. Supongamos una carta de la empresa a un cliente con la siguiente tipografía (en este caso “Comic Sans MS”)

 

identidad visual - tipografía 2

 


Mi consejo
: utiliza una fuente que sea lo más representativa posible del estilo visual de tu empresa/marca, pero siempre familias estándar, es decir que puedas usarla tú y tus empleados sin  problemas de compatibilidad.Para los bocadillos de un cómic, esta fuente “va de lujo”, pero para un despacho de abogados como que no ¿verdad?

Supón que te decides utilizar una fuente de diseño (no estándar) para tu uso diario. Instalando esa fuente en todos los ordenadores de la empresa, quedaría la cosa solucionada, incluso instalándola en tu propio portátil personal, también solucionarías buena parte del problema, pero ¿Qué ocurriría si tienes que hacer una carta o memorando en, o desde una ubicación diferente, donde no dispones de tus equipos? Menudo lío.

Para acabar con este capítulo, no puedo dejar pasar la explicación que tantas y tantas veces me han demandado sobre el significado de Serif y de Sans Serif, que no es, ni más ni menos, que una forma de clasificar las familias de fuentes de letra.

Las fuentes serif (en castellano: serifas), tienen origen en el pasado, cuando las letras se cincelaban en bloques de piedra. Como resultaba difícil asegurar que los bordes de las letras fueran rectos, los talladores desarrollaron una técnica que consistía en rematar los extremos de casi todas las letras con unos adornos típicos, a los que se denominaban “serif”.

 

identidad visual - tipografía 3

 

Fuente Serif

identidad visual - tipografía - Serif

 

Las fuentes serif incluyen todas las romanas. Son muy apropiadas para la lectura seguida de largos textos, ya que los trazos finos y los remates ayudan al ojo a fijar y seguir una línea en un conjunto de texto, facilitando la lectura rápida y evitando la monotonía. Siguen siendo las preferidas para los libros.

Poco a poco las fuentes serif han ido perdiendo terreno frente a las sans serif. Cuando son utilizadas en el  ordenador, estas últimas “ganan por goleada”, aunque siempre quedan Web o Blogs que utilizan la categoría serif para emular o recordar la tipografía de los periódicos y diarios de prensa clásicos, sobre todo en publicaciones on-line.

Como ejemplos de fuentes serif podemos citar Book Antiqua, Bookman Old Style, Courier, Courier New, Century Schoolbook, Garamond, Georgia, MS Serif, New York, Times, Times New Roman y Palatino.

 

Fuente Sans Serif

identidad visual - tipografía - SansSerif

 

Las fuentes sans serif o etruscas hacen su aparición en Inglaterra durante los años 1820 a 1830. No tienen remates en sus extremos (sin serifa), entre sus trazos gruesos y delgados no existe apenas contraste, sus vértices son rectos y sus trazos uniformes. Representan la forma natural de una letra que ha sido realizada por alguien que escribe con otra herramienta que no sea un lápiz o un pincel.

Asociados desde su inicio a la tipografía comercial, su legibilidad y durabilidad los hacían perfectos para impresiones de etiquetas, embalajes, envolturas y demás propósitos comerciales. Aunque este uso motivó que fueran despreciados por aquellos que se preocupaban por los tipos bellos y la impresión de calidad.

Las fuentes sans serif facilitan su visualización en la pantalla de un ordenador, resultando muy legibles a pequeños tamaños y bellas y limpias a tamaños grandes. Sin embargo, no están aconsejadas para textos largos, ya que resultan monótonas y difíciles de seguir.

Entre otras fuentes sans serif, se encuentran Arial, Arial Narrow, Arial Rounded MT Bold, Century Gothic, Chicago, Helvetica, Geneva, Impact, Monaco, MS Sans Serif, Tahoma, Trebuchet MS y Verdana.

Bueno amigo, con este post completamos la serie de la identidad visual de una empresa/marca. Espero que te haya gustado y te sea práctico en el futuro.

Próximamente veremos como materializar un manual con las normas de la identidad visual.

¿Te ha surgido alguna duda? ¿Te atreverías a iniciar un plan de identidad visual? ¿lo ves útil?

No dudes en contarnos tus sugerencias o dudas.

¡Hasta pronto!

Identidad visual #4: El cóctel de colores corporativos, o cómo combinar los colores

Identidad visual #4: El cóctel de colores corporativos, o cómo combinar los colores

Continuamos con la identidad visual de una marca/empresa, y con el estudio de los colores. En este post trataremos El cóctel de colores corporativos, o cómo combinar los colores…

El cóctel de colores corporativos

 

Hemos hablado de los colores corporativos como una unidad, es decir como si la imagen corporativa de una marca fuera solamente de un color, y no siempre es así. En ocasiones, los colores se combinan, bien para resaltar un texto o un gráfico sobre un fondo, o simplemente para crear una imagen que se atribuya las características de varios colores.

Cuando analizamos anteriormente el color amarillo, ya te comenté que por sí solo, este color decía poco, era poco nítido, a no ser que se utilizara un fondo contrastado que le hiciera resaltar. Del mismo modo, podría utilizarse como fondo el propio color amarillo y hacer resaltar un logo con colores como el rojo o el negro para conseguir el mejor efecto.

Otros ejemplos habituales de combinaciones de colores los tenemos con marrones y naranjas, azules y  blancos, negros y blancos, verdes y blancos, negros y amarillos, etc.

Como puedes ver, la cosa se complica. Por si no fuera poco con un solo color, ahora vemos que se pueden utilizar más de uno… Pero no te preocupes, como ya hemos dicho repetidamente, sobre colores no está dicha la última palabra, ya que entramos en el entorno creativo y artístico, donde no existen límites.

Si bien, te puedo dar unas claves, que seguramente te vendrán muy bien a la hora de elegir tu paleta cromática. Pero antes te ofreceremos una pequeña explicación de cómo se comporta el circulo cromático, tanto en la naturaleza como en la luz.

 

identidad visual - circulo_cromatico1

 

Como veremos de forma sencilla, los colores forman un círculo que va desde el amarillo (por tomar una referencia) hasta el naranja, en el sentido del movimiento de las agujas de un reloj. Según avanza, se pasa primeramente por la gama fría (verdes y azules -> Madera y Agua, según el Feng-Shui), y posteriormente se adentra en la gama cálida (magentas, rojos y anaranjados -> Tierra y Fuego), hasta llegar de nuevo al color amarillo. El negro y el blanco son acromáticos, es decir que no tienen color, y el gris es una combinación de ambos, y como estos, tampoco tiene color.

Para rellenar este círculo, la teoría del color ha partido de tres colores primarios, que son el amarillo, el carmesí y el azul (señalados en el gráfico con un 1). La mezcla de cada uno de ellos, forman los colores secundarios (señalados en el gráfico con el número 2): verde (amarillo + azul); azul violáceo (azul + carmesí); y rojo anaranjado (carmesí + amarillo).

De la combinación de los secundarios y los primarios, se obtiene los colores terciarios (señalados en el gráfico con el 3)… y así sucesivamente, hasta el infinito.

¡Si, ya lo sé! En algún libro, has leído que los colores primarios y secundarios son otros. Esto forma parte del juego y es el precio que se ha de pagar por ir con unas u otras teorías, ya que al final no dejan de ser eso: teorías. Más adelante entenderás a que me refiero.

Sí que está demostrado técnicamente al 100%, cuales son los colores luz primarios. O sea, aquellos que se reciben de cualquier fuente luminosa (el Sol, una televisión, un monitor de ordenador, el cine…). Estos son: R-Rojo, G-Verde (green) y B-Azul (blue).

Pero claro, la identidad visual de nuestra marca no se puede materializar ni imprimir solo con luz ¿verdad?, necesitamos pigmentos que pinten (manchen) de color un soporte o una superficie determinada: un papel, un lienzo, una madera, etc., para confeccionar con ellos tarjetas de visita, papel de carta,  sobres, carpetas… Con los colores luz tendremos resuelto todo lo digital: la Web, el blog, las redes sociales…, pero ¿y el resto?

Precisamente para imprimir nuestros colores en soportes materiales (no digitales), se requieren pigmentos obtenidos con productos físicos y químicos, naturales o sintetizados: tierras, metales, óxidos, etc. Y es ahí donde comienzan los problemas, porque si bien, con estos pigmentos, intentamos recrear los colores luz (que son invariables y concretos), con aquellos, nunca podemos conseguir esa invariabilidad y concreción. Sencillamente porque la naturaleza no produce identidades perfectas.

Por otro lado, la luz funciona de forma contraria a los pigmentos. Los colores luz, a partir de sus  primarios, crean el círculo cromático mediante una síntesis aditiva, es decir que mezclando (sumando)  los colores, la combinación se va aclarando y el resultado final es el blanco. Mientras que los colores pigmento, utilizan una síntesis sustractiva, o lo que es lo mismo, la suma de sus colores, van oscureciendo la mezcla hasta llegar al negro.

Un experimento muy interesante consiste en mirar fijamente una hoja con los tres colores primarios luz (es decir rojo, verde y azul) durante un rato. Al cabo de ese tiempo, sustituimos esa hoja por otra en blanco, y comprobaremos, por un efecto visual, como poco a poco se nos materializa de la nada los colores primarios pigmento: el color magenta, el cian, y el amarillo.

Estos son los colores básicos de las tintas que se usan en la mayoría de los sistemas de impresión, motivo por el cual estos colores han desplazado en la consideración de colores primarios a los tradicionales: rojo, amarillo y azul.

¡Aquí queríamos llegar! Esta es la fuente de la disparidad de criterios, Pero no pasa nada, la idea la tenemos, que es lo importante.

Los colores complementarios

Llegados a este punto de conocimiento sobre la teoría del color, no podemos obviar la importancia que tienen, en todo juego cromático, los colores complementarios.

¿Qué son los colores complementarios?

Pues ni más ni menos, los colores opuestos en el círculo cromático (fíjate en la siguiente ilustración).  Colores que se equilibran e intensifican mutuamente hasta la máxima expresión.

 

identidad visual - circulo_cromatico2

 

Cuando se yuxtaponen, se colocan uno al lado del otro, dos colores complementarios, conseguimos el mayor contraste cromático que se puede dar en e l mundo del color, ya que ambos, crean una sinergia que multiplica la intensidad de cada uno de ellos por separado. Cosa que no ocurre con ninguna otra combinación, si no, que se lo digan a Van Gogh.

 

identidad corporativa - coloresComplementarios

 

Con este ejemplo, puedes comprobar por ti mismo, cómo ambos colores al asociarse, parecen más luminosos y brillantes que cuando están separados, encuadrados en el lugar que les corresponde dentro del círculo cromático (imagen anterior), cuya sensación visual resulta más apagada.

La gama quebrada

Hay una gama tonal o conjunto de colores a los que se denomina colores quebrados, y que se obtiene de la mezcla de colores complementarios en mayor o menor acercamiento o analogía cromática, y en mayor o menor proporción de cada uno de ellos. Esta gama se caracteriza por su tendencia grisácea, pero ¡ojo! no lo debes confundir para nada con el neutro gris. Es más, un color quebrado no tendrá nada de neutro, más bien todo lo contrario, ya que son muy ricos en matices, y pueden ser muy interesante para cualquier marca relacionada con lo étnico, lo natural y terrestre. A mí personalmente, me encantan. Siento debilidad por los colores quebrados.

 

identidad visual - colores_quebrados

 

Bueno, pues ya que somos –casi– expertos en esto de los colores ¡Nos ponemos a trabajar!

Por último, para acabar el capítulo del color, ¡Recuerda! que a la hora de elegir colores para nuestra imagen corporativa, debemos pensar que valores queremos expresar y mostrar a nuestro público objetivo, y en función de dichos valores, intentar transmitirlos.

Espero que te haya gustado. Nos vemos en el próximo post: La tipografía

Ciao.

Identidad visual #3: La gama de colores

Aunque hemos podido comprobar que el mundo del color es complejo, y ha llevado, durante mucho tiempo a artistas, filósofos, sociólogos, psicólogos, místicos, religiosos, escritores, y un largo etcétera, a estudiar su relación con el ser humano, no es menos cierto, que hoy en día se pueden atribuir a los colores –con una certeza casi absoluta– unas características básicas y elementales en relación con las  identidades visuales de las empresas, así como a la actividad comercial o empresarial a la que se dedican.

Por supuesto, la palabra final, la tiene cada uno. Yo te puedo decir que color se suele asociar a tal o cual  actividad; te puedo sugerir que gama cromática se acerca más a tu estilo de marca, a su mensaje. Pero en definitiva, serás tú quien decida si aplicas, o no, esas normas. No existe una ley en contra del gusto personal ¿verdad?

El alcance de acierto o error, a la hora de decidir la imagen corporativa de tu marca, lo determinarán  muchos factores, no solamente el visual, y al final, el tiempo dirá si mereció la pena hacer el esfuerzo creativo y si la estrategia fue correcta.

Mi consejo es que no te tomes los colores de tu imagen visual a la ligera, ya que con ella, estás dando, a tu público objetivo, mucha más información de lo que crees.

Te pondré un exagerado pero representativo ejemplo. Imagínate la imagen visual de una clínica dental cuyo color predominante fuera el bermellón, es decir, un rojo puro. Mala estrategia para su imagen, que instintivamente se podría asociar con la sangre ¿?…

Para temas infantiles suelen usarse los colores pastel, sobre todo rosa, amarillo y azul muy clarito. Imagínate una empresa de abogados cuyos colores corporativos fueran así… ¿Qué imagen de seriedad ofrecería a sus clientes?

Conclusión: ¡Piensa en tu público y en tu audiencia!

Identidad visual - gamas de colores

¿Cómo puedo elegir mis colores corporativos? That is the question

Sin pretender hacer dogma de ley, ya que como hemos podido comprobar anteriormente, sobre el tema del color nada es concluyente (“para gustos los colores” que diría el refrán), te expondré seguidamente y sin más dilación, los colores que se suelen utilizar en el diseño de logos y de identidad visual corporativa a la hora de representar los valores de las marcas.

Paleta Cálida

Rojo: Color con mucha intensidad y fuerza, que se asocia a las emociones fuertes, guerra, sangre, fuego, pasión. Es un color que atrae muchísimo la atención del consumidor. El rojo es el color del espectro cromático que el ojo humano mejor y a mayor distancia ve.

A nivel mundial, el rojo es el segundo color más usado después del azul, y no debemos olvidar que el 30% de las marcas más importantes, disponen del color rojo en su identidad visual.

Se asocia con acción, aventura, energía, pasión, fuerza, agresividad…

Ejemplos: Coca-Cola, Ray Ban, Levi´s, H&M, Toyota, etc.

Identidad corporativa - gama cálida 1

Naranja: es un color vivo, que llama la atención. Es la combinación de los colores primarios rojo y amarillo. Se relaciona con juventud, deporte, gastronomía, diversión… Transmite siempre euforia y alegría, y se asocia con marcas creativas, jóvenes y alegres.

Ejemplos: Bershka, Nickelodeon, Fanta, Orange, etc.

Identidad corporativa - gama cálida 2

Amarillo: Generalmente el amarillo es un color que se suele combinar con otros colores, como el negro o el rojo, para darle consistencia, ya que por sí solo, resulta poco nítido, lo que no quiere decir que no aporte fuerza. Como en el caso del naranja, expresa alegría y atención, y suele estar asociado a valores como felicidad, juego, calidez y optimismo.

Ejemplos: Hertz, DHL, Shell, McDonald´s, IKEA, etc.

Identidad corporativa - gama cálida 3

Marrón: Dentro de la gama cálida, el color marrón es de los más neutros y por lo tanto, menos impactantes. Por el contrario, el color marrón representa calma y relajación para la vista, pues evoca la naturaleza otoñal, lo étnico y antiguo, la tierra, madera… Al mismo tiempo, el color marrón simboliza lo sólido, simple y robusto. Estas características, hacen que lo utilicen empresas relacionadas con la seguridad, la construcción y la legalidad.

Ejemplos: McCafé, UPS, Pocock, Brown Contractors, etc.

Identidad corporativa - gama cálida 4

Rosa: Color asociado a la mujer, a la feminidad, al amor, inocencia y delicadeza. Dependiendo  de la tonalidad del color rosa utilizado, puede ser atrevido y vibrante con tonos fucsias, mientras que los tonos más claros simbolizan inocencia  y ternura, enfocados principalmente a los más pequeños.

Ejemplos: Victoria´s secret, Barbie, Cosmopolitan, Hello Kitty, Sleek, etc

Identidad corporativa - gama cálida 5

Paleta Fría

Azul: Es el color más utilizado en el diseño de logotipos. Se asocia con la confianza, la serenidad, la lealtad y la verdad, invoca autoridad, éxito y seguridad.

Generalmente el color azul se suele emplear en marcas de empresas farmacéuticas, médicas, financieras y tecnológicas. También en partidos políticos. No olvidemos que es también la preferida de los Medios Sociales.

Ejemplos: Twitter, Facebook, Intel, HP, IBM, Guillette, VISA, BBVA, etc

Identidad corporativa - gama fría 1

Verde: Color relacionado con la naturaleza. Es el color de la esperanza, renovación, equilibrio, armonía, sosiego y serenidad.

Estas características hacen que se utilice en marcas relacionadas con la salud, la ecología, la naturaleza y los alimentos frescos.

Ejemplos: Starbucks, Greenpeace, El Corte Inglés, Iberdrola, Herbalife, etc.

Identidad corporativa - gama fría 2

Morado-Violeta: Al igual que el rosa, es un color muy relacionado con la mujer pero también con la creatividad, la belleza, el misterio, la ambición y el lujo.

Al ser un color formado por el rojo (cálido) y azul (frio), utilizarlo en combinación con alguno de ellos, puede asociarse además con sus características propias.

Ejemplos: Yahoo!, Barbie, SyFy, Hallmark, Milka, etc.

Identidad corporativa - gama fría 3

Paleta Neutra

Blanco: Representación universal de la pureza. Se asocia a valores como la paz, claridad, refinamiento, simplicidad, transparencia. También se suele utilizar el blanco como texto reversible, es decir cuando el fondo donde se ubica, no puede utilizar el color corporativo.

Ejemplos: Nike, Adidas, Box, Apple, etc.

Identidad corporativa - gama neutra 1

Negro: Es un color que suele utilizarse sobre todo para logotipos por su simplicidad y fuerza. Es simplemente rotundo y poderoso.

El color negro, se asocia con el poder, seriedad, formalidad y autoridad.

Ejemplos: Burberry, Zara, Dior, Chanel, etc.

Identidad corporativa - gama neutra 2

Gris: Es el más neutro de la gama de colores. De alguna manera, recoge las atribuciones de sus padres (el negro y el blanco) y las diluye como si fuera un azucarillo en el café, produciendo un efecto de frialdad y neutralidad.

Precisamente es esa neutralidad la que le otorga una gran flexibilidad a la hora de diseñar una imagen corporativa, ya que combina genial con prácticamente todos los colores, tanto cálidos como fríos. También se utiliza como la representación del metal plateado o cromado, al crearse una combinación de colores grises.

Se asocia con sobriedad, tradición, sencillez y respetabilidad.

Ejemplos: Jaguar, Swarovski, Kikipedia, etc.

Identidad corporativa - gama neutra 3

Espero que te haya gustado.

Ahora me despido. ¡No te pierdas el siguiente post: El cóctel de colores corporativos, o como combinar los colores!

Identidad visual #2: La paleta de colores corporativos

2.- La paleta de colores corporativos

Continuamos avanzando para adentrarnos en el segundo de los elementos básicos que componen la identidad visual. Recuerda que eran: el Logo, que vimos anteriormente, y la paleta de colores corporativos y la tipografía, que iremos viendo en posts sucesivos.

¡Agárrate! Nos adentramos en el complejo mundo del color.

 

La psicología de los colores

La elección de colores por lo general se realiza según afinidades que tengamos con uno u otro color, pero dentro de las tendencias que conocemos, sin duda, una que tiene cada vez más fuerza y aceptación es la del Feng Shui.

El Feng Shui, dispone de una teoría denominada de los cinco elementos: Tierra, Madera, Agua, Fuego y Metal, donde cada uno de ellos, contiene unos colores dentro de la paleta cromática.

La paleta de colores corporativos: Colores_FengShui

En la siguiente lista, se muestran los cinco elementos, con su correspondiente relación psico-sociológica.

  • TIERRA (tostados, terracotas, naranjas, ocres y amarillos): Personas equilibradas, hogareñas, diplomáticas, cálidas, conservadoras, obstinadas. Se benefician con el color blanco y tonos de verde
  • MADERA (verde a turquesas): Personas inquietas, innovadoras, cambiantes, amantes de los juegos y la diversión, artistas, artesanos. Se benefician con los rojos y con el blanco
  • AGUA (azules, desde el cian hasta el negro): Personas sensibles, introvertidas, emocionales, profundas, depresivas, pasivas. Se benefician con el color verde y los tonos terrosos
  • FUEGO (desde los rojos hasta los rosas): Personas dinámicas, exuberantes, extrovertidas y agresivas, propensas al stress y a los excesos. Se benefician con tonos ocres y azules
  • METAL (blancos, grises y metalizados): Personas refinadas, inteligentes, observadoras, más introvertidas que extrovertidas, competitivas, detallistas. Se benefician con el color azul o el rojo

Desde otro punto de vista, la siguiente relación*, sintetiza una tabla de colores, basada en la  obra “Psicología del Color” de la socióloga y psicóloga Eva Heller (1948-2008).

  • AZUL: El color preferido, el color en la simpatía, la armonía y la fidelidad, pese a ser frío y distante, el color femenino y de las virtudes espirituales
  • VIOLETA: El color favorito de la ambivalencia, de la púrpura, la tecnología, feminismo, movimiento gay las personas que lo rechazan son más que las que lo aceptan, temen aceptarlo de forma diferenciada. Es el color que más raramente se ve en la naturaleza. El color de la lila
  • NEGRO: El color favorito del poder. De la muerte y el universo. El color favorito de algunas profesiones y de la juventud en su edad gótica. El color de la negación y de elegancia, el color de la exposición, así como el oro negro o “la nueva” avaricia
  • ROJO: El color favorito de todas las pasiones, el color del amor y del odio. El color de los reyes y del comunismo, de la alegría y del peligro
  • ROSA: El color favorito de lo dulce y delicado, al igual que lo escandaloso y curioso yendo del rosa masculino al rosa femenino,… como los sentimientos asociados al rosa son positivos en sus sentidos. Es el nombre de una flor así entonces como el de una mujer
  • AMARILLO: El color favorito de todo lo contradictorio, o del optimismo al igual que de los celos. El color de la diversión, del entendimiento y sin olvidar de la traición
  • MARRON: El color favorito de lo acogedor, lo corriente y necio. se considera el color de lo feo y antipático, pereza, necedad, acogedor, de lo corriente y anticuado, el color de los sabores fuertes e intensos, de la materia robusta, de los pobres. El color del secreto amor, el ideal de la belleza bronceada
  • VERDE: El color favorito de la fertilidad, de la esperanza y de la burguesía. Verde sagrado y Verde venenoso. El verde es la quinta esencia de la naturaleza, es una ideología un estilo de vida, es conciencia de medio ambiente, amor a la naturaleza y al mismo tiempo es el color del rechazo de la sociedad dominada por la tecnología
  • BLANCO: El color favorito de la inocencia, el color del bien y de los espíritus, el invierno, el norte, el color de la luz y la nada, lo limpio
  • ORO: El color favorito del dinero, lujo…
  • PLATA: El color favorito de la velocidad, del dinero y la luna… es el último color en que se piensa, siempre comparado con el dorado, color más veloz pero siempre segundo, el nombre del gigante, práctico y precioso, símbolo del vil dinero, símbolo de la falsificación de marca, femenino en la luna y en cáncer, símbolo de la fría distancia clara e intelectual, símbolo de modernidad por su brillo, usado en lo personal y elegante
  • GRIS: El color del aburrimiento, de lo anticuado y de la crueldad. Los test psicológicos con colores y la teoría de Goethe

¿Cómo actúan los colores sobre los sentimientos y la razón? Eva Heller, nos contesta: “…es la relación con nuestros sentimientos y demuestra cómo ambos no se combinan de manera accidental, pues sus asociaciones no son mera cuestión de gusto, sino experiencias universales que están profundamente enraizadas en nuestro lenguaje y en nuestro pensamiento”.

La Enciclopedia Británica, por su parte, también hace una mención al respecto: “Artistas y diseñadores han estudiado los efectos del color por siglos, y han desarrollado una multitud de teorías sobre el uso del color. El número y variedad de tales teorías demuestra que no pueden aplicarse reglas universales: la percepción del color depende de la experiencia individual

…Podríamos seguir con más y más estudios, “hasta el infinito y más allá”… pero esta, no es la idea de este post, en el próximo, tomaremos entre nuestras manos, la paleta de colores, a fin de elegir la gama corporativa más adecuada para cada marca.

¡No te lo pierdas!

* Referencia: illusion Studio ( www.psicologiadelcolor.es/colores-psicologicos/)