Shuriken Language

So it goes — in the modern world, minimalism has become the dominant trend in web design, and the primary yardstick for evaluating a website has become how easy it is to use. It’s hard to argue with that; it’s the natural order of things. But every rule has its exceptions, and today is exactly that case.

We’re talking about the website for Shuriken Language — a Japanese language school. About a year ago, we developed their branding and visual language, built on a fusion of cyberpunk and dark academia aesthetics. It was a thrilling experience. And now we faced an even more ambitious challenge: “Make a website that’s as unlike every modern website as possible — but keep it functional, and make it sell.”

After doing our research and studying both the references for the style the client wanted (Web 1.0-era sites, packed with unconventional composition and interactive elements) and contemporary language school websites, we came to a conclusion: we needed to build a site that was modern in its structure and functionality, but “dressed” in a costume of skeuomorphic elements. Our experience working on game interfaces came in extremely handy here — by the way, that’s a corner of design where skeuomorphism and maximalism never went away and are alive and well.

Given the specifics of the web, Shuriken Language’s visual language was substantially expanded with a number of new elements.

The cyberpunk side brought: the aesthetics of old computers and TVs, monochrome displays, fragments of source code, neon glow.

The dark academia side brought: shapes with sharp edges, symmetrical compositions, engravings, elements that seem to levitate in mid-air (yes, like ghosts), and foggy backgrounds. And of course, no project is complete without a few mysterious liminal spaces. Surprisingly, these two completely different aesthetics share a lot of common ground — and those points of intersection became the starting points for building the visual language.

But enough talk, let’s get down to business. The site has an interactive preloader with a parallax effect that creates the sense that the “school” is a real, beautiful building you’re entering through the main door. Once “inside the building,” you find yourself in a spacious lobby, from which an interactive slider lets you navigate to the course pages (the curriculum). Each course page is essentially a standalone landing page, with a fairly broad toolkit for customization.

Special attention went to the buttons — they’re styled like neon lightbox signs, glowing brightly in different colors against a dark background. The course landings are SEO-optimized and include the full set of information blocks you’d expect on a sales page for an educational course.

We didn’t forget about the merch store, the blog, and a number of other pages — less rich in interactivity, but no less important. Parallax is used extensively throughout the site, creating the feeling that the user is somewhere inside a vast, dark, mysterious space, with informational elements glowing in the middle of it.

It’s also worth mentioning that building this kind of website poses a series of challenges not only for designers, but also for front-end developers. After 20 years of ultra-minimalism’s universal dominance, a lot of things have drifted into the category of “lost technologies of the ancients.” Other things needed a modern reinterpretation to make sure everything stayed optimized and worked correctly. Our development team came up with and implemented a number of unusual solutions (oh no, we probably won’t tell you exactly how those levitating panels work — but we’d be happy to make something similar again, maybe even for you). Pulling off responsive design under these conditions was no small challenge either.

Looking back, we know the result was worth it. The site made a splash with the target audience (and the target audience for “people who want to learn Japanese” is a pretty unusual and fascinating crowd — and no, they aren’t put off by an enigmatic interface; if anything, the opposite). It does its job: it tells users about Shuriken’s courses, its history, and its values, and it generates leads. Because it’s awfully hard to resist clicking a neon button glowing that brightly through the cyber-gothic fog.