Uno de los últimos proyectos gráficos llevados adelante por el estudio , es el sistema visual y la web de The Music Store , una tienda de música especializada.

Nuestro cliente, Carlos Sterni, recibió con agrado, en primera instancia, el desarrolo de identidad y marca que hicimos para su negocio. Fue ya hace un tiempo que diseñamos la identidad de la firma. En la misma se ve reflejada la frescura, el profesionalismo, y la capacidad de "encontrar el CD que el cliente busca", ideas primordiales a la hora de marcar ventajas competitivas sobre la competencia no directa (las megatiendas como Musimundo y Yenny). Valiéndonos de la estantería como una de las excusas formales para representar a la marca, se expresa la personalización en la búsqueda a medida y la atención al cliente, valores distintivos de The Music Store sobre cualquier casa de música en la Argentina.

El sitio web, por otro lado, está planteado siguiendo las pautas de color, concepto y organización del resto de las piezas corporativas, pero incluye la ventaja esencial que el mismo cliente es capaz de agregar, editar y remover contenidos del mismo, sin necesidad de costos onerosos de mantenimiento mensual. Pudimos insertar un diseño rico y dinámico, en la estructura de un CMS como Silverstripe. En este momento estamos mejorando las opciones "pre programadas" del CMS, para hacerlo aún más personalizado a nuestro cliente, tarea que está siendo llevada adelante por nuestro especialista en Diseño de Sistemas y Programación, Diego Cesario.

La resultante es un sitio que apoya fuertemente la actividad comercial de una tienda que ya cuenta con una fuerte presencia en Mercadolibre de Argentina, pero que necesitaba de un sitio propio para poder establecerse definitivamente en la web.

Eduardo Cesario

Las bases del éxito en ciencia ficción
(con disculpas para W.S. Gilbert)

Para triunfar con límpido brillo en el oficio de la ciencia ficción,
recurre a la jerga de las ciencias (aunque sólo te suene a jerigonza).
Habla del espacio, de galaxias y de falacias teserácticas
en estilo místico y agudo;
el aficionado, aunque no entienda un bledo, te lo exige
con blanda sonrisa de esperanza.

Y el aficionado dirá
mientras tú por tu espacial senda andarás:
si ese joven vuela por toda la galaxia,
qué tipo de hombre tan imaginativo ha de ser ese tipo de hombre.

No hay misterio en el éxito: desempolva tus libros de historia.
Un imperio que otrora fue romano encaja en la estrellada Vía Láctea.
Con hiperespacial impulso surcará los parsecs,
y armarás una trama sin mayor trajín
si espigas las obras de
Edward Gibbon y de Tucídides el griego.

Y el aficionado dirá
mientras tú por tu reflexiva senda andarás:
si ese joven conoce tanta historia,
qué alto ha de ser su alto cociente de inteligencia.

Borra todo pensamiento lujurioso de la mente cavilosa de tu héroe.
Que cultive la política y la argucia y se ciegue a todo lo demás.
Le basta con haber tenido madre, las demás mujeres sólo estorban,
a pesar de sus joyas y sus lustres.
Sólo distraen de sus sueños y le impiden
consagrarse a esa psicohistoria.

Y el aficionado dirá
mientras tú por tu estrecha senda andarás:
si todo es masculino en sus relatos,
qué casto ha de ser ese joven puro y casto.

Isaac Asimov

Un tiempo atrás conocí SilverStripe , a través de una convocatoria que me había hecho Sigurd Magnusson , uno de los Co Fundadores del proyecto.

Al principio me mantuve un tanto reticente a usar SilverStripe, principalmente porque no veía una forma de hacer que el CMS produzca xhtml strict. Obviamente, mi conclusión apresurada fue resultado de la falta de tiempo para inverstigar, sumada a la íntima convicción de que un CMS produciría un sitio prototípico, sin poder diseñarlo a gusto.

Luego de un tiempo, decidimos en el estudio empezar a probarla. Así es que diseñé la interface y look and feel general de un sitio nuevo , y la produjimos en xthml+css, de manera local.

La problemática de integrar SilverStripe giró más en torno al proveedor de host local, que al producto en sí. Una vez que tuve resuelto el sitio de manera general, procedí a integrarlo al CMS. Allí conté con el apoyo de la gente del foro de SilverStripe, que siempre está dispuesta a contestar dudas e inquietudes. El soporte que brindan a través de su sitio es increíble, por tratarse de un producto gratuito.

