Необходимо произвести редизайн сайта тату-студии westendstudio.ru
А также отрисовать страницы магазина, которые будут размещены на поддомене.
1ая часть. Тату сайт:
Задача:
Сделать современный, красивый и понятный сайт.
Уходим от вычурности в виде фонов на заднем плане.
Придерживаемся минимализму.
Техническая задача:
Необходимо сохранить на сайте кнопки меню, т.к. это важный момент для сео-продвижения.
Что это значит, можно добавить часть кнопок в меню, можно менять расположение кнопок, например, часть «ненужных убрать в подвал», но при этом на странице где были определенные кнопки, на этой же странице они должны оставаться.
После интеграции на сайт магазина необходимо сделать хорошее юзабилити в плане меню, чтобы находясь на любой странице сайта посетитель мог сориентироваться и найти то, что он ищет.
2ая часть. Магазин (интернет-магазин тату-оборудования и аксессуаров для пирсинга)
Нужно отрисовать
меню, разделы магазина, карточку товаров, корзину, страницу «спасибо»,страницу «доставка и оплата»
Раздел «магазин» на сайте будет размещен на поддомене shop.westendstudio.ru
Сам по себе магазин не будет содержать информации об услугах и тату-салоне*
Нужно сделать что-то вроде кнопок переключения между тату-салоном и магазином (для взаимной рекламы).
Дизайн и общий стиль магазина и тату-салона должен быть одинаковым.
*В одном разделе магазина будет размещена категория «эскизы» – это единственная категория, которая будет отсылать к услугам. Что это значит?
Мы разместим в категорию товаров «эскизы» с предложением забронировать эскиз (не купить), а именно забронировать. Задумка такова: посетитель сайта листает эскизы татуировок и выбирает, что наколоть, мы ему предлагаем «бронь» эскиза, которая будет значить, что, эскиз будет забронирован именно на посетителя и до момента прихода на сеанс «татуировки» по этому эскизу никто не будет делать тату в студии. Это оправданная мера, т.к. все эскизы эксклюзивны и нарисованы тату-мастером из головы, как картина. После «брони» и выполнения татуировки, эскиз больше не будет доступен на сайте для брони.
Бронь эскиза подразумевает по сути ту же покупку, цена брони символическая всего 10 руб, посетитель должен будет оплатить на сайте, забронированный эскиз (для этого подключим сервис «яндекс касса»). Эта символическая сумма будет означать хоть какое-то маломальское желание и ответственность. Но это все наша гипотеза, а правда будет известна только после теста.
Теперь по порядку по структуре магазина:
1.psd
Изначально это сайт тату-студии, переход в магазин и обратно на сайт студии должен происходить интуитивно понятно и просто.
Я это вижу так: в шапке сайта нужно сделать кнопки с переходом в магазин и в студию.
Пример такого решения используется на сайте: ulmart.ru (см. шапку). Свое видение я реализовал в макете.
- Страница магазина:
2.jpg
это отскриншотил стринцу категории сайта tattooport.ru
мне не очень нравится этот вариант исполнения, но он максимально описывает, что должно быть в категории.
Как вариант можно реализовать эту страницу таким образом:
Т.е. : на странице должен присутствовать баннер (на первом экране) с заголовком, а ниже блоками сами категории.
Надеюсь не запутал, я думаю по ходу буду пояснять.
В общем должно быть что-то типа галереи с фотками и подписями.
- Страница с категориями:
3.png
Сверху страницы заголовок h1, под заголовком кнопки с подкатегориями.
Первый экран также, как в вышеописанном пункте, только здесь подкатегории можно разметить в виде кнопок, как на
В подвале также должно быть описание, как на татупорте.
На самой странице категории количество товаров должно быть ограничено (24, 48 товаров на странице, без разницы), соответственно большое количество товаров должно быть разбито на несколько страниц.
Кстати, нашел на том же тату порте страницу под наше описание (видимо на первом экране не всегда добавляют фото), вот отличный пример категории
- Карточка товаров:
Здесь я опишу, что нравится в нескольких разных карточках
+ выглядит очень аккуратно, минималистично
сюда хочется добавить блок «что с этим покупают», как здесь
также я из пожелание это страница «подробного описания» на вышеуказанной ссылке, она подписана, как обзор
Кнопка «купить»:
нужно сделать 2 варианта «добавить в корзину» и форму «купить в 1 клик», где рядом с кнопкой или под кнопкой будет форма для ввода номера с маской телефона, вот пример:
- Корзина:
подходит вариант с этого же сайта:
Дополнительно:
Должен быть поиск по магазину.
Адаптивный дизайн.
В подвале должны быть кнопки с ссылками, как на tattooport.ru