Официальный сайт «CaseShop» в Находке v.2
Редизайн, вёрстка и наполнение сайта
Краткая сводка
Дата:
Июль — октябрь 2025 г.
Задача:
Обновить и улучшить функционал сайта магазина с использованием современных и технологичных инструментов.
Участники:
Ответы на вопросы по процессам: Дмитрий Мартыненко.
Вёрстка, отрисовка, наполнение: Евгений Куманьков.
Вёрстка, отрисовка, наполнение: Евгений Куманьков.
Ссылка:
Предыдущая версия:
Проделанная работа
Общее:
Вёрстка, дизайн, кодинг:
Наполнение витрины товарами и услугами:
Функции интернет-магазина:
Telegram-канал:
SEO-оптимизация сайта:
Наружная реклама:
Затраченное время: 3.5 месяца.
- Проведён анализ и планирование предстоящей работы по переработке сайта.
- Домен applecaseshop.ru был потерян за неуплату — был зарегистрирован новый домен caseshopapple.ru и привязан к хостингу.
- Параллакс обложку с огромным обилием изображений техники в формате PNG решено убрать в архив.
- Раздел «ассортимент» решено переработать в виде отдельных карточек товаров заказываемых через корзину вместо списка со ссылками на мессенджеры.
- Раздел «услуги» решено переработать в виде карточек товаров вместо таблицы.
- Раздел «опыт работы» решено оставить без изменений.
- Раздел «преимущества» решено оставить без изменений.
- Раздел «география закупок» решено оставить без изменений.
- Раздел «оценка, скупка и обмен» решено оставить без изменений.
- Раздел «кредит» решено почистить от неактуальных банков-партнёров.
- Раздел «контакты» решено дополнить актуальными контактами и актуализировать описание.
- Раздел «команда» решено доработать под новый функционал сайта.
- Подвал сайта решено донаполнить и доработать под новый функционал сайта.
- Верхнее ниспадающее меню решено оставить без концептуальных изменений, добавить новые пиктограммы и актуализировать ссылки.
Вёрстка, дизайн, кодинг:
- Перерисована облегчённая версия логотипа в SVG-векторе в CorelDRAW для праздничных обложек и подвала.
- Написан JS-скрипт, который меняет заглавные обложки с праздниками по датам: 201 строка кода.
- Подготовлены обложки с праздниками (поиск изображений, обрезка, вставка в блоки, описание и слоган, привязка к скрипту): 46 вариантов.
- Отрисована в Zero-Block параллакс-обложка для десктоп-версии.
- Добавлена функция полноценного поиска по всему содержимому сайта.
- Добавлены вкладки-переключатели разделов товаров с возможностью переключать категории без перезагрузки страницы.
- Отрисованы иконки для разделов ассортимента техники в SVG-векторе в CorelDRAW: 7 шт.
- Добавлен на главную раздел «Доставка» с описанием услуги.
- Добавлены все контакты магазина в виде цветных кружков в раздел «Контакты».
- Добавлена одиночная кнопка «Telegram-канал» (для плавной миграции посетителей с сайта на канал).
- Перерисованы Memoji членов команды — убран белый фон (фон сделан прозрачным).
- Написан CSS-код для отображения членов команды на мобильных платформах в две колонки: 16 строк кода.
- Отрисованы бейджи сервиса карты лояльности в SVG-векторе в CorelDRAW: 2 шт (Apple Wallet и Wallet).
- Добавлены бейджи лояльности в подвал.
- Написан JS-скрипт для отображения соответствующей платформы карты лояльности в подвале в зависимости от ОС пользователя (iOS или Android): 21 строка кода.
- Добавлены виджеты (Яндекс Карты и 2ГИС) рейтинга магазина в подвале (тёмные и светлые варианты).
- Добавлена статичная кнопка «наверх» в углу на всех страницах сайта.
- Добавлен статичный виджет связи с магазином в углу на всех страницах сайтах. Размер подогнан таким образом, чтобы при открытии виджета он аккуратно по размерам перекрывал кнопку «наверх».
- Создана страница «Политика конфиденциальности» с подробным описанием собираемых данных и условий: 1 399 слов текста.
- Создана страница «Способы оплаты» с подробным описанием способов и процесса: 376 слов текста.
- Отрисованы SVG-изображения в CorelDRAW для страницы «Способы оплаты»: 4 шт.
- Написан JS-скрипт для строки копирайта с автоматическим подставлением текущего года: 18 строк кода.
- Написан CSS-код для тёмной темы сайта (включается автоматически в зависимости от темы оформления устройства): 266 строк кода.
- Добавлены тёмные карты в «Контактах» для тёмной темы оформления сайта.
- Все фразы «Case Shop» на сайте заменены на «CaseShop».
- Проведена типографская правка всех текстов на сайте (буквы «ё», кавычки-ёлочки, знаки тире, неразрывные пробелы).
- Добавлен розовый цвет выделения текста страниц.
- Проведена косметическая доработка элементов страниц (CSS+JS): 1 692 строк кода.
- Произведена конструктивная и декоративная оптимизация сайта для корректного и приятного отображения на мобильных платформах.
- Во всех соцсетях и справочниках проставлены корректные данные о компании и корректный адрес сайта (для сохранения лояльной аудитории и пресечения пустых уходов на старое доменное имя).
- Добавлена аналитика посещений (Яндекс Метрика).
- Добавлена возможность установки сайта как веб-приложения. Протестировано на iPhone, iPad, Mac, телефоне на базе Android, планшете на базе Android, компьютере на базе Windows.
- Отрисованы тач-иконки для веб-приложения: 4 варианта.
- Отрисована новая фав-иконка для сайта.
- Добавлен всплывающий нотификатор о возможности установить веб-приложение. Написан JS-скрипт для отображения только на главной странице сайта и только на мобильных платформах.
- Отрисована анимированная информационная пиктограмма веб-приложения в SVG-векторе. Пиктограмма установлена в нотификатор о возможности установки.
Наполнение витрины товарами и услугами:
- Созданы карточки товаров и услуг по принципу «возможность выбрать все опции на одной странице». При смене опции/варианта/цвета посетителя не перекидывает на другую страницу — т. е. взаимодействие с сайтом более комфортное, плавное и без ожидания дополнительно загрузки страницы.
- Созданы карточки услуг: 15 позиций (38 вариантов с опциями).
- Созданы карточки аксессуаров Apple: ? позиций (? вариантов с опциями).
- Созданы карточки техники Apple, Dyson и Sony PlayStation: ? позиций (? вариантов с опциями).
- Отрисованы в Photoshop изображения для карточки услуг (у всех вручную удалён фон): 36 штук.
- Взяты с официальных сайтов и обработаны в Photoshop изображения для аксессуаров и техники Apple, Dyson, Sony PlayStation: порядка 2 500 шт.
- Написаны подробные текстовые описания для всех услуг и оформлены в виде вкладок на карточках.
- Взяты с официального сайта и переведены с английского на русский язык описания аксессуаров Apple и оформлены в виде вкладок на карточках.
- Взяты с официального сайта и переведены с английского на русский язык описания техники Apple, Dyson, Sony PlayStation и оформлены в виде вкладок на карточках.
- Оплачен VPN для доступа к сайту Dyson для получения из первоисточника изображений и описания товаров.
- Добавлено пульсирующее розовое свечение в верхней части страниц, кнопки «В корзину» и заголовков.
- Добавлено смещение и подсветка карточек товаров при наведении мышью.
Функции интернет-магазина:
- Добавлена корзина на сайт.
- Подключена оплата картой от CloudPayments (функционал не задействован).
- Подключена оплата кредитом от ОТП (функционал не задействован).
- Подключена оплата частями от ОТП (функционал не задействован).
- Подключена CRM для отслеживания оформленных заказов.
- Подключено поступление информационных заявок об оформлении заказа (с подробными данными) в Telegram менеджеру.
Telegram-канал:
- Подобраны иконки для обоев канала.
- Отрисованы обои в разных цветах для канала: ~20 вариантов.
- Типографская правка публикуемых постов и описания канала.
- Подготовка видео для публикации в канал (нарезка, звукоряд).
- Подготовка текста постов и публикация в канал.
- Написана инструкция по SMM-типографике для сотрудников.
SEO-оптимизация сайта:
- Проведена работа над заголовками, описанием и содержимым страниц сайта.
Наружная реклама:
- Отрисованы макеты для баннеров на билборды для размещения в городе.
- Отрисованы QR-коды для перехода на сайт и Telegram-канал для размещения на рекламном стенде.
Затраченное время: 3.5 месяца.
Использованные инструменты
