La que se avecina en diseño—SmashingConf 2016 (Barcelona)

La semana pasada tuve la oportunidad de asistir como oyente a la SmashingConf 2016 en Barcelona. Durante dos días pude escuchar a grandes ponentes especialistas en el mundo del diseño gráfico y aprendí un montón de cosas nuevas. ¿Quieres saber de qué hablamos y todo lo que aprendí? ¡Pues esta es tu entrada!

Puesta en escena

Aunque los organizadores de las WordCamp a las que he asistido poco o nada tienen que envidiar a la SmashingConf?, la verdad es que la puesta en escena de ésta última fue espectacular ?. Para empezar, el lugar que escogieron para realizar la conferencia es uno de los lugares más bonitos y emblemáticos de Barcelona: el Palau de la Música Catalana.

I mean, FFS 😳😍😳 #smashingconf pic.twitter.com/6S2e8ee5gq

— Belén 😱 (@ladybenko) October 25, 2016

El Palau es un auditorio proyectado por el arquitecto barcelonés Lluís Domènech i Montaner y construido entre los años 1905 y 1908. Si no has estado nunca, te recomiendo encarecidamente que lo hagas cuando visites Barcelona:

Es sencillamente impresionante. Y parece que algunos de los ponentes debieron de pensar algo parecido, porque el escenario que montaron los organizadores en este contexto resultaba imponente:

Getting excited for #smashingconf – venue is incredible! But that stage doesn't half look intimidating… 😱 pic.twitter.com/XtCj0Lt2sc

— Laura Elizabeth (@laurium) October 25, 2016

Una organización excelente

Además de haber seleccionado un lugar fantástico, la organización de todo el evento fue excelente. En la conferencia principal pudimos escuchar un total de 16 charlas a lo largo de dos días. Así, cada día tuvimos 8 charlas organizadas en bloques de dos (dos charlas y coffee break; dos charlas más y a comer; dos charlas más y descansito; dos charlas más y para casa).

Para aquellos que están acostumbrados a eventos de dos días con dos tracks por día, es posible que esta conferencia les parezca «escasa» en cuanto a contenido, pero la verdad es que no se echaba nada de menos; con 16 presentaciones se pudieron tratar muchos temas de actualidad y no dejamos apenas nada en el tintero (más adelante te explico un poco los temas que se trataron).

De hecho, hay que decir que, en mi opinión, que hubiera un único track por día fue un acierto de los organizadores. Sí, es cierto que esto reduce la capacidad de elección de los oyentes… Pero ofrece dos claras ventajas: por un lado, con un único track no te vas a perder ninguna charla, ya que nunca habrá dos a la vez. Por otro lado, se ahorra tiempo y follón con el cambio de salas que supone tener dos tracks (si quieres escuchar una charla del Track X y la siguiente es en el Track Y, tienes que irte rápidamente de la primera para llegar a tiempo al inicio de la segunda).

Cada presentación tuvo una duración de unos 35-40 minutos, con turno de preguntas. Y, de nuevo, toca sacarse el sombrero ? ante la idea que tuvieron los organizadores. Como sabes, dar la palabra al público para que plantee sus preguntas suele ser engorroso: necesitas a alguien que mueva el micro de un lado a otro, esperarte a que planteen la pregunta, que todo el mundo la entienda… a veces, incluso, nos enfrentamos al problema de que ¡nadie se anima a preguntar nada!

Pues bien, en la SmashingConf los organizadores prepararon un documento de Google Drive colaborativo ✍ donde todo el público asistente podía tomar notas a la vez y donde, además, se podían plasmar las preguntas a medida que la presentación discurría. Una vez finalizada la presentación, el conductor del evento se sentaba con el ponente y procedía a transmitirle las preguntas/comentarios que el público habíamos dejado en el documento. Es una buena idea, ¿verdad?

A todo esto, añádele los tentempiés que nos ofrecieron en el Palau, las máquinas recreativas y futbolines que pusieron para que jugáramos, los pequeños concursos que montaron (dibujos, montar figuras con piezas de Lego) o el sorteo de un kit Occulus Rift y tienes la conferencia perfecta. ¡Si hasta hubo una prueba de Planking!

Wow. (Amazing!) #SmashingConf Barcelona photos by @Littlemad. https://t.co/razcRwzmoX pic.twitter.com/aQ5mkqNqME

— SmashingConf (@smashingconf) October 28, 2016

¿La única crítica? La comida no estaba incluida…? Pero estando en el centro de la ciudad como estábamos, no era muy difícil encontrar un sitio donde picar algo ?

