19 мая 2016 в 13:42

Как я делал шаблон веб-магазина в Sketch.app для Themeforest. Часть 2: выкладываем товар tutorial

Всем привет. В прошлой статье я рассказывал о проектировании стартовой страницы для шаблона веб-магазина. Сегодня разбираемся с прототипами остальных страниц.


enter image description here


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


Каталог


Общая страница


У каталога будет входная страница (когда просто щелкаем в «каталог» без выбора какой-либо категории). Сверху ставим категории, справа от них — слайды и баннеры со стартовой страницы. Ну, теоретически это баннеры со стартовой, а там уже кто как переделает.


catalog start 1


Потом добавляем листалку товаров и еще баннеры (в уменьшенных версиях) — все тоже со стартовой страницы. Поэтому просто копирую/вставляю и у баннеров немножко подтягиваю размеры.


catalog start 2


Блок с подпиской, доставкой и футером у нас будет везде один, поэтому его можно символом.


catalog start 3


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


Здесь нам надо сделать версию с выключенным фильтром и со включенным (т.е. когда фильтра не видно и когда видно). Я решил делать сам фильтр вертикально — параметров может быть неизвестно сколько, а когда чего-то может быть неизвестно сколько, лучше не ограничивать его снизу. Еще плюс: вертикальный фильтр будет занимать ровно одну колонку товаров, что не будет ничего ломать при включении/выключении. С фильтром товаров у нас 3 колонки, без фильтра — 4.


Параметры беру у других магазинов и шаблонов. Ориентируюсь на обувь и одежду. Сверху на странице делаю блок с параметрами сортировки. В общем, весь стандартный набор современного веб-магазина.


catalog 1


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


catalog 2


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


Делаю большое фото обувки (в данном случае) с листалками вперед-назад и маленькими превью снизу. Лучше всегда давать возможность людям листать фото и стрелками, и превьюхами. А точки («буллеты»), если и использовать, то только как индикатор, гже мы находимся, но не как инструмент переключения слайдов — целиться в них уж больно неудобно.


product 1


Обязательно должна быть возможность посмотреть большое фото товара и желательно на всю страницу. Некоторые магазины практикуют показывать увеличенные фотки в ограниченном блоке («Икея», например), но я, сам настрадавшись как покупатель, понял, что у себя так делать не буду.


ikea


Название, рейтинг (вдруг будет) и параметры (размер/цвет) ставим сбоку — как у всех, в общем. Цену я сильно стараюсь не выделять (чтобы казалась незначительной хотя бы визуально), но и не делаю совсем незаметной — все-таки надо, чтобы покупатель при желании мог сходу разобраться, что почем.


product 2


Детальное описание, отзывы и о производителе делаю во вкладках. Т.е. одновременно видно что-то одно. Это чтобы не занимать много места текстовой частью. И еще чтобы по умолчанию не увеличивать сильно высоту страницы (не то чтобы я верил в сказку, что пользователи не умеют скроллить, просто это все-таки шаблон и делается не для себя).


product 3


Ниже предлагаем товары из похожих.


product 4


Ниже — лента инстаграма. В наше время очень много и больших, и маленьких компаний содержат там профили, поэтому блок будет актуальным.


product 5


Корзина


Главные требования к корзине:


  1. Список всех добавленных товаров с фото (что очевидно);
  2. Отображение цены за единицу товара, за несколько товаров и общей суммы;
  3. Возможность изменять количество каждого товара в корзине;
  4. Возможность удалять товары из корзины;
  5. Возможность применить промокод;
  6. Общую сумму желательно показывать с учетом доставки:
    • показывать сумму только за товары отдельно, без доставки;
    • показывать стоимость доставки отдельно;
    • показывать скидку с промокода отдельно;
    • показывать общую сумму включительно с доставкой;
    • дать возможность добавлять и изменять адрес доставки (или еще и службу доставки), не отходя от кассы.

cart 1


Оформление заказа делаем в несколько этапов, чтобы не вываливать на людей сразу длинную страшную форму. Да и логически просто: разбираешься с товарами → разбираешься с доставкой → разбираешься с оплатой.


cart 2


Избранное


Почти та же корзина, только список чуть попроще. Отсюда сразу же можно удалить товар или добавить в корзину.


favs


Контакты


Самый-подходящий-всем вариант — большая карта и список адресов отделений магазина, или шоу-румов, или складов, или офисов.


