The Wireframe for Japan's Premiere Bank

Bank of Tokyo - Wireframe and Web Layout

The Bank of Tokyo is Japans premiere bank as well as one of the largest foreign banks operating in North America, the company’s primary overseas market, and has been in Latin America for more than 90 years. That said, you can imagine my excitement when the Agency tapped me to further layout an existing wireframe which will soon be held as the website for the Bank of Tokyo. To this date, 2013, the site is still in development.

Initial concepting was done by a designer in Adobe InDesign, however, simply copying and pasting his layout into Adobe Photoshop would have certainly been less than ideal (and not my style). So therefore, I had the job of building a brand new high fidelity layout from scratch using a 960 grid layout within Adobe Photoshop. A truly exciting opportunity.

A High Fidelity Wireframe

My workflow, when designing websites, usually first begins with a sketch, or super lo-fidelity render in Illustrator. However, since the hierachy of information as well as color palette and general direction was already laid out in InDesign, the mockup needed to be "web-ready." From the red trianlges on the navigation bars to the palette of red and subtle shadowing between the navigation bar and the headers JQUERY slider image, details mattered.

No doubt about it, InDesign could be a truly powerful mockup program, however, PSD to HTML5 is much more standard, plus, time was a factor. So I took a jpeg snapshot of the initial concept and began to rebuild right into Photoshop utilizing the 960 grid.

Clear Concise Design

Many hours of research, after my office hours at the agency, went into the Bank of Tokyo Wireframe project. Specifically about their accolades, their awards and how this site could further amplify their global message to stakeholders, investors, commercial businesses and new expansion into developing territories.

All in all, pixels needed to be clear and beautiful, especially if a hi-fidelity "wireframe." For this reason, I superceded Balsamiq or Axure, two programs which are excellent at creating, modiftying or exploring quick web architectural demos or website prototypes.

Update! Site is now Live

As indicated, my high fidelity wireframes were approved and have been since, spearheaded by the Creative Director at the Agency and their development Team. The Agency took the design to another level of beauty, sophistication and user-centric intelligence that the Bank of Tokyo has been known by many of its lenders and clients by. Truly a remarkable experience designing with the Agency and learning about one of the World's Largest Banks: Bank of Tokyo. To see the exciting finished product of the new site, simply visit Bank of Tokyo's website here:

What an honor, to implement a wireframe that is grid-compliant and handing that over for development and further implementation to one of the worlds most creative agencies. Was truly an exciting project. Now if you have a sec, click here to explore other Case Studies