5 técnicas para recuperar la originalidad en el diseño web

Mi primera visita a la isla de Gran Canaria ha sido para disfrutar de la segunda edición de la WordCamp Las Palmas de Gran Canaria, que se ha celebrado los días 8 y 9 de febrero (no es mala fecha para estar a más de veinte grados, no). Ya haré el resumen del evento a lo largo de la semana, pero aquí quería dejaros el resumen ampliado de mi charla.

Digamos para los que no la habéis podido ver aún (aunque seguro que pronto está disponible en WordPress.tv) que esta vez me subí al escenario como una persona muy decente, con mi camisa, mi pantalón de traje y mi pajarita azul. Un tío elegante. Basta ya de camisetas de publicidad (gracias a Dinahosting por enviarme como embajador de marca, claro, pero hay cosas que no se pueden comprar con dinero).

¿Y por qué iba así ataviado? Por dos motivos. El primero, para que mi madre estuviera orgullosa de mí, que siempre me dice que a ver si ya me voy vistiendo como una persona normal y yo le intento decir que a estos eventos nadie va así vestido. Y el segundo, para destacar entre todos los demás. Si hubiera ido así a un centro financiero de Madrid nadie sabría si trabajo para un banco, una consultora o qué, pero aquí en Las Palmas la gente se me quedaba mirando, y no creo que sea por mi gran belleza, que también. Creo que los dos objetivos se cumplieron, así que ya me quedé con el atuendo durante todo el día.

Una vez aclarado esto, entramos al meollo de la cuestión. Y es que tenemos un problema. Que igual ni siquiera os lo habéis planteado en ningún momento, pero lo tenemos. Todas las webs son iguales. Con pequeñas diferencias, sí, pero todas son iguales.

Decía Vitaly Friedman en este artículo que me ha servido de inspiración y documentación principal para la charla que «Estamos aburridos y un poco molestos viendo como la mayoría de las experiencias en la web se han convertido en predecibles y poco inspiradoras». En el parrafito introductorio de la charla para el evento yo lanzaba una pregunta: «Dime una web que hayas visitado en el último mes que te haya parecido memorable, distinta, original, que se te haya quedado en la retina por algún motivo. Es difícil. Tal vez una, ¿pero dos o tres?»

Y es que nos hemos vuelto «únicos». De aquella manera. Como dice Dave Ellis en su artículo «We’re unique», TODAS las webs parece que tienen que estar cortadas por el mismo patrón. Y las de WordPress, gracias a las plantillas todas iguales, aún más iguales y mucho iguales. Tu logotipo arriba, el menú a la derecha, una imagen gigante, una llamada a la acción. Tres columnas, siempre, aunque tengas dos servicios o cinco, tres columnas.

Y eso si conseguimos llegar a la web en algún momento. Me pasaba Mauricio el otro día este vídeo de Daryl Ginn titulado «Todos los sitios web en 2018». Atención. Es brillante y terrible a la vez. Y aunque es un tema que da para otra charla, solo recordaros que por el hecho de que podamos hacer todo esto, no es buena idea cabrear al usuario que te visita.

Every website in 2018 pic.twitter.com/Gm7jhfuuUO

— Daryl Ginn (@darylginn) October 20, 2018

Así que este es el problema. Todas las webs, todas nuestras webs, las de nuestros clientes, las que visitamos, son esencialmente iguales. Y ni siquiera son memorables o geniales o súper bonitas ni nada. Vaya problema.

De hecho, incluso aunque sean bonitas, a veces directamente se copian tendencias sin pensar y volvemos a no ser originales. Este es un pantalla que colgó Jenny Johanneson en Twitter con un montón de webs, la mayoría Startups con un producto que son «curiosamente» similares. Y se pierde el sentido.

Hablé también del logo de Stripe y la franja diagonal copiada hasta la saciedad sin sentido por todo el mundo. De la época del Flash y esas películas (literalmente) que nos montábamos. Del proyecto de CSS Zen Garden. Y de que una web original no tiene por qué no ser funcional aunque no esté cortada por el patrón hiperoptimizado para la conversión de suscriptores a la newsletter con botón rojo de esquinas redondeadas 12 píxeles del último gurú del marketing. De que hay que perder el miedo a hacer algo diferente, de que no todo el mundo tiene que hacer lo mismo.

