David Bonilla
May 12, 2015 · 5 min read

The iitoko-tori Method

In Western culture, the “copy” has a negative connotation, it is seen as something lesser than an original which it can never surpass. Japanese culture, however, actually accepts and appreciates reproductions when they improve on or adapt their original.

Japan is extremely protective with its culture and carefully chooses from among outside ideas only those that are worthy of adopting and adapting. There is even a special phrase used to describe this process of copying and integration: iitoko-tori (良いとこ取り) -which literally means, “to take the good things”– and we decided to take our cue from here to design the new format for our blog. This is the Fastblr story. Our story.

If you can’t create something great, you can learn by copying the work of someone who does it better.

Demian –our designer– was only with us a couple of days a week and in the few hours that we had with him, we were really focused on developing the pages for our web applications before getting into the nitty-gritty of the design work.

The rest of the team had to absorb this task, which was a real problem, because –like most developers– our design skills were limited to using a palette of just eight basic colors.

“Our design skills were limited to using a palette of eight basic colors”

Actually, the thought of trying to create an original design from scratch never entered our heads. We drew up a list of the features we wanted to implement, and armed with our iitoko-tori philosophy we set out to study how other blogs had done it, seeking to understand why the designers had adopted one solution or another, and picking and choosing the ones that best suited our needs along the way.

Runroom: the sidebar and social networking buttons

Our social networking buttons was borrowed from the Runroom Blog. But in a flat design, we realized that the buttons seemed to be floating in midair, as if out of touch with the rest of the interface. This is a problem that Runroom overcame by using a red border that outlines the content and matches the button panel. We used the same solution, limiting the border to the left side only and using our corporate colors.

MapBox: the walking figure in the footer

Our idea for the walking figure in the footer that shows the company’s Social networking accounts came from the MapBox Blog. An inconspicuous animated graphic is an elegant solution for drawing attention to an element in a footer where it is usually full of links. We (improved?) on it by using the corporate colors of each social network and using an animation that’s closer to the thing our website first brings to mind: running. When we find the time, we’ll replace him with a mascot of our own.

Intercom: the secondary call to action with corporate colors

Our inspiration for adding a secondary call to action after the main content, to help us build up our mailing list, came from the Intercom Blog. It’s a technique that’s been repeated again and again. Especially by blogs without a sidebar to put these calls to action in, as was our case.

Polygon: large capitalized first letter and navigation bar

Our idea to capitalize the first letter of the main content in a larger size than the text, along with the structure and behavior of the upper navigation bar, which adapts to different screen resolutions and is always visible, came from the design for the features page on Polygon. But unlike their case, not all the items on our menu are clickable, which made us think maybe we should add some new pages to out site that function as real information hubs: brands, categories, etc.

Helpscout: email capture form that follows as you scroll

The awesome Helpscout Blog gave us the idea for the email capture form that follows as you scroll until you reach the level of the secondary call to action, when it disappears to avoid any added noise. There are many other sites that use this type of solution, but Helpscout taught us how to implement it inconspicuously and with an elegant closing icon: the phrase “No thanks.”

The result: a format with an identity all its own.

We drew from each of these sources of inspiration in order to concoct our own post page and design a homepage for the blog, following the lessons and suggestions presented in this article.

While the design is the product of studying and adapting the work of others, we like to think it has its own personality, fully adapted to the Fastblr spirit. You’re seeing the result right now on the Fastblr blog.

Conclusion

If you think you can achieve a decent design in a short time just by copy & pasting the work of others, you’re wrong.

iitoko-tori is a process for learning, not a technique for productivity. Time and effort goes into integrating each of the adopted solutions to form a whole with at least a minimum of consistency. The aim of iitoko-tori is not to literally, and outright, copy the work of others, but to make it your own through assimilation and to learn in the process.

Us westerners should do away with the stigma we attach to copies, as long as they make sense and credit the original authors. At the end of the day, this has been the main learning method by which all artistic disciplines have operated since first coming into existence.


Originally published at www.fastblr.com on May 7, 2015.

David Bonilla

Written by

Candela’s Husband. Daddy of Irene and Danny. Pocket Dictator and Slow Runner at @fastblr. I think in Spanish but I write (almost) in English ☺

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade