Гранитис: сайт для производителя гранитных изделий

ЗаказчикКомпания Гранитис производит из гранита бордюр, брусчатку, тактильная плита, плиты любого размера, а также производит укладку гранитных изделий на объекте заказчика.ЗадачаРазработать удобный, адаптивный сайт для знакомства клиентов с компанией Гранитис и для изучения ассортимента гранитных изделий в виде каталога.

Технологии: PHP, HTML5, CSS3, Bootstrap.

Платформа: CMS KONVERSIA

Команда: 4 человека (дизайнер, верстальщик, разработчик, руководитель проекта).

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

Минимальные требования клиента звучали так:

  • Дизайн интерфейса должен содержать цвета из лого компании — Лев на оранжевом фоне.
  • Иметь простую и понятную навигация по сайту.
  • Иметь возможность оставить заявку на заказ гранита.
  • Создать удобные карточки гранитных изделий и модификатор подбора нужного гранита.
  • Иметь внутренний функционал админ-панели, чтобы без помощи тех.специалситов добавлять модификацию гранитных изделий.

Предистория

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

Как было:

cea767b89c4a45f1c6555b7d7690aaf7.jpg83c8042292b8b289ce24e4ef87a2f11c.jpg

Работы:

Целевая аудитория продукта — частные компании которым требуется благоустройство территории в собственности их компании, муниципальные компании, которые проводят плановые дорожные работы и благоустройство территории. Впечатление от компании и вероятность покупки у такой ЦА зависит даже от незначительных факторов:

  • Фоновая заставка и цветовая гамма сайта.
  • Наличие спросового ассортимента и его модификация.
  • Высокая скорость загрузки сайта.
  • Понятная навигация по сайту.
  • Качество картинок, понятное описание товара.

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

4c562f2e42b5d04d9acd178077dc2500.png

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

  • Блок Проекты
  • Блок Производство
  • Блок Продукция
  • Блок Контакты

1d5e5d1f4f5a3d20d6ca48f3ce275470.png

Для начала создания сайта веб-дизайнер создал макеты расположения блоков на веб-странице и были утверждены с клиентом.

72e15137db014b721d3be254b7f3eaf7.jpg

1e804e72277eb4fcaffa348174f06565.jpg

Главная страница

Пользователи заходят на сайт с главной страницы по брендовым запросам вроде «компания «Гранитис» или по прямым ссылкам. Поэтому основная задача страницы — рассказать о бренде и направить пользователя к выполнению нужного сценария.

7903f9225734004f9857f37c133d33b6.png

Каталог продукции

Каталог товаров — самый просматриваемый раздел на сайте. К нему обращаются 70% посетителей сайта, и именно с него на сайт заходят более 50% аудитории. Для сравнения: на главную заходят лишь 15%, а на страницу «О компании» — 3%.

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

43a1d6faadcf6471ed5412851dde1adc.png

ОБРАТИТЕ ВНИМАНИЕ:

Страница объединяет в себе приемы верстки классического интернет-магазина и презентации каталога продукции. Крупные фото и акцент на характеристиках.

Модификатор здесь — не просто свойства, а основной критерий выбора конкретного типа изделия.

Все решения (заголовки, названия, цены, кнопки, тексты) учитывают требования SEO для конкурирования с интернет-магазинами гранитных изделий по частотным запросам вроде «купить гранит» и «гранит в москве».

Карточка основного товара

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

70b4253a044dcd0c4d1b1664525ccf92.jpg

SEO

Выполнили базовые требования поисковых систем для продвижения сайта в поисковой выдаче:

  • Создали и разместили robots.txt и sitemap.xml. Запретили индексацию технических разделов.
  • Составили новые тексты и разместили на страницах категории: брусчатка, бордюр, плита и тактильная плита.
  • Проработали метатеги title, H1 и description — важные факторы, по которым поисковики определяют тематику страницы.
  • Добавили на сайт счетчики аналитики и установили цели на конверсионные действия: как оставить заявку, заказать обратный звонок.
  • Запустили в работу задачу по внешним ссылкам на релевантных тематических сайтах. 

Адаптивность дизайна — мобильная версия

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

bf7b319a0a39841e6fcc08e23c2c6acc.png

Итог:

В процессе создания нового сайта мы решали множество задач, но глобальные векторы были такими:

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

Нацеленность на продажи. Сайт должен решать потребности потенциальных покупателей и действующих потребителей, а также быть удобным, презентационным и адаптивным.

Каталог + конверсионный магазин. Сайт должен иметь каталог гранитной продукции с акцентом на модификацию, то есть подбор нужного размера и типа гранита у каждой категории: бордюр, брусчатка, плита.

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

SEO. При создании сайта мы сразу учли необходимые доработки для увеличения SEO-трафика и внесли их на сайт до открытия к индексации. 

Перейти на сайт

Полный текст статьи читайте на CMS Magazine