Клиент
DataSpace — провайдер кастомизированных ИТ- решений для бизнеса на базе собственного ЦОД.
Особенности проекта
Компания DataSpace с 2009 года предоставляет услуги дата-центра и облачные сервисы высокого уровня качества. Безупречная репутация, SLA 99,98% и клиентоориентированность всегда выделяли DataSpace.
Однако сайт компании перестал соответствовать высоким стандартам технологической отрасли и растущим ожиданиям клиентов. А разговоры о редизайне и переупаковке велись на разных уровнях компании больше года. Как главная команда по дизайну и техподдержке компании, мы решили не ждать формирования традиционного ТЗ на редизайн сайта и сыграть на опережение.
Исследования и новая стратегия
Мы выступили инициаторами изменений: провели честный и детальный аудит визуальной и технической части старого сайта. Мы подсветили точки потери конверсии, устаревшие продуктовые связки и места, где сайт уступал конкурентам, сформировав аргументированную концепцию глобальных изменений.
И чтобы перезапустить логику сервисов, провели несколько глубинных интервью с владельцами продуктов DataSpace. Пересобрали архитектуру сайта с нуля, адаптировав её под реальные сценарии поиска технологических решений и облачных продуктов B2B-клиентами.
Смена Tone of Voice
Было: Нейтральный, сухой технический язык, который создавал барьер между компанией и клиентом.
Стало: Уверенный, эмпатичный и партнерский тон. Новый сайт общается с клиентом на равных — как технологический эксперт, который готов погрузиться в сложную инженерию и взять все технические вопросы на себя.
Новый визуальный код
Основной задачей дизайна было сохранить узнаваемость бренда, создав при этом абсолютно футуристичный и технологичный визуал.
Мы сохранили привычный логотип DataSpace и фирменное сочетание глубокого антрацитового, серебристо-серого и акцентного желтого цветов.
У компании уже существовала сильная историческая метафора: большая, многогранная технологическая система собирается из маленьких базовых квадратов — так же, как устойчивая IT-инфраструктура строится из надежных модулей. Мы сохранили эту преемственность, но вывели её на абсолютно новый уровень восприятия.
Мы взяли знакомые квадратные формы из структуры логотипа и наделили их объемом, физической глубиной и тактильностью за счет текстуры матового стекла. А чтобы сделать визуал полностью живым — заставили формы двигаться.
Накладываясь друг на друга и преломляя свет, эти полупрозрачные 3D-блоки образуют динамичные композиции. Они превращают сложные абстрактные понятия — облачные пространства, системы кибербезопасности и резервное хранение данных — в физически ощутимые, эстетичные и узнаваемые визуальные образы.
Нейросети
Для генерации иллюстраций мы разработали систему промптов и ИИ-пайплайн. Это позволило создать единый консистентный стиль для всех типов контента: от заглавных баннеров до обложек новостей и кейсов.
Новый ИИ-фотостиль
Чтобы сбалансировать строгость IT-оборудования, мы сгенерировали серию атмосферных кадров. Мы отказывались от шаблонных стоковых картинок и «клипартовых» людей в костюмах — на изображениях клиенты узнают конкретную команду и знакомые локации.
Современный IT-код:
- Вместо душного B2B-дресс-кода мы одели команду в демократичные брендированные худи (акцентный желтый и антрацит). Это транслирует культуру современной технологичной компании, где важны реальные навыки, а не формальности.
- Нижние ракурсы, кинематографичность кадров и прямой взгляд в камеру дают четкое ощущение: за безупречным SLA и безопасностью данных стоят конкретные эксперты, держащие руку на пульсе 24/7.
В итоге мы получили не абстрактные нейро-иллюстрации, а стильный, честный и высокотехнологичный визуальный образ IT-лидера, созданнный на стыке нейросетей и реальной культуры компании.
UI/UX
B2B-контент в сфере дата-центров сложен для восприятия. Чтобы структурировать массивы информации, мы выбрали bento-стилистику — карточную систему, где каждый блок выполняет четкую логическую роль.
UI/UX-решения проекта:
1. Масштабируемая флюидность: Макеты разрабатывались всего под 2 опорных разрешения. За счет пропорционального масштабирования сайт идеально выглядит на любых экранах, что сэкономило сотни часов разработки и верстки без потери качества.2. UI Kit: Создана масштабная дизайн-система, позволяющая команде DataSpace легко собирать новые страницы почти как конструктор.
3. Вариативность карточек: Для каждого типа контента (услуги, метрики SLA, сертификаты, новости, вакансии) мы создали десятки гибких состояний. Текст можно легко дополнять списком, меняя фоновые акценты или интегрируя 3D-графику.
Фронтенд на Next.js
- Страницы формируются заранее на этапе сборки сайта, а не вычисляются «на лету» при запросе. Это полностью решает проблему долгой загрузки: посетитель получает контент моментально.
- За актуальность данных отвечает многоуровневая система кэширования. При обновлении контента на бекенде сайт временно отдаёт прошлую версию страницы, пока страница автоматически пересобирается в фоновом режиме.
- После первоначальной загрузки переходы по сайту происходят без перезагрузки страниц в браузере. Контент по ссылкам подгружается фоном еще до клика (при попадании в зону видимости), делая навигацию мгновенной.
Бекенд и удобство контент-менеджмента
В новой архитектуре 1С-Битрикс выступает в роли API сервиса, поставляющий данные фронтенду.
- Мы реализовали гибкую логику передачи данных, благодаря которой контент-менеджеры могут прямо из админ-панели менять структуру страницы, порядок блоков и вид отдельной атрибутики (кнопок, карточек, ссылок) без помощи разработчиков.
- Чтобы бекенд не задерживал сборку страниц, данные кэшируются на стороне сервера и автоматически обновляются сразу после редактирования в административной части.
Масштабируемая верстка
«Жидкая» верстка (Fluid UI): для идеального отображения на любых устройствах мы использовали 3 контрольные точки (360–768px, 768–1440px, от 1440px) и относительные единицы измерения (rem/em). Все размеры элементов динамически масштабируются от базового шрифта в зависимости от ширины экрана, сохраняя эталонные пропорции и аккуратность интерфейса как на смартфонах, так и на широкоформатных мониторах.
от арт-директора
«Многие крупные B2B-компании годами живут с устаревшим брендингом, потому что цифровое обновление всегда казалось им долгим, дорогим и болезненным процессом. Но сегодня рынок требует реактивной адаптивности. Появление ИИ-инструментов полностью изменило правила игры: они позволяют сократить дистанцию между вашей реальной технологичностью и тем, как вас считывает клиент. Настоящий ребрендинг начинается с критического взгляда на себя — технологии для прорыва уже у нас в руках».
