Logotipos con idea: la importancia de un buen concepto en el proceso de diseño

Muy a menudo los diseñadores gráficos nos topamos con una de las peores frustraciones (como profesionales), muchas veces a raíz del desconocimiento: no son pocos los clientes que se espantan cuando consultan por la cotización de una marca o isologotipo.

"Eh! ¡tanto cuesta un dibujito? ¡¿Pero si lo que yo pido es bien simple?!", protestan…

Y ahí es donde radica la confusión: primeramente, un isologotipo no es un "dibujito", si bien en ciertos casos puede servirse de una gráfica similar; en segundo lugar, sí, con suerte su marca será SIMPLE y recordable, eso si es una virtud…

Simple, pero no obvio. Parece ser algo fácil de confundir. Y de hecho lo es. El límite que separa lo OBVIO con el "dibujito" definitivamente es estrecho. Digo todo esto porque el objetivo de este breve artículo es destacar el papel fundamental de una BUENA IDEA en el desarrollo de una marca.

Podría hasta pretensiosamente resumir en dos pequeñas oraciones el espíritu de un buen diseño de isologotipos:

  1. Si el isologotipo es simple, con una buena idea que lo sustenta, creo que hicimos todo bien. Generalmente en estos casos, los conceptos son interesantes por el apareamiento de un elemento reconocible, completamente identificable, y alguna operación formal y conceptual, que lo altera en cierta manera 'sutil'.
  2. Corolario: si preferimos contar algo obvio, hagámoslo de una forma inédita, o desde un punto de vista nuevo. Hay marcas que nos muestran objetos trillados o muy vistos, pero de una manera novedosa, y eso es justamente lo que les otorga valor y peso como símbolos.

Ejemplos del caso 1

Logotipos con idea

En estos casos, lo que se muestra son ideas y grafismos recurrentes en el imaginario habitual de las personas, pero abordados de un punto de vista más ingenioso que la mera representación.

  • Una torta o "pie chart", gráfico de estadísticas por excelencia, toma un significado mucho más fuerte e interesante, cuando resulta ser que la porción que se extrae de la misma, reconstruye la forma de la letra K, inicial de a empesa de inversiones "Koh Inversiones".
  • La ya clásica asociación de lo circular con la óptica y los anteojos, es redefinida al insertar dos letras del nombre de la empresa, para ilustrar por contraforma, un perfil de una persona con lentes.
  • Las cadenas de ADN (este concepto si que fue usado) le dan otro dinamismo a una marca de un criadero de chinchillas, poniendo énfasis en el mejoramiento genético de sus ejemplares, e interactuando directamente con la parte tipográfica (logotipo).
  • Una simple bolsa de compras, simbolo harto utilizado por shopings, cobra más vida y sugestión, mediante el uso de una letra "&" mandada al corte del plano de color que genera formas y movimiento que muchas otras marcas no tienen.

Ejemplos del caso 2

Logotipos con idea

Aquí se combinan tanto elementos reconocibles en el imaginario habitual, como también conceptos o ideas que los alteran, dándoles así un 'algo' a veces no reconocible en la primera mirada, pero que definitivamente, hace que nos quedemos inquietos por saber que ocurre ahí.

  • Para "Triatleta", una marca de ropa para deportes de triatlón, se usó el elemento triangular como signo aglutinante de las tres actividades. La operación formal fue el repetirlo, y construir una forma imposible como las que usaba Escher, para de esa forma ilustrar lo infinito y la retroalimentación constante que genera el deporte.
  • En el caso de Electronica Avanzada, la letra 'e' rotada, conforma a la vez la 'a', ambas iniciales del nombre. Fusionándolas en un círculo, obtuvimos un signo potente, que muestra la interrelación entre dos partes para un todo comunicacional.
  • Para ILAR, se combinaron dos signos: una pupila de un felino, representando el reino animal, y una página de un libro, mostrando el conocimiento. Las jornadas de este evento, dedicadas a la concientización de los derechos del animal, encontraron así una identidad mucho más sugestiva, por la suma de ambas partes.
  • Por último, para el sitio web UbiquitousClick, se jugo con el super trillado concepto de click del mouse, pero que se convierte en un faro que emite luz, y guía el camino de potenciales navegantes a sus respectivos sitios, una idea más que pertinente para una empresa cuyo servicio es redireccionar tráfico afín a segmentos comerciales para sitios web. 

