Дизайн

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

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

Разработка

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

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

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

Полный кейс читайте в блоге scrum-студии «Сибирикс» — http://blog.sibirix.ru/2015/09/04/garda-dekor-new/.

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