Клиент занимается производством и продажей плстиковых окон в Челябинске и области. Работает на рынке пластиковых окон в Челябинске с 2003 года. У компании есть собственное производство пластиковых окон – и это является ее неоспоримым преимуществом перед другими челябинскими
оконными компаниями.

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

Ключевой задачей было создание масштабируемой системы — каждый раздел должен был содержать неограниченное количество посадочных страниц для наращивания ссылочной массы и улучшения SEO-показателей. Для этого нужно было определить и собрать набор универсальных блоков по принципу конструктора (аналогично Tilda), что позволяло быстро создавать новые страницы, сохраняя единый стиль и удобство интерфейса.

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

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

На основе полученных данных создали прототипы ключевых страниц каждого раздела. В процессе выявили повторяющиеся элементы интерфейса и паттерны взаимодействия.

В результате сформировалась библиотека из 22 универсальных блоков.

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

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

Формы и композиция:

• Мягкие скругленные углы
• Устойчивые, «массивные» блоки
• Сбалансированная, предсказуемая сетка

Адаптация под аудиторию:
Учитывая, что часть ЦА (люди 40−50+) не слишком уверенно пользуется интернетом, сделали упор на:
✔ Интуитивную навигацию
✔ Упрощенные формы
✔ Явные визуальные подсказки (стрелки, иконки, микроанимации для направляющих действий)

Цвета:

• Теплая пастельная палитра (бежевые, мягко-голубые, серые тона)
• Акцентные цвета для кнопок и важных элементов (яркие, притягивающие к себе взгляд)
• Цвета структурированы, для CTA — красный и фиолетовый градиент, для остальных элементов голубые и синие тона — создающие ассоциации со свежестью и чистотой света, проходящего через стекло

Типографика:

• Крупные, разборчивые шрифты
• Минимум декоративных элементов — только функциональные акценты

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

Разработали комплексный UI-kit, обеспечивающий единообразие всех элементов интерфейса

Для разработки было подготовлено 5 адаптивных версий для всех страниц

• 1920px (десктоп)
• 1200px (ноутбуки)
• 992px (планшеты)
• 768px (мобильные горизонтально)
• 320px (смартфоны)

Что сделано:

• Переработана сетка и компоновка блоков под каждое разрешение
• Оптимизирована типографика
• Упрощены сложные элементы (навигация, таблицы) для мобильных устройств
• Проверена читаемость и удобство взаимодействия на всех экранах

Анимации:

• Добавили микровзаимодействия для ключевых элементов (кнопки, карточки)
• Для сложных переходов создали дополнительные макеты с промежуточными состояниями.

Текст, описывающий особенности разработки.