Интернет-магазин

аксессуаров для Apple

«Slava Larionov»

Сайт получил награду «Made on Tilda»

Интернет-магазин

Сайт под ключ

ИИ-фото

Tilda

Посмотрите проект

Создать новую главную страницу для интернет-магазина. Она должна понятно структурировать информацию о всех продуктах бренда и о нем самом. Важно донести ценность изделий, укрепить лояльность аудитории и стимулировать ее перейти в каталог для заказа.

Задача

Клиент

«Slava Larionov»

Проект

Интернет-магазин

Год

2026

Что было сделано

Анализ конкурентов и целевой аудитории через анкетирование

Глубинное интервью (видеосозвон)

Написание текстов и создание прототипа

Видеосозвон с просмотром референсов для нащупывания стилистики проекта

Создание дизайн-концепции проекта (первые 2-3 блока)

Генерация фото-контента с использованием нейросетей

Создание дизайн-макета главной страницы

Создание дизайн-макета адаптивных версий

Верстка на Тильде с многосценарной анимацией, адаптацией и тех. настройками

/01

Вводные данные

С заказчиком «Slava Larionov» я сотрудничаю еще с 2024 года. Все началось с редизайна ключевых страниц старого сайта: страница по чехлам + страница по ремешкам (которая несколько лет служила в качестве главной при переходе на сайт).

За несколько лет появилась необходимость в объединении информации об обоих продуктах + клиент создал с программистом онлайн-конструктор кастомных изделий, на котором важно было сделать особый акцент. Поэтому в мае 2026 года поступила заявка на разработку новой главной страницы магазина.

/01

Аналитика

Ключ к продающим текстам — качественный анализ. В этом проекте основным инструментом выступил опрос покупателей через «Яндекс Формы». Я составила анкету, а заказчик разослал ее по своей базе клиентов.

Итого получилось собрать 26 ответов респондентов. Выявила поводы для покупки, наиболее значимые критерии при выборе изделий, их преимущества в сравнении с конкурентами, запоминающиеся особенности в сервисе компании. Эти смыслы далее положены в основу структуры и текстов страницы.

Систематизировала данные в единый файл, сформировала выводы и презентовала клиенту на отдельной видео-встрече. Там же задала уточняющие вопросы по особенностям бизнеса, производства изделий, обслуживания покупателей.

/02

Тексты & Прототип

Перед написанием текстов я организовала видеовстречу с глубинным интервью с основателем, где выявила преимущества муз. шоу «КонтраBand», данные об их опыте и собрала недостающую информацию. Затем приступила к копирайтингу.

Подготовила дополнительно англоязычную версию по запросу заказчика. Оформила смыслы в текстовый прототип и презентовала его в формате скринкаста.

В главном экране привела емкую характеристику, которая знакомит пользователя с группой. Там же — кнопка для совершения целевого действия.

Раскрыла 3 ключевых преимущества трио: взаимодействие с залом (работа не со сцены), наличие театрального & полуциркового представления (помимо музыкального) и зажигательный репертуар.

Вызвала доверие с помощью блока о сотрудничестве участников группы с известными артистами / компаниями.

Указала условия сотрудничества (длительность, бронирование, райдеры и прочее).

Сделала метафоричный и яркий призыв к действию.

/03

Референсы

Затем провела еще одну видеовстречу с заказчиком для просмотра референсов. Подготовила набор сайтов, которые детально обсудили.

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

Важно сочетать как креатив и анимации, так и эстетику, аккуратность

Нравятся шрифты с засечками

Нужно использовать интересные детали, которые станут «изюминкой» проекта.

/04

Дизайн

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

Записала подробную видео-презентацию с обоснованием решений. Внесли небольшие правки, по итогам которых я поняла, в каком направлении нужно двигаться при создании всего макета.

/04

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

Дизайн

Так как заказчики моего клиента — это крупные агентства и организаторы мероприятий, в визуале важно было отразить, что группа соответствует их уровню.

Добавила необычные для сайтов детали: резные рамки для фотографий, образ контрабаса, силуэты теней от растений.

Для фона выбрала легкий бежевый, а для текста — приглушенно-коричневый, создав теплую палитру. Акцентный бордовый цвет притягивает взгляд к наиболее значимым элементам.

/04

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

Дизайн

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

Поэтому в первом блоке сразу показала превью промо-ролика, который можно посмотреть полностью при клике на рядом стоящую кнопку.

Там же есть кнопка «узнать стоимость», а в шапке — «обсудить сотрудничество», каждая из которых открывает форму заявки с выбором удобного способа связи.

/04

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

Анимации

Реализовала в проекте многоступенчатую анимацию почти в каждом блоке. Это нужно для создания динамики и привлечения внимания к наиболее значимым тезисам.

В программах выступлений использовала новую для себя анимацию с эффектом шторки. Она выглядит изящно и интересно.

/04

Анимации

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

/04

Оформила изображения с помощью сложной сетки, дабы усилить акцент на каждом отдельном кусочке контента и стимулировать пользователя подольше остановиться для изучения.

Дизайн

А еще я сделала отдельные страницы под все программы: «Основная», «A la Russe» и «Италия». Там всецело раскрыла их с помощью блоков с видеороликами и фотографиями.

/04

Дизайн

Записала подробную видео-презентацию дизайна с обоснованием решений и отправила заказчику на согласование. Макет приняли без правок.

/05

Реализовала все вышеперечисленные анимационные приемы, технические настройки и базовую SEO-оптимизацию. Также добавила англоязычную версию, на которую можно перейти при клике на ссылку в шапке.

Верстка

После утверждения дизайн-макета, приступила к верстке на платформе Tilda.

Сверстала 6 адаптивных версий с настройкой autoscale, чтобы сайт отлично отображался на любом устройстве. Сделала в них упор на UX для максимального удобства пользователей.

/06

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

Завершение и отзыв

Заказчик остался на 100% доволен сотрудничеством и записал аудио-отзыв, где поблагодарил за пунктуальность, четко выстроенные процессы и креативность.

kontraband.site

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

Сайт находится сейчас под полным управлением заказчика и может отличаться от изначального макета и функционала*

Результат

Понятно и емко систематизирует информацию о музыкальном трио и возможностях сотрудничества.

Формирует премиальный онлайн-имидж, который соответствует уровню целевой аудитории проекта.

Доносит ценность и особенности услуг «КонтраBand».

Повышает уровень лояльности посетителей.

По итогу клиент получил сайт, который: