Llegué a esta conlcusión observando mi guitarra, una Fender Telecaster que me ha acompañado por más de 12 años. Tiene las marcas del uso constante, golpes, rayones, cicatrices que ha ido ganando en los ajetreos de ensayos y escenarios. Me gusta como se ve una vieja guitarra y me llama la atención, que siendo un instrumento de presición, con el paso del tiempo sigan funcionando tan bien.

El desgaste por el uso lo sufren todas las cosas que usamos, pero sólo las mejor diseñadas adquieren con el tiempo, la personalidad que les da el hecho de ser altamente utilizados.

Comparto una serie de caracteristicas con las que a mi parecer, cuenta el diseño de un objeto con un elegante proceso de desgaste.

• Sus materiales son de calidad y su deterioro no afecta su funcionamiento
• Está pensado de tal manera que su dueño puede conocerlo y mantenerlo en correcto funcionamiento sin depender de especialistas.
• El sistema que lo hace funcionar es transparente y fácil de comprender
• Las piezas o partes que lo componen son reducidas
• Tiene un objetivo claro, cumple una función determinada y concreta
• Hasta los mas mínimos detalles cumplen una función relevante
• Es fácil de entender, es usable y no plantea interrogantes

Hice un análisis hace ya un tiempo, a un tema relacionado con la simplicidad en el diseño, llamado paradigma básico. El principal ejemplo en dicho escrito es la juguera Osterizer, que a mi juicio también es un ícono de un buen diseño que tiene un desgaste elegante.

Seguí el vínculo y me encuentro con un post titulado “urban street alapon ” con fecha 12 de abril, desde el cual vinculan a Ciclismo Urbano con la palabra “ide” (!?) y oh, sorpresa, los headers de ambos sitios comparten una sorprendente cantidad de características.

A vuelo de pájaro:

• Los colores son similares
• Los edificios se abren dejando espacio al logo
• Hay una gran nube de fondo
• Hay árboles y siluetas de edificios en la parte posterior
• Hay rayos de luz que emergen desde la zona central inferior

hzsé.blog, es un sitio al parecer también relacionado con la bicicleta, pero ubicado en Hungría. Deduzco que como son ellos los que referencian a Ciclismo Urbano, lo están apuntando como “copión”. Desconozco completamente el húngaro, por lo tanto, puedo también estar completamente equivocado.

Asumiendo que se sindica a Ciclismo Urbano y por ende a su diseñador, como copión, no me queda mas que publicar el proceso de diseño que llevé a cabo para dar con la solución que hoy está en línea. Además, el sólo hecho de ver ambos resultados, ha provocado que mi piel se erizara ante tan contundente desfile de similitudes. ¿Hay una mente colectiva?, ¿mi idea infantil que todos tenemos un clon en alguna parte del mundo resulta real?

Insisto, asumiendo que podría ser yo el copión y sabiendo que por mi parte no hay copia alguna, sólo me queda creer que dos personas en el mundo desarrollaron gráficamente una misma idea por mera coincidencia.

El proceso de diseño

A grandes razgos:

Primero partí diseñando la identidad del sitio, basado en la sobrecarga de elementos propuesta por el Art Decó, época en la que se crearon muchas marcas relacionadas con la bicicleta.

Una vez resuelta la identidad inicié el proceso de diseño de la interfaz gráfica (ya habiendo pasado por el Wireframe respectivo). Me demoré un tiempo en definirla y debo reconocer que anduve dándome vueltas y vueltas antes de quedar conforme con la solución definitiva.

Primero pensaba que la solución podría haber estado dada por la utilización de una imagen en el cabezal que sugiriera el contacto de la bicicleta con el asfalto de la ciudad.

Después quise ser menos evidente y trabajar en base a un diseño mas ilustrativo y abstracto, evitando el uso de fotografías. Al mismo tiempo estaba probando distintas alternativas de color.

Hizo su aparición el halo con los rayos tras el logo, cosa que ya había sido utilizada en el diseño de Arriba ‘e la Chancha que data del año 2003 si mal no recuerdo. Posteriormente, inspirado en una ilustración de César Moreno, un tremendo ilustrador mexicano, coloqué los edificios para contextualizar que el sitio trata del uso de la bicicleta como medio de transporte urbano.

