Задача:
Согласно ТЗ сайт должен отвечать следующим требованиям
— Современное дизайн оформление, простая навигация, клиентский путь в зависимости от цели – подобрать к интерьеру, почему картина – отличный подарок.
— Карточки товара – простое добавление удаление редактирование иллюстрации и описания
— Функционал поиска по товарам с фильтрами по цветам и хештегам
— Функционал помощи в определении цветового решения
— СЕО оптимизация (анализ wordstat плюс смежные области)
— Механизм вопросов через мессенджеры или форму ОС
— Механизм оплаты через сайт (сбп, эквайринг)
— Блог (возможно зеркало с соц сетей)
— Оптимизация под мобильный телефон и дкрмпьютер
— Домен
— Информация об авторе, технике, инд услугах (в тч аэросъемка)
Решение:
1. Так как бизнес идея только проверялась и до этого не была запущена, то на первоначальном брифе было решено использовать максимально простые технические решения, чтобы ускорить реализацию.
В качестве платформы для старта магазина была выбрана Тильда:
+ быстрая скорость разработки
+ невысокая стоимость в год
+ возможность создания интернет-магазина без дополнительной стоимости
+ хорошая сео оптимизация
+ легкость работы для клиента после сдачи проекта
2. Создание СЕО ядра сайта
— проведен сео аудит конкурентов, собраны основные поисковые запросы, которые они используют для продвижения;
— выполнены работы по сбору и кластеризации поисковых запросов через системы поисковой аналитики;
— создана полноценная структура сайта с учетом кластеризации и распределения запросов по страницам. Структура сайта учитывает весь функционал с планом развития на несколько лет.
3. Прототипирование страниц
После согласования структуры сайта и сео ядра, приступил к созданию черновых макетов каждой страницы.
Это позволит:
— выстроить порядок блоков и элементов на странице таким образом, чтобы получить максимальное удобство для посетителей;
— сделать повествование лаконичным и конверсионным;
— определить объемы сео текста, который будет размещен в блоках
4. Дизайн и типографика
После согласования прототипов приступаем к дизайну и типографики. Согласно результату брифа клиента, выбрана цветовая палитра и шрифты, которые более всего отражают минималистичный стиль. Что в духе галерей, мастерских и отлично вписываются в требуемый ценовой сегмент.
Для основных картинок, которые можно увеличить или перейти по ним в другой раздел, внесены CSS стили для создания рамки при наведении
Основная трудность заключалась в отображении оригинальных пропорций каталога и карточек товаров. Так как картины могут быть горизонтальными и вертикальными, то это вносит определенные сложности, в результате чего стандартный функционал Тильды отображал изображения некорректно
Для устранения данного недостатка были применены следующие методы: в названии картинки должны быть слова horizontal или vertical для горизонтальной, вертикальной картинок соотвественно, также внесены CSS правки, которые применяют свой стиль исходя из наличия horizontal, vertical в названии изображения. В итоге отображение стало корректным
5. Наполнение каталога и логика заказа
Это был самый простой этап, так как в Тильде есть хороший инструментарий по работе с добавлением товаров. Основной нюанс, это то, что каждая картина продается в единичном экземпляре, поэтому вариации товара не подошли, так как каждая вариация плюсует 1 позицию в наличии товара. Поэтому выбор размера и ориентации для добавления в корзину реализован через дополнительные опции. Они не добавляют количество в наличии, а лишь прибавляют стоимость к базовой цене
Однако, в стандартном функционале корзины отсутствует возможность отображения / скрытия полей для ввода при добавлении определенного товара в корзину. Поэтому для отображения / скрытия поля «Укажите размер картины» при добавлении товара с доп.опцией «Свой размер» был написан свой JS код и внедрен на страницу карточки товара
6. Создание страниц и функционал
Кроме каталога и главной страницы были созданы лендинги для записи на услуги «Оформление интерьера для дома», «Сотрудничество с дизайнерами», «Оформление интерьера для бизнеса». Также созданы технические страницы необходимые для полноценной работы сайта.
Для каталога и форм на сайте привязаны CRM листы Тильды, настроены уведомления клиентов о покупке и записи, а также уведомления владельца сайта через e-mail, telegram о всех событиях и заявках.
Для работы e-mail, создана доменная почта, прописаны все сертификаты (DKIM, DMARC, SPF), чтобы исключить возможность подмены адреса злоумышленниками и улучшить доставляемость писем.
7. СЕО и индексация
Для каждой страницы прописаны СЕО заголовок, описание для поисковых систем и социальных сетей. В тексты всех страниц включены поисковые запросы, которые были подготовлены на этапе составления структуры и сбора сео ядра.
Сайт добавлен в поисковые системы Гугл и Яндекс, отправлены на индексирование все страницы и добавлена карта сайта (страницы, товары, посты).