Редизайн сайта «Царицынские соленья»: новый взгляд на бренд

Компания обратилась к нам по рекомендации Центра Поддержки Экспорта Волгоградской области с запросом на создание современного и функционального сайта с англоязычной версией. Старый сайт не обновлялся, содержал устаревшую информацию и был подвержен спаму.

Разработать не просто корпоративный сайт, а полноценную цифровую витрину, отражающую масштаб компании, ее ассортимент и возможности для B2C и B2B-клиентов, включая СТМ (собственные торговые марки). Важно было использовать не шаблонные решения, а разработать уникальный продукт с выразительным дизайном.

Мы погрузились в бизнес клиента и потребности его аудитории, выделив три ключевых направления:

Имидж — показать масштаб, экспертность и лидерство компании.

Удобство для всех сегментов — создать удобный каталог с фильтрацией для B2C и персонализированные условия с кабинетами для B2B.

Технологичность — использовать анимации, интерактивные элементы и персонализированные предложения для усиления вовлеченности.

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

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

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

1. Сокращение сроков разработки сайта;
2. Возможность пользователю выбрать наиболее удобный маркетплейс;
3. Дополнительное продвижение продукции на крупных онлайн-платформах.

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

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

Особенность этого проекта — нестандартный баннер, состоящий из множества отдельных элементов. Мы решили разместить каждый объект на отдельном слое и задать ему индивидуальные параметры движения. Это дало возможность использовать большое количество слоев и создать эффект живой анимации.

При верстке мы придерживаемся методологии БЭМ и используем pug вместо обычного HTML, который затем компилируется в финальный код. Для стилизации — SCSS, а при необходимости подключаем сторонние библиотеки или создаем свои компоненты.

Главный вызов проекта — полноэкранный слайдер в десктопной версии. Контент должен выглядеть одинаково хорошо как на FullHD, так и на UltraHD экранах с разными пропорциями. Наше решение: размер элементов и ширина контентной области рассчитываются исходя из минимальной стороны экрана, а содержимое фреймов центрируется. Это позволяет добиться гармоничного отображения на любых мониторах.

Разработаны три версии:

• Десктопная (адаптируется пропорционально)
• Планшетная
• Мобильная (минимальная ширина 320px)

Для кросс-браузерности ориентируемся на поддержку минимум 95% устройств. В сложных случаях подключаем полифилы.

Мы выбрали проверенные инструменты:

Фреймворки вроде React или Vue отлично подходят для сложных интерфейсов, но в этом проекте их использование было избыточным — хотя с технической точки зрения их интеграция могла бы быть интересным решением.

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

Главная страница — это визуальное шоу. Мы реализовали плавные анимации переходов между экранами, параллакс-эффекты и динамическую подгрузку контента.

В разделе «Продукция» добавили удобный поиск по видам и линейкам товаров. Для быстрой загрузки использовали современные форматы изображений и оптимизированные техники их хранения.

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

Сайт построен на CMS Bitrix (редакция Старт), что обеспечило надежность и защиту данных. Для управления контентом внедрили систему Эрмитаж, позволяющую редактировать информацию прямо с «лица» сайта.

Разработка велась на выделенном сервере с GitLab для контроля версий. Это обеспечило стабильность и безопасность работы.

Мы провели базовую SEO-оптимизацию, настроили редиректы и обновили DNS-записи. В результате сайт стал более оптимизирован для поисковых систем и теперь находит свою аудиторию, повышая видимость как в поиске, так и среди потенциальных клиентов.

Проект успешно объединил B2B- и B2C-направления: он не только представляет продукцию для партнеров, но и интегрирован с маркетплейсами Ozon и Wildberries. Сайт получился стильным, ярким и визуально «вкусным», идеально подчеркивая характер бренда и его продукцию.

Неэффективный сайт тормозит ваш бизнес? Мы поможем вам создать сайт, который привлекает клиентов и конвертирует их в продажи. Сделаем всё с учётом вашего бюджета и цели.

Свяжитесь с нами, и получите сайт, который будет работать на вас!

📞 +7 (961) 073-34-43
✉   hello@34web.ru