Archive for the 'Casos de Estudio' Category

26 Dic 2007

“Selección Natural” de un Isologotipo:
Evolución del rediseño de identidad para CSW Solutions

Evolución del rediseño de identidad para CSW Solutions">No Comments

"La selección natural fue propuesta por Darwin como medio para explicar la evolución biológica. Esta explicación parte de dos premisas. La primera de ellas afirma que entre los descendientes de un organismo hay una variación aleatoria, no determinista, que es en parte heredable. La segunda premisa sostiene que esta variabilidad puede dar lugar a diferencias de supervivencia y de éxito reproductor, haciendo que algunas características de nueva aparición se puedan extender en la población. La acumulación de estos cambios a lo largo de las generaciones produciría todos los fenómenos evolutivos." (Wikipedia).

Quería escribir algo sobre el rediseño de logotipo que hicimos para CSW Solutions, y entonces me topé con la cantidad de variaciones y "adaptaciones" que sufrió la propuesta original del logotipo que había planteado en un principio.

Es así que tomé las numerosas versiones que fui preparando para mostrar a Ray Comas y Yoel Sommer, dueños de la firma. Cuando puse todas las muestras juntas, vino casi instantáneamente a mi memoria el concepto de "Seleccion Natural".

Selección Natural de un Logotipo

Recordé que Darwin había planteado esta idea para describir el proceso evolutivo en las especies. Y como podrán ver en la imagen superior, resulta un tanto análogo el proceso de creación de una marca:

Se puede ver como se partió de unos cuantos "individuos", principalmente 3 grupos. De esos grupos, al ir descendiendo, se ve como otros han "heredado" caracterísiticas de sus progenitores, siempre hablando en términos de diseño: tipografía, color, forma, configuración morfológica, para ser sintéticos.

A lo largo del proceso de diseño, adentrándonos en la "segunda generación", sobreviven básicamente dos subespecies. El color ha sido una constante (un gen) que se ha mantenido prácticamente inalterable a lo largo de la historia del diseño de la marca. Las formas orgánicas han primado por sobre otras estéticas más racionales, y es así que ya se va perfilando en el proceso evolutivo, la marca que será la identidad de la empresa.

En la tercera generación, vemos solamente los isologotipos que han sobrevivido a la evolución del logo: ya la carga genética ("diseñísitica") es muy clara: el color, tipogafía Futura, los rasgos formales y el concepto.

 La marca definitiva para CSW Solutions

Me pareció particularmente interesante y didáctico, plantear como una analogía el proceso evolutivo de una especie, con el de un isologotipo. Y es que si prestamos atención y se nos permite llevar el proceso de diseño de manera ordenada, sin perder el toque de azar y ocurrencia que representa la creación de una marca, seguramente llegaremos a producir algo original y que preserve las mejores cualidades genéticas de sus ancestros.

Eduardo CesarioEduardo Cesario

20 Dic 2007

Grunge Pop, para el diseño de KiteSpirit.

No Comments

GRUNGE POP! para el proyecto KiteSpirit

El otro día repasaba un poco las cuestiones estéticas y de gráfica a la hora de diseñar. Inevitablemente (y también concientemente) el estilo que me identifica es el de colores saturados, contraste, mucho trabajo vectorial y orgánico sobre las formas.

Parecería que esta tendencia orgánica y saturada, sería irreconciliable con otras corrientes gráficas.

Es así que empecé a diseñar los isologotipos para KiteSpirit , un proyecto que pretende propulsar el Kitesurfing (un deporte relativamente nuevo, que hace convivir el surf, windsurf, wakeboard y demás deportes acuaticos) en el medio local.

Los conceptos o lineamientos generales fueron libertad, aire libre, naturaleza. Basándome en la idea de integridad, equilibrio con el medio ambiente y algunos rasgos de las otras palabras, arribe a un isologo globalizador de la propuesta.

Isologotipo KiteSpirit

A esta forma de diseñar, con formas claras, orgánicas y vectoriales, le faltaba algún aderezo gráfico para hacerlo convivir exactamente con la idea a comunicar, mejor dicho, con la estética que maneja el público surfer: estampados, fondos con texturas, tipografía rota, en síntesis, la famosa onda Grunge, impuesta en los 90's por el reconocido David Carson, en cuanto a lo visual, y un sinfín de bandas de rock (Nirvana, Pearl Jam, Soundgarden, etc).

