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:Label, asp:TextBox y asp: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.Add,¬†CC.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/)