Разработка дизайн-системы для платформы бета-тестирования VK Testers

Главное о кейсе

ENGLISH

Design development for one of the products of the VK ecosystem — VK Testers — a beta-testing platform. The identity system for various platforms includes the concept of merch and tools, such as an illustration builder that facilitates the creation and use of corporate identity.

RUSSIAN

Разработка дизайна для одного из продуктов экосистемы ВКонтакте — VK Testers — платформы для бета-тестирования. Система айдентики для различных платформ включает в себя концепцию мерча и инструменты, например, конструктор иллюстраций, который облегчает создание и использование фирменного стиля.

Как проект изменил жизнь пользователей

ENGLISH

We did extensive work within the VK ecosystem: we designed one of the company's divisions based on its current style and implemented new design solutions, taking into account their context, as well as relying on the specifics of the audience.

RUSSIAN

Мы провели обширную работу внутри экосистемы VK: оформили одно из подразделений компании на основе её текущей стилистики и внедрили новые дизайн-решения с учетом их контекста, а также опираясь на специфику аудитории.

Бизнес-задача и ее решение

ENGLISH

Objective: To create a logo and identity for the project that would give expressiveness to the product and emphasize its modern image, taking into account the specifics of the project audience and the current style of the platform.

Solutions:

We did extensive analytical work: customized the product logic and expanded design techniques, developing a completely new visual language and how it scales and thought through concepts for merch and video materials:

— Illustrations of the project are made in the form of a constructor - you can make changes in them in the process of playing with color or adding new elements. They are made in the pixel-art technique with a touch of painterliness, which emphasizes the overall style of the project.

https://www.dropbox.com/scl/fi/7sjntkjaguvc08j8k3c87/1.png?rlkey=a2a366a1j7pu2wa64b58pelq4&dl=0

https://www.dropbox.com/scl/fi/s7xa01wgsixgvxqvt98uc/2.png?rlkey=rdisj9c1xxx2p5eetc5jfbwq0&dl=0

https://www.dropbox.com/scl/fi/qt3juxgzf5xhyrj3tjkno/3.png?rlkey=myl0vh49na7gg8q6lx6lakunk&dl=0

https://www.dropbox.com/scl/fi/jt2tqozkukwphx9oa2fjy/4.png?rlkey=6vkro6vug5nxomc52s9fkxhxp&dl=0

https://www.dropbox.com/scl/fi/e0cvbaav7526zm7ljgu9d/5.png?rlkey=ayg21s2cflcgisfpndecfz6rc&dl=0

https://www.dropbox.com/scl/fi/8hanvj97srx06uo5ggepv/6.png?rlkey=1sqmxvppvgzt2itfmx9cpmjs7&dl=0

— The project's identity is based on the idea of pixels and accent typography. It is simple and clear for the users' perception. And we have detailed rules for using the layouts in an extensive interactive guideline.

https://www.dropbox.com/scl/fi/k4kue342ch5ke5d0lbnz4/7.png?rlkey=zfpl9zlujf1pipja19l5ai88y&dl=0

https://www.dropbox.com/scl/fi/xct8div5bwxve0ofb1ujq/8.png?rlkey=owt5osjpvqtnr27fiq77paenx&dl=0

— In the basic and special mockups for different directions, decorative elements of the identity in the form of pixels and typography are preserved.

https://www.dropbox.com/scl/fi/dww9jockd9gmms85kiv6w/9.png?rlkey=eu60f4a2ixt6ji0r2o9chhlmj&dl=0

https://www.dropbox.com/scl/fi/tqcz19rejclfj7km4ab1c/10.png?rlkey=bwbchllnjqt5tm370a40pmwjl&dl=0

RUSSIAN

Задача: Создание логотипа и айдентики для проекта, которые придадут выразительности продукту и подчеркнут его современный образ с учетом специфики аудитории проекта и текущей стилистики платформы.

Решения:

Мы провели обширную аналитическую работу: настроили логику продукта и расширили дизайн-приемы, разработав абсолютно новый визуальный язык и его масштабирование, продумали концепты мерча и видео материалов:

— Иллюстрации проекта выполнены в виде конструктора — в них можно вносить изменения в процессе игры с цветом или добавления новых элементов. Выполнены в технике пиксель-арт с ноткой живописности, что подчеркивает общую стилистику проекта.

https://www.dropbox.com/scl/fi/7sjntkjaguvc08j8k3c87/1.png?rlkey=a2a366a1j7pu2wa64b58pelq4&dl=0

https://www.dropbox.com/scl/fi/s7xa01wgsixgvxqvt98uc/2.png?rlkey=rdisj9c1xxx2p5eetc5jfbwq0&dl=0

https://www.dropbox.com/scl/fi/qt3juxgzf5xhyrj3tjkno/3.png?rlkey=myl0vh49na7gg8q6lx6lakunk&dl=0

https://www.dropbox.com/scl/fi/jt2tqozkukwphx9oa2fjy/4.png?rlkey=6vkro6vug5nxomc52s9fkxhxp&dl=0

https://www.dropbox.com/scl/fi/e0cvbaav7526zm7ljgu9d/5.png?rlkey=ayg21s2cflcgisfpndecfz6rc&dl=0

https://www.dropbox.com/scl/fi/8hanvj97srx06uo5ggepv/6.png?rlkey=1sqmxvppvgzt2itfmx9cpmjs7&dl=0

— В основе айдентики проекта — идея с пикселями и акцентной типографикой. Она проста и понятна для восприятия пользователями. А подробные правила по использованию макетов мы расписали в обширном интерактивном гайдлайне.

https://www.dropbox.com/scl/fi/k4kue342ch5ke5d0lbnz4/7.png?rlkey=zfpl9zlujf1pipja19l5ai88y&dl=0

https://www.dropbox.com/scl/fi/xct8div5bwxve0ofb1ujq/8.png?rlkey=owt5osjpvqtnr27fiq77paenx&dl=0

— В базовом и спешл-мерче для разных направлений сохраняются декоративные элементы айдентики в виде пикселей и типографики.

https://www.dropbox.com/scl/fi/dww9jockd9gmms85kiv6w/9.png?rlkey=eu60f4a2ixt6ji0r2o9chhlmj&dl=0

https://www.dropbox.com/scl/fi/tqcz19rejclfj7km4ab1c/10.png?rlkey=bwbchllnjqt5tm370a40pmwjl&dl=0

Крафт (мастерство), реализация, технические детали

ENGLISH

We developed pixel art to customize the product design logic, similar to game dev projects, as well as a feature-rich and fully interactive guideline that helps to conveniently implement the developed design elements.

RUSSIAN

Мы разработали пиксель-арт для настройки логики дизайна продукта, подобно геймдев-проектам, а также многофункциональный и полностью интерактивный гайдлайн, который помогает удобно внедрять разработанные дизайн-элементы.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

ENGLISH

This project was a successful experience for us in developing design solutions for a specific audience with an unusual and diverse background.


RUSSIAN

Данный проект стал для нас успешным опытом разработки дизайн-решений для специфичной аудитории с необычным и разнообразным бэкграундом.

Скриншоты