Мой подход к созданию лендингов или как я делал сайт о рюкзаке Bobby Pro

Приветствую друзья. Меня зовут Андрей, я веб-разработчик, в этом кейсе хочу поделиться как я делаю лендинги.

О проекте

Оригинальный рюкзак XD Design Bobby придумали для борьбы с карманниками в китайском Шанхае. Дизайнеры разработали уникальную конструкцию, которую невозможно открыть незаметно для владельца. Вдобавок, многослойные стенки нельзя разрезать.

Добавили продуманную «начинку», чтобы носить гаджеты и заряжать смартфон, не открывая рюкзака: получился идеальный спутник занятого горожанина.

Мой подход к созданию лендингов или как я делал сайт о рюкзаке Bobby Pro

Задача

Сделать удобный сайт, и донести выгоды и преимущества рюкзака Bobby.

С чего начинается работа

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

Затем полученную информацию я обработал по таким пунктам

  • Подробно описать характеристики, преимущества товара и вывести из них выгоды для пользователя
  • История и команда
  • Собрать доказательства (пруфы) ценности продукта для пользователей
  • Собрать информацию о логистике

Следующий шаг текстовый прототип

Благодаря исследованию уже есть вся необходимая информация. На этом этапе я продумал и составил структуру сайта. Копирайтинг и доработка текста помогли отсеять лишние и упростить подачу информации. В итоге у меня получился такой текстовый прототип.

Мой подход к созданию лендингов или как я делал сайт о рюкзаке Bobby Pro

Визуальная концепция

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

Мой подход к созданию лендингов или как я делал сайт о рюкзаке Bobby Pro
Мой подход к созданию лендингов или как я делал сайт о рюкзаке Bobby Pro

Итоговый вариант

Я выбрал темную версию, так как она лучше отражает настроение и атмосферу данного рюкзака. Мне хотелось передать чувство надежности и технологичности через дизайн.

Десктоп
Десктоп
Мобильная версия
Мобильная версия

Фронт-енд разработка

Когда дизайн готов, перехожу в верстке сайта по методологии БЭМ. Такой подход хорош тем, что весь сайт делится на компоненты, и их легче поддерживать, вносить изменения на сайт при необходимости. Подключил базовую анимацию, плавное появление контента при скролле страницы. Чистый аккуратный код, как итог производительность сайта 94% на мобильных устройствах и 100% на пк согласно тестам PageSpeed Insights.

Сайт можно посмотреть по ссылке — https://qdar.github.io/bobby/

Сколько ушло времени на проект?

  • Погружение и анализ проекта — 7 дней
  • Разработка дизайна — 14 дней
  • Верстка сайта, фронт — 3 дня
Мой подход к созданию лендингов или как я делал сайт о рюкзаке Bobby Pro

Спасибо!

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

11
2 комментария

Андрей, спасиб.
Мне понравилось.
Без вычурностей, просто и по делу.

p/s Мысля-ассист для улучшения проекта:
почему-то попутно вспомнилось киношное "не говори, а показывай".
Например:

Ответить

Привет Марат, спасибо большое. Да ценная мысль про фото, благодарю.

Ответить