КЕЙС
PYGMY
Интернет-магазин, где стандартная сетка товаров Тильды модифицирована кодом с помощью Chat GPT. В этом кейсе расскажу и покажу не только процесс работы, но как происходила работа с сеткой.
навигация по кейсу
Задача
Клиент пришел за редизайном интернет-магазина женского белья и одежды PYGMY.
Так выглядел старый сайт PYGMY:
Так выглядел старый сайт PYGMY:
Ключевые запросы
- Строгий, минималистичный стиль
- Упор на фото
- Отказ от плавности в формах, везде прямые углы и четкие линии
- Нестандартная сетка в каталоге товаров
- Обновить структуру сайта, сделать ее проще и удобнее для покупателей
Этап 1. Бриф
Клиент пришел с достаточно четким ТЗ и референсами. У него был разработан примерный скелет сайта и подобраны референсы по функционалу и визуалу.
Мы созвонились, обговорили все пожелания:
Все это я зафиксировала в резюме после звонка, чтобы «сверить координаты»: правильно ли мы друг друга услышали — и перенести это все в последствии в техническое задание разработки, указанное в договоре.
Мы созвонились, обговорили все пожелания:
- меняем ли структуру текущего сайта (да)
- меняем ли шрифты и цветовую гамму (частитично да)
- нужен ли нам на текущем этапе личный кабинет и история заказов (нет)
Все это я зафиксировала в резюме после звонка, чтобы «сверить координаты»: правильно ли мы друг друга услышали — и перенести это все в последствии в техническое задание разработки, указанное в договоре.
Этап 2. Структура сайта и прототип
Я разработала структуру сайта: какие страницы будет содержать сайт и какие экраны/блоки эти страницы будут содержать.
Картинка кликабельна, можно увеличить
На основании структуры сайта я составляю черно-белый драфт сайта, так называемый прототип.
На нем я размещаю информацию в том порядке, в котором она будет идти на сайте и размещаю примерные тексты — их в последствии финализирует копирайтер на стороне клиента.
На нем я размещаю информацию в том порядке, в котором она будет идти на сайте и размещаю примерные тексты — их в последствии финализирует копирайтер на стороне клиента.
Так выглядит полный прототип сайта
Это не финальный дизайн сайта, а возможность оценить логику экранов и выстроить понятный путь на сайте для достижения ключевого действия: покупки одежды.
Сразу же на прототипе я показываю, как будет работать принцип нестандартной сетки, где в одной части экрана у нас будет идти сетка товаров, а в другой — красивое брендированное фото.
Сразу же на прототипе я показываю, как будет работать принцип нестандартной сетки, где в одной части экрана у нас будет идти сетка товаров, а в другой — красивое брендированное фото.
Прежде чем предоставить прототип клиенту, я сверстала этот блок с каталогом на Тильде, чтобы удостовериться, что я смогу это реализовать.
Только после того, как я удостоверилась, что это возможно — я презентовала это.
Обычно на этапе прототипа или на этапе дизайна сайта, я тестирую те или иные функции и анимации, чтобы не предлагать не реализуемых в последствии решений и не делать потом двойную работу по переделке.
В итоге, клиент всегда получает только то, что гарантированно можно воплотить.
Только после того, как я удостоверилась, что это возможно — я презентовала это.
Обычно на этапе прототипа или на этапе дизайна сайта, я тестирую те или иные функции и анимации, чтобы не предлагать не реализуемых в последствии решений и не делать потом двойную работу по переделке.
В итоге, клиент всегда получает только то, что гарантированно можно воплотить.
Но в карточке товара, вопреки своим же стандартам, я сначала нарисовала блок «Сочетается с» — по пожеланиям клиента. И только потом поняла, что этот функционал нельзя осуществить в Тильде. И от этого блока все же пришлось отказаться. Поэтому — еще раз: прежде чем предлагать, нужно тестировать.
Результат этапа прототипа
- Продуманная логика страниц и скелет для дальнейшего дизайна
- Четкое ТЗ для копирайтера в виде ч/б ПДФ-ок: он сразу понимает контекст, где будет стоять текст и примерный объем. Это облегчает ему работу.
Этап 3. Дизайн-концепция
Обычно после этапа прототипа, у меня идет этап визуального вдохновения, где я собираю мудборд для проекта, референсы по функционалу и визуалу сайта, подбираю шрифты и цветовые палитры.
Но так как в данном проекте, у клиента было четкое видение конечного результата, которое так же совпадало с моим видением этого проекта и задача была предельно ясна — я приступила сразу к разработке дизайн-концепции.
Но так как в данном проекте, у клиента было четкое видение конечного результата, которое так же совпадало с моим видением этого проекта и задача была предельно ясна — я приступила сразу к разработке дизайн-концепции.
Важное замечание
Набор шагов разработки может варьироваться и изменяться от проекта к проекту. Это зависит от задачи, пожеланий клиента и четкости технического задания.
Именно поэтому, я провожу бриф перед оценкой проекта, чтобы понять, какие этапы заключать в процесс работы, и, соответственно, в смету — для достижения лучшего результата.
Именно поэтому, я провожу бриф перед оценкой проекта, чтобы понять, какие этапы заключать в процесс работы, и, соответственно, в смету — для достижения лучшего результата.
В рамках разработки дизайн-концепции я сосредоточилась на:
1. Создание дизайна главной страницы
Главная страница стала образцом дизайна для всего сайта. Там я воплотила в жизнь те приемы, которые задумались на этапе прототипа.
1. Создание дизайна главной страницы
Главная страница стала образцом дизайна для всего сайта. Там я воплотила в жизнь те приемы, которые задумались на этапе прототипа.
2. Подбор шрифта для текста
У клиента есть фирменный заголовочный шрифт Fundamental Brigade Schwer, который мы планировали оставить для заголовков. Но для текста необходимо было освежить чуть устаревший PT Sans и сделать шрифт для текста более круглым и современным.
Я подобрала 2 платных и 2 бесплатных шрифта для проекта и на примере макета сайта, показала, как они встают в дизайн. Таким образом, шрифт легко выбрать и оценить в контексте всего дизайна.
У клиента есть фирменный заголовочный шрифт Fundamental Brigade Schwer, который мы планировали оставить для заголовков. Но для текста необходимо было освежить чуть устаревший PT Sans и сделать шрифт для текста более круглым и современным.
Я подобрала 2 платных и 2 бесплатных шрифта для проекта и на примере макета сайта, показала, как они встают в дизайн. Таким образом, шрифт легко выбрать и оценить в контексте всего дизайна.
После презентации дизайн-концепции мы выбрали шрифт, но также у нас была еще одна итерация с клиентом, где они захотели:
- Перекрасить шапку сайта в темно-синий цвет
- Сделать фон сайта в ретро-стиле: песочный светлый оттенок
- Переделать второй блок главной страницы на слайдер с бестселлерами вместо плиток разделов.
Так выглядел финальный дизайн утвержденной главной страницы: декстоп и мобильная версии.
Результат этапа дизайн-концепции
- Креативная концепция, облаченная в дизайн, и задающая визуальный код для всего сайта.
Этап 4. Дизайн всего сайта
После утверждения дизайн-концепции, я приступила к отрисовке всего сайта.
На этом этапе я сразу продумываю все анимации и состояния кнопок/меню/ховеров, которые будут на сайте — чтобы облегчить себе верстку, а клиенту понимание того, как это будет выглядеть на «живом» сайте.
На этом этапе я сразу продумываю все анимации и состояния кнопок/меню/ховеров, которые будут на сайте — чтобы облегчить себе верстку, а клиенту понимание того, как это будет выглядеть на «живом» сайте.
Страница каталога категории «Белье»
Карточка товара с фиксированной правой стороной и скроллом вниз слева: с фотографиями товара
Страницы: Подарочный сертификат, О нас, Страница успеха после оплаты
Результат этапа дизайна
- Макеты сайта в десктопной, планшетной и мобильной версиях, отрисованные во всех состояниях и готовые к верстке.
Этап 5. Верстка на Tilda
Сайт верстался на Тильде. И для того, чтобы упростить работу по взаимодействию с сайтом — многие блоки я делала стандартными блоками Тильды и модифицировала их кодом, чтобы они выглядели красиво.
Стандартные блоки Тильды имеют дружелюбный и интуитивно понятный интерфейс, так что клиенту легко самостоятельно вносить изменения в сайт.
А так как это интернет-магазин с акциями, новыми коллекциями и идеями, коллаборациями и так далее — очень важно владельцу самостоятельно иметь возможность быстро вносить изменения и контролировать наполнение сайта.
Стандартные блоки Тильды имеют дружелюбный и интуитивно понятный интерфейс, так что клиенту легко самостоятельно вносить изменения в сайт.
А так как это интернет-магазин с акциями, новыми коллекциями и идеями, коллаборациями и так далее — очень важно владельцу самостоятельно иметь возможность быстро вносить изменения и контролировать наполнение сайта.
Например, плитки на странице «Каталог» сделаны стандартным блоком Тильды, чтобы когда добавится новая категория товаров или станет неактуальной текущая — их можно было легко самостоятельно поменять
Но было и кое-что более интересное — нестандартная сетка товаров из каталога. Я немного затронула эту тему выше, но здесь раскрою ее поподробнее.
Запрос был такой: в одной половине страницы: карточки товаров, в другой — красивое фото товара на модели, как на этом референсе:
Для реализации данного решения мне понадобилось модифицировать стандартную сетку каталога Тильды кодом.
Чтобы понимать, стандартное размещение карточек на Тильде выглядит вот так:
Чтобы понимать, стандартное размещение карточек на Тильде выглядит вот так:
А надо вот так:
Как же я этого добилась?
Если кратко:
- Взяла код для сетки товаров от моей коллеги Алины Спицы (Алина, если ты читаешь, спасибо!).
- Модифицировала его до неузнаваемости с помощью Chat GPT и немного своих умелых ручек: сделала необходимую нам по дизайну сетку товаров и с помощью JS-скрипта размещала изображения, высота которых считалась специальным образом, чтобы заканчиваться ровно там, где заканчивается изображение последней карточки товара.
- Вуаля, спустя 10 часов тестирования и отладки — все готово!
Еще были настроены маленькие, но очень важные моменты:
1. Обновлена категоризация товаров в каталоге товара, чтобы подстроить товары под новый формат сетки.
Красным квадратиком выделены новые теги, которые нужно было присвоить товарам, чтобы задуманная нами сетка каталога адекватно отображалась
2. Добавлена перелинковка на под-категории внутри категорий товара.
Например, на странице Белье есть под-категории: Топы, Трусы и Наборы. Для каждой под-категории была создана отдельная страница, чтобы ее легко можно быть отправить ссылкой подруге или разместить в рекламу на конкретную под-категорию.
И на каждой из страниц под-категорий была ссылка на страницы других под-категорий для удобства пользователей.
Например, на странице Белье есть под-категории: Топы, Трусы и Наборы. Для каждой под-категории была создана отдельная страница, чтобы ее легко можно быть отправить ссылкой подруге или разместить в рекламу на конкретную под-категорию.
И на каждой из страниц под-категорий была ссылка на страницы других под-категорий для удобства пользователей.
Красным квадратиком выделены ссылки на страницы под-категорий. Помимо этих ссылок, перейти на родительскую страницу можно было по хлебным крошкам (пути пользователя) в самом верху страницы
3. Пересобрана карточка товара — так же с помощью кода (иногда, мне казалось, что еще и с божьей помощью!). Кажется, ни осталось ни одного стандартного элемента Тильды в карточке, все преобразовано под стиль бренда CSS-инструментами.
Из интересного: внедрила хлебные крошки (путь пользователя) в карточку товара, поместив его в правую фиксированную сторону. Для этого я написала код, используя своего любимого помощника — Chat GPT
4. Для страницы SALE предложила менять наполнение в зависимости от позиций на распродаже. Когда товаров на распродаже нет — выводить форму подписки на емейл-рассылку, а сетку товаров скрывать.
5. Для баннеров на главной странице предложила положить фото на хостинг и оттуда через код подтягивать их на Тильду.
Поскольку у клиента очень качественные фото-исходники, то при загрузке на Тильду она их нещадно сжимает. И не получается сохранить исходное качество фото.
Поэтому, я предложила перенести фото на хостинг — таким образом, мы оптимизировали загрузку и сохранили качество фото на главной странице, «лице» бренда.
Поскольку у клиента очень качественные фото-исходники, то при загрузке на Тильду она их нещадно сжимает. И не получается сохранить исходное качество фото.
Поэтому, я предложила перенести фото на хостинг — таким образом, мы оптимизировали загрузку и сохранили качество фото на главной странице, «лице» бренда.
Мобильная версия сайта:
Результат этапа верстки
- Готовый сайт, которым можно пользоваться.
Ну и сравните финальное до/после:
Если хотите получить такой же классный результат — оставьте заявку на бесплатную консультацию
Мы созвонимся на 30+ минут, обсудим вашу задачу, а я подготовлю предложение по цене и срокам, рассчитанное индивидуально под вас.
Сообщение об успешной отправке!