Background: The site is for DDD HOTEL, a newly opened destination in the traditional area of Tokyo. It renovated a business hotel with modern vibes. The three Ds stand for design, development and destination. The target audience is “creator, traveler, metropolitan”—people with intellectual curiosity and aesthetics who enjoy diverse experiences. Although the hotel is located in central Tokyo with good access, it has a sense of separateness and secure privacy. Its services—through clean and stylish designs; beautiful, ecofriendly amenities; and specialty coffee—provide guests with a luxurious experience. The site introduce these concepts and commitments visually through designs, transitions and images rather than explaining with words.
Design core: The core features are based on the concept of the hotel: ‘Isolate from the public, conscious of good quality and margins, restart me.’ Clients requested that we imply these not through descriptive copy but through design.
“After staying at the hotel myself, I found the concept is very close to the feeling of calm I get when I read art magazines,” says Mikiko Kikuoka. “From this experience, I got inspiration from printed materials a lot so that I could put that feeling on the site. Please enjoy the elements like boldly cropped photos with large overlaid type, margins and transitions that make you feel like turning a page.”
Favorite details: “One of the things I was particular about was text kerning,” says Kikuoka. “Kerning is crucial, especially in printed materials design, but it is sometimes not as important in web design, which requires flexibility. The serif fonts which play an essential roll in this site were kerning-adjusted one by one with CSS so that the words themselves look beautiful.”
Challenges: “Cropping photos was challenging,” recalls Kikuoka. “Wonderful photographer Kazuma Takigawa shot these images. Usually, it may not be desirable to trim professional images with a perfect compositional sense like Takigawa’s; however, in this case, I cropped boldly with the intention to show the world of the art that happens at DDD HOTEL throughout the entire site.
“I did this to home in on the details in the beautiful photos and also tried to guide visitors to a hotel reservation without having their curiosity satisfied by the site alone,” Kikuoka continues. “I wanted to inspire their imagination and draw interest in staying at the hotel.”
Technology: “I used Nuxt.js for the framework and GSAP and three.js for various animations,” says Kenta Toshikura. “Loading three GSAP plug-ins, DrawSVGPlugin, CustomEase and ScrollToPlugin, improved the precision of detailed animations.”
Anything else? Toshikura admits: “I cannot take my eyes away from 3-D technologies.”