Buscando una finalidad constructiva a todo esto, y sin pretender adueñarme de una verdad aparente, la conclusión es, poder nosotros como profesionales, valorar y cotizar nuestro trabajo, no sólo desde lo monetario (que necesariamente es importante), sino también desde lo profesional. Eso lo lograremos en base a "educar" a nuestros clientes, que en muchos casos desconocen la investigación, el proceso de diseño, testeo y demás que llevamos a cabo para poder brindarles el tan preciado "dibujito".

Por último, los logotipos aquí presentes fueron desarrollados por CCS , para ver más de nuesto trabajo, pueden hacer click aquí , o visitar nuestro sitio web. 

Eduardo Cesario La Criatura Creativa

Aprovechando el boceto para el desarrollo de una estructura xhtml

 Una cruzada de CCS, por un xhtml mejor!

El tema parece simple, pero en realidad, es crucial.

Todos los que hacemos diseño, o al menos los que recibimos una formación proyectual y conceptual, se nos ha inculcado desde el principio, la importancia de un boceto para llegar a dar forma a lo que será la idea/concepto final de nuesto diseño.

Hasta ahí vamos bien, ahora, ¿qué pasa cuando lo que tenemos que representar es un diseño en plantilla xhtml/css? 

En realidad esta pregunta, que puede parecer obvia, no lo es tanto. Algunos dirán "me bajo una plantilla prearmada y la modifico", si, pero se supone que la plantilla la estamos creando y diseñando nosotros, por ende, esa respuesta queda descartada del razonamiento.

"Empiezo a codificar con un editor visual del tipo Dreamweaver, y voy usando las paletas para guiarme": esa es una posible solución, pero no para la persona que recién se está adentrando en el mundo xhtml: sabemos que un div mal cerrado puede producir un desastre en nuestro diseño…

"Codifico todo de cero", pero cómo hacer eso sin tener la idea realmente definida, y la destreza aplicada a esa resolución.

Lo que yo propongo es lo siguiente: revalorizar nuestra capacidad de dibujar y bocetar (por más que no seamos Leonardo Da Vinci, de hecho, yo estoy muy lejos de serlo), para poder visualizar con mucha más claridad y de forma más amena, lo que vamos a intentar decirle al navegador que haga.

Estoy hablando de un boceto no para concebir la idea gráfica (se supone que ese/esos ya los hicimos antes de plantear la estética, concepto, etc.), sino uno que va a ser una suerte de mapa de como descompondremos el cuerpo del documento en divs o areas para ser traducidas a código.

