Archive for the 'Sitios web' Category

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

CCS | BlogOrganica CreativaCCS | Criatura Creativa Studio