¿Es usted un artesano?

En algún momento de el año pasado se cumplió oficialmente mi primera década como –la verdad es que no se bien cómo definirlo, ¿web designer? ¿web developer…?– persona que se dedica a hacer web profesionalmente. Y por alguna razón me he puesto muy reflexivo e introspectivo respecto a la profesión, al medio, y a lo que significa hacer lo que hacemos diariamente.

Hoy me encontré con este artículo: Seven principles of rich web applications, escrito por Guillermo Rauch que en partes iguales me voló la cabeza y me confirmó algunas conclusiones a las que había llegado por mi cuenta y enseñaba en mis charlas.

El stack de aplicación y la cantidad de tecnologías involucradas en hacer un sitio (o aplicación) web hoy en día requiere de una cantidad de habilidades interdependientes que van creciendo cada día en complejidad. Antes era un tema controvertido el que si los diseñadores deberían ser capaces de implementar sus diseños en código, hoy me parece un tema tan absurdo como que si los carpinteros deberían saber cortar madera.

Al igual que un buen artesano conoce su producto de pe a pa, desde la selección de ingredientes hasta la manufactura, producción y distribución de los bienes que produce, el desarrollador web moderno posee las habilidades necesarias y puede crear productos completos si hace falta. Es un artesano.

Es mi opinión que esos diseñadores que solo saben pasarle los PSDs que hizo a alguien mas para que los rebane y los maquete, junto con otros especialistas, pronto no tendrán lugar en la industria. Repito, es mi opinión, pero mi intención no es convencer a los especialistas actuales que tienen buen trabajo y ganan bien. Bien por ustedes.

La razón por la que comparto esta opinión es para las siguientes generaciones que no están siendo preparadas para el mundo hiper-competitívo que es la escena tech de hoy en día. Lo siento, lo más probable es que su licenciatura en comunicación gráfica y su maestría en diseño de interacción no les vaya a servir de mucho.

Sean generalistas, sean artesanos.

Cajas de cereal

Desde antes que me dedicara profesionalmente (es decir, que alguien me pagara) a esto de diseñar cosas, yo ya estaba fascinado con el mundo del package design. En la universidad fue una de mis materias favoritas y probablemente para la única que hacía las tareas con gusto. Me encantan los empaques y me obsesionan las cajas, los suajes y las texturas del cartón. Aun así, estoy seguro que no soy el más raro de entre los diseñadores.

Uno de los grandes desafíos del packaging design es la necesidad de hacer un acto de balanceo entre dos requerimientos contrarios: por un lado hay que conservar una cierta familiaridad con el resto de productos en la misma categoría y por el otro hay que ser únicos y destacar entre los productos similares. En ninguna otra categoría m eparece éste acto de balanceo mas evidente que en el diseño de las cajas de cereal.

No soy un experto en la industria, ni siquiera un entusiasta de los cereales (para un servidor los cereales son postres, no desayunos. Los desayunos llevan tocino), pero creo que es seguro decir que la innovación en el mundo de los cereales es prácticamente nula. ¿Cómo pueden entonces diferenciarse los productos unos de otros cuando todos están compitiendo por atención en el estante del supermercado? ¡Pues con empaques más y más llamativos!

cereales

Esta mentalidad de competir en un estante por la atención del cliente se aplica también a otras industrias –Las portadas de los magazines o de los libros me vienen a la mente como otros ejemplos. Y parece ser que durante años la industria web ha seguido detrás de esta misma mentalidad. La labor del diseñador web se ha definido como la de quien viste las páginas de colores vistosos y las hace únicas y destacables para competir en un estante virtual.

Pero tal estante no existe. Lo que convierte a prospectos en clientes no es lo bonito o lo flashy del diseño de tu sitio sino una cantidad de otras cosas que rebasan el alcance de este post.

Los diseñadores debemos dejar de preocuparse menos y menos por los aspectos gráficos y más por diseñar experiencias, lo cual no se logra siendo el que viene al final del proceso a aplicar una capa de pintura sino por estar involucrado en cada fase del proceso de creación de un producto.