Pese a que no es una de mis estéticas favoritas, me pareció más que pertinente incluirlo en el plan de diseño, con el fin de poder flexibilizar la propuesta gráfica con dos estéticas que suman desde dos lados completamente distintos.

Es así que decidí combinar los colores brillantes, formas planas y orgánicas, con suciedad, texturas y formas más anárquicas. El resultado: GRUNGE POP!

 KiteSpirit V-SPOT

En principio, dos corrientes gráficas que me parecían completamente incompatibles, han sido puestas en común al servicio de un proyecto que requiere un toque novedoso sobre lo ya creado: si me hubiera limitado a seguir la tendencia existente en el mercado, hubiera decantado en un diseño prototípico, encasillado en lo ya existente.

Lo interesante en todo esto, es empezar a visualizar, que si bien uno no simpatiza con ciertas estéticas (como pasa con la música), eso no inhibe la posibilidad de integrarlas a trabajos que así lo requieran. 

Creemos como estudio que del fruto de la inspiración e investigación, se llegó a una identidad novedosa para este tipo de productos.

Eduardo CesarioLa Criatura Creativa

03 Jun 2007

Rediseño de sitio web para Micromed System

No Comments

Hemos finalizado el rediseño de un website para un nuevo cliente: MicroMED System.

Esta empresa se dedica, desde 1989, al desarrollo y comercialización de implantes e instrumental quirúrgico en la especialidad de Artroscopía y Traumatología, logrando los mas altos niveles de calidad en implantes osteointegrables.

El proceso de diseño 

Para llevar a cabo la tarea, primeramente se hizo un relevamiento del sitio web actual, evaluando las diferentes secciones y apartados, para poder elaborar así un diseño más funcional, y con un alto criterio estético.

Página de Inicio actual de MicroMED System

Como segundo paso, esencial para nosotros en el proceso de diseño, se procedió a bocetar unas ideas simples en papel, para poder así tener una visión general del planteo nuevo de diseño a implementar. A continuación pueden verse los bocetos realizados para la homepage:

Bocetos para la homepage de MicroMED System

Como se menciona anteriormente, es esencial poder replantear el diseño, de manera que este sirva a la comunicación, imagen y objetivos de la empresa. En este caso particular, debimos considerar los siguientes puntos:

  1. Un sitio cuyo público principal, serán profesionales de la medicina, que cuentan con muy poco tiempo para encontrar la información que desean.
  2. Un diseño super funcional, con un alto criterio estético.
  3. Rigurosidad formal, ya que el mercado meta del cliente apunta a un target donde la precisión, exactitud y limpieza son esenciales (medicina y cirugía)
  4. Una alta claridad formal para el planteo de la página y sus contenidos.
  5. Una paleta de colores sólida, pero que no moleste a la lectura rápida y ágil.
  6.  Una línea conceptual y gráfica, basados en la metáfora de "laboratorio".

El tercer paso es la presentación de nuestras propuestas gráficas, aquí hemos hecho un mix entre los bocetos, para darles forma con lo mejor de cada uno. En el caso de la homepage, se han planteado dos variantes, bajo el mismo criterio:

La primera plantea dos navegaciones, una textual, y otra con una botonera en flash, más sugestiva, cuya idea es una segunda forma (no imprescindible) de navegarla de manera más sutil. Para usuarios que no lleguen a usar dicha navegación, se plantea una textual (montada sobre un fondo azul oscuro), donde cada area es claramente enunciada.

Rediseño de Homepage para MicroMED System

A continuación se puede apreciar el 'esqueleto' funcional de la página de inicio, con las porciones de pantalla asignadas a las distintas funcionalidades del sitio:

Areas funcionales de la página

De esta forma, encontramos 3 grandes áreas:

  1. Animada (en color verde): donde se ubican fotos relacionadas con la parte del sitio que se está navengado, y opcionalmente, una navegación intuitiva, sólo basada en los botones rectangulares, que acompaña a la textual.
  2. Navegación textual (en color rojo oscuro): que se incluye como navegación principal, y es la más directa y clara a la hora de buscar los contenidos.
  3. Contenidos (en color naranja): donde se ubican los contenidos textuales, e imágenes a desarrollar, para cada sección.
    Area azul: es un menú de navegación que funciona contextualizado en el sector del sitio en el que uno se encuentra, siempre y cuando sea necesario: por ejemplo, en la homepage, despliega las novedades y el link al catálogo.

