Техническое задание
Сайт «Солнечная мебель»
Версия 1.1 от 01.01.2001
Оглавление
1. Общие положения. 3
1.1 Название и домен. 3
1.2 Область деятельности компании. 3
1.3 Тип проекта. 3
1.4 Целевая аудитория. 3
2. Состав страниц сайта. 4
2.1 Структура страниц. 4
2.2 Структура навигации. 6
3. Состав страниц. 9
3.1 Главная страница. 9
3.2 Страница «Каталог». 9
3.3 Страница результатов поиска. 14
3.4 Страница «Корзина» с отправкой формы заказа. 14
3.5 Страница «Спасибо за заказ». 14
3.6 Раздел «Контакты». 15
4. Требования к дизайну. 16
1. Общие положения
1.1 Название и домен
Название: «Солнечная мебель»
Желаемый адрес домена: nmeb. ru
1.2 Область деятельности компании
Мебельный Интернет-магазин (витрина). Мы формируем репутацию магазина, находящегося в тренде мебельной моды.
1.3 Тип проекта.
Мы создаем корпоративный сайт с элементами интернет-магазина для розничных покупок. Сайт «Солнечной мебели» должен делать упор на 2 составляющие: Интернет-магазин и рекламные акции. В первую очередь сайт должен зацепить покупателя и сконцентрировать его внимание на действующих акциях и тех преимуществах, которые получит человек, если будет покупать именно у нас.
1.4 Целевая аудитория
Целевая аудитория:
ü жители г. Москвы, г. Владимира и их областей;
ü мужчины и женщины от 18 и старше;
ü уровень дохода – средний, выше среднего;
2. Состав страниц сайта
2.1 Структура страниц
Страницы:
1. Главная
2. О нас
3. Каталог (с фильтрами) (список фильтров и разделы каталога буду согласовываться отдельно)
4. Оформление заказа
5. Акции
6. Покупателю (FAQ по работе с сайтом)
7. Доставка и сервис (выезд замерщика, индивидуальный дизайн и макет, доставка и подъем, сборка, гарантия)
8. Контакты
В идеале после запуска всех модулей должен получиться примерно следующий результат:
Главная страница | О нас (о магазине) | Каталог (интернет-магазин) | Акции | Покупателю | Контакты |
Это лендинговая страница в виде больших блоков: флеш-анимация или слайдер, анонсы новинок, анонсы акции и текущих скидок | Небольшое описание истории создания магазина, учредительные документы, договор оферты. | Непосредственно каталог Интернет-магазина. | Акции и скидки | Вопросы и ответы (FAQ по работе с сайтом: как оформить заказ, доставка, возврат и обмен товара) | Адрес, телефон, e-mail |
Архив акций (даже нам самим потом будет проще вспоминать, что было до этого) | Система оплаты | Консультант (оффлайн) | |||
Подписка на новости и акции (для e-mail рассылок), т. к. не все сразу захотят регистрироваться на сайте, но могут заинтересоваться нашими акциями и быть в курсе событий. | Права покупателя | Книга отзывов и предложений / Письмо директору |
2.2 Структура навигации
Виды меню + повторяющиеся блоки
Анимация главного горизонтального меню
Желаемая анимация горизонтального меню: https://www. stolplit. ru/
Разделение кнопок меню сделать более четким (например, белые полосы), а при наведении курсора - выделение кнопки более заметное (либо ярче, либо темнее).
Цвет меню соответствует цвету логотипа.
Главное меню*
Содержит следующие разделы (на момент создания сайта):
1. Главная
2. О нас
3. Каталог (с фильтрами) (список фильтров и разделы каталога буду согласовываться отдельно)
4. Оформление заказа
5. Акции
6. Покупателю (FAQ по работе с сайтом)
7. Доставка и сервис (выезд замерщика, индивидуальный дизайн и макет, доставка и подъем, сборка, гарантия)
8. Контакты
* «О нас»
Информационный раздел, который содержит текстовую информацию о магазине, фотографии (сканы) документов, юр. адрес и т. п..
«Акции»
Данный раздел предусматривает подробное описание условий, выгод и сроков акций, проводимых в настоящее время. Название раздела следует особенно выделить.
«Контакты»
Раздел с контактными данными клиента (тел., эл. почта, полное название компании) и форма обратной связи (e-mail сообщение «письмо директору»).
«Покупателю»
В данном разделе будет указана текстовая и графическая информация о том, как работать с сайтом и правильно делать заказ, системы оплаты.
«Доставка»
Раздел «доставка» будет содержать текстовую информацию о возможностях доставки, транспортных компаниях и формах доставки.
Хедер
Хедер делится на 4 условные части (деление на 4 поля – верхнее, левое, центральное, правое и нижнее).
1 часть:
Логотип + наименование + слоган
2 часть:
№ Телефона, Режим работы 9.00-18.00 (прием заказов на сайте: круглосуточно)
3 часть:
e-mail, Кнопки соц. сетей
4 часть:
Поиск (по названиям категорий/подкатегорий, артикулам)
Логотип Наименование: Слоган: | Номера контактных телефонов: Кнопка «Обратный звонок» («Заказать звонок») Режим работы: пн-вс: 9:00-21:00 | Кнопки соц. сетей |
Поиск по сайту. |
Модуль «Обратный звонок»
Кнопка «Обратный звонок» должна выделяться на общем фоне (красный цвет и форма кнопки, а не просто гиперссылка на модуль)
Значок данной функции должен находиться в центральной области.
При нажатии на значок, клиенту предлагают заполнить всплывающую форму:
· Имя (обязательное поле для заполнения клиентом)
· Телефон (обязательное поле для заполнения клиентом)
· Удобное время звонка (обязательное поле для заполнения клиентом)
· Кнопка «Перезвоните мне»
После нажатия кнопки «Перезвоните мне» появляется всплывающее окно «Спасибо» с одновременным не большим затемнением остального сайта.
Оно состоит из: логотипа, чуть ниже - благодарственный текст и кнопка «Вернуться на сайт».
Например:
Редактирование текста согласуется отдельно.
Футер
Футер делится на 4 условные части (Деление на 4 поля – левое, центральное, правое, нижнее.).
1 часть:
Логотип, название организации.
2 часть:
Дублирование основных разделов сайта (гиперссылка на каждый раздел).
3 часть:
Контактная информация (тел., e-mail) и кнопки соц. сетей (вКонтакте, Одноклассники, Инстаграм)
4 часть:
Копирайт.
Логотип Наименование: Слоган: | Карта сайта | Контактная информация Кнопки соц. сетей. |
© 2017 Все права защищены. |
3. Состав страниц
3.1 Главная страница
Хедер
Главное горизонтальное меню
Футер
Так же нужен слайдер на котором графически отображаются главные акции. Далее идут другие статичные графические элементы отображающие – текущие акции, скидки.
Желаемая анимация и внешний вид слайдера и графических элементов согласовывается отдельно.
3.2 Страница «Каталог»
Главное горизонтальное меню
Хедер
Футер
Схема, внешний вид и структура каталога согласуется отдельно.
Возможно стоит добавить в шапку сердечко (избранное), чтобы пользователи всегда могли быстро найти отобранные ранее понравившиеся варианты.
Главная страница каталога
На ней указываются иконки главных разделов каталога. При клике на иконку интересующего раздела на «Главной странице», пользователь попадает к каталогу продукции с подразделами.
Каталог продукции.
В каталоге продукции содержатся разделы, подразделы, фильтры для каждой категории.
Например, нажав на иконку «Гостиная» пользователь переходит в данный раздел. Внутри раздела присутствует разделение товаров на подкатегории (диваны, кресла, шкафы, полки и т. д.) и фильтры, по которым можно удобно сортировать товар.
Схема каталога:
1) ВНИМАНИЕ: стоит сразу предусмотреть увеличение/уменьшение ассортимента и изменения некоторых параметров сортировки.
2) ВАЖНО!!! Некоторые параметры для сортировки сделать в виде выпадающего меню, т. к. они могут занимать много места (интервальные значения (например: 1000 – 2000 или 1,5 -2,0)).
Например:
Главная категория | Подкатегория | Параметры для сортировки |
Гостиная | Диваны Кресла Шкафы | Вид Тип Длина (см) Ширина (см) Глубина (см) Цена |
Боковое меню
Содержит все категории и подкатегории каталога. Категория/подкатегория в которой находимся в настоящее время выделяется цветом.
Мини-карточка товара (иконка товара)
Мини-карточки товара располагаются в основной области страницы. Нужно проработать дизайн и параметры.
Например, как это сделано в ювелирном Интернет-магазине «Линии любви»
При наведении на любой товар стиль не много изменяется (окно расширяется: появляется дополнительная краткая информация о товаре и появляется возможность просмотра различных картинок с изображением товара):
Состав мини-карточки:
1) Слева сверху пиктограмма (флажок) акции (конечно если акция есть на данный товар). Флажки с цифрами и знаком % (обозначают скидку в %), флажок «популярное», флажок «новинка».
2) Слово «В наличии» заменить на «Акция» (если таковая имеется, если ее нет на товар, то слово не проставляется).
3) Сердечко – возможность добавить товар в избранное.
4) Фото (для каждого товара свои, встроен слайдер просмотра нескольких фото этого изделия)
5) Название товара
6) Цена (см. картинку выше) жирным шрифтом. Если действует скидка, то также указана предыдущая цена серым цветом и зачеркнута.
7) Кнопка «В корзину» (вместо «купить в 1 клик»). При нажатии на эту кнопку всплывает окно
8) Вместо «в корзину» написать «Подробнее» - это будет гиперссылка на карту товара с подробным его описанием.
9) В раскрывающемся меню (появляется при наведении) добавляются краткие характеристики товара в виде таблицы (для каждого товара свои)
Карта товара
Содержит подробное описание и все характеристики товара.
Состав карты товара:
1) Слева сверху превью всех доступных фотографий изделий, чуть правее увеличенная фотография.
2) Правее п.1 наименование товара, его артикул, выделенным жирным цена товара, перечеркнутая старая цена (если товар по акции).
3) Чуть ниже п.2 полное описание товара.
ВНИМАНИЕ. Для некоторых категорий товара должны располагаться параметры с выпадающим меню.
4) Чуть ниже после выбора основных параметров две кнопки «В корзину» и «В избранное» (при нажатии на последнюю кнопку, она меняет свой цвет и надпись: «В избранном»). Как и в мини-карточке при нажатии на кнопку «В корзину» всплывает окно
5) Ниже его характеристики. Примерно так
6) Под всеми предыдущими пунктами. Поле (полоса) с товарами, которые могут составить полный комплект с просматриваемым товаром. Примерно так (просто оставить иконки с названиями и ценами товаров)
7) Снизу поле (полоса) с товарами, просмотренными пользователем ранее - «Вы смотрели»
3.3 Страница результатов поиска
Главное горизонтальное меню
Хедер
Футер
Основное поле
Содержит: список результатов поиска со ссылкой на необходимую страницу.
3.4 Страница «Корзина» с отправкой формы заказа
Главное горизонтальное меню
Хедер
Футер
Схема, внешний вид и структура корзины согласуется отдельно.
3.5 Страница «Спасибо за заказ»
Главное горизонтальное меню
Хедер
Футер
Основное поле
Схема, внешний вид и структура страницы согласуется отдельно.
3.6 Раздел «Контакты»
Главное горизонтальное меню
Хедер
Футер
Основное поле
Раздел с контактными данными клиента (тел., эл. почта, полное название компании) и блок формы обратной связи (e-mail сообщение) (или Книга жалоб и предложений или «Письмо директору»).
Блок «Книга жалоб и предложений» (Письмо директору)
Блок «Книга жалоб и предложений» (Письмо директору) должен выделяться на общем фоне.
Блок данной функции должен находиться в правой области.
Клиенту предлагают заполнить форму:
· Напишите Ваше предложение или опишите Вашу жалобу (обязательное поле для заполнения клиентом)
· Кнопка «Отправить заявку»
После нажатия кнопки «Отправить заявку» появляется всплывающее окно «Спасибо» с одновременным не большим затемнением остального сайта.
Оно состоит из: логотипа, чуть ниже - благодарственный текст и кнопка «Вернуться на сайт».
По аналогии с модулем «Обратный звонок», но другим текстом.
Редактирование текста согласуется отдельно.
4. Требования к дизайну
Требования обязательные к исполнению
Сайт должен отображать 4 основные ценности для потребителей:
1. Адаптивный формат.
2. Удобство в эксплуатации.
3. Оформление в фирменном стиле.
4. Доминирование цветов, используемых в логотипе.
Оформление сайта
Сайт должен быть оформлен в современном адаптивном стиле с элементами фирменного стиля компании.
Предпочтителен белый (светлый) цвет фона. Цветовое оформление в соответствии с фирменными цветами.
Быть близким по стилю к сайтам (в качестве примеров):
Фирменный стиль (логотип, цвет, шрифты)
Обязательно используется логотип «Солнечной мебели» в хедере и футере.
Основной шрифт: Roboto Slab (latin, cyrillic) дополнительные шрифты
Дополнительные шрифты: Book Antiqua, PTSansPro
Шрифт меню: Open Sans (latin, cyrillic)
Цвета: черный, белый
Версии интерфейсов для различных устройств
Сайт должен быть адаптивным. Требуется проработка прототипов для версий: десктопа, планшета, мобильного (сотового) телефона.
Счетчики (аналитика)
На сайте должны быть установлены счетчики «Яндекс. Метрика» и «Google Analytics».
Основные порталы (построено редакторами)