HD Tech

Основной сайт и 3D-лендинг продукта для ИТ-компании

HD Tech — российский разработчик программных комплексов для цифровизации бизнес-процессов. Обновили основной сайт компании и сделали продуктовую страницу Marlin с 3D-графикой и маскотом.

  • Другое
  • Дизайн
  • Разработка
  • UX-исследование
  • 2 сайта: основной и продуктовый
  • 2 3D-истории с нуля: маскот Marlin и подводный компьютер
  • QA: ручное и автотестирование

задача

Клиент хотел глобально обновить сайт под новый фирменный стиль и современные тренды. А для страницы Marlin — ПО для бесшовной автоматизации полного цикла разработки — нужен был уникальный запоминающийся дизайн с 3D.

Что сделали

  • Структура и дизайн основного сайта — новую структуру разработали по ТЗ клиента и результатам нашего технического аудита, а после UX/UI-исследования спроектировали пользовательский путь и нарисовали новый дизайн
  • Онлайн-расчёт ИТ-продуктов и услуг и заявку на связь с менеджером добавили на сайт
  • Админка на MoonShine — клиент сам публикует новости, статьи и вакансии
  • Оптимизация и безопасность — статичные и динамичные изображения оптимизировали для веба, планшетов и мобильных, персональные данные защитили от взлома
  • Страница Marlin — придумали 3D-концепцию подводного компьютера и маскота с четырьмя типами эмоций

подробности

Концепция страницы Marlin

  • Погружение под водуосновная идея дизайна: погружение в тему показано как «погружение под воду». Чем больше пользователь узнаёт, тем темнее становится экран, и это подкрепляют графика и линейные индикаторы
  • Маскот Marlinсопровождает пользователя на протяжении всего погружения. Это прототип DevOps-инженера, который «на ты» с технологиями и может помочь пользователю с его задачами. Концепцию маскота дизайнеры сгенерировали с помощью ИИ, а затем доработали в 3D — от скетча до анимации
  • Четыре типа эмоцийчтобы пользовательский опыт был живее, дизайнеры разработали для маскота 4 типа эмоций, которые меняются в зависимости от действий пользователя
  • Подводный компьютерклиенту было важно показать жизненный цикл разработки ПО с помощью Marlin. Дизайнеры придумали подводный компьютер, внутри которого ПО собирается в несколько шагов. Сначала проработали внешнюю оболочку контейнера (компьютера), затем все внутренние процессы, которые происходят в нём по мере знакомства с лендингом, а после соединили все визуалы и анимировали их

команда

Комментарии команды

Было очень челленджево визуализировать абстрактный процесс разработки ПО, который в реальности выражается на уровне кода и цифр. Перед командой дизайна стояла интересная задача по его реализации в визуально-объектном представлении. Также было интересно работать с проектом, на котором мы с нуля развивали две полноценные 3D-истории (маскот Marlin и подводный компьютер HD Tech). Благодарим клиента за открытость к концептуальным предложениям.
ЕкатеринаТехлид по дизайну

суть проекта

Проект в цифрах и схемах

Что сделали

  • 2 сайтаосновной сайт компании и продуктовая страница Marlin
  • 2 3D-историиподводный компьютер и маскот Marlin с 4 типами эмоций
  • QAручное и автотестирование

технологии

На чём сделали

  • React
  • Next.js
  • CSS Modules
  • Redux
  • Laravel MoonShine
  • Figma
  • Blender
  • Jitter

ещё кейсы

Другие проекты

ДругоеPUNCHubСервис, где бойцы находят менеджеров, бои и вакансии: от исследования до MVPСмотреть кейс НефтегазПроизводственная компанияПереводим продукты для разведки и добычи нефти на импортонезависимые стекив 2 раза оптимизировано время работы конечных пользователейСмотреть кейс ФинтехНПФ СбербанкаREST API, личные кабинеты, редизайн и промобот для продажи пенсионных продуктов100 млн клиентов среди физлицСмотреть кейс

Все кейсы

Нужен похожий проект?

Расскажите о задаче: разберём её и предложим решение. Бесплатно.

Алексей СырчинГенеральный директор

С чем приходите