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

Durante mi última visita a Ciudad de Mendoza, noté una drástica merma en la cantidad de visitantes al sitio web del estudio.
Curioso por este fenómeno, le comenté la cuestión a mi amiga y colega Nani .
Lo primero que preguntó, fue si hacía mucho tiempo que no actualizaba el blog.

Dado la cantidad de trabajo que se había presentado en ese tiempo, sumado a la necesidad que siento de escribir cosas que considero útiles (si, maldita autoexigencia), y la inspiración no había acompañado mucho, la respuesta fue un "no".
Particularmente interesante resultó, que, dada la estructura del sitio de CCS actual, el blog se encuentra incluído dentro del sitio principal del estudio.
¡En cuanto actualicé el blog, a la semana, las visitas volvieron a duplicarse!
Lo que voy a decir no es ninguna novedad, pero por las dudas, tomen nota webmasters:

Hoy en día, un feed de un blog actualizado, vale más que muchos urls que podamos generar con la estructura propia de nuestros websites.

• Es accesible desde múltiples sitios web,
  
• es fácil de actualizar y mantener (a excepción de la originalidad y ocurrencia de los contenidos),
  
• y genera urls más ricas, que google indexa casi inmediatamente…

A tener en cuenta este detalle.

Eduardo Cesario

Me pareció atractiva la idea de mostrar el proceso de rediseño de website y logotipo que hicimos para el sitio web Smackpage.com.

El rediseño hizo incapié en la idea del sitio, un lugar donde chatear y divertirse con amigos. El nombre "smack" que remite claramente a una onomatopeya de golpear, disparó la busqueda para el isologotipo, que tiene una reminicencia comic. Luego, el sitio muestra esa "cuidada desprolijidad" en toda su interface.

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

El diseño de webs va evolucionando según pasan los años. Un detalle que particularmente me llama la atención por estos días, es como uno siendo diseñador gráfico, puede empezar a resolver unas cuantas cuestiones, muchas relacionadas con la programación o bases de datos, sin tocar directamente una aplicación destinada a tal fin. Hoy en día, con un buen conocimiento de html, y un basico conocimiento de php, podemos producir webs potenciadas por diferentes tipos de contenidos, buscando aplicaciones o sitios que sirvan contenidos o brinden servicios a tal fin.

Este artículo no pretende ser una guía super completa o un catálogo. Si citar unas cuantas aplicaciones o sitios web, que he utilizado en diseño de varios sitios, y que me han resuelto la parte funcional en gran parte. En al mayoría de los casos, hay que tener una cuenta en los sitios como Flickr o Twitter, en otros casos es probable que si querramos tener mayor control de las situaciones, debamos instalar el software en nuestro servidor, como el caso de Wordpress.

Los elegidos en esta oportunidad son:

Flickr es la comunidad para compartir fotografías más grande del planeta. La registración es gratuita, y uno puede subir sus fotos con pocas limitaciones, o pagar un fee anual de 25 dólares por una suscripción que elimina todos los límites en la cuenta.

Lo interesante, es que se puede categorizar el material en sets (carpetas), por tags (palabras clave) y demás funcionalidades. Luego esas fotografías pueden ser importadas desde otras webs o desde un blog.

Hoy en día existen numerosos scripts que hacen fácil la tarea de incorporar imágenes de flickr en nuestro website. 
Pueden chequear:

• moopix
• Flickr Photo Album for WordPress.

Youtube es un sitio revolucionario, no sólo por poner al alcance de cualquier navegante un potencial de difusión de su propio material, así como la consulta de miles de videos que la misma comunidad cibernauta publica, sino también por constituirse en un método simple y fácil de integrar contenidos en video en nuestro website. No necesitamos potentes servidores, ni preocuparnos por el límite de transferencia de nuestro sitio, ya que todo el trabajo es realizado por los servers de YouTube.

Hacerlo es tan fácil como copiar el código html que el mismo sitio nos provee en nuestra propios documentos o blogs.

WordPress es una aplicación con la cual podemos crear un blog en segundos. Hoy en día, lo que antes era un software de descarga e instalación super rápida, ofrece dos soluciones.

1. Wordpress.org
   La tradicional, es bajar el software, que es gratuito. Hecho esto, subimos el programa a nuestro servidor, y lo configuramos en segundos. Esta opción es la que yo reocmiendo, ya que luego será mucho más flexible la configuración y customizacion del blog desde un host propio.
2. Wordpress.com
   Para los que conocen Blogger o sitios similares, esta es la respuesta que la popular plataforma ofrece: crear un blog remoto, tan sólo suscribiéndose al servicio.

Twitter es un atajo entre un blog y un SMS de un teléfono celular. Esta aplicación web funciona bajo el lema ¨¿que estas haciendo ahora?. Suscribirse es gratis, y lo interesante de este servicio, es que apunta a mantenernos conectados con nuestros compañeros de trabajo, familia, amigos, etc, a través de cortos mensajes de texto plano, que se ingresan mediante la web de twitter, o via celulares, etc.

Particularmente interesane, es que estas actualizaciones o ¨updates¨, están disponibles en formato de un feed RSS. Con este formato, podemos incluirla desde multitud de lugares, entre ellos, y por que no, nuestro website o blog.

Estas son tan sólo unas pocas herramientas que existen hoy en día, en esta famosa web 2.0, y que nos permiten descentralizar los contenidos de nuestro propio sitio web, permitiéndonos no sólo ahorrar espacio de almacenamiento, sino también independizarnos de nuestro servidor, y aprovechar servicios externos para incorporar contenidos vía remota, cuando no estamos con todas las contraseñas encima, o cuando estamos en un viaje y queremos mantener actualizados nuestros sitios. 

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

