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

Студия «Сибирикс» создала сайт, который можно сжимать, растягивать и складывать.

Задачи

Разработать современный интернет-магазин, обновленный внешне, интегрированный с 1С и более удобный для пользователей.

Дизайн

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

Здесь можно увидеть синхронную работу панелей при внесении товара в корзину.

Разработка

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

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

Готовый проект: http://garda-opt.ru/.

Полный кейс читайте в блоге scrum-студии «Сибирикс».