Требования к графическому и текстовому контенту
Сайт компании ___________
Техническое задание
Термины и определения, используемые в настоящем техническом задании
Контент – информация, которой наполняются страницы сайта, состоит из текста и изображений.
CMS - Система управления содержимым (контентом) — информационная система, используемая для обеспечения и организации совместного процесса создания, редактирования и управления содержимым, иначе — контентом
Шапка – это титульная верхняя часть всех веб-страниц сайта. На всех внутренних страницах сайта шапка идентична
Футер - нижняя, единая для всех страниц, замыкающая часть сайта.
Хлебные крошки - элемент навигации, представляющий собой путь от главной страницы сайта до открытой страницы, которую в данный момент просматривает пользователь.
Верхнее меню – навигационный блок, идентичный на всех страницах, содержащий ссылки на страницы сайта
Цель проекта
Целью данного проекта является разработка сайта
Сайт должен обеспечивать реализацию следующих функций:
1. Имиджевая.
Формирование стиля и образа компании. Стилевое оформление сайта должно соответствовать корпоративному стилю компании.
2. Коммерческая
Доступ к ассортименту (каталог продукции) производимой и реализуемой продукции (оптовая реализация). Реализация добавления выбранного товара в корзину, формирование количества выбранного товара, отправка заказа с сайта в отдел продаж компании.
3. Рекламная
Сайт должен содержать информацию о полном товарном ассортименте компании и обеспечивать возможность просмотра связанных с товаром текстовых и графических материалов.
4. Информационная
Сайт должен предоставлять доступ к информации о компании, ее истории, деятельности, ассортименте предлагаемой продукции, магазинах, отзывам клиентов, а также оперативно информировать пользователей о новостях компании.
Примеры по структуре и решению дизайна сайта:
Особое внимание. Очень понравились решения по структуре и дизайну:
https://www.stories.com
https://www.bolia.com
https://www.eleganzza.ru
https://baon.ru
https://www.finn-flare.ru
Примеры конкурентов:
http://wag-shapki.ru
http://www.ferz-corp.ru
1 Общие требования к сайту
Общая структура сайта
o Главная
o Коллекции
· Новинки 2018-2019
Ø Карточка изделия
Ø Карточка изделия
Ø …………..
· Мужская коллекция
Ø Карточка изделия
Ø Карточка изделия
Ø …………………………..
· Женская коллекция
Ø Карточка изделия
Ø Карточка изделия
Ø ……………………………
· Спец предложения|Акции
Ø Карточка изделия
Ø Карточка изделия
Ø ……………………………
· Детская коллекция
Ø Карточка изделия
Ø Карточка изделия
Ø ……………………………
· Снуды и шарфы
Ø Карточка изделия
· Пледы
Ø Карточка изделия
o Сотрудничество
· Оптовая торговля
· Розничная сеть (перспектива)
· Индивидуальный заказ
o Личный кабинет
o Marhatter
· О Бренде
· Новости
· Акции
o Магазины
o Контакты
Стилистическое оформление
Стилистическое оформление сайта должно соответствовать корпоративному стилю и использовать его цветовые и графические элементы, логотип компании.
Шрифты, используемые в графических элементах сайта, могут выбираться произвольно при условии не противоречия корпоративному стилю. Шрифты, используемые в текстовых материала сайта, должны соответствовать стандартным шрифтам браузеров.
Допустимо использование иных распространенных шрифтов (Verdana, Tahoma и др.) в том случае, если их замена на стандартные шрифты не приведет к визуальному искажению текста. Размер (кегль) шрифтов должен обеспечивать удобство восприятия текста при минимально допустимом размере экрана.
Требования к отображению сайта в браузерах
Все ссылки на собственные страницы будут открываться в том же окне браузера. В случае если на сайте содержится ссылка на другой сайт, она открываться в новом окне.
Корректное визуальное отображение в актуальных, т.е. поддерживаемых их разработчиками, версиях следующих браузеров:
· Google Chrome;
· Firefox;
· Safari;
· Opera.
· Яндекс
· Internet Explore
Требования к верстке
Максимальная ширина контентной части сайта при просмотре с ПК 1200 px
Адаптивная верстка сайта - корректное отображение сайта при просмотре с мобильных устройств: телефонов и планшетов с разрешением:
| 1) 320 - 480 px 2) 320 - 568 px 3) 360 - 640 px 4) 375 - 667 px 5) 412 - 732 px 6) 414 - 736 px 7) 480 - 600 px 8) 600 - 768 px |
Требования к графическому и текстовому контенту
Информацию для текстового контента предоставляет заказчик, а именно:
- Информация о компании
- Уникальные торговые предложения (УТП)
- Слоганы
- Исторические факты о компании
- Контакты, адреса, e-mail
- Наименование изделий, цвет, наименование сырья, стоимость, размерная линейка, артикулы и т.д.
- Информацию о партнерах (текстовую)
Графический контент, а именно:
- фото изделий
предоставляет Заказчик.
Графический контент, который не относится к изделиям, производимыми компанией ООО «Морозовские традиции», должен быть уникальным и приобретен Исполнителем.
Текстовый контент должен быть уникальным.
Базовая SEO оптимизация сайта
Базовая seo оптимизации должна включать в себя:
1. Прописывание description, tittle, keywords главной и остальных страницы сайта (Примечание: ключевые фразы для поиска сайта в поисковых системах)
2. Создание специальных файлов sitemap и robots.
3. Сайт должен быть добавлен в очередь на индексацию в поисковых системах Яндекс и Google
4. В панель управления сайта добавить специальные поля description (краткое описание), tittle (заголовок), keywords (ключевые слова). Указанные поля можно редактировать.
5. Все графические элементы сайта должны содержать заполненные tittle и description.
6. Базовая SEO оптимизация сайта для социальных сетей. При публикации ссылки на сайт в соц. сетях автоматически подставлялся логотип и описание сайта, а не случайно выбранный текст.
2 Общие требования к функционалу сайта
Общий функционал
| Наименование функции | Описание функции |
| Форма обратной связи "Задать вопрос" Количество: форма | Форма обратной связи (отправляет сообщения посетителей на почту администратору сайта). Для отправки сообщения посетитель заполняет следующие поля: «ФИО» «Телефон» «Email» «Сообщение» (В этом поле посетитель описывает интересующий его вопрос.) Форма для заполнения всплывает после клика на кнопку. (Название кнопки, по умолчанию «Задать вопрос») |
| Форма заказа обратного звонка Количество: форма | Форма заказа обратного звонка (отправляет сообщения посетителей на почту администратору сайта). Для отправки сообщения посетитель заполняет следующие поля: «Имя» «Номер телефона» Форма для заполнения всплывает после клика на кнопку. (Название кнопки, по умолчанию «Заказать звонок») |
| Стандартный поиск по магазину Количество: 1 форма | Возможность поиска контента в магазине, по словам, имеющим отношение к искомому товару
Приблизительная схема формы
|
| Стандартный слайдер Количество: 1 слайдер | Установка слайдера (автоматическая смена изображений). Изображения меняются автоматически в соответствии с заданным интервалом. Смена изображений анимирована. Также изображения можно листать влево и вправо вручную при помощи кнопок. Смена изображения должна сопровождаться сменой текстового контента (УТП) |
| Яндекс карта | На карте отмечается один адрес. При клике карта возможность масштабирования карты. Возможность показать схему проезда на авто или пешком от метро. Располагается в разделе "Контакты"
Приблизительная схема карты
|
| Яндекс метрика Google Analytics | Установка счетчиков Яндекс Метрики и Google Analytics |
| Установка кода ROIstat | Установка кода ROIstat на страницах сайта для реализации функций Call tracking Установка кода ROIstat на страницах сайта для реализации сбора бизнес аналитики |
| Кнопки социальных сетей Количество: 5 кнопок | Размещение в шапке и футере сайта 5 кнопок социальных сетей: ВКонтакте, Одноклассники, Facebook, Instagram, Telegram |
Функционал каталога товаров
| Наименование функции | Описание функции |
| Корзина товаров | После нажатия кнопки "добавить в корзину" и установки необходимого количества товара в карточке товара, товар попадет в корзину.
Кнопка «Моя корзина»
Приблизительный вид кнопки перехода в корзину. На кнопке фиксируется количество добавленных в корзину товаров.
Внутри корзины
Схема вида товаров внутри корзины
В корзине должны отображаться следующие данные:
a) Количество добавленных товаров
b) Наименования добавленных товаров
c) Изображения добавленных товаров (1 изображение у 1 товара)
d) Цена каждого из добавленных товаров
e) Суммарная цена заказа
В корзине имеется кнопка: «Перейти к оформлению» - переход к оформлению покупки товаров. Также в корзине присутствует возможность увеличивать число единиц для покупки у добавленных товаров.
Для обновления информации в корзине требуется нажатие кнопки «Обновить корзину»
Быстрый просмотр корзины
При наведении курсора на кнопку корзины будет всплывать окно «быстрый просмотр корзины» с выводом информации:
a) Изображения добавленных товаров
b) Наименование добавленных товаров
c) Цена у каждого добавленного товара
d) Общая цена добавленных товаров
А также кнопками: «Перейти в корзину» и «Оформить заказ»
Схема окна «быстрый просмотр корзины»
|
| Личный кабинет | Для регистрации в личном кабинете посетитель заполняет следующие поля: "Имя", "Фамилия", "Email", "Телефон", "Город", "Страна". Разделы личного кабинета: a) История заказов b) История платежей |
| После оформления заказа и отправки | a) После оформления заказа информация о заказе и клиенте появляется в панели управления магазина, где можно просмотреть все данные клиента и связаться с ним. b) Вся информация, которую заполнил клиент должна быть отправлена на почту, для обработки заказа менеджером по продажам Оповещение о заказе приходит на почту администратору магазина |
| Карточка товара | У каждого товара будет своя карточка, содержащая следующие сведения о товаре:
a) «Модель» (вывод 2 разделов с описанием товара – краткое описание и полное описание)
b) «Цвет» (текст)
c) «Размер» (текст)
d) «Состав»
e) Краткое описание
f) Изображения товара (в карточке товара может располагаться одно или несколько изображений товара)
В каждой карточке товара будет кнопка «купить» - при клике товар будет добавляться в корзину. Количество ед. товаров, которые требуется купить, можно будет указать в специальном поле рядом с корзиной.
Приблизительная схема общего вида карточки товара
|
| Возможность написания отзывов в карточке товара | |
| Фильтрация товаров | |
| Сортировка товаров | Сортировка товаров по: a) Алфавиту (А-Я, Я-А) b) Рейтингу (начиная с высокого, начиная с низкого) c) Цене (по возрастанию, по убыванию) d) Модели (А-Я, Я-А) |
| «Новинки», «Топ продаж», «Акции» | Вывод на главную страницу 3 дополнительных категорий: «Новая колекция», «Акции», «Топ продаж».
a) Категория «Новинки» заполняется автоматически при добавлении нового товара.
b) Категория «Топ продаж» заполняется автоматически из товаров, которые чаще покупают в магазине.
c) Товар в категорию «Продукты со скидкой» добавляется автоматически из товаров, которым в панели управления магазина заданы скидки.
В каждой из указанных категорий на главной странице отображается до 12 ед. товаров, в случае превышения лимита из данных категорий при добавлении новых товаров удаляются старые.
Категории переключаются между собой при клике на блоки с наименованием категории (Табы)
Приблизительная схема вида 3 категорий: «Новинки», «Продукты со скидкой», «Топ продаж» на главной странице магазина
Товары в данных категориях выводятся также как и в общем каталоге товаров.
|
| Сравнение товаров | |
| Выбор количества товаров на странице | Посетитель может выбрать количество отображаемых товаров на странице из следующих вариаций: 15, 25, 50, 75, 100 |
| Изменение изображения товара при наведении | В панели управления сайта каждому товару может быть присвоена дополнительная миниатюра. При наведении курсором на товар его изображения изменяется на миниатюру №2 |
| Варианты расцветок | "Варианты расцветок" выводиться ниже карточки товара. В позиции конкретного товара «Варианты расцветок» выводятся следующие данные о товаре: a) Изображение товара b) Наименование товара c) Цена товара Также у каждого товара в слайдере товаров присутствует кнопка «Добавить в корзину» |
| Рекомендуемые товары | |
| Мониторинг заказов | |
| База данных заказов | |
| База данных товаров в магазине | Все товары, добавленные в магазин, отображаются в разделе «Товары» в панели управления сайта в виде кратких записей, при клике на запись происходит переход на полный набор данных о товаре. Запись содержит следующие сведения: главное изображение товара, наименование, артикул, цена (если товар был со скидкой, то выводятся 2 цены – стандартная и с учетом скидки), категория и подкатегории, в которых находится товар, дата создания товара в магазине. Товары в базе данных можно фильтровать по: датам (месяцам), категориям и подкатегориям, типам (простой, вариативный и др.) |
|
| |
3 Структура сайта и навигация
o Главная
o Коллекции
· Новинки 2018-2019
Ø Карточка изделия
Ø Карточка изделия
Ø …………..
· Мужская коллекция
Ø Карточка изделия
Ø Карточка изделия
Ø …………………………..
· Женская коллекция
Ø Карточка изделия
Ø Карточка изделия
Ø ……………………………
· Спец предложения|Акции
Ø Карточка изделия
Ø Карточка изделия
Ø ……………………………
· Детская коллекция
Ø Карточка изделия
Ø Карточка изделия
Ø ……………………………
· Снуды и шарфы
Ø Карточка изделия
· Пледы
Ø Карточка изделия
o Сотрудничество
· Оптовая торговля
· Розничная сеть (перспектива)
· Индивидуальный заказ
o Личный кабинет
o Marhatter
· О Бренде
· Новости
· Акции
o Магазины
o Контакты
3.1 H eader (Шапка) сайта
Header сайта должен быть единым для всех страниц сайта. Должен содержать следующие элементы и информацию:
- Логотип компании с подписью
- Телефон компании: должен быть кликабельным для мобильной версии и функцией запоминания
- График работы (ПН-ПТ с 09:00 до 18:00 СБ-ВС Выходной)
- Кнопка обратной связи (Задать вопрос) – при «клике» появляется pop-ap с формой обратной связи (Имя, Телефон, E-mail, Сообщение).
- E-mail компании
- Кнопки социальных сетей (Fb, Ok, VK, Inst, Telegram).
- Корзина
- Зарегистрироваться|Войти (для регистрации или входа в личный кабинет)
- Ссылка на магазин «Купить в розницу»
Меню сайта
Меню сайта должно быть единым для всех страниц сайта.
Меню сайта должно содержать ссылки на страницы сайта:
o Главная
o Коллекции
o Сотрудничество
Ø Оптовая торговля
Ø Индивидуальный заказ
Ø Розничная сеть (перспектива)
o Личный кабинет
o Marhatter
Ø О Бренде
Ø Новости/Акции
o Магазины
o Контакты
При скроле страниц сайта меню должно быть «приклеено».
В меню должно быть расположено «поиск по сайту»
При скроле страниц сайта пользователь должен видеть в меню ссылки на страницы сайта, а также корзину с информацией о количестве товара в корзине.
3.2 Главная
Главная страница является основной точкой входа на сайт. Она должна обеспечивать доступ ко всем основным разделам сайта (разделам 1-го уровня).
Главная страница должна содержать:
1 Слайдер на 2-3 фото. Смена фото должна сопровождаться сменой УТП компании, акции от компании.
3-5 анимированных иконки «наши сильные стороны»
Пример:
«победитель конкурса ТОП-10 2017»
«продаваемость коллеции 94 %»
«рекламная поддержка»
«Большой ассортимент и приятные цены»
«100% гарантия качества»
2 Фото галерея продукции:
- Мужская коллекция
- Женская коллекция
- Новинки в коллекции
- Детская коллекция
- Спец предложение|Акции
При «клике» на фото раздела попадаем в каталог соответствующей коллекции.
При наведении на фото должна быть ненавязчивая анимация.
3 Текстовый блок с фото сопровождением.
Коротко и содержательно.
заголовок «ПРОИЗВОДСТВО И ОПТОВАЯ ПРОДАЖА ВЯЗАНЫХ ШАПОК И АКСЕССУАРОВ ОТ MARHATTER»
Что должно быть отображено в тексте:
Marhatter - российская компания.
Производитель головных уборов и аксессуаров
Собственное производство, современное оборудование, более 20 лет производственного стажа.
Собственный дизайнерский отдел. Более 100 сотрудников в штате.
4 Схема работы для оптовиков.
- Зарегистрируйся в личном кабинете и получи доступ к полному каталогу
- Оформите заказ
- Получите консультацию персонального менеджера
- Подписание договора и оплата
- Доставка товара на указанный адрес
«Остались вопросы?»
Кнопка «Получить консультацию» - pop-ap форма обратной связи.
5 Наши партнеры
Карусель логотипов компаний партнеров
6 Наши преимущества.
Иконки с ненавязчивой анимацией:
- Полный производственный цикл
- Гибкая система скидок
- 7 дней на исполнение заказа
- Бесплатная доставка
- 100% возврат остатков
- выполняем индивидуальные заказы
7. Отзывы клиентов
Карусель с отзывами клиентов. Фото и отзыв.
8. Footer (Подвал) сайта
Подвал сайта должен быть единым для всех страниц сайта и должен содержать:
- адрес компании (без карты)
- карта сайта
- контакты компании: телефон, e-mail
- меню сайта