Мам, купи!

Мам, купи!

Год: 2017
Задачи: Проектирование, дизайн и вёрстка/программирование
Тип сайта: Интернет-магазин

Один из самых эффектных сайтов, сделанных мною в 2016 году. Задача стояла сделать интернет магазин в замен старого. Старый сайт на тот момент довольно сильно устарел, имел невзрачный дизайн, хотя даже он продавал продукцию Дарьи на ура. Основной проблемой старого сайта было то, что у него не было мобильной версии сайта, при том, что траффик на сайте более 50% с мобильных телефонов и планшетов. Соответственно и было решено подходить к разработке с прицелом на то, что всё нарисованное и свёрстанное должно сложиться в прекрасную картинку на телефоне. 

Почему же был выбран именно такой дизайн сайта?

Дарья - художница, и имеет свой бизнес по продаже сувенирной и не очень продукции. Сюда входят открытки, фляги, термостаканы, одежда и многое другое. Отличительной чертой Дарьиной продукции является её молодёжная направленность, отсутствие цензуры, дерзость и красочность. Именно за эти качества тысячи довольных покупетелей и любят эти вещи.

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

Главная страница

Начинается всё довольно стандартно, зафиксированный header с основными навигационными блоками, такими как логотип, меню, корзина, ссылки на соцсети, адрес и вход в личный кабинет. В последствии был добавлен ещё поиск, без которого не обходится ни один магазин. При проскролливании страницы вниз шапка сайта уменьшается в размерах и "прилипает" к верху окна браузера, что позволяет нам иметь доступ к навигации где бы мы ни находились.

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

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

Завершает страницу у нас новостная лента из трёх последних новостей. Используется для оповещения клиентов о предстоящих выставках в торговых центрах, новых линейках товаров, появления новых эксклюзивных принтов и других интересных новостях. 

mam main

Каталог

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

mam catalog

Страница категории

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

mam category

Страница товара

Страница товара начинается с его названия и короткого описания. На странице присутствует цена, полное описание товара, его характеристики, атрибуты, а так же связанные с этим товаром другая продукция. Данную функцию я всегда рекомендую использовать своим клиентам потому можно легко повысить средний чек покупки. Однако, подходить к этому надо с головой, не просто связывая товары между собой, а вдумчиво. Например человек заказывая флягу с определённым принтом захочет купить так же кружку либо термостакан, поэтому было бы идеально подкинуть сразу же ему варианты. При этом лично я не вижу особого смысла выводить похожие товары. Я предпочитаю похожие твары выводить в конце, но в данном случае мы от них отказались в пользу связанных.

mam item

Текстовые страницы

Так же были разработаны макеты остальных внутренних страниц, таких как FAQ (частозадаваемые вопросы), контакты и вакансии. Приведу пример страницы FAQ. Часто в интернет магазинах можно встретить оформление данных страниц в виде аккордеонов, когда видны только вопросы, а при клике появляются ответы. Я считаю, что заставлять клиента лишний раз щёлкать для получения требуемой информации довольно кощунственно, поэтому предпочитаю показывать всю информацию сразу же, особенно это важно на страницах контактов. Конечно, бывают ситуации когда использование аккордеона оправдано действительно огромным количеством текста, но это не наш случай.

mam faq