Con respecto al sitio de nuestro cliente, Never The End , es una empresa local dedicada a producir remeras-tributo a los grandes filmes de la historia del cine. Para ello, la estética mezcla lo antiguo/moderno, en un sitio retro pero con estética actual.

Haciendo una breve síntesis de la implementación de Silverstripe:

Lo positivo:

• Curva de aprendizaje para el uso del CMS rápida.
• Instalación simple.
• Alta personalización del contenido que produce el CMS.
• Permite producir código xhtml strict.
• Soporte en el foro de Silverstripe, casi siempre tienen respuestas a tus dudas.
• Es gratuito!
• Es Open Source!

Lo negativo:

• Si no tenés conocimientos intermedios sobre html, el principio puede ser más costoso.
• Cuidado con tu host! si bien la instalación es simple, resultó engorroso hacerlo correr en mi proveedor de Argentina (elserver.com).
• Los tutoriales, si bien son bastante claros, pueden confundir a veces.

La conclusión es que este CMS, altamente personalizable, es una buena herramienta para generar sitios con código estándar, tiene apoyo de una comunidad bastante solidaria, y sobre todo, es gratuito!

Eduardo Cesario

Retomando el tema, el panorma reinante para el diseño web es increiblemente amplio y accesible. Intentaré en estas líneas hacer un breve recorrido de lo que considero más sobresaliente.

Hoy en día, como decía en la primer parte de este artículo, diseñadores gráficos y web nos acercamos mucho más a la funcionalidad y usabilidad de una web, gracias, en parte, a la popularización del trabajo con estándares, como son el xhtml estricto y las hojas de estilo (cascade style sheets). Uno de los colectivos de conicentización más importantes del mundo en cuanto a este punto, es el CSS Zen Garden . En mi experiencia particular, fue la ventana introductoria a este nuevo, y al principio desafiante, mundo de la usabilidad, pudiendo participar en este proyecto con Organica Creativa .

Acompañando a esta revolución orientada a la funcionalidad y usabilidad, también hubo mucho avance en cuanto a la programación web, y la posibilidad de incluir trozos de código, o mini aplicaciones, en nuestros propios sitios web, sin pagar un centavo, gracias a numerosos proyectos comutiarios del tipo Open Source.

La herramienta de animación por excelencia, Flash (de Macromedia, hoy en día de Adobe) siguió su progreso en cuanto a facilidad de uso y estandarización. Actualmente, su uso es más a conciencia en los sitios web, no como al principio de los 90´s, donde todo era un gran sitio animado. Las interfases integran partes realizadas en flash, para enriquecer la experiencia visual que ofrece esta poderosa herramienta, pero no subordinan el uso y la experiencia de un sitio a ésta.

Todos estos vientos de cambio, auspiciosos en mi criterio, vienen acompañados de una verdadera revolución social-virtual, de la mano de la web 2.0, y los sitios web orientados, cada vez más, a la experiencia social, y al intercambio y disponibilidad de todo tipo de contenidos online.

Todo este relato me lleva a concluir en donde quería focalizarme: ¿Cómo es que se verifican todas estas influencias en los sitios web actuales?

Principalmente, en las numerosas nutrientes que disponemos hoy, para transmitir información y contenidos a través de sitios web de terceros, lo que yo denomino, Descentralización de Contenidos.

Sobre esto hablaré en la próxima entrega.

Eduardo Cesario

Cuando empecé con esto del diseño web, allá por el año 1999, recuerdo bien la situación del diseño. Por aquel entonces, ya lo básico del lenguaje html había sido mostrado, y algunos se aventuraban a usar los, por entonces, poco compatilbes scripts en java para enriquecer la experiencia en los sitios (a mediados de los 90, en realidad).

A fines de dicha década, y con el boom de las .com en Argentina, cualquier empresa lanzaba su sitio web, por demás ambicioso, y con la tecnología en lo que hace a la funcionalidad y accesibilidad, ni por asomo comparable a lo que es hoy.

¿El resultado? muchas compañías invirtieron en una empresa que supusieron pagaría con ganancias muy pronto.

Error.

Sólo sobrevivieron las que realmente estaban dispuestas a soportar un mediano período de inversión a pérdida.