La segunda variación de homepage, es similar a la anterior vista, con el único cambio que se elimina la botonera superior (en la parte animada) y se gana espacio arriba, haciendo el sitio más compacto, y dejando la navegación encargada a la parte textual, más clara y directa.

 Rediseño de Homepage para MicroMED System

El concepto del diseño 

Los recursos formales y conceptuales del diseño, han sido insinuados ya en este texto, pero podríamos agregar:

  • Utilización de diagonales, valiéndonos de los triángulos en el logo como inspiradores, generan tensiones y dinámica al sitio, sin quitar precisión, exactitud y prolijidad al diseño, además de connotar esos valores.
  • Paleta de colores potente: azul, naranja, y blanco, manteniendo la linea corporativa de la empresa, pero contrastándolos de forma inteligente para lográr un sitio pregnante y llamativo al ser navegado.
  • Limpieza, cuidado y ajuste: todo ello traducido por el diseño cuidado y el alto detalle a la hora de hacer convivir colores, formas y zonas de navegación.

Para finalizar esta presentación, incluímos, siguiendo esta línea proyectual, la página principal de productos, con el diseño propuesto:

 Rediseño de página de productos para MicroMED System

Rediseño de página de productos para MicroMED System

Pueden visitar el nuevo sitio en la siguiente url: www.micromedsystem.com. 

Eduardo Cesario La Criatura Creativa

29 May 2007

Pictogramas y paletas de color para potenciar la coherencia visual en sistemas gráficos y de señalética.

No Comments

Rememorando definiciones, recuerdo la de sistema como "conjunto de piezas o partes que persiguen un fin común". Además de esa hermosa definición (digna de ser colgada en un cuadro), se que cuento de constantes y variables, para enriquecer y fortalecer la pertenencia de las partes a ese todo. 

Hablando de lo más general para plantear sistemas visuales de baja/mediana complejidad, contamos con cuatro recursos para operar sobre las piezas:

  1. Color
  2. Forma
  3. Tipografía
  4. Imagen

De esta forma, dosificando estos recursos en manera ordenada y tolerante, el receptor asumirá que entre las piezas que diseño hay una coherencia visual que las va a "pegar". Claro que esto tiene que estar apoyado por un concepto o idea que nos de un plus de fuerza comunicacional al trabajo, entonces la cosa empieza a tomar color.

En este ejemplo que traigo, me interesa señalar particularmente como con un buen sistema de colores y pictogramas, uno puede resolver sistemas de baja y mediana complejidad, sin rebuscarse tanto en piezas super complejas que nunca terminan siendo decodificadas por el receptor.

El basamento de mis diseños lo constituye fundamentalmente un buen sistema de pictogramas. No digo íconos, porque estos por lo general son un poco más simples en su resolución formal comparados con los pictogramas.

Sistema de pictogramas y señalética para Megaconsumo

Luego de terminar con una buena síntesis del propio sistema de pictogramas, tengo todo listo para empezar a definir el perfil del resto de las piezas.

Ahora se suma un elemento más, fundamental en el proceso de diseño de quien les habla: el color.

Sistema de pictogramas y color para Megaconsumo

Aquí lo que busco básicamente, es definir tríadas de colores para cada subarea de la empresa, primeramente definida por un color identificatorio, similar en saturación y luminosidad al de las otras.

Utilizando dichos colores, formo tríadas: blanco y negro (que se mantienen constantes) sumados al tercer color del área misma. Esta manera de trabajar, hace que el ojo perciba rápidamente y asocie las diferentes combinaciones, independientemente que el rojo y el verde en principio no se peguen mucho.

La fórmula: pictogramas + color

Llegamos al meollo del asunto. Este artículo pretende plantear una forma de trabajo que he ido perfeccionando a lo largo de los años, y que actualmente utilizo a la hora de plantear sistemas gráficos.

Esta combinanción me permite regular constantes y variables planteadas desde otro punto de vista:

  • Subsistemas de color basados en tríadas, con 2 componentes constantes (blanco y negro) sumados al tinte elegido por área (constante).
  • Sistema de pictogramas usando la misma estética (limpia y redondeada), con variables mínimas en cuanto a sus contenedores.
  • Familia tipográfica constante, en este caso Univers, pero muy flexible, dada la cantidad de variaciones que existen de la misma.

