El Método iitoko-tori: cómo diseñamos el blog de Runnics sin tener ni idea de diseño

En la cultura occidental, la “copia” tiene una connotación negativa, inferior a un original que jamás podrá superar. La cultura japonesa, sin embargo, acepta y valora las reproducciones que mejoran o adaptan lo copiado.
Japón es extremadamente proteccionista con su cultura y elige cuidadosamente las ideas ajenas que merece la pena adoptar y adaptar. Existe incluso una expresión específica para definir este proceso de copia e integración: iitoko-tori (良いとこ取り) -que significa, literalmente, “coger las cosas buenas”- y nosotros decidimos emplearlo para diseñar la nueva plantilla de nuestro blog. Esta es nuestra historia.

Si no puedes crear algo bueno, aprende copiando el trabajo de alguien mejor

Sólo contábamos con Demian -nuestro diseñador y maquetador- un par de días a la semana y, en las pocas horas en las que contábamos con él, priorizábamos el desarrollo de las páginas de nuestras aplicaciones web antes que las labores de diseño puro y duro.
El resto del equipo tuvo que asumir esa labor, lo que supuso un auténtico problema, porque -como la mayoría de programadores- nuestros conocimientos de diseño se limitaban a distinguir una paleta de ocho colores básicos.

“Nuestros conocimientos de diseño se limitaban a distinguir una paleta de ocho colores básicos”

Ni se nos pasó por la cabeza intentar crear un diseño original desde cero. Hicimos una lista de las funcionalidades que queríamos implementar y, adoptando la filosofía del iitoko-tori, empezamos a estudiar cómo las habían implementado en otros blogs para intentar comprender por qué los diseñadores habían adoptado una solución u otra y elegir las que mejor se adaptaran a nuestras necesidades.

Runroom: la cinta lateral y la botonera social

Del blog de Runroom copiamos la botonera social. Al incorporarla en un diseño plano, nos dimos cuenta de que los botones quedaban flotando en la nada, como desconectados con el resto de la interfaz. Un problema que, en Runroom, resolvieron usando un borde rojo que enmarca el contenido y da soporte a la botonera. Una solución que adaptamos, limitándolo al lado izquierdo y usando nuestros colores corporativos.

Mapbox: el muñequito andarín del footer y el gravatar redondo

Del blog de Mapbox nos quedamos con la idea del muñequito andarín del footer para señalar las cuentas de la empresa en Redes Sociales. Un discreto gráfico animado es una solución elegante para llamar la atención sobre un elemento de un footer que suele estar cargado de enlaces. Nosotros la ¿mejoramos? usando los colores corporativos de cada red social y empleando una de animación más próxima a lo primero que tiene que sugerir nuestra web: correr. En cuanto tengamos algo de tiempo, la sustituiremos por nuestra propia mascota.

Intercom: el call to action secundario con colores corporativos

Nos inspiramos en el blog de Intercom para añadir un call to action secundario, después del contenido principal, con el que empezar a construir nuestra lista de mailing. Es un recurso repetido hasta la saciedad. Sobre todo, por los blogs que prescinden de columna lateral donde situar esas llamadas a la acción, como era nuestro caso.

Polygon: primera letra capitalizada y menú de navegación

Del diseño de las features de Polygon sacamos la idea de capitalizar la primera letra del contenido principal y la estructura y comportamiento del menú de navegación superior, que se adapta a distintas resoluciones de pantalla y está siempre visible. Pero, al contrario que en su caso, no todos los elementos de nuestro menú son clicables, lo que nos hizo ver que quizás debíamos añadir nuevas páginas a la web que fueran auténticos hubs de información: marcas, categorías, etc.

Helpscout: formulario de recogida de emails que acompaña al hacer scroll

Del awesómico blog de Helpscout obtuvimos la idea del formulario de captura de emails que te acompaña durante el scroll, hasta que llegas a la altura del call to action secundario, cuando desaparece para no añadir ruido. Hay muchos otros sitios que usan este tipo de solución, pero Helpscout nos enseñó cómo implementarlo de forma discreta y con un elegante icono de cierre: la frase “No, gracias”.

El resultado: una plantilla con identidad propia.

Con todas esas fuentes de inspiración cocinamos nuestra propia página de post y diseñamos una home para el blog, siguiendo los consejos y advertencias que encontramos en este artículo.

Aunque el diseño es hijo de lo aprendido estudiando y adaptando el trabajo de otros, queremos pensar que tiene una personalidad propia, completamente adaptada al espíritu de Runnics. El resultado lo estáis viendo ahora mismo en el blog de Runnics.

Conclusión

Si crees que puedes conseguir un diseño decente en poco tiempo, haciendo copy & paste del trabajo de otros, te estás equivocando.
El iitoko-tori es un proceso de aprendizaje, no una técnica de productividad. Se requiere tiempo y esfuerzo para que cada una de las soluciones adoptadas se integre en un conjunto que tenga una mínima coherencia. El objetivo del iitoko-tori no es copiar literalmente y sin respeto el trabajo de otros, sino asimilarlo hasta hacerlo tuyo y aprender en el proceso.
Los occidentales deberíamos acabar con el estigma que existe sobre la copia, siempre que esta tenga sentido y acredite a los autores originales. Al fin y al cabo, ese ha sido el principal método de aprendizaje de todas las disciplinas artísticas desde que estas existen.

Si lo que estás buscando son las mejores escorts once puedes encontrarlas ahi.