История одного проекта: создание лендинга для DC Tuning

Каждый мой проект — это не просто дизайн, а история, стоящая за ним. Сегодня расскажу о работе над проектом для студии оклейки и детейлинга DC Tuning. Проект стал второстепенным направлением компании в качестве курсов обучения. Целью было создать лендинг, который не только отражает основной сайт, но и выделяется как самостоятельный проект, привлекает внимание и мотивирует пользователей подписаться или приобрести курсы.

❖ Для кого создан проект?

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

◇ Этапы работы:

Обычно я начинаю проекты с нескольких этапов:

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

2. Референсы:
Следующим шагом стал сбор референсов, шрифтов и изображений. К счастью, главный сайт предоставил большое количество качественных фото машин. Как это часто бывает, вдохновение нашлось совершенно неожиданно: мне на глаза попалась ярко-красная машина с основного сайта. Этот образ сразу задал направление для всего лендинга.

3. Дизайн:
Хотя я не любительница красного цвета в дизайне, его сочетание с чёрным и тёмно-серым оказалось удачным решением, которое подчеркнуло стиль проекта. Я добавила эффекты свечения, которые люблю использовать в дизайне и продумала элементы так, чтобы их можно было легко реализовать в коде.
Это был мой первый проект после долгого периода работы в компании над одним сайтом и мне хотелось создать что-то свежее, в новом для себя стиле.

4. Адаптация:
Работа над десктопной версией заняла около 8 часов. После её утверждения я создала адаптивные версии и UI Kit, который облегчил работу с остальными страницами и адаптивами.

◇ UI Kit и работа с разработчиками

UI Kit — неотъемлемая часть моей работы. Это не только ускоряет процесс дизайна, но и помогает разработчикам чётко понимать структуру проекта.

Примечательно, что многие дизайнеры упускают этот макет.
⮕ Поделитесь, а вы создаете UI kit для макетов сайта?

При создании дизайна я всегда учитываю, как он будет реализован: шаблоны, конструкторы вроде Тильды или разработка с нуля. Например, даже в zero-блоках Тильды для сложных элементов часто требуется знание кода.
На этом проекте мне передали контакт разработчика, с которым я обсудила детали макета и сложные элементы. К счастью, он справился с задачей идеально.

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

◇ Дополнительные задачи

• Создание удобной формы записи с календарём, где пользователь мог выбрать дату начала курса, а система автоматически выделяла 8 дней обучения.
• Разработка блока на основном сайте с информацией о школе.
• Создание серии постов для соцсетей в стилистике лендинга.

◇ Итог:

В итоге проект включал:

1. Макет десктопа (1920 px) и адаптивы (1024, 768, 360 px).
2. UI Kit.
3. Проработка формы записи и календаря.
4. Дополнительный блок на основном сайте о самой школе.
5. Макеты для соцсетей.

Работа заняла около двух недель, учитывая, что часть времени я готовилась к отпуску (подготовка, перелет, поиск интернета). Клиент пошел мне на встречу и дал больше времени для реализации проекта.

Финальный результат прошёл тестирование на удобство и восприятие, что позволило внести финальные корректировки – как например, замена красной машины на фотографию руководителей. Несмотря на это, проект получился стильным и удобным.

Скринов с сообщениями от самого клиента нет. Эмоции клиента были переданы в голосовых сообщениях, и поверьте, они были намного ярче, чем текстовые отзывы!

◇ Ссылки на проект:

Как макет выглядел в Figma (можно стрелками переключаться и посмотреть детали проекта)
Как выглядит на сайте

---
Если вы хотите обсудить проект, пишите — всегда рада новым вызовам.

---
#сайт #дизайн #дизайнер #лендинг #landing #сотрудничество #кейс #портфолио