Логотип

Сайт Свайное дело

Компания занимается производством и продажей винтовых свай

Разработка
Кейс сайта Свайное дело

потребность заказчика

Обновить старый сайт, работающий на WordPress. Исправить все ошибки по верстке. Разработать более удобный и красивый с точки зрения дизайна сайт.

Сроки работ

Разработка сайта:
Июнь-Август 2024

Какие задачи перед нами стояли?

  • Оценка старого сайта и поиск ошибок

  • Оценка конкурентов в нише

  • Сбор семантики и кластеризация запросов

  • Составление приоритетных страниц для переноса

  • Составление структуры будущего веб-сайта

  • Написание рабочего прототипа главной страницы и основных целевых страниц

Картинка задач Сайт Свайное дело
  • Написание подробного, понятного для заказчика и исполнителя Технического Задания

  • Разработка дизайн-макета главной страницы, а также целевых внутренних страниц (для десктопа и для мобильных устройств)

  • Адаптивная верстка дизайн-макетов

  • Настройка работы сайта на CMS для удобного администрирования сайта

  • Техническая оптимизация сайта, базовая SEO оптимизация

  • Перенос контента со старого сайта (фото, тексты, meta и так далее), и наполнение нового контента

Технологии, которые мы использовали

Для реализации данного проекта мы использовали:

  • Axure RP
  • Figma
  • Adobe Photoshop
  • Яндекс.Вордстат
  • MODx CMS
  • HTML
  • CSS
  • JavaScript
  • PHP
  • Инструменты Microsoft Office
  • и др.
ModX ModX
Figma Figma
Django Django
HTML HTML
CSS CSS
JavaScript JavaScript
Python Python
ChatGPT ChatGPT
Photoshop Photoshop
Adobe Illustrator Adobe Illustrator
Yandex Yandex
Google Google
CloudFlare CloudFlare
Bitrix24 Bitrix24
Axure Axure

изучили рынок и конкурентов

Данная ниша довольно "узкая", но и здесь есть существенная конкуренция.

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

собрали актуальную семантику

Большую часть семантического ядра собрал и предоставил заказчик.

Тем не менее, нами были собраны еще некоторые запросы, которые составили новые кластеры (Свайный фундамент для дома, для бани, для бытовки, для ангара, и т.д.).

создали дерево сайта и услуг

Основные разделы сайта:

  • Услуги (Навесы, Свайный фундамент, Заборы, Мини-экскаватор, Берегоукрепление шпунтом, Пирсы и причалы, Подъем дома, Террасы и дорожки)
  • Цены/Прайс (Винтовые сваи, Сваи Шуруп, Сваи Оптима, Комбинированные сваи, Оголовки, Сопутствующие товары)
  • Акции
  • О компании (Портфолио, Гарантия, Партнерам, Статьи, Новости)
  • Контакты

разработали прототипы страниц

В прототипе главной страницы были отражены следующие блоки:

  • Оффер
  • SEO блок
  • Преимущества компании
  • Блок Цен на сваи
  • Блок ОС
  • Блок Услуг компании
  • Блок Схема работ
  • Блок Портфолио
  • Блок ОС
  • Блок Отзывов клиентов
  • Блок Сертификатов компании
  • Блок Контакты

На внутренних страницах также использовались блоки: Дескриптор, Каталог, Дополнительные текстовые блоки, Блоки статей, Блоки специалистов, Калькулятор и т.д.

разработали дизайн-макеты сайта

Были разработаны следующие дизайн-макеты:

  • Главная
  • Услуга
  • Страница товара
  • Прайсы
  • Акции
  • О компании
  • Портфолио
  • Гарантии
  • Партнерам
  • Статьи
  • Статья
  • Новости
  • Калькулятор
  • Контакты

Для каждого из них были разработаны мобильные версии макетов.

сверстали сайт на десктоп и мобильные устройства

Разработана адаптивная верстка всех страниц сайта с использованием HTML5, CSS3 и JavaScript. Сайт корректно отображается на всех современных устройствах (компьютеры, планшеты, смартфоны) и браузерах.

Реализована интерактивность сайта с использованием JavaScript (анимации, всплывающие окна, слайдеры). Реализованы формы обратной связи и валидация данных на стороне клиента с использованием JavaScript. Реализована обработка отправки форм (отображение сообщений об успехе/ошибке).

Реализован просмотр фотографий в галерее с использованием слайдера. Реализована возможность увеличения фотографий при клике. Галерея адаптирована под разные размеры экранов.

Реализована навигация по сайту с использованием меню.

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

настроили работу сайта на cms

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

На этапе интеграции MODX были созданы шаблоны и чанки, интегрированы необходимые сниппеты и плагины, что обеспечило динамическую генерацию контента.

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

После завершения интеграции начался процесс тестирования и проверка функциональности всех элементов.

Дизайн-макеты

Показана картинка Дизайн-макеты 1
Показана картинка Дизайн-макеты 2
Показана картинка Дизайн-макеты 3
Показана картинка Дизайн-макеты 4
Показана картинка Дизайн-макеты 5
Показана картинка Дизайн-макеты 6

наполнили сайт материалами

Материалы были предоставлены заказчиком. С нашей стороны были выполнены работы по их доработке под SEO, оформлению и наполнению.

протестировали и настроили работу сайта на хостинге

Протестировали работу сайта по PageSpeed, проверили сайт на наличие/отсутствие ошибок, настроили файлы sitemap.xml и robots.txt, настроили ЧПУ, настроили модуль SEO Pro, проверили сайт на валидаторе кода, прописали все meta, настроили работу сайта на https протоколе, и т.д.

как итог

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

Данный веб-сайт готов к дальнейшему продвижению как инструментами Яндекс.Директ, так и SEO.

2,5
месяца активной разработки
100+
страниц перенесено
90-100
результат по PageSpeed

наши контакты

Санкт-Петербург, Московский проспект, 183-185Ак7

info@saytspb.ru

Рабочие дни: пн-пт с 09:00 до 18:00

Выходные дни: сб-вс