Las 3 charlas que más me impresionaron

Disfruté todas y cada una de las charlas que dieron. El nivel de los ponentes me pareció altísimo y aprendí, como te decía, un montón de cosas nuevas. Pero si tuviera que quedarme con tres charlas, estas serían mis favoritas.

Bronce. Designing Choice

En esta charla, el ponente, Adrian Zumbrunnen, explicó cómo algunos de los elementos que diseñamos sirven para mejorar la experiencia del usuario y dirigir sus acciones hacia un lado u otro. Si esta charla merece el bronce es, precisamente, por sus reflexiones sobre la fricción. Como seguramente sepas, se suele hablar de que cuanto más fluida y rápida sea la interacción del usuario y la web, tus resultados serán mejores (tendrás más ventas, el usuario estará más contento, etc). Pues bien, no es cierto. Y nos puso como ejemplo su web.

Adrian está involucrado en proyectos de chatbots, así que decidió hacer un experimento: ¿qué pasaría si su web estuviera implementada como si fuera una conversación? Pues fácil, lo programamos y vemos qué pasa, ¿no? Así que Adrian modificó su página web para que el visitante tuviera la ilusión de que está chateando directamente con el propio autor de la página:

Para que el usuario tenga la sensación de que realmente hay alguien detrás de esta conversación, Adrian tuvo que añadir cierta fricción. ¿Cómo? Pues añadiendo los puntos suspensivos en cada una de sus burbujas de conversación, como si hubiera una persona escribiendo cuando realmente la conversación está pautada de antemano. Es obvio que podría mostrar la respuesta en seguida, pero estas pausas deliberadas, esta fricción extra, son necesarias para crear la ilusión que se pretende.

Plata. SVG in Motion A Smashing Case Study

La presentación de Sara Soueidan me dejó boquiabierto. Su charla fue bastante técnica y explicó muchos de los «truqui-trucos» que aplica en su día a día. Y es que, al final, maquetar páginas web para que se vean igual que quiere el diseñador es todo un arte.

RT @nucliweb: Awesome talk by @SaraSoueidan at #smashingconf #LotOfTips #css #svg #a11y pic.twitter.com/0ZrPDQ5i48

— Deborah Edwards-Oñoro (@redcrew) October 25, 2016

Lo que más me gustó de la presentación de Sara fue la noción de empezar con un HTML sencillo que incluyera un markup claro (para que se vea «bien» en cualquier navegador, sin CSS ni JS ni nada) para, después, añadirle los CSS que fueran necesarios. De hecho, este fue un tópico que se repitió en varias charlas, pero me encanta ver cómo lo aplican profesionales como Sara.

Redimensionado de fuentes automático (Fuente).

¿Por qué le he dado la plata a Sara? Porque, además de encantarme todos los hacks que compartió con nosotros (y que, con un poco de suerte, pronto podrás ver en su web), nos enseño esta pequeña fórmula mágica de CSS:

con la que consigues un texto que escala de forma lineal a medida que escalas el tamaño de la ventana. ¿Quieres saber cómo funciona? ¡No te pierdas la explicación matemática que hay detrás!

Oro. Revolutionize Your Page: Real Art Direction on the Web

Finalmente, la que para mí fue la mejor charla de todo el evento fue la de Jen Simmons. Para quienes no la conozcan, Jen es designer and developer advocate en Mozilla. Tiene muchísima experiencia en el mundo del diseño (incluyendo el mundo de la imprenta) y esa experiencia trasciende e impregna su trabajo en el mundo digital.

Si te soy completamente sincero, la charla de Jen es, quizás, la más difícil de resumir. Básicamente, nos enseñó muchas funcionalidades CSS que están por llegar y que revolucionarán la forma que tenemos de hacer páginas webs. Se acabó basar nuestro trabajo en frameworks «rígidos» como bootstrap; es hora de mirar al futuro y ver la potencia que ofrece. Lo mejor que puedo hacer es dejarte con una charla similar a la que vimos en Barcelona:

y recomendarte encarecidamente que te pases por su web y, en especial, por la sección donde incluye todos los ejemplos que nos enseñó. Por ejemplo, puedes ver una cabecera como la siguiente:

o la representación en HTML de un póster publicitario que, con un HTML como el siguiente:

consigue esto:

que, obviamente, se adapta al tamaño de pantalla. ¿La magia? El CSS que usa. Pero ya te dejo a ti buscarlo ? ¡Sin duda, una auténtica inspiración!

Premio de consolación