Hoy en día en el universo de Internet, tener un blog no es novedad para nadie. Si bien hay muchos sitios o proveedores que brindan el servicio de blogs gratuitos, lo más interesante de la experiencia de tener uno, no es sólo poder compartir notas y artículos que me parecen interesantes, sino también hablar con su diseño. Para mi la experiencia de tener un blog es completa cuando más personal es el diseño de la interface de dicho sitio.

Claro está que todo este planeamiento es posible, siempre y cuando contemos con algunos conocimientos para llevar a cabo el diseño de la interfase:

1. Limitaciones Técnicas: es fundamental tener conocimiento en manejo de software para diseño web, tratamiento de imagen y armado de sitios. De esto surge la primer limitación, acaso la más fácil de resolver, que es la parte técnica y de aprendizaje de manejo de herramientas. Yo utilizo para armar un blog: Fireworks, Dreamweaver y algún programa de ftp.
2. Limitaciones Teórico/Conceptuales: a toda la cosmética y funcionalidad, es necesario sostenerla con una buena idea, que a su vez debe ser traducida a una buena idea gráfica. Este tipo de planteo es más teórico y supone conocimientos de diseño gráfico, interfases en la web y navegación

Cabe aclarar que este artículo presupone que el punto 1 está resuelto. Lo que propongo aquí es contarles como abordo el proceso de diseño de un blog, no en cuanto al detalle técnico, sino al proceso y la evolución de la idea, en torno a la plataforma Wordpress.

 1. Elegir la plataforma de publicación.

Elijo Wordpress porque es la mejor plataforma que conozco para llevar adelante un blog con muy poco esfuerzo, y es altamente personalizable. Es gratuito, y la instalación no nos llevará más de 5 minutos, y con conocimientos mínimos.

2. Entender y visualizar la estructura.

Hablando sintéticamente, la estructura de un típico blog de Wordpress está organizada en pocas y autodescriptivas partes:

• HEADER (Encabezado): que se repite en todas las páginas.
• CONTENT (Contenido): generalmente donde se ubicarán los posts. Es la sucesión de los mismos.
• SIDEBAR (Barra lateral): es la barra de navegación que se presenta en la homepage sobre el lado derecho, y que podemos configurar de manera que aparezca en todas las páginas.
• FOOTER (pie): una especie de colofón donde ubicaremos copyright y demás.

Entendiendo a grandes rasgos como se estructura un blog, se puede empezar el plenamiento del diseño con este simpole esquema, teniendo en cuenta que los contenidos (texto, imágenes, videos, etc) estarán "contenidos" en estos bloques. Si propongo un fondo que continúa en varias partes, hay que prestar particular atención a los empalmes del mismo, los colores, etc, para que la experiencia visual sea armónica.

3. Boceto, boceto, y más boceto…

Creo que en mi epitafio van a poner "Muerto bocetando…". Es fundamental para llegar a un buen diseño, plasmarlo antes en papel. Las primeras imágenes mentales aparecen siempre como deslumbrantes en nuestro cerebro, pero es un grave error ir de nuestra imaginación creadora directamente a la computadora. Seguramente el resultado será tosco y desalentador.

4. Dar vida al boceto en fireworks.

El paso siguiente es ubicar dentro del material creado en papel, el que más me guste y sienta que va con mi idea, y la imagen mental que tengo. Con el archivo original a un tamaño representativo de la realidad promedio de navegantes (digamos 1024 x 1024 píxeles), monto en una capa (layer) el boceto, y la bloqueo. Luego trabajo en capas adicionales, cada detalle, desde colores de fondo, texturas, tipografía y bullets.

En primera instancia, llevo el boceto scaneado a Fireworks, y lo "calco" 

A medida que incorporo elementos, voy probando distintas variantes sobre la marcha.

Sigo probando, pero voy agregando elementos reales de la estructura del blog: titulares, posts y sidebar, simulados. 

5. Dejar que el diseño crezca hasta el prototipo final.

Lo más probable es que la imagen mental y el resultado en pantalla difieran. Es bueno poder amalgamar elementos o recursos que provengan de otros bocetos. Muchas veces fluyen conceptos gráficos a través de la serie de dibujos y bocetos que se hicieron.

6. Codificar las hojas de estilo (CSS).

Para cada sección de la estructura que describí en el punto 2, así como para el documento en general, podemos definir tipografía, colores, fondos, espaciados, etc. Ponerme a detallar tags y modificadores de CCS, escapa a la idea de este artículo. Lo importante es entender que cada zonificación del diseño, tanto a grandes rasgos, como en el más mínimo detalle, puede ser personalizado y diseñado mediante Cascade Style Sheets.

7. Grabar, subir, testear.

Mi método se fundamentea en diseñar las hojas de estilo, subirlas al servidor e ir refrescando continuamente la página, al menos en Explorer y Mozilla, para ver "en vivo" los resultados del diseño. Dado que Wordpress reagrupa los "bloques" de la estructura, en principio puede resultar difícil editar cada pedacito de código (el header, content, sidebar y footer son "pedazos" de codigo, que se ensamblan al momento de mostrar el blog). Una técnica que uso es hacer el preview en el browser, y el documento HTML a la carpeta local donde estoy trabajando con el blog. Se puede editar esa hoja de estilos y aplicarla al archivo descargado, para ver el "todo" de la página del blog de forma más organizada.

El proceso de diseño descripto es el que uso habitualmente a la hora de diseñar un blog, aunque en general, puede ser trasladado a unas cuantas piezas más. En este caso particular, las imágenes que ilustran el artículo corresponden al diseño del blog de sobreexpuestos , completamente dedicado a la fotografía.

Espero encuentren este artículo de utilidad, me gustaría escuchar comentarios sobre que les pareció.

Eduardo Cesario