Y sobre todo, lancé una pregunta: ¿Qué te hace original a ti? ¿A tu producto? ¿A tu proyecto? ¿A tu cliente? Toca pensar antes de ponerse manos a la obra. Pensar va a ser el 80% del trabajo aquí.

Una vez introducido el problema y la pregunta incómoda (la de la originalidad, no la de la pajarita), tocó dar algunos consejos para salirnos de los esquemas preestablecidos y mostrar algunos ejemplos para que la gente pudiera inspirarse y ver que los límites probablemente están lejos de lo que ellos pensaban:

1. Utiliza CSS Grid para maquetar tu web. Olvídate del esquema de la plantilla típica, de Bootstrap… siéntete libre. Algunos ejemplos que mostré: Webconf.asia, Invision Design Genome, Andy Barefoot, Grid Examples o CSS Grid Experiments.
2. Crea microinteracciones para tu web. Somos humanos y nos gustan los detalles. Y que si pulsamos en un botón pase algo para saber que ha sido pulsado. Hablamos de los gifs de Mailchimp, de corazoncitos y de un artículo para empezar sobre microinteracciones.
   
3. Utiliza ilustraciones propias o fotografías originales. Tu fantástico texto de «Somos únicos» sobre una foto sobreutilizada de Unsplash no es la mejor opción. Busca material diferente, créalo o contrata a alguien para que lo haga. Vimos ejemplos como los collages en Medium, las páginas de Distric0x o la mascota gatuna que aparece en muchos lugares de Smashing Magazine.
4. Encuentra tu voz. La personalidad también está en los mensajes y en los textos de tu web. «Somos un equipo multidisciplinar cuyo mayor defecto es ser muy perfeccionista» Venga ya. Si eres tú solo en una cafetería trabajando. Vimos ejemplos de adaptar tu voz a tu personalidad, los mensajes desenfadados de Slack, los textos fácilmente comprensibles de Fundación Civio que se preocupa de la transparencia y, por supuesto, de Desatranques Jaén, con su estilo único.
5. Romped moldes. No hace falta llegar al extremo del brutalismo web, pero hay que experimentar y probar cosas nuevas. Inspiraos por tendencias pero sobre todo, pensad en lo que os puede hacer diferentes. Mostré un par de ejemplos como la feria del libro de arte de Vancouver o el framework para el brutalismo web.

Para terminar dejé deberes a todo el mundo, incluido a mí mismo, con el hashtag #queremoswebsoriginales. Coged una página de vuestra web, el sobre mí, el sobre la empresa, un producto cualquiera. Algo facilito. Coged papel y boli y pensad en cómo maquetarlo de otra manera. Pensad en los detalles, en los dibujos, en los textos. En la personalidad. Y experimentad.

Os dejo también aquí una serie de artículos típicos que salen todos los años sobre tendencias en diseño y «lo que se va a llevar». No caigáis en la copia sin más, pero aprended de cosas que tal vez no pensabais que se podían hacer y sí que se están haciendo (y funcionan).

• Inspirational Websites from 2018 (Codrops)
• 20 web design trends for 2019 (Webflow)
• 19 Predictions for Design in 2019 (WebDesignerDepot)
• DesignersTalk: How to Be Unique in 2019? (Icons8)
• Top 17 Web Design and UI Trends for 2019 (Designmodo)
• Inspirational Websites Roundup #1 (Codrops)
• Awwwards

Y por último un artículo que me recomendó esta semana Ana Cirujano que refleja también esa parte de que hemos perdido la originalidad y el pasárnoslo bien haciendo webs hoy en día: Why isn’t the internet more fun and weird?

Obviamente esta charla de 20 minutos o este artículo para leer en 5 minutos no tiene mayores expectativas que plantear esta situación y que todos seamos un poco más conscientes del problema y de que le tenemos que poner solución y abogar por la vuelta a la originalidad. No quiere decir que usando CSS Grid o poniendo textos graciosos todo el mundo esto va a cambiar. Simplemente me gustaría que todos los que trabajamos en este ecosistema nos paremos a pensar un poco más antes de tirar por lo de siempre. Solamente eso. Pensar.

Actualización del 13 de marzo: Ya está disponible el vídeo de la charla en WordPress.tv