A continuación detallo un ejemplo para un diseño que estamos haciendo en el estudio:

 El diseño en png, listo para ser pasado a xhtml`

Primero tenemos el layout o plantilla, en mi caso, un png, hecho en Fireworks. La primer parte es observación pura, determinar que áreas vamos a separar, agrupar, etc.

 El boceto, infaltable herramienta para mis diseños xhtml

En nuestro block o cuaderno, hacemos un rápido esquema representando en abstracción, la plantilla supuesta.

Yo recomiendo:

  • Usar 'cotas' para medir en pixels o porcentajes las areas a designar.
  • Usar rectángulos para separar los divs.
  • Colocar aunque sea abreviado, el nombre para cada div.
  • Tratar de utilizar la menor cantidad de zonas.
  • Usar nuestra inteligencia, para poder visualizar cual solución es la mejor y menos costosa.

Esto es el resultado de superponer nuestro boceto sobre el original...
En esta figura, si bien no es lo más clara posible,vemos el resultado de superponer el boceto de la estructura, sobre el diseño original: si bien no tienen que coincidir fielmente, este paso es completamente ilustrativo y no es necesario hacerlo, me tome el trabajo para que vean como conviven ambas figuras.

El resultado final es mucho más claro que el dibujo inicial...El resultado final es mucho más claro que el dibujo inicial...

Ahora si: en nuestro boceto original no se veía con mucha claridad el trabajo, pero si lo aprolijamos un poco, vemos detalladamente cada una de las zonas o divs en las cuales descompondremos el cuerpo del documento xhtml, para llegar al resultado final.

Si bien este procedimiento/método no nos va a solucionar el problema que representa la crudeza de encarar un diseño xhtml, la compatibilidad en diferentes browsers/plataformas, la 'reinterpretación' de cada browser de nuestro código, etc, puedo garantizar que hace el trabajo mucho más ameno, y que con el paso del tiempo, hasta quizás podamos prescindir de este paso para diseñar.

Espero les haya sido de utilidad.

Eduardo Cesario La Criatura Creativa

Pensamientos mezclados sobre diseño gráfico: el estilo

Mik, Adri y yo, según Alejandro Ines

Mik, Edu y Adri (ejem, sus docentes), según Alejandro Inés

Otro año de cursada finalizó en la FADU. 

Después de haber hecho devoluciones personalizadas a cada uno de los chicos (este año bastante más personales que en otros anteriores), una sensación de alegría y realización personal nos invadió a Micaela, Adriana y yo, uno de los tríos docentes que la cátedra Wolkowicz designó para el año 2006. Alegría porque en el 95% de los casos, los chicos pudieron crecer mucho a nivel gráfico y conceptual: fue un placer realmente nuestro grupo de cursada.

Para festejar, con las chicas nos cruzamos al bar que está en frente de Ciudad Universitaria, y nos quedamos compartiendo unas cervecitas. Como era de esperar, el tema diseño gráfico aflora casi instantáneamente (sobre todo si están sentados 3 diseñadores gráficos en una mesa, y más si son docentes).

Entre tanto parloteo, salió el tema del estilo: lo que nos define como profesionales y nos da cierta consistencia visual/conceptual en los trabajos. Yo le decía a Mik, que un "buen diseñador, es el que puede ponerse todos los trajes sin importar el proyecto a diseñar".

¿Podemos realmente ser esclavos de un estilo?

En lo personal creo que no, si bien hay muchos diseñadores o artistas (y no por eso quiero poner al diseño gráfico como un arte), que por seguir fieles a un estilo no pueden interpretar o llevar adelante muchos otros proyectos. "Un buen diseñador debería poder diseñar una página para una funeraria, como también para una Rave". Morir con el estilo no me parece muy propio de un diseñador, si de un artista. 

Ahora, hay otra cosa que muchas veces desvela a los estudiantes, más cuando se acerca el fin de la carrera: la búsqueda de ese estilo, como si eso fuera a surgir premeditamente, y lo que yo puedo decir como experiencia personal, es que en mi caso fue tan natural, que en tercer año de mi carrera decantó solo, y es el día de hoy que sostengo una forma de trabajar que me identifica, pero no me hace esclavo de ella. Muchas veces choco con eso, mi irremediable tendencia a usar colores muy saturados y contrastados, formas orgánicas y lenguaje gestual e icónico. Es verdad, a medida que pasa el tiempo, uno se acostumbra a su forma de diseñar, y probablemente, a uno lo llamen porque les gusta esa forma particular de trabajar con la imagen.

El estilo nos define, nos da identidad como diseñadores gráficos: pero no tenemos que perder nunca de vista que somos profesionales que aspiramos a comunicar con la imagen, y que en muchos casos seremos felices diseñando acorde a nuestras tendencias y motivaciones propias, pero en muchos otros nos veremos conducidos inevitablemente, a ceder un poco de nuestra parte para satisfacer a nuestro cliente.

Eduardo Cesario La Criatura Creativa

Optimización de sitios web:
desmitificando el tabú

Hace unos cuantos días que vengo pensando en escribir algo sobre la web: tendencias de diseño, optimización de sitios web, buscadores…

En principio este iba a ser un artículo orientado a como es nuestra experiencia en la web ahora, y como era hace unos 10 o 15 años. Pero este punto me llevó a orientar el artículo hacia la parte de SEO (Search Engine Optimization, u Optimización para Motores de Búsqueda), hoy tan de moda.

Actualmente estamos migrando hacía una web orientada a la usabilidad e interacción. Estos dos tópicos son beneficiosos y recomendables, ya que la finalidad primitiva de la web es poder compartir. Si a eso agregamos que los sitios diseñados son accesibles en práctiamente todas las plataformas, navegadores y sistemas operativos, tenemos un sitio útil y funcional.

Estamos mutando a una web mucho más útil y conciente: es por eso que hoy los navegantes se nutren de los sitios, más que navegar por esparcimiento, o este esparcimiento lo encuentran en comunidades interactivas, foros, intercambio de fotos, photologs, portales de noticias, etc. Hace 15 años, no tener un splash en un sitio web era un crimen, y saber flash significaba estar en la cresta de la ola.

Qué pasa hoy: el cliente pide usabildad, accesibilidad y diseño de calidad y escalable.

¿Pero que tiene esto que ver con la optimización para buscadores?

Como primer punto, es conveniente aclarar el alto nivel de ignorancia sobre el tema que hay en el ambiente. No sólo entre potenciales clientes, sino también entre profesionales, algunos que utilizan este argumento para vender servicios de los que no tienen idea, o simplemente aprovechan esto para vanagloriarse de estar en lo último, y mentir para obtener réditos extra (económicos o de otro tipo).

Mi propia experiencia en diseño de sitios me lleva a esta conclusión: no existen garantías algunas de aparecer 1, 2, 10 o 50 en Google o en cualquier otro buscador, sencillamente, porque los motores de búsqueda van optimizando cada vez más sus procedimientos y disciernen cada vez mejor lo que es spam de lo que son sitios utilies y profesionales, y porque los criterios son combinaciones de muchos datos para llegar a una posición en el ranking.

Una vez desmitificado esto, que me parece fundamental, voy a seguir exponiendo el segundo punto: Optimización.

Acá es donde aparecen las herramientas que nadie nombra como potenciales optimizadores de un sitio web, y que para mi son:

  • Diseño simple basado en standards, como por ejemplo, xhtml/css/ajax.
    Simple no significa básico, puede ser un diseño simple, y muy bello.
  • Areas de interactividad con el usuario (que cumplen con el punto anterior): un blog, un foro, etc.
  • Buena calidad de enlaces entrantes (sitios que nos 'linkean'), más que cantidad.

Estos son para mi los preceptos básicos, si bien hay muchos datos más específicos que no entran en el marco de este artículo, y otros tantos generales que por ahí este olvidando ahora.

Pero la estrella de la optimización hoy en día es… ¡EL CONTENIDO!.

Así es: nadie menciona que los contenidos son lo que dan valor a un sitio web. De nada sirve tener el mejor diseño, ultra optimizado, si no hay contenidos de calidad. Me atrevo a decir, que hoy en día es tan, o más importante, que la optimización y el diseño. Y en realidad, no estoy descubriendo nada probablemente: la forma puede ser la más sensual, bella o atractiva, pero si no está respaldada con ideas/contenidos, se cae, es un romance a corto plazo. El costado más técnico revela que los contenidos son lo más importante para los buscadores líderes a la hora de indexar (catalogar e incoporar al índice del motor de búsqueda) las páginas: cuando editamos contenidos de calidad sobre temas que son de consulta habitual, es cuestión de tiempo para que empecemos a tener visitas al sitio gracias a las búsquedas de cibernautas.

Esto trae aparejado, por ejemplo, que un blog que empieza como una diversión, termine siendo un sitio ampliamente visitado y rentable, a medida que genera contenidos de calidad (ya sea por diversión, originalidad, especificidad, etc) ¿Que está por detrás de ese simple blog? probablemente una plataforma del tipo de WordPress, que permite publicar un blog con una visualización propia (como éste que ves ahora), con código válido, rss, y muchos más chiches, tan sólo con descargarlo de la web, subirlo a un hosting, y dar unos cuantos clicks.

¿Y la intro en flash? Nada tiene que ver.

Buscamos eso que nos nutre y nos divierte, emociona, llama la atención, pero el acento va puesto en el contenido de calidad, lo cosmético viene después.

Por Eduardo Cesario La Criatura Creativa

Usabilidad:
reconciliando la forma y la función

Los que trabajamos en Diseño Gráfico, en realidad, en cualquier disciplina que se vincula a lo proyectual (desde Arquitectura hasta Diseño de Imagen y Sonido), nos hemos visto envueltos desde hace años, en el eterno dilema del funcionalismo/racionalismo, opuesto diametralmente al concepto de forma/ornamento/belleza.

A lo largo de unas cuantas décadas ya, ha quedado demostrado que, tanto en Diseño Gráfico, como en cualquier otra actividad, los fundamentalismos sobre una u otra postura, nos llevan a cometer errores inconmensurables, y a enrolarnos en ciertas "tendencias" o "formas de pensamiento", que terminan condicionando nuestro desempeño como profesionales.

En este pequeño artículo, lo que quiero plantear es una revisión de estos aspectos, función y forma, que tan bastardeados han sido durante años, pero esta vez volcándolos a un nuevo enfoque de análisis: la tan de moda usabilidad.

Haciendo una búsqueda rápida a través de Google, encontramos unas cuantas definiciones del término, bastante atractivas y complementarias:

  • Según Jakob Nielsen, autoridad mundial en la materia, la usabilidad se define como un atributo de calidad de una página o sitio web, que determina la facilidad de la interfaz para ser utilizada. La palabra también se refiere a los métodos para mejorar la facilidad de uso durante el proceso de diseño.
  • En el contexto de las aplicaciones informáticas, se refiere al conjunto de características que inciden en la utilización, atendiendo a cualquier contexto o tipo de usuario.
  • Cualidad que tiene un algo de ser usado con facilidad para el fin al que ha sido destinado. Así, una herramienta es muy usable cuando con ella se puede hacer fácilmente el trabajo para el que se fabricó y el usuario no necesita explicaciones sobre cómo usarla.

Revisando estas definiciones, yo podría definir a Usabilidad, como el valor que posee un diseño, plasmado fundamentalmente en la web, que permite su fácil e intuitiva utilización por el usuario/navegante, así como también un amplio soporte de plataformas y navegadores/clientes donde será visualizado. Así, ponemos no sólo en primer plano a la facilidad de utilización, sino también un amplio espectro de tecnologías y sistemas que podrán decodificar sin mayores problemas, y con un criterio muy similar, nuestro diseño.

Ahora, ¿qué tendrá que ver todo esto con el planteo inicial que hice relacionado a forma/función?

La Usabilidad acerca posiciones en ambos extremos: porque justamente lo que hace no es sólo llamar nuestra atención para crear diseños y contenidos 'usables' o útiles, sino que también plantea una importante parte estética en la cuestión, que esta íntimamente relacionada con la faceta intuitiva y amigable de la interface del sitio, que es la que en definitiva va a vincular los contenidos con el usuario.

Aquí es donde radica la diferencia y lo que creo sumamente interesante de este concepto: la simbiosis. La Usabilidad nos propone un puente entre la forma (diseño web) y la función (utilidad y arquitectura de esos contenidos, adaptables a la forma).

Como tecnologías referentes de este paradigma, aparecen:

  • La parte de contenidos o estructural, diseñada en xhtml (con sus diferentes variantes), altamanente estandarizada para que los tags, el formato del documento y los diferentes modificadores sean validados correctamente, eliminando así lo que conocemos por código invalido (siempre y cuando se respeten las especificaciones, claro).
  • La parte visual y de organización espacial/esética, en CCS, Cascade Style Sheets, u hojas de estilos, que no sólo formatean los elementos a nivel estético, sino que también los posicionan en la página.
  • Estas tecnologías separan la presentación visual de la arquitectura de datos del documento.

De esta feliz conciliación entre forma y función, podemos ver hoy en día una web orientada mucho más a los contenidos y su correcta visualización, que a la espectacularidad de la animación de sitios Flash de hace unos 10 años.

Actualmente podemos diseñar un sitio web con cientos de tipo de visualizaciones o 'skins' distintas, sin tocar una sola línea de código html. Basta chequear uno, sino el precursor, de los colectivos pro usabilidad en la web, el CSS Zen Garden , donde el código xhtml,  es "interpretado" por cientos de diseñadores web, con las más distintas influencias y posturas para plasmar el diseño. El código html por un lado (la función, si se me permite la analogía), y la forma (la plantilla CSS con sus imágenes asociadas), por el otro lado.

Dejando de lado los fundamentalismos, y sumando los dos recursos, uno orientado a lo funcional, y el otro a lo estético, podemos darle una carga más sensible a esa función, y lograr del diseño web, algo útil, y porque no, bello y amigable a la vez.

Por Eduardo Cesario La Criatura Creativa