El punto está en la resolución adecuada y pertinente de un buen sistema de pictogramas (o señales), que como pieza gráfica son altamente pregnantes, sumado eso a que también pueden ser utilizados como algo estético y sensible en las piezas.

Afiche de Lámaparas para Megaconsumo

Para finalizar, adjunto una muestra más de piezas utilizadas en este sistema: un cartel de uso interior de los locales. En este caso, la fotografía es encarada con un criterio de macrofotografía, que "encuadra" lo importante del objeto. Nótese que la foto particularmente mantiene su paleta cromática, pero es apoyada por los tintes definidos para dicha área, además del fuerte reconocimiento y fijación que produce el sistema de pictogramas en el sistema.

Aficheta Interior Lámaparas para Megaconsumo

Conclusión 

Queda expuesta de esta forma, el método que uso habitualmente para diseñar sistemas gráficos. La idea es siempre poder enriquecer el material gráfico que a priori el cliente espera obtener de un sistema gráfico de baja o media complejidad. Los pictogramas son elementos fuertes y reconocibles, que aportan solidez a la comunicación visual inmediata con el receptor, que sumados a una paleta cromática adecuada y pregnante, configuran un escenario gráfico apto para producir piezas de alto impacto. 

Eduardo CesarioLa Criatura Creativa

21 May 2007

[f6] Diafragma Loco: Gigantografía para la Escuela de Fotografía Motivarte

2 Comments

[f6] Diafragma Loco, gigantografía para la Escuela de Fotografía Motivarte

El concepto de "Diafragma Loco" surgió cuando Jonas Papier, Director de la Escuela de Fotografía Motivarte, me solicitó un diseño para una gigantografía en vía pública.

Por supuesto que Jonas no se referió al futuro cartel con tan peculiar nombre, pero aportó algunos lineamientos generales para su realización: el concepto de impacto visual (pregnancia como le llamamos nosotros los diseñadores gráficos) y el juego con el color a raíz de la fama que ya tienen en la Escuela las paletas cromáticas que utilizo. Descartamos el uso de elementos fotográficos para generar así una lectura más inmediata en los eventuales receptores, además que nos pareció más adecuado ya que el cartel estará ubicado en altura.

De todo este intercambio de ideas, nace "f loco": usé el isologotipo de la escuela para generar por detrás, varias estructuras radiales que fugan hacia éste. Luego intervine varios círculos usando la excusa de la letra f (notación utilizada en fotografía para expresar la apertura de diafragma, es decir, la cantidad de luz que pasa en la toma), para de esta forma permitirme generar texturas mediante la partición de los planos circulares, aportando así un dinamismo mayor, potenciado por las estructuras mencionadas anteriormente.

El golpe de gracia fue la paleta cromática, innata en mi forma de diseñar, con colores muy saturados y contrastados, valiéndome de complementarios y opuestos para unir o separar planos, y dar así una sensación de mayor espacialidad.

Luego de las polémicas y debates surgidos por este diseño, me alegra mucho el haber creado una pieza muy dinámica, pregnante, divertida y moderna, según Jonas "artística", que refleja el espíritu de la Escuela de Fotografía Motivarte, y me da la oportunidad de expresar mi estilo libremente.

Eduardo CesarioLa Criatura Creativa

31 Dic 2006

2006: un año prolífico de diseño creativo, y bajo estándares

No Comments

Un año prácticamente ha pasado desde que redefiní la estructura de mi emprendimiento, La Criatura Creativa (sitio personal que había creado en el 2001) a CCS Criatura Creativa Studio , un proyecto mucho más ambicioso en el cual tengo el orgullo de contar con un equipo de gente que potencia cada diseño y producto que llevamos adelante.

Estos meses transcurridos han dado frutos en muchos aspectos: una gran producción de diseños creativos y usables, proyectos para empresas del extranjero (incluyendo uno para Apple), nominaciones en webs de diseño, y reconocimientos de Organica Creativa en un libro de diseño web.

A manera de cierre del año, me pareció interesante mostrar un compendio con los mejores diseños que pudimos concretar en el 2006.

Fundación CEDEMIL [Argentina]

Fundación Cedemil

Sitio para la Fundación CEDEMIL, encargada de darle empleo a personas con discapacidad.

Interdisziplinäre Vorlesungsreihe Tierrechte [Alemania]

ILAR | Interdisciplinary Lectures On Animal Rights

Proyecto para la Ruprecht-Karls-Universität Heidelberg, con motivo de unas jornadas para la concientización sobre los derechos de los animales.