Es por ese tiempo, que el boom del diseño web era diseñar complejas interfases visuales diseñadas con Macromedia (snif) Flash.  Con la tecnología de banda ancha e internet a alta velocidad recien asomando (al menos en nuestro país), la mayoría de usuarios debían tolerar excesivos períodos de ´preload` de una introducción a un sitio web, que ni siquiera sabían si valía la pena navegar.

La paradoja termina siendo que hoy en día, ya entrados los 2000, este modelo de diseño complejo y demandante, ha dado paso a los sitios web centrados en contenidos, en la internet social, y en la usabilidad y accesibilidad al usuario final. Algo más impensado aún, es que el html vuelve con mucho más vigor que por aquel entonces, y la concientización sobre uso de estándares se hace mucho más presente en nuestros días. El javascript es mucho más estable y utilizado ampliamente. Los lenguajes de programación para web (php, ajax, ruby on rails) hacen al diseñador la vida más fácil, ya que podemos utilizar código que se obtiene libremente, para dar vida a nuestros sitios, ¡sin enloquecer!

Así, el escenario para nosotros los diseñadores, ha cambiado radicalmente, para mejor.

Continuará…

Eduardo Cesario

Me escribió Sigurd Magnusson, Chief Marketing Officer de SilverStripe , un atractivo CMS, para pedirme si podían realizar una adaptación de Organica Creativa para su producto.

"Realmente disfruto tu trabajo para  CSS Zen Garden (#188 Organica Creativa) y estaba pensando si nos darías permiso para adaptarlo a una plantilla (template) HTML código abierto, a ser usada con SilverStripe, un CMS código abierto, basado en PHP. Estamos buscando sólo templates de calidad sobresaliente, y el tuyo encaja perfectamente con nuestra busqueda, en mi opinión!"

Así es que tratándose de un proyecto open source, no dudé un segundo en dar el permiso para que el diseño siga expandiéndose por el mundo, nada más gratificante que a la gente le guste mi trabajo.  En breve habrá novedades sobre la adaptación a SilverStripe.

Eduardo Cesario

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.

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:

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.

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:

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.

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:

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

Eduardo Cesario

Hace unos días había anunciado el lanzamiento del sitio dedicado a Organica Creativa .

Si bien eso ocurrió, ahora se puede decir que el sitio es funcional, ya que cuenta con contenidos dobre las diferentes mutaciones que ha sufrido este diseño:

1. La versión original para Dave Shea y su CSS Zen Garden .
2. La versión para WordPress, que es la que actualmente estoy usando en este blog.
3. La adaptación para DirectToWeb, de Ravi Mendis de Apple.

Planeo seguir agregando contenido al sitio, y enriquecerlo cada vez más. Hay un anuncio importante en el site, acerca de la plataforma WordPress, pero no voy a decir nada por acá, asi pasan por la página de Organica Creativa y lo chequean ustedes mismos.

Eduardo Cesario

El trabajo de un diseñador usando CCS y xhtml strict, puede ser muy tedioso, sobre todo a la hora de testear diferentes navegadores. Ni hablemos de la situación actual: Microsoft lanzando un navegador nuevo, el IE7, que implica desinstalar la versión previa de Explorer para poder ser usado.

Mientras hoy estaba dando forma a un nuevo sitio basado en estándares, me agarró la paranoia: ¿y si todo el cuidado que estoy teniendo para que esto se vea bien en Explorer 6 y Mozilla Firefox es en vano?

El motivo de la paranoia es más que válido: siempre que Microsoft actualiza uno de sus productos estrella (en este caso, Internet Explorer), los efectos colaterales de esa actualización suelen ser:

• Incontables fallas de seguridad en el navegador
• Caos total en la forma de mostrar las páginas que funcionaban "maravillosamente bien" en la versión anterior

Pero el motivo de este breve artículo no es hacer leña del browser caído, ni mucho menos.

Dando vueltas por la web, llegué a varios sitios que hacen capturas (screenshoots) de como se ve una dirección web en diferentes navegadores, e incluso, diferentes plataformas. Me he topado con un sitio muy interesante, pero pago, y de ninguna manera pensaba pagar por este servicio.

Finalmente encontré browsershots.org.

Este sitio no sólo es gratuito, sino que muy eficaz: uno tipea la url a testear, y la página encola el pedido, hasta que en un momento devuelve las capturas de  los navegadores en cuestión (17 para Linux, 4 para Windows, 1 para Mac). Uno puede ver los previews de las capturas, hacer click y ampliarlas (a la resolución solicitada, si es que pedimos una en particular) y ver el resultado final.

Como si fuera poco, además de diferentes plataformas y navegadores, browsershoots.org nos permite testear nuestro sitio con los siguientes parámetros:

• Resolución de pantalla
• Javascript
• Macromedia Flash
• Profundidad de Color
• Java
• Plugins Multimedia 

 Muy recomendable, espero les sea de utilidad.

Eduardo Cesario

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:

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.

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.

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.

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