TL;DR: Nosotros diseñamos experiencias, no cajas de cereal.

Color picker en HTML5

Hace poco necesitaba urgentemente un color-picker para un proyecto interno en Onswipe. Estuve a la caza de una implementación que fuera simple y flexible, pero todas las opciones que encontré eran demasiado complejas y pesadas1.

Al final me rendí y terminé diseñando y escribiendo mi propio componente.

color-picker2

Bueno, el caso es que acabo de darme cuenta de que versiones recientes de Chrome incluyen soporte nativo para el control de HTML5 <input type="color"> y me gusta mucho su implementación. Si están en la versión mas reciente de Chrome, pueden verlo en acción aqui abajo.

Solo lo he usado en MacOSX, donde no solo tiene el control una apariencia nativa, sino que utiliza el dialogo nativo del OS. Como es de esperarse, cuando el usuario selecciona un color este se propaga al atributo value del elemento <input>.

osx-picker

Hasta donde recuerdo, Windows no tiene un color-picker nativo, así que no tengo idea como funcioné. Si alguien sabe, comparta un pantallazo.

Hasta ahora es muy limitada la disponibilidad de implementaciones, pero si quieres puedes empezar a usar este control desde hoy para los usuarios que lo soporten y dejar que un polyfill se encargue de los demás pobres imberbes.





  1. El proyecto en cuestión está escrito en Ember.js, que no es precisamente amigable con componentes de terceros. Además que hubiera tenido que hacer muchos hacks para hacerlo compatible con el data-binding de Ember. 



Google, rediseñado.

googleredesign_912_2

Por muchos años fue Apple la compañía que era reconocida por la importancia que le daban al buen diseño mientras que Google se posicionaba como su antítesis. Bien, pues parece ser que esa era se ha terminado.

The Verge tiene un excelente artículo sobre la transformación del diseño de Google en los últimos años y me parece loable el esfuerzo que la compañía –antes famosa por darle más importancia a la eficiencia de los datos que al buen diseño– está poniendo en tener un lenguaje de diseño propio y coherente en sus múltiples productos.


Cada diseñador con quien hablamos en Google repitió variaciones del mismo mensaje: “No hay una persona que sea el gran lider de diseño en Google” […]
Google puede no tener un Jony Ive, pero hay sin embargo un proceso coherente para plantear una visión de diseño a través de todos estos multiples equipos y plataformas.

Creo que es un gran momento para ser un buen diseñador.

Sobre usar @font-face en lugar de gráficas para diseñar interfaces

No se si fué el primero que tuvo la idea, pero fue Drew Wilson y su Pictos Font los que me abrieron los ojos a la posibilidad de usar una fuente tipográfica especial en combinación con la propiedad @font-face de CSS3 en lugar de imágenes para representar íconos.

Ahora que la técnica se ha vuelto más y más popular me da gusto decir que fuí un early adopter y que la vengo usando desde hace más de un año en la plataforma de publicidad que escribí en Onswipe. Aunque en su momento fue una decisión arriesgada, el riesgo terminó valiendo mucho la pena.

¿Han escuchado de ese aparatillo que Apple está liberando por estos días? Boom. ¿Vieron la resolución de esa pantalla? Ahora mismo los diseñadores (bueno, los responsables) del mundo estan trabajando horas extra creando gráficos de doble resolución para que sus sitios no se vean del nabo en el nuevo iPad. Y los sys admins están sufriendo calculando cuánto más ancho de banda van a gastar sirviendo estás gráficas de alta resolución.

Pero no es mi caso, ni el de ningún diseñador que haya tenido la visión de utilizar @font-face en lugar de gráficas para sus íconos por que resulta que las fuentes son vectoriales y por lo tanto infinitamente escalables. Así que mientras ellos trabajan extra yo al fin tengo tiempo para escribir un post.

Esta técnica, obviamente, no es para todos. A los pixel control freaks o a los semantic nazis seguro les produce urticaria tan solo el pensamiento de usar fuentes en lugar de gráficas. Para el resto de diseñadores inteligentes les dejo unos enlaces útiles:

  • Pictos font server es una versión hospedada y sobre demanda del Pictos font.
  • Steedicons tiene una estética de hecho a mano
  • Iconic es un set open source de íconos. Muy bonitos.
  • Glyphish Otro oldie. Originalmente es para apps de iOS, pero se ven bien en web.

Codekit : Sass, Less, Coffeescript. La herramienta perfecta para el diseñador web moderno.

Hay dos herramientas que no tenía en mi utility belt hace apenas dos años y que ahora me parecen absolutamente indispensables: Sass y CoffeeScript. La primera para hacer más simple el desarrollo de CSS para grandes proyectos y la segunda para hacer JavaScript mas disfrutable.

Desde que las descubrí me he dedicado a pregonar de sus bondades a cuanto desarrollador esté dispuesto a escucharme (a menos que el pobre esté en un proyecto bajo mi cargo, en cuyo caso no tiene opción) y los más reticentes han sido hasta ahora los diseñadores. La verdad es que los diseñadores no se sienten tan comodos frente a la línea de comando

Aquí es donde entra Codekit. Un programa para MacOsX con una agradable interfaz de usuario que integra Sass, Less, Stylus y CofeeScript en una sola aplicación.

La aplicación es gratuita mientras se encuentra en fase beta y luego podrá ser adquirida por $10 en la Mac AppStore. Parece ser que vale la pena probarla.

You don’t know what design is

For the fine gentleman who wrote this pearl: You, my friend, you don’t know what design is.




People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.



— Steve Jobs as quoted in The Guts of a New Machine (30 November 2003)


Don’t take it from me. I think this Steve guy knew something about creating value.

WordPress 3.3 ¿Metro?

Tipografías grandes y delgaditas. ¿Donde he visto algo así?

He estado actualizando como loco mis blogs (públicos y de prueba) a la nueva y mas reciente versión de WordPress y no puedo dejar de pensar lo mucho que la nueva interfaz me recuerda a Metro de Microsoft.

Por cierto que Metro me gusta mucho, cuesta creer que algo tan bien diseñado venga de Redmond.

He visto “El Futuro” y es en Tabasco


¿Recuerdan al Mexico Web 2.0, ese evento del 2008 que inició una revolución tecnológica en México cuyos efectos aun se sienten? Bien, pues estoy seguro que El Futuro 2010 es un digno heredero.

El Futuro 2010 es un evento organizado por CITI Tabasco y mi amigo José Salomón (organizador de MW2) que se celebrará la próxima semana en la ciudad de Villahermosa Tabasco.

Su servidor estará por allá dando una plática sobre diseño de experiencia de usuario, obviamente siendo el punto débil en un otrora brillante grupo de ponentes .

Las inscripciones están abiertas y tú, si tú, tienes que estar presente o algún dia te vas a arrepentir.

Algún día.

HTML5 para principiantes – presentando Duperconf

Les presento Duperconf, mi más reciente proyecto. Se trata de un sitio bajo el cual vamos a ofrecer conferencias-talleres en línea de alta calidad y especialmente dirigidos a desarrolladores web.

Sitio de Duperconf - HTML5 para principiantes
La primera conferencia HTML5 para principiantes será impartida el próximo lunes 22 de febrero. Se trata una conferencia-taller de hora y media completamente gratuita (pero con cupo limitado) y completamente en la nube.

Hice un soft-launch el fin de semana solamente en Twitter y la recepción ha sido impresionante: más de 50 registrados. Originalmente había limitado el cupo a 40 personas, pero acabo de abrir 40 lugares más.

Ya tengo programadas otras conferencias sobre temas más avanzados como CSS3, Cómo diseñar temas para WordPress, SEO, jQuery, Desarrollo web para iPhone, etc.

Si tienen dudas o comentarios, o si quieren ser patrocinadores de alguna conferencia, o si quieren impartir una conferencia en un futuro, pueden usar esta forma de contacto y decirme lo que quieran.