Разработка дизайна интернет-магазина RuBlank (СПб)

Посмотреть сайт: RuBlank.ru

rublank-index-preview

Рисунок 1: главная страница. Вся информация вмещается в один экран (см. также вкладку «Процесс» – там показан сайт до редизайна). В правом верхнем углу расположен чётко видный телефон. Меню сделано просто и кратко. Сразу под ним расположено большое окно поиска, под которым находятся три фильтра продукции: раздел, подраздел, товар. При помощи слайдера, сделанного во всю ширину экрана, пользователь быстро узнаёт о преимуществах компании. Для большего удобства, иконка корзины «приклеена» к правому краю экрана и остается на месте при прокрутке страницы.

rublank-katalog-preview

Рисунок 2: каталог. При заходе в раздел каталога (например, строительство), выводятся все товары во всех рубриках (в данном случае – бланки, журналы и книги) данного раздела. При клике на подраздел (например, бланки) в данном разделе срабатывает фильтр, и на экране остаются только товары, которые находятся в данном подразделе этого раздела (т.е. бланки в разделе «Строительство»). Решение быстрое и наглядное. Для удобства пользователя, товары выводятся в одну колонку и сортируются по алфавиту – от А до Я.

rublank-katalog-tovar-preview

Рисунок 3: прилипающее меню и карточка товара. При прокрутке страницы, на экране отображается прилипающее меню, которое позволяет быстро (без возврата в верхнюю часть страницы) перейти в нужный раздел сайта. Что же касается карточки товара, то в данном случае реализовано новаторское авторское решение, которое не было замечено ни на одном другом сайте: все товары сделаны в виде так называемых аккордеонов, т.е. при клике на ссылку вместо перехода на страницу карточки товара, этот пункт раскрывается, и карточка товара в доли секунды отображается прямо на этой странице (см. рисунки 2 и 3). Подробнее о карточке товара – в подписи к следующему рисунку.

rublank-katalog-tovar-preview-zoom

Рисунок 4: карточка товара, с увеличением. В карточке товара отображается миниатюра товара (если фото товара не загружено, выводится рисунок с текстом «нет фото»), его краткое описание, артикул и цена. При помощи стрелочек или прямо в поле формы пользователь может быстро указать нужное количество товаров и поместить их в корзину или заказать в один клик (при заказе в один клик, пользователь должен заполнить мини-форму, в которой запрашиваются его имя, e-mail и телефон; после нажатия кнопки «Отправить» эта информация – вместе со спецификацией и количеством заказанного товара – «падает» на e-mail менеджеру интернет-магазина). В зависимости от указанного количества товаров, меняется сумма – в большую или меньшую сторону.

rublank-lightbox-preview

Рисунок 5: увеличенные фото продукции. При клике на миниатюру (маленькое фото) товара, оно открывается в большем размере в виде так называемого «лайтбокса» в том же окне (не происходит перехода на другую страницу). Если к одной карточке товара загружено несколько изображений, их можно просмотреть в формате фотогалереи при помощи стрелочек вправо и влево в лайтбоксе.

rublank-katalog-tovar-drop-down-menu

Рисунок 6: выпадающее меню каталога. При наведении курсора мышки на пункт меню «Каталог», выпадает расширенное меню, в котором пользователь быстро может выбрать нужный раздел или подраздел продукции. Для большей наглядности, выбираемый пункт каталога «подсвечивается» контрастным красным цветом. Таким образом, для перехода к нужному товару у пользователя уходит всего два клика: первый – клик по подразделу или разделу, второй – клик по ссылке на раскрывающуюся карточку товара (см. рисунок 3).

rublank-contacts-preview

Рисунок 7: страница «Контакты». Интерактивная карта, контактная информация, как добраться и даже фото с аэрофотосъемки, на котором графически отображено ближайшее метро (справа) и офис компании (слева).

Вид сайта до редизайна

До редизайна главная страница интернет-магазина технологических журналов и бланков RuBlank представляла собой вот такую «простыню»:

rublank-index-before-redesign

Комментарии к старому дизайну интернет-магазина

Логотипа на сайте не было, навигация была сделана из рук вон плохо, грузился сайт долго. Замечаний к сайту было много – как со стороны его владельца, так и со стороны команды multipromotion.

Да начала работ над редизайном сайта, был сделан его маркетинговый аудит, результаты которого во многом помогли в разработке нового сайта (нужно было разработать не только новый дизайн интернет-магазина, но и разместить сайт на более продвинутом «движке»).

К слову: в качестве CMS для данного проекта был выбран UMI.

P.S. Если Вам интересна тема выбора систем управления сайтом, рекомендуем прочитать нашу статью Какую CMS выбрать – в ней этот вопрос раскрыт достаточно хорошо.

Посмотреть сайт: RuBlank.ru

Планируете заказать сайт? Тогда, возможно, вам будет полезно прочитать, что нужно знать заказчику о разработке дизайна сайта в Санкт-Петербурге и Москве

* * *

Виды работ: разработка дизайна сайта
Исполнители: Павел
Клиент: RuBlank
Регион: Санкт-Петербург
Сдача проекта: март 2014