Luego esa idea quedó de lado por un rato y pensé en incorporar algún fondo que reforzara el slogan de la marca “caminando en el aire”. El cielo me pareció una buena alternativa y coloqué unas nubes. Al rato dije, no, los cielos de la ciudad no son así y los contenidos del sitio son prácticos, no debo idealizar la ciudad.

Tenía pensado tirar todo lo que había hecho e iniciar algo completamente nuevo, desde cero. Por otro lado, no podía darme el lujo de perder el trabajo que ya había hecho. Debía darle una segunda oportunidad. La presencia de los edificios como un perfil de la ciudad era buena, pero en la primera alternativa podían ser demasiado protagonistas. Fue entonces que nació la línea sutil de la ciudad, un contorno de techos y edificios mezclados con algunas siluetas de árboles para darle algo de vida a la cosa.

Mezclando todos los pasos anteriores fue que finalmente el diseño del cabezal vio la luz. Junté los edificios grandes (con fotos obtenidas por mi en Santiago de Chile), la nube grande, el halo de rayos, y la línea de árboles y siluetas de edificios. Al fin podía respirar y dedicarme a los toques finales de la diagramación y resto de los elementos gráficos del sitio.

El blog fue lanzado el domingo 17 de febrero de 2008.

Me doy el tiempo de hacer esto porque estoy realmente soprendido de la cantidad de elementos en común que comparten estas respuestas de diseño. Y si, también me cuesta bastante sentirme indicado como copión, aunque sea un sitio húngaro.

Puedes bajar los pngs correspondientes al proceso de diseño descrito aquí. No son diseños finales, todos corresponden a las distintas etapas del proceso aquí descrito. (15 megas aproximadamente en formato Zip)

Todo el trabajo fue desarrollado con Adobe Fireworks.

No puedes diseñar sin tipografía. De todas formas puedes utilizar sólo tipografías para lograr diseños que le quiten el aliento al receptor.

Rezan así las primeras líneas de su texto.

Por otra parte, Veerle Pieters, una diseñadora con base en Bélgica que tiene un excelente blog de diseño, hace un par de semanas organizó un concurso para sus lectores. Se trataba de diseñar un poster que diera respuesta a una simple pregunta ¿Que es el diseño gráfico?. Tituló la anotación donde expuso los resultados como “Mis lectores son tremendamente creativos” manifestando que estaba muy sorprendida por los trabajos enviados.

En el artículo de Smashing Magazine pude reconocer varios de los trabajos del concurso de Veerle. Me sorpendió tambien reconocer que el ganador del concurso era de Asunción, Paraguay, Juanma Teixidó. Latinoamérica tenía ganado un espacio donde por lo general brillan diseños europeos asíaticos y norteamericanos.

Comencé a revisar el resto de los trabajos expuestos en Smashing Magazine en busca de otros talentos lationamericanos. No me sorprendió ver a alguien de Brasil, cuyos diseños siempre destacan por su potencia. 5 diseños sacaban la cara por Argentina, siempre presente, aunque no en tan importante cantidad.

Automáticamente me pregunté, ¿qué pasa con Chile?. Ausente.

Se ha hablado siempre del diseño chileno, que donde está, su identidad y un largo etcétera. Mi parecer es que estamos ausentes, ¿ocultos?, sin destacar.

Actualmente existen publicaciones chilenas que algo nos cuentan de esta actividad en el país. Sería injusto no reconocer a los diseñadores de tipografías del colectivo Tipografía.cl que constantemente están participando u organizando eventos donde es posible compartir y acceder a información enriquecedora (¿Recuerdas el proyecto DEMO?). O a Juan Pablo de Gregorio y su blog Letritas donde escribe sobre tipografía y diseño gráfico. Color Magenta, una vitrina de diseño, como ellos describen. O Digilicious donde 10 diseñadores buscan enseñar y aprender de quienes los visitan.

Son importantes aportes que permiten reconocer lo que sucede en el país, pero aún así siento que hace falta mas instancias que permitan ver, olfatear y tocar lo referente al diseño local. Instancias que permitan compartir conocimientos, diseñadores que estén contandole a los demás sus métodos, visiones, ideas.

¿Cual es tu recomendación? ¿Sientes que el diseño en chile está como perdido, oculto o tímidamente presente?

