свежий кейс

Удобство в квадрате: новый сайт для компании «Гарда Декор»

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

Задачи

«Гарда Декор» продает действительно красивую мебель и элементы интерьера. Успешно развивая сеть торговых салонов, представители компании также нацелились увеличить продажи в интернете
и минимизировать издержки работы с клиентами.
Для этого им понадобился современный интернет-магазин, обновленный внешне, интегрированный с 1С и более удобный для пользователей. Беремся
за работу.

Дизайн

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

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

Евгений
арт-директор
Надо ли говорить, что внешне все выглядит гораздо проще, чем на самом деле. На плечи разработчиков легли дико напряженные спринты и борьба с упрямой версткой, но они со всем справились.

Разработка

Судя по нашему опыту, чтобы сделать что-то стоящее с такими сложными фиксированными панелями, сдвигающимися и отъезжающими, нужно 23 недели работы как минимум 2 программистов. Это мы поняли еще во время работы над Scrumban. На проект «Гарда Декор» наш верстальщик потратил недели полторы, после этого мы с коллегами втроем еще неделю собирали два его спринта.

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

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

Иван
руководитель отдела программирования
Больше карточек, красивых и разных!

Приятные мелочи

Почему бы и нет? Без них проект не выглядел бы так симпатично! Во-первых, вертящиеся при наведении курсора иконки соцсетей:
Во-вторых, наш слоник, на этот раз летающий. Реально непростая игра!

Короче говоря, здесь всем удобно, интересно и легко. Вообще всем!

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

Хотелось бы поблагодарить Геннадия, милого и отзывчивого менеджера «Гарды Декор». Наверное, его чувство юмора запомнил весь наш коллектив! Вот одна из его цитат: «Ради справедливости скажу,
что сегодня я уже ходил поставить печати на подписанные акты,
но Хранитель Печати временно занят и немного позже пригласит меня!»

Любовь
руководитель проекта
Символично, но релиз сайта пришелся точь-в-точь на день рождения Геннадия. Так что двойные, хоть и запоздалые, поздравления!

Готовый проект

А вот и он: garda-opt.ru
 

Что еще почитать по этой теме

Мобильная версия сайта и адаптивная вёрстка — оно вам надо?
28 Июня 2016
Вопрос требует изучения. Поэтому в статье — в чём разница между мобильной версией сайта и адаптивной вёрсткой, когда они нужны и что делать, если их нет.
Прототип и ТЗ, или Откуда растут сайты
01 Марта 2016
Отвечаем на вопросы, которые вы стесняетесь задать. Включая популярные «Что это за фигня?» и «Нафига мне эта фигня?»
Агрегация требований. Как и, главное, — зачем
24 Февраля 2016
Если руководитель проекта не торопится писать ТЗ и говорит о какой-то непонятной агрегации требований, возможно, на это есть причины. Не в курсе, что это за агрегация? Листайте вниз.

У вас есть проект?

Давайте обсудим его. Продумаем. И сделаем!

Заказать клёвый проект
Заявка отправлена
Спасибо, ваша заявка отправлена. Эксперт студии Сибирикс свяжется с вами в ближайшее время для уточнения подробностей.