Shuriken Language

Так вже склалося, що в сучасному світі домінуючою тенденцією у вебдизайні став мінімалізм, а основним мірилом оцінки сайту — те, наскільки ним зручно користуватися. І з цим важко сперечатися: такий природний хід речей. Але з будь-якого правила є винятки, і сьогодні в нас саме такий випадок.

Отже, йдеться про сайт для школи японської мови Shuriken Language. Близько року тому ми розробили для них брендинг і стиль, побудовану на поєднанні естетики кіберпанку й dark academia. Це був дуже захопливий досвід. А тепер на нас чекало ще амбітніше завдання: «Зробіть сайт, який був би якомога менше схожий на всі сучасні сайти, але водночас функціональний — і щоб він продавав».

Провівши дослідження й вивчивши як референси бажаного замовником стилю (сайти епохи Web 1.0, насичені нестандартними композиційними рішеннями та інтерактивними елементами), так і сучасні сайти мовних шкіл, ми дійшли висновку: треба робити сайт, сучасний за структурою і функціоналом, але «вдягнути» його в костюм зі скевоморфних елементів. Тут дуже доречним виявився наш досвід роботи над ігровими інтерфейсами, де, між іншим, скевоморфізм і максималізм нікуди не поділися і чудово собі живуть.

З огляду на специфіку вебу, візуальну мову Shuriken Language суттєво доповнили й розширили низкою елементів.

Основні фішки від кіберпанку: естетика старих комп’ютерів і телевізорів, монохромних дисплеїв, фрагменти програмного коду, неонове сяйво. Фішки від dark academia — шейпи з гострими краями, симетрична композиція, гравюри, ніби левітуючі в повітрі елементи (як привиди, так-так), затуманеність фонів. Ну і куди ж без загадкових лімінальних просторів.

Отже, як не дивно, але виявилось, що ці, зовсім різні естетики, мають безліч точок дотику, які, своєю чергою, стають відправними позиціями для побудови візуальної мови.

Але облишмо лірику й перейдімо до суті. Сайт має інтерактивний прелоадер з ефектом паралаксу, який створює відчуття, ніби «школа» — це реально існуюча красива будівля, всередину якої ми потрапляємо через головний вхід. «Зайшовши всередину», ми опиняємося у просторому холі, з якого за допомогою інтерактивного слайдера можемо перейти на сторінки курсів (навчальних програм), кожна з яких зроблена як окремий лендинг із доволі гнучким інструментарієм для кастомізації.

Особлива увага — кнопкам. Вони стилізовані під щось на кшталт неонових вивісок-лайтбоксів, яскраво сяючи на темному тлі різними кольорами. Лендинги курсів зроблені з урахуванням SEO-оптимізації і мають увесь необхідний набір інформаційних блоків, властивих продаючим сторінкам навчальних курсів.

Не забули і про магазин мерчу, і блог, і низку інших сторінок — не таких насичених інтерактивом, але не менш важливих. Паралакс активно використовується по всьому сайту, створюючи ефект перебування користувача всередині великого темного і загадкового простору, посеред якого сяють інформаційні елементи.

Варто також згадати, що розробка такого роду сайтів ставить низку викликів не лише перед дизайнерами, а й перед фронтенд-фахівцями. Адже після 20 років повсюдного домінування ультрамінімалізму багато речей перейшли в розряд «забутих технологій древніх». А щось потребувало сучасного переосмислення для забезпечення оптимізації та коректної роботи. Наша команда розробки придумала і впровадила низку нестандартних рішень (ох ні, мабуть, ми не розповімо вам, як влаштовані ті левітуючі плашки — але із задоволенням зробимо щось подібне ще раз, можливо, саме для вас). Реалізація адаптиву теж була неабияким челенджем.

Озираючись назад, ми розуміємо: результат був вартий того. Сайт справив фурор серед цільової аудиторії (а цільова аудиторія охочих вивчати японську — це дуже незвичні й цікаві особистості, і ні, їх не лякає загадковість інтерфейсу — радше навпаки) і успішно виконує свою роботу: інформує користувачів про курси школи Shuriken, її історію та цінності, генерує ліди. Адже вкрай важко втриматися, щоб не натиснути таку яскраво сяючу в кібернетично-готичному тумані неонову кнопку.