 Bueno, seguimos con la siguiente presentación. En este caso, está con nosotros Juan Hernando Varsia. Pero seguro que todos ustedes lo conocen más como CiudadanoB. Y si no lo conocen, les diría que vayan corriendo a Twitter a buscarlo o CiudadanoB.com, que es su página web. Pues ha sido webmaster, diseñador web, desarrollador web, especialista en WordPress. O simplemente, y esto mola mucho, el que me hace la web. Ese es Juan Hernando, perdón. Su charla se llama Cinco Técnicas para recuperar la originalidad en el diseño web. Y vaya, que no nos hace falta. Pues nada, con ustedes, Juan Hernando. Muchas gracias. Buenos días. Muchas gracias por estar aquí. Muchas gracias a la organización por dejarme estos 19 minutos y 50 segundos. Antes que nada, quería haceros una pregunta. ¿A quién de aquí se considera o es diseñador web? ¿Quién hace webs con WordPress, trabaja? ¿Quién le lleva la tienda al cuñado? Vale, pues simplemente es para avisaros que esta charla es para todo el mundo, para todo el mundo que tenga una web. O bueno, si estáis por aquí pues también. No hace falta que seáis diseñadores, porque para empezar yo no lo soy. Y entonces, alguno dirá, madre mía, este tío, si no es diseñador, ¿qué viene aquí a contarnos? ¿Qué sabrá él? Y encima viene así vestido. Bueno, ahora vamos con eso. Antes que nada, bueno, ya me han presentado, pero yo me llamo Juan. También tengo una web con lo cual esta charla la hago para vosotros, pero también la hago para mí. Me dedico a hacer muchas otras webs con WordPress. Estoy aquí también como embajador de marca de Dina Hosting y tengo un blog en cd9e.com donde si queréis conocer más sobre mí, pues ahí lo publico. La pregunta que más de uno se está haciendo y no tiene nada que ver con la originalidad en el diseño web es porque voy a así vestido. Bueno, hay dos motivos. El primero es porque, bueno, llevo ya unas cuantas charlas y mi madre siempre me dice, tío, ponte una camisa, ponte un traje, ya eres un empresario, la gente se espera ciertas cosas de ti. Yo le digo que no, mamá, que aquí la gente todo el mundo va en camiseta, que voy a ser el raro y digo, bueno, como no soy futbolista y no le voy a poder dedicar nunca a un gol, pues esta charla, mamá, doy charlas en WarCamps y esto es lo máximo que te puedo dedicar. Y el segundo motivo es porque, bueno, yo confiaba en que vinierais así vestidos porque si hubierais venido todos de traje hubiera sido un poco violento en plan, yo lo que quería era destacar un poco, tal vez ser original de temas que si yo fuera caminando en vez de por la WarCamp de Las Palmas por la zona financiera de Madrid, pues nadie sabría si yo trabajo en un banco, trabajo en una consultora, sería uno más y aquí, pues, bueno, algo sí que voy dando la nota. Pero, bueno, como yo no he venido aquí a hablaros en originalidad de a la hora de vestir, que tampoco es que sea, ya me han dicho que si soy el camarero, que si soy el fotógrafo de la boda, etcétera, yo he venido aquí a hablaros de un problema que tenemos, que es la originalidad en el diseño web. Hay un artículo que ha escrito Vitaly Friedman de Maxim magazine, que me ha servido a mí para inspirarme tanto para la charla como para la documentación, luego os lo dejaré todo ahí enlazado, publicaré la charla y un montón de enlaces que me han servido, el que nos dice, 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. Hay un artículo también que se llama We Are Unique, en el que nos explica cómo nos hemos vuelto únicos, en la que todas nuestras páginas tienen el logo arriba, el menú a la derecha, una imagen gigante con un título, una llamada acción, un texto, tres columnas para nuestros servicios, aunque nosotros vendamos dos cosas o cinco, y estamos ahí dándole vueltas a ver cómo que ponemos en la tercera, qué icono, porque no nos encaja. Y nos hemos vuelto así de originales, entonces es como, ¿cuál hace cuánto que no entrais en una página y no tiene una imagen gigante ahí para empezar? El otro día Mauricio me comentaba también un poco a raíz de esto, un tuit que habían publicado en el que salía este vídeo de cómo son las páginas web ahora, porque estamos hablando del programa de la originalidad, pero eso sí llegamos a la página, porque no se empiezan a salir, a aceptar la privacidad, tienes más de 18 años, más historias, te ha fechado el nacimiento, la localización, suscríbete a la newsletter, te sale el aviso de, necesitas ayuda, no has encontrado lo que estabas buscando, luego no te carga y encima cuando te marchas te dice que le sigas en las redes sociales. Bueno, esto es un absurdo y no quiero hablar de esto, aunque ya ha hablado de nuestras ocasiones, pero también pensando que si ya encima hacéis lo mismo todos y cabreáis al usuario, pues el objetivo final de la página web no lo vais a conseguir seguro. El problema que tenemos es que de una manera u otra, todas las páginas que visitamos son iguales. El 90% son iguales. En el parafillo de presentación de esta charla preguntaba, Pensad, en una página web que hayáis visitado en el último mes que recordéis y digáis, joder, me acuerdo yo de qué web más bonita o qué experiencia más fantástica. Igual os podéis acordar de una. Ya si os pregunto por dos o tres, ya empezáis a decir, pues la verdad es que no hay páginas web memorables, no hay páginas web buenas, bonitas, que yo os diga decirme ahora un ejemplo. Incluso cuando son bonitas, venga a copiar. Esto es un tuit de Jenny Johansson en el que nos enseña cómo hay un montón de páginas cortadas por el mismo patrón. Todas estas vienen a ser casi todas de startups que venden un producto. Y pues veréis que una de las cosas que se ha puesto de moda, que ha sido tendencia, son los fondos así en color azul, morado, muchos con una línea diagonal que los corta. Vamos a ver esto. En algunos artículos lo llaman el efecto Stripe. Stripe es una empresa de pagos online, que seguro que más de uno conocéis o utilizáis. El logo de Stripe tiene unos cortes, tanto en la parte baja de la P como en el punto de la I, que tiene cierto ángulo. No recuerdo si son 10, 12 grados y han utilizado ese pequeño detalle para que en su web, todas las líneas, todos los fondos tengan ese mismo corte. Ahí tiene sentido. Ahora, si todos decidimos, nos da igual nuestro logo, nos da igual nuestra imagen, nos da igual todo, que nuestra web tiene que tener ese corte porque lo hemos visto y porque ahora es mucho más fácil hacerlo que hace 5 años, que tenías que hacer una imagen en PNG que se estirase y no fuera todo infame, pues, dejad de hacer cosas sin sentido. O sea, al final, porque sean tendencias y luego os voy a compartir un montón de artículos con tendencias todos los años en diciembre. Esto es una mina, Tendencias de Diseño web para el 2019. O lo que se ha llevado en 2018 y tienes un montón de ejemplos fantásticos. Hay muchas cosas que son interesantes de ver, pero no porque alguien lo haya hecho. Tenéis que ir vosotros y copiarlo tal cual. Para los veteranos de guerra por aquí, ¿alguno echa de menos flash? Hombre, yo tampoco creo que haya que echarlo de menos. Para los que no lo conozcáis, flash era una tecnología propietaria que nos permitía crear páginas web, pues, en torno al 2005, 2008, fue el momento de máximo apogeo. Realmente, nos daba un lienzo en blanco y tú tenías ahí que montar tu película. Realmente, era como montar una película en la que tú ibas frame a frame, podías ir moviendo cosas, un lienzo, para que la gente lo disfrutase y pudiera hacer lo que quisiera. También el problema de flash es que era una herramienta privativa, pero también se podían utilizar los estándares como HTML y CSS en la plataforma de CSS en Garden. Bueno, era un proyecto en el que allí simplemente te ponían un contenido y tú podías con CSS irlo modificando para mostrarlo de diferentes maneras. Es una especie también de obra de arte en la que cada uno consideraba con la libertad que le daba el CSS como hacer páginas distintas. Todavía sigue funcionando y podéis ver un montón de cosas. ¿Qué ha pasado desde la época del flash hasta hoy en día? Bueno, por un lado, las plantillas, los frameworks como Bootstrap, que nos han encasillado bastante, es muy sencillo de utilizar las plantillas de WordPress que os voy a contar. Vas a CINFORES, está a cualquier lado y tienes plantillas multipropósito que dices tú no sabes diferenciar entre una y otra más allá del número de descargas y poco más, porque todas hacen de todo y todas son más o menos similares, aunque tengan 200 diferentes tipos de home, realmente acaban siendo iguales. Y sobre todo el miedo. El miedo que tenemos nosotros para cambiar, para cambiar las cosas, para decir, es que esto ya nos funciona, nos funciona a nosotros. Le funciona la competencia, le funciona al señor de marketing que me ha dicho que tengo que poner un botón rojo con el borde redondeado de 12 píxeles porque eso convierte mucho mejor. Y como funciona, pues pasamos de todo. ¿Qué es original? Bueno, pues la Wikipedia lo define como la cualidad de las obras creadas o inventadas. No os estoy diciendo que tengáis que hacer páginas web, que las tenga que colgar en este museo para el año que viene. No hace falta hacer obras de arte, que las podéis hacer. Y si os dan un premio, hay premios específicos, como los awards para este tipo de páginas web. Estupendo. No os estoy diciendo que tenéis que convertirlo todo en un lienzo y hacer magia. Lo único que se estoy pidiendo es que penséis, el objetivo de esta charla es que no vayáis a cañón que esto de hacer una página web no es coger, instalarte un magnetador visual o 100 plugins de bloques de Gutenberg y empezar a colocarlos porque tienes muchas opciones y empezar, y esto va aquí y esto va allá, sino que os pareáis un momento y penséis, ¿qué es original en vosotros? ¿Qué es original en vuestro proyecto? ¿Qué es original en vuestro cliente? Porque siempre va a haber algo que os diferencia. Porque si no, luego vendrá la inteligencia artificial y si no somos capaces de diferenciarnos en nada y de ponerse un poco difícil, pues no vamos a destacar nunca. Os voy a dar unos consejos que no quiere decir que tengáis que coger ahora y hacerlo todo, porque es absurdo. De hecho, el único consejo es que penséis y busquéis vuestra propia originalidad. ¿Cómo? Bueno, pues yo os voy a dar cinco pistas, cinco técnicas por donde podéis diferenciaros. La primera, que nos olvidemos de las plantillas, de Bootstrap, de lo que ya conocéis, del logo arriba a la izquierda, de las columnas del slider, del carrosel de testimonios, el contacto con el mapa, las redes sociales, lo de siempre, esa web corporativa que te vende por 99 euros ya directamente porque no tiene más que cambiar los datos. Hay técnicas de CSS que luego Mauricio os va a dar una charla estupenda. Por eso yo no me voy a meter tampoco en demasiados detalles que os permiten imaginar con ese lienzo en blanco dónde queréis que vaya colocada cada cosa, las webs. No tienen por qué ser todas iguales. Esta es una conferencia web en Asia en la que simplemente las cajas van apareciendo. Esto es un proyecto de Invisión en el que, y esto es totalmente responsivo. Esto es decir, cuando vosotros hacéis la pantalla más pequeña, los cuadrados se van moviendo, se van colocando. Esta página de un desarrollador de Andy Berfoot, podéis ver que todos son bloques isométricos, simplemente utilizando un grid. Y hay multitud de ejemplos en Grid Examples. Podéis ir navegando y ver cosas totalmente diferentes. Coged un folio e imaginaros cómo os gustaría que fuera. Mi segundo consejo son las microinteracciones. Somos humanos e interactuamos con otros humanos. Aunque para muchos, los visitantes no dejan de ser estadísticas de analytics. A todos nos gusta ir a una web y que haya detalles que nos llamen la atención. Por ejemplo, en MailChimp, cuando vas a enviar una campaña, lo he puesto al revés, pero bueno, es un simple GIF en el que tienes el mono, que es su mascota, que está sudando, diciendo, voy a darle el botón y lo voy a enviar a 1,000 personas, está seguro de que no la vas a cagar. Y cuando lo haces, te chocadas 5 y estupendo. Qué rabia da ir a una web que tenga un botón que le das y no pasa nada. Le das al botón de enviar y no sabes si se ha enviado, si no se ha enviado. ¿Qué ha pasado? Le vuelves a dar, se envía tres veces. Hay pequeños detalles. No hace falta que vuestra web sea un diseño espectacular diferente tal. Hay pequeños detalles que os van a dar personalidad y podéis utilizar para mejorar la experiencia y para que la gente os recuerde. Os dejo también aquí un artículo en el que os explican un poco métodos simples para ir creando este tipo de interacciones y que funcionen. Mi tercer consejo es que utilicéis ilustraciones propias, fotografías originales. No hay nada peor ahora mismo ya que en vuestra imagen gigante de la web pongas somos únicos y detrás tenéis una foto de Annes Plas que se ha utilizado en un millón de páginas. Seguro que es la de la mesa de bar con el móvil apoyado en una cafetería o la de una libreta que no tenéis con un portátil que tampoco tenéis. No sois únicos. Estáis haciendo lo mismo que todo el mundo. Que no tenéis que poneros vosotros tampoco a dibujar si no se os da bien o a hacer fotografías. Que hay profesionales que se dedican a ello y que tampoco son tan caros y que si estáis haciendo un proyecto que realmente merece la pena, pues intentad diferenciaros de esta manera. No toda vuestra web tiene que ser un dibujo. Mira, para que hable yo de medium, cómo tiene que ser la cosa. Pero, por ejemplo, ellos utilizan diferentes colas, imágenes en detalles. En esta web de DistricTox, pues también toda su web, la explicación de cómo funciona su servicio, pues está todo hecho en base de dibujos, a diferentes formas. No todo tiene que ser rectángulos. Que parece que si no es un rectángulo un cuadrado nos da miedo, borde redondeado como mucho. Se pueden utilizar todo tipo de formas. En Smashin Magazine tienen un gato que es la mascota y te lo puedes encontrar en multitud de páginas en pequeños detalles. No es la web de un gato, aunque eso estaría muy bien. Pero simplemente hay detallitos por todos los lados que le dan esa personalidad y esa originalidad. Mi cuarto consejo es que encontréis vuestra voz. No todo tiene que ser, igual lo vuestro no son las fotos, ni los dibujos, ni los diseños espectaculares, ni hay nada con lo que se pueda interactuar. Pero vuestro mensaje, todos los textos, que yo ya sé que la gente no lee en internet. Pero a ver si va a resultar que el tío que te va a contratar para algo le da por leer y ve. Somos un equipo multidisciplinar cuyo nuestro peor defecto es el perfeccionismo. Y es como todo el mundo, es que siempre es lo mismo. Pues no tiene por qué ser así. Si vuestra empresa es más relajada, pues los textos tendrán que ser relajados. Si vuestra empresa es seria, pues eran textos serios. Nadie va a ir a buscar la consulta de un médico y que esté lleno de GIFs de coña. Pues no. O sea, ha encontrado vuestra voz. Cuando entras en el Slack, pues en el Slack de la Comunidad de España está siempre John Arteza y diciendo Adoli, que pues ya refleja algo propio del grupo. Incluso el propio Slack tiene un ejemplo para los mensajes que te dice cuando estás entrando al canal. Te dice si nadie viene desde el futuro para evitarlo, pues tampoco no va a ser tan mala idea entrar. Es algo coñero, es algo distendido, que ya entiendes un poco el rollo del que van. Ejemplos ya muy bestias. Seguro que conocéis a Desatranques Jain. Nadie espera llegar a su web y que os digan, somos un equipo multidisciplinar de camiones. Pues no. Esas cosas tienen su estilo, tienen su web. A nadie le importa realmente cómo sea. Yo es lo único que quieren, es que les llames por teléfono, y vayan a Desatrancar, que es su negocio. La Fundación Cibio, que se dedica a transparencia de las administraciones, pues sus textos son claros. No están llenos de parabrería. No es como un formulario de hacienda. Pues hay que ser coherente con el mensaje que queremos transmitir y pensar qué mensaje queremos transmitir. Mi último consejo es que rompáis moldes. Hay una tendencia que viene de la arquitectura, que se ha trasladado a la web, que es el brutalismo. Que no digo que las tengáis que pasar a ella, pero que experimentéis, que no lo descartéis. Las web brutalistas, pues, son las webs en las que todos son gigantes, los textos son enormes, las fotografías es todo como cutre y enorme, pero dices, primero dices, ¿joe qué feo? Y luego dices, bueno, pero lo que yo quería hacer, el menú sé dónde está, el botón también sé dónde está, funciona. Hay incluso un framework que os ayuda a hacer vuestras páginas web de este estilo, que no estoy diciendo que las hagáis, pero que sepáis que existe esta opción. Para ir terminando esta charla, que me quedan un par de minutillos, os voy a poner deberes. Aquí en las work camps, la gente siempre sale, wow, un mogollón de ideas, qué bueno. Si me ha ocurrido, no sé qué, va pasando ya pal miércoles de la semana que viene, eso se habrá pasado. Casi seguro. Entonces, lo que yo os voy a pedir es que, como casi todos habéis levantado la mano cuando se preguntado si tenéis una web, da igual, aunque sea un proyecto propio, aunque esté en local, cogezca una página de vuestra web. Una fácil, el sobre mí, que nadie lo va a ver. El sobre mi empresa, un producto, el que menos vendáis. La página de contacto, me da lo mismo. Cogez una única página web e ir a reimaginarla. Cogez un papel y un boli y poneros a pensar. Pensar cómo lo podría maquetar de manera distinta. No es que el tema que tengo pone que es una columna aquí y otra columna allá. Ya hemos pasado de esa época, ya hemos pasado de la época del cabecero, contenido, barra lateral y pie. Podemos hacer, podemos innovar como queramos. Reimaginarla. Pensad qué detalles podéis en el botón, en la foto. Algo que os haga únicos, que os haga originales, porque mirando para vosotros mismos va a ser la única manera de encontrar esa voz, esos detalles que van a hacer marcar la diferencia. Y luego, si lo hacéis, que sé que no lo vais a hacer, algunos espero que sí. Yo el primero, que también tengo que tomar nota, por eso decía que esta charla también es para mí. Yo me voy a poner a ello. Lo compartiremos luego en Twitter, con el hashtag QueremosWebsOriginales. Y así, pues nos podemos ir animándolos a los otros y decir, oye, pues esto está muy bien. O mira lo que he hecho o inspirarnos también los unos de los otros, que como os he dicho, esto no va de hacer obras de arte, sino de cambiar un poco esta tendencia de que todo es igual y que tú no sabes si estás viendo la web de esta empresa, de su rival o de otro. Y nada. Eso es todo antes de nada. También quería pediros otro favor que es que me hagáis fotos y las subáis a Twitter o os hagáis fotos conmigo, para que mi madre, que está en Santoña, en Cantabria, en el otro lado del mundo, sepa que estaba así, porque si no va a ser. Madre mía, como no os entere. Y nada, que queremos web originales y que muchas gracias.