A view from Tokyo: Japan’s best webdesign and why we should be adopting it

Having never been to Japan, to me its always been an innovative, technological utopia for the creative individuals of the world. From the tech obsessive culture, to the anime and gaming orientated youth, taking a peek into Japan for an outsider can be mind-blowing and intimidating.

In the last few years Japanese web design has seen a renaissance by taking the western minimalism thats become so prevalent online and spinning it on its head. Below we explore a number of websites we feel try new things, improve on others and fail at some – in the hope to see how Japanese culture and webdesign can benefit our future.


Kenji-Saito

 

Kenji Saito

Kenji Saito a frontend developer / designer from Japan clearly has a fascination for HTML5 judging by his portfolio. Using a central ‘button’ if you will as a transition tool, each click ushering a response from this quadrant makes everything seem more natural and responsive. The way everything moves fluidly (the transition between the menus) or even the cute animations that make minimalist icons ‘pop’ really takes a blank canvas into a grade 1 work of art.

 

Exit-Film

 

ExitFilm

Now this isn’t something I’ve seen before. ExitFilm a video production studio, takes what could be seen as a generic WordPress template into a modern, original website that really showcases the work produced by them. Using a 4-split video grid, each of which has its own style and look, achieves something really unique especially when you consider what a trainwreck it could have been.

Using beautiful, minimal typography that gently eases into our view takes what could be very intimidating into something beautiful on the eye aesthetically. Typography throughout is downright excellent. The tags utilise a complementary colour to bring out some airy typography whilst the menu might be like a lot of the giant burger overlays we’ve become accustom to seeing but its layered approach makes it stand out. Then we have all the seamless animations. From the clever transitionary element utilised on the 4-grid to the way the iconography lights up when activated.

This is WordPress with Japanese flavour.

 

sanga

 

Sanga Ryokan

From what I can tell Sanga Ryokan is a spa / resort with a tranquil heart. It utilises a split-screen layout that tracks at what seems different speeds. The right hand side acts as the insight into the resort with some beautiful big screen imagery, whilst the left is a minimal, toned down insight into the resort itself.

What really grabbed me about this particular design is how it hits the user on both sides of the coin. It gently attacks the subconscious using the photography to entice and intrigue. While the information is displayed in the most airy, minimal way possible, to complement the photography and not force you to visit, but to inform, and tickle you into doing so.

 

letters inc

 

Letters Inc.

Illustrative websites are nothing new to me, as I more often than not spend a few hours a week just browsing the net for inspiration, where I run into multiple sites of this ilk. But Letters Inc takes it to a whole new level.

Resembling somewhat the iconic ‘Great Gatsby’ advertising campaign (the poster specifically) what the team at Letters Inc. have constructed is an incredibly detailed showcase for their work that only gets elevated by the space in which the work is showcased in. The ‘home’ page acts as this advertising platform by selling potential customers on the teams skills. Theres HTML5 running through the DNA of this website and it all feels so natural and seamless. The website flows through any and all revealed content much like a story board, but with the illustrative elements never taking hold ahead of the information this ‘journal’ is meant to convey.

 

Lexus

 

Lexus International (magazine)

The Lexus International website is corporate created with Japanese ingenuity. On first glance the website doesn’t really stand out all that much. Yeah theres a down-right gorgeous Lexus staring back at you, but besides that it pretty much plays out like a blog. Yet once you begin to browse and play… thats where these little quirks come into play.

Interaction is clearly a staple in Japanese webdesign and its everywhere here. Any and all CTAs’ react to your mouse.. but only just. This is where that marriage between minimalism and Japans culture marry. The way the menu button slides apart or the way colours pop under a hover gives the website much needed depth.

Depth is a keyword here, because once you click through to any of the magazines, things get a whole lotta crazier… a great crazy. Taking ‘The Breaks’ as example, what we have here is a parallax website only with animations and transitions that haven’t become standard in the West. The photography has this unnerving depth to it when text slides across, the images come in energetically with flips and turns, the type is presented with an eye on magazine layouts, and the imagery utilised depth perception so so well.

This innovative approach is only carried through the rest of the website.


Looking at only that small selection of websites a number of things come up each and every-time that seem to be currently embedded in Japanese web culture.

  • HTML5 and interactive elements
  • Transitions
  • Large selection of type
  • Photography takes precedence over Illustrations
  • Typography takes precedence over Iconography
  • Minimalism
  • Future-focused design

Now why do these points precede over other certain staples in design? A lot of it stems from the cultural differences between us and Japan.

First of all Japan is a culture based around simplicity. Even with the hugely dense cities and hustle and bustle lifestyles the Japanese are a polite, passive culture thats identifiable by simplicity, cleanliness and breadth. This is something that is beginning to really shine through in modern Japanese websites.

Then we have the inherent ‘risk avoidance’ thats so prevalent. This core trait in Japanese personality carries through its webdesign thanks to the way navigation is designed. These websites have very limited navigation, essentially acting as linear guides so you can’t get lose whilst throughout the content ‘assurances’ be it through reviews, quotes or tips come up multiple times to put the viewer at ease.

The linguists of also make a huge difference. Unlike latin text, Japanese text hasn’t got the capacity to be emphasised (be it through italics or bold) which changes hierarchy structure entirely, as well as the fact that the way words are constructed often change the amount of text displayed. As Japanese linguistics allow a load of information to be digested in a very short space and time, which is why a lot of these websites either lack text or are overloaded in text – never really finding that middle ground.

This thinking also carries through on the technological element. As we’ve mentioned in the past ‘Asian’ culture has an incredible emphasis on MOBILE with the majority of websites being designed on mobile and only scaled up after.  Hence the minimal nature of a lot of these websites.

Yet with even all of whats been aforementioned there is one take-away that if possible I would love to translate into Western Culture. Its this unbelievable want and need to innovate. Outside of the ‘mainstream’ websites in Japan, more often than not we actually get to see websites that look different, feel different, act different unlike what we experience here in the UK and the West. Thats what needs to start to happen. The current design restraints we work in need to begin to gently be pushed further and further back for us to truly see another ‘web’ revolution.

Sources: DesignModo / Quroa / Randomwire