«Гарда Декор» продает действительно красивую мебель и элементы интерьера. Успешно развивая сеть торговых салонов, представители компании также нацелились увеличить продажи в интернете и минимизировать издержки на работу с клиентами.
Задачи
Разработать современный
![<p><b>Главная страница</b></p>](https://s29805.cdn.ngenix.net/upload/iblock/8ae/x8ae450f4abe58991b61d2ccd0fa95f46.jpg.pagespeed.ic.tSUH-l71h0.jpg)
Дизайн
Изначально появилась смелая идея сделать сайт внешне и функционально похожим на приложение для планшета. Реализовать ее решили посредством фиксированных панелей с меню и корзиной, характерных скорее для приложений. По задумке они должны работать синхронно: фиксироваться, отклеиваться и сдвигать друг друга в зависимости от ситуации.
![<p><b>Разрабатываем прототип</b></p>](https://s29805.cdn.ngenix.net/upload/iblock/af5/xaf55607ac030e55b4e6ff45c9da8dd36.png.pagespeed.ic.-VdYZ-6mdo.png)
Редко бывает, когда один дизайнер делает и прототип, и собственно дизайн, но в этом случае все получилось именно так, поэтому панели успешно перекочевали из прототипа в готовый проект.
![<p><b>Здесь можно увидеть синхронную работу панелей при внесении товара в корзину.</b></p>](https://s29805.cdn.ngenix.net/upload/iblock/0e5/x0e51ee2a0371975473ea72df52063a01.jpg.pagespeed.ic.lwpxXpmIMX.jpg)
![](https://s29805.cdn.ngenix.net/upload/iblock/ac8/xac8471d9c8b9af5c915b07c42f86cdcc.jpg.pagespeed.ic.qpPW6t0bNP.jpg)
Мы решили делать дизайн, четко ориентированный на вкусное представление товаров. И карточки товаров у нас красиво растягиваются и перестраиваются, если менять ширину экрана.
![<p><b>Карточки товаров плавно перестраиваются при изменении ширины экрана</b></p><p>В данном разделе пользователь может найти ответ на интересующий его вопрос или самостоятельно задать вопрос специалистам клиники.</p>](https://s29805.cdn.ngenix.net/upload/iblock/28f/x28f67c48653f704354b53cc2b4b8cb12.jpg.pagespeed.ic.0w5LDWv8KC.jpg)
Разработка
Согласовать все панели друг с другом, сделать так, чтобы они в нужный момент упирались в футер, и отточить кучу мелких деталей оказалось очень сложно. Зато готовый сайт адекватно работает на мониторах разной ширины и дружелюбен к пользователю.
![<p><b>Также послушно ведет себя меню в левой панели: если зайти в каталог, то при переключении пунктов меню, он подгружается без перезагрузки страницы.</b></p>](https://s29805.cdn.ngenix.net/upload/iblock/8c8/x8c86bde192c73621711791a8a22d519b.jpg.pagespeed.ic.eTiwRydBof.jpg)
Сверстали кучу различных карточек — для акций, новостей, проектов и товаров. При этом уже для товаров их было 4 вида: маленькие на белом фоне, маленькие на интерьерном, большие на белом и большие на интерьерном.
![<p><b>Карточки</b></p><p>Если менять размер экрана, то не только расположение товаров в каталоге динамически перестраивается, но и сами элементы меняют свой размер.</p>](https://s29805.cdn.ngenix.net/upload/iblock/408/x408b67150ec70a1c64a8bc32e746be65.jpg.pagespeed.ic.AJWTtOVWjG.jpg)