SNH Translations [EEUU /Argentina]

SNH Translation Services

Este sitio fue desarrollado junto a la imagen corporativa de la empresa, para lograr una imagen altamente profesional, amena y experimentada.

Expan Tours Argentina [Argentina]

EXPAN Tours Argentina

Sitio para la agencia de Tursimo representante oficial de Swiss Airlines en Argentina.

Sociedad Latinoamericana de Hombro y Codo [Latinoamérica]

SLAHOC | Sociedad Latinoamericana de Hombro y Codo

Esta comunidad de profesionales de la medicina necesitaba una imagen limpia y precisa. Diseñamos la marca y el sitio web para el proyecto del Dr. Daniel Moya.

ThingFling [EEUU]

ThingFling.com

Un sitio de ventas de productos, que requirió una imagen tipo Austin Powers, y una alta versatilidad y usabildad en su planteo.

BLAST Fireworks [Canada]

Blast Fireworks

Más que un rediseño, un nuevo diseño, en el que solo conservamos el logotipo, para llegar a un resultado altamente profesional.

Megaconsumo [Argentina]

Megaconsumo

Futuro sitio de ventas online de productos eléctricos y para el hogar. Un impacto visual producido por la riqueza en los íconos y la cromaticidad de los mismos.

Organica Creativa para DirectToWeb [EEUU]

Organica Creativa for Direct2Web

La versión de Organica Creativa diseñada especialmente para DirectToWeb, una interface pensada para interactuar con ITunes. Este diseño fue creado para Ravi Mendis, desarrollador de Apple.

Como cierre a esta suerte de inventario del año, quiero particularmente hacer notar la versatilidad que tiene diseñar con Cascade Style Sheets y XHTML Strict: si bien puede parecer algo desafiante e imposible de lograr, los ejemplos que expuse arriba demuestran lo contrario.

Es particularmente notable la diversidad de estéticas y layouts conseguidos usando esta tecnología, donde priman tanto el concepto en el diseño, como un nivel muy profesional en la resolución de cada proyecto.

Un muy feliz 2007 para todos.

Eduardo CesarioLa Criatura Creativa

02 Dic 2006

Rediseño para BLAST! Fireworks

No Comments

Se nos ha contactado para el rediseño, en principio, de la homepage de un sitio para una empresa de fuegos artificales de Canadá, llamada Blast! Fireworks. 

A partir de la solicitud del Señor Tom Jacobs, dueño de esta empresa, fue que partimos a bocetar unas propuestas básicas, pero que revitalicen sustancialmente el sitio, que hasta el momento carecía de una estética potente, llamativa y "explosiva" propia de los fuegos de artificio.

Bocetos para BLAST!

  A continuación puede verse una captura de la homepage actual del sitio, sin rediseñar:

Sitio actual de blast.ca

A raíz de los bocetos vistos arriba, fue que se comenzó a gestar la nueva estética: el logo, que en si no presentaba graves problemas formales, fue utilizado de una forma más impactante (aumentamos un poco el tamaño relativo al sitio), y el diseño en sí, se pautó siempre pensando en la usabilidad y funcionalidad:

  • Sumamente editable
    La mayoría de los contenidos en la página son actualizables fácilmente, ya que son texto en html.
  • Tecnología XHTML/CSS
    Codigo 100% válido y funcional.
  • Alto criterio estético, que completa el esquema de funcionalidad planteado anteriormente.

Rediseño de blast! por Criatura Creativa Studio

Este proyecto, fue realizado en un plazo de 2 semanas, con un constante y ameno trato via email con Tom, nuestro cliente. Es interesante plantearlo como un caso modelo, a la hora de evaluar el proceso de diseño, la fluída comunicación (a pesar de haber sido totalmente realizada por email), y la satisfacción del comitente con el producto terminado, a tal punto de solicitarnos un ante-proyecto para rediseñar el sitio completo.

También es vital en cualquier actividad vinculada al diseño gráfico, que el cliente sea capaz de delegar en el profesional su requerimiento, confiar en el diseñador, y otorgar ciertas licencias y libertades a la hora del planteo visual y conceptual del trabajo, para que uno se sienta realmente valorado y orgulloso frente al trabajo final, como lo ha sido en este caso.

Eduardo Cesario La Criatura Creativa

CCS | BlogOrganica CreativaCCS | Criatura Creativa Studio