contacts


Хотя пока я это писал, понял: надо в новой версии шаблона добавить вариант «Контактов» для полностью онлайновых магазинов (без физических адресов).


Блог


Общая страница


Статей предположительно будет 2 типа — c заглавной картинкой и без. Превью делаю так: если статья с картинкой, оставляю только заголовок и дату; если без картинки — заголовок, дату и описание (по большей части место занять и чтобы получался красивый вид «карточки» статьи). Естественно, визуально придерживаюсь общего стиля сайта (по-журнальному, т.е.) В финальном варианте сделаю еще страницу, где поровну статей с иллюстрациями и без + страницу с полностью иллюстрированными статьями + страницу с полностью текстовыми статьями.


blog start


Страница статьи


Таких же 2 типа. Отличаются, как вы понимаете, только наличием/отсутствием заглавной фотки.


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


article 1


Для «лорем-ипсума» я раньше пользовался плагином «Content Generator». Сейчас уже есть примочка «Крафт» — очень рекомендую.


Комментарии


Обязательно надо предусмотреть блок с комментариями и с фейсбуком (следуя принципу «без соцсетей никуда»). Я, если честно, не знаю, куда правильнее ставить форму — перед комментариями или после. У первого варианта логика такая: вы пишете просто свою реакцию на пост. У второго — вы сначала смотрите, как народ реагирует, и потом, возможно, как-то корректируете свое мнение или воообще отказываетесь писать.


Сам вид комментария весьма обычный: имя, время, текст, возможность оценить и ответить.


article 2


Ниже ставим ссылки на предыдущую/следующую статьи. Или на статьи по теме — здесь уже все в руках конечного пользователя.


article 3


article types


В нынешнее время замечаю на многих (но, слава логике, не на всех еще) сайтах дизайнерский прием ставить сразу после текста статьи трехкилометровые предложения по теме, похожие статьи, сылки вперед/назад, рекламные баннеры и всякое разное, а потом уже комментарии к, собственно, статье. Это пример, как монетизация побеждает здравый смысл.


Всплывающие окна


Из того, что я подсмотрел у других шаблонов и магазинов, делать будем следующее: окно логина, восстановления пароля, регистрации, подписки на новости, предпросмотра товара (это будет в каталоге), сообщение о добавлении в корзину, просмотр больших фото товара.


popups


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


На этом буду заканчивать. В следующий раз перейдем уже к финальному красивому дизайну. Не переключайтесь.


404

Евгений Резник @reznik_e
карма
38,0
рейтинг 0,0
Веб-дизайнер
Похожие публикации

Комментарии (6)

  • +3
    Спасибо за статью. Весьма полезный опыт. Со скетчем я уже довольно давно и плотно работаю, и он не перестает удивлять меня своей потаённой мощью. Программа — настоящий бриллиант, хотя с первых попыток её освоить она кажется какой-то неказистой и простоватой. Но те же шаблоны сайтов, особенно когда становится много разнообразных страниц и подстраниц, делать в скетче гораздо удобнее, чем где бы то ни было. Особенно с новой системой встроенных символов.
  • 0
    У кого-то был опыт работы с Axure и Sketch? В Axure приходилось немало работать, а вот про Sketch узнал впервые. Интересно было бы сравнить возможности и удобства работы в Sketch и Axure.
    • +1
      У меня чуть был — очень разные штуки. Акшур хорошо подходит для детальных и функциональных прототипов, а Скетч — рисовать финальный дизайн статичным кирпичом. Интерактивность он не умеет, адаптивность не умеет, наборов заготовок для UI в нем нет. Все вручную.

      На Акшур очень похожа вот эта программа.
      • 0
        Спасибо за комментарий. В итоге выходит, что этот Скетч — просто очередной аналог многих других статичных рисовальщиков.
        • 0
          Технически да. Рисовать интерфейсы в нем, конечно, удобнее всего (из тех, которые я пробовал), у него есть интеграции со всякими сервисами и приложениями для прототипирования (нарисовал картинку — импортировал в приложение — расставил все интерактивные дела), но пока что на выходе у него — статичный макет картинкой.

          Но скоро должно появиться встроенное прототипирование для мобильных (в качестве стороннего плагина).
  • +1
    Картинка с ботинками не очень удачная. Издалека (да и вблизи тоже, по контуру) похожа на лифчик.

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Интересные публикации