El domingo pasado fue lanzado el rediseño del sitio Ciclismo Urbano, un blog orientado a entregar consejos trucos y técnicas para que los usuarios de la bicicleta puedan desarrollar con comodidad y seguridad sus desplazamientos en bicicleta por la ciudad.

Este proyecto lo inicié el 29 de enero del año 2006, mientras me encontraba recorriendo latinoamerica. La ciudad de Granada en Nicaragua fue el lugar de inspiración. Sentía que el mensaje que estabamos distribuyendo a través de Arriba ‘e la Chancha debía llegar mas lejos y que el ciclismo en la ciudad no tenía fronteras.

Este proceso de rediseño también fué el tema de mi proyecto de título (diseño en comunicación visual), el que entregaré en Marzo. Estoy bastante contento y satisfecho con el trabajo y espero que Ciclismo Urbano siga creciendo como medio enmarcado en un positivo ambiente como lo ha hecho hasta ahora.

Uno de mis orgullos es que fue reconocido en CSS Based, y en la galería CSS de Urban Trash. Ambos sitios destacan los buenos diseños web construidos con HTML/CSS prosupuesto.

Parte del crecimiento en esta nueva etapa es el hecho de contar con colaboradores de ojalá todo el mundo de habla hispana, por lo que estamos en búsqueda de escritores, ciclistas con al menos dos años de experiencia en el uso de la bicicleta como medio de transporte urbano. Si estás interesado escríbeme a autor(arroba)ciclismourbano.info

Actualización: Estoy Feliz, me acaban de avisar que Ciclismo Urbano también fue expuesto en Best Web Gallery, CSS Manía, CSS Nature, Blogsessive, Old Black Gallery, Smashing Magazine, We love Wordpress, Lee Munroe, Vandelay Design, ¡Gracias!

• Ver Demo
• Bajar Origo CSS

Origo (origen, en latín) está basado en grillas. La clave está en las filas y columnas. Las columnas permiten ordenar elementos de forma horizonal. Las filas por su lado, permiten definir bloques de información en el eje vertical conteniendo grupos de columnas.

La unidad mínima de la grilla es de 60px y el ancho de cada columna es determinado por la cantidad de unidades utilizada. Por ejemplo, si quieres que una columna que ocupe 4 unidades de grilla, es cosa de aplicarle la clase “cuatro” y con eso automáticamente tomará una medida de 300px de ancho (cuatro unidades de columna equivalentes a 240px, más 60px de espacio entre ellas).

Todo el sistema trabaja basado en al suma de clases al elemento <div>. Una fila entonces contendrá cuatro columnas, cada una con la clase “cuatro” (cosa que mida 300px de ancho cada una). Como la última columna no requiere distanciarse de nadie a su derecha, se le asignará la clase “última” para que quede perfectamente alineada al borde derecho de la caja contenedora. Para mas claridad expongo el siguiente ejemplo:

<div class="fila">
 <div class="columna cuatro">
  <p>Algo de texto...</p>
 </div>
 <div class="columna cuatro">
  <p>Algo de texto...</p>
 </div>
 <div class="columna cuatro">
  <p>Algo de texto...</p>
 </div>
 <div class="columna cuatro ultima">
  <p>Algo de texto...</p>
 </div>
</div>

En total son 12 unidades que utilizan un área de 940px (12 x 60px=720px más 220px de espacio entre ellas). Al ser 12 un múltiplo de 4 y 3, permite varias combinaciones de columnas.

Origo utiliza como pieza fundamental el CSS Reset (que está en el archivo neutra.css) creado por Eric Meyer, que permite eliminar los valores de despliegue por defecto que tienen los distintos browsers a fin de evitar una buena cantidad de inconsistencias. Además te “obliga” a definir el modo de despliegue de todos los elementos html.

Lo probé en Opera, Firefox, IE 5.5+ bajo windows. Además obtuve impresiones de pantalla mediante el servicio BrowserShots y los resultados obtenidos fueron muy satisfactorios ya que no presentaron colapsos de estructura en ningún sistema operativo ni browser moderno.

Te invito a estudiar Origo CSS y si tienes aportes que permitan ejecutar mejoras, déjalos en los comentarios .

Bajar Origo CSS.