Приветствую друзья. Меня зовут Андрей, я веб-разработчик, в этом кейсе хочу поделиться как я делаю лендинги.
О проекте
Оригинальный рюкзак XD Design Bobby придумали для борьбы с карманниками в китайском Шанхае. Дизайнеры разработали уникальную конструкцию, которую невозможно открыть незаметно для владельца. Вдобавок, многослойные стенки нельзя разрезать.
Добавили продуманную «начинку», чтобы носить гаджеты и заряжать смартфон, не открывая рюкзака: получился идеальный спутник занятого горожанина.
Задача
Сделать удобный сайт, и донести выгоды и преимущества рюкзака Bobby.
С чего начинается работа
Прежде всего, нужно провести исследование. Найти и изучить ключевую информацию о продукте. А также собрать информацию о целевой аудитории.
Затем полученную информацию я обработал по таким пунктам
- Подробно описать характеристики, преимущества товара и вывести из них выгоды для пользователя
- История и команда
- Собрать доказательства (пруфы) ценности продукта для пользователей
- Собрать информацию о логистике
Следующий шаг текстовый прототип
Благодаря исследованию уже есть вся необходимая информация. На этом этапе я продумал и составил структуру сайта. Копирайтинг и доработка текста помогли отсеять лишние и упростить подачу информации. В итоге у меня получился такой текстовый прототип.
Визуальная концепция
На этом этапе подбираю визуальные решения: композиция, цвет, шрифты. Поиск идей занимает время, но это довольно интересно. В итоге получилось два концепта, которые я буду дорабатывать дальше.
Итоговый вариант
Я выбрал темную версию, так как она лучше отражает настроение и атмосферу данного рюкзака. Мне хотелось передать чувство надежности и технологичности через дизайн.
Фронт-енд разработка
Когда дизайн готов, перехожу в верстке сайта по методологии БЭМ. Такой подход хорош тем, что весь сайт делится на компоненты, и их легче поддерживать, вносить изменения на сайт при необходимости. Подключил базовую анимацию, плавное появление контента при скролле страницы. Чистый аккуратный код, как итог производительность сайта 94% на мобильных устройствах и 100% на пк согласно тестам PageSpeed Insights.
Сайт можно посмотреть по ссылке — https://qdar.github.io/bobby/
Сколько ушло времени на проект?
- Погружение и анализ проекта — 7 дней
- Разработка дизайна — 14 дней
- Верстка сайта, фронт — 3 дня
Спасибо!
Свяжитесь со мной, если есть идея реализовать свой проект. В качестве бонуса вы получите аудит вашего сайта бесплатно.