Pensándolo mejor, creo que merece la pena comentar los puntos que más me impactaron de cada charla… así que, en 1 minuto y rápidamente, aquí tienes el resumen de la jornada?

1. To Hell for Type, de Marcin Wichary. Uno de los desarrolladores y diseñadores de Medium explicó con mucho detalle la importancia que tiene la tipografía y lo complicado que es que «se vea perfecta».
2. Designing Meaningful Animation, de Val Head. No uses las animaciones «porque sí, porque puedes». Conoce las 12 reglas básicas de la animación (de Disney) y mejora tus diseños.
3. Designing for Display, de Jessica Svendsen. Estamos tan centrados en el ordenador que olvidamos las bases. Jessica nos explicó cómo trabaja de forma manual, más plástica, con luces y sombras, papeles y cámara de fotos.
4. The Small Things That Add Up: How to Find What Design Factors Influence Conversion Rates, de Tammy Everts. Si sólo pudieras arreglar un par de parámetros de tu web, ¿cuáles serían? ¿Tiempo de carga? ¿Tiempo para el primer byte? ¿Número de elementos en el DOM? Tammy tumbó algunas de las creencias que tenemos más arraigadas y nos explicó la importancia de tomar las decisiones con datos.
5. The Tail and Its Dog, de Stephen Hay. Una página web tiene que narrar una historia. Por desgracia, hoy en día todas las webs tienen la misma apariencia… no tienen alma. Pero lo podemos hacer mejor; incluso los diseños que parecen malos son perfectos si sirven a ese propósito.
6. How Testers Can Be a Liability for Your Team, de Ulrika Malmgren. Ya hemos hablado varias veces de testing, pero ¿tienes a un equipo de testers? Tenerlo y trabajar codo con codo con ellos es un paso más hacia la excelencia.
7. SVG in Motion A Smashing Case Study, de Sara Soueidan. No siempre es sencillo plasmar ese precioso diseño en un HTML sencillo y elegante y unas pocas reglas CSS. Sara explicó algunos de los hacks que están aplicando en Smashing magazine y… ¿qué te voy a decir? Como has visto hace un momento, ¡fueron increíbles!
8. Resilience, de Jeremy Keith. La web está pensada para adaptarse. Su sencillez le permite evolucionar a un ritmo vertiginoso, sin dejar a nadie atrás. Así que trabaja con eso en mente: haz páginas con un HTML sencillo, piensa en el núcleo de lo que quieres hacer… y luego añádele la salsita con CSS y JS.
9. Charla misteriosa de ponente misterioso. Poco que decir sobre esta charla. Simplemente, que leas esta entrada y descubras cómo alguien, hace casi 20 años, ya nos avisaba de los problemas a los que nos estamos enfrentando a día de hoy. ¡Y seguimos sin habernos aprendido la lección!
10. Selling Design Systems, de Laura Elizabeth. Documentar todo lo que haces en tus proyectos (tipografías, colores, estilos, componentes) te ayudará a ti y a tu equipo a construir sistemas coherentes. Pero, ojo, aplícalo en proyectos que lo necesiten; para pequeñas cosas, el esfuerzo no compensa.
11. Responsive Web Apps with Container Queries, de Jonathan Snook. Las media query de CSS a tamaño de página van muy bien. Pero, ¿no molaría tenerlas por componentes? En esta charla Jonathan compartió su experiencia creando componentes responsive con container queries.
12. Revolutionize Your Page: Real Art Direction on the Web, de Jen Simmons. Un vistazo al futuro de la web. Un soplo de aire fresco. Una oportunidad para dejar atrás todos los frameworks aburridos y empezar a construir cosas increíbles.
13. Designing Choice, de Adrian Zumbrunnen. Pequeños trucos con los que mejorar la interacción con el usuario.
14. Conversion Rate Optimization Techniques in Ecommerce, de Christian Holst. Tras años de trabajar con empresas de e-commerce, Christian compartió algunas de las lecciones que ha aprendido para mejorar tus ventas. Usa menos campos, explica para qué quieres las cosas y da más confianza, no pidas información que no necesitas… pequeños trucos para llevar tu tienda al siguiente nivel.
15. The Website Obesity Crisis, de Maciej Ceglowski. La web está engordando. Y rápidamente. Hoy en día, el tamaño medio de una web pesa más que el código del Doom original ? ¿Y sabes qué es peor? El mundo del Internet de las cosas: todos los aparatos conectados llenando la web de morralla. Una charla divertida y amena para cerrar el evento.

Estoy pensando seriamente en repetir el año que viene. ¿Estarás ahí?

Imagen destacada de Jiuguang Wang.