Общая задача доработка некоторых целевых страниц сайта с целью увеличения конверсии.
Сайт findtenders.ru. На нем публикуется информация о проводимых в России тендерах
Общие пояснения:
1.При верстке элементов / страниц использовать отдельный css файл. Существующие css менять не нужно.
2. Перед сдачей проекта проверить, нет ли коллизий или наложений стилей существующих css. Для этого в сверстанные страницы надо подключить существующие для страницы css файлы
3. Работа четко поделена на несколько подзадач. Интересует выполнение всех задач только одним исполнителем.
Итак подзадачи
На странице карточки тендера , к примеру
findtenders.ru/tendery-ta... Задача 1
1. Добавить 2 кнопки с иконками, расположенные справа от существующей синей кнопки "Заявка на участие"
"Добавить в избранное"
"Подобрать похожие"
Рис 1_dop buttons.png
Иконки должны быть уникальными и со смыслом.
Заливка белая , а граница , текст и иконка в первом случае синяя, в другом оранжевая.
Поведение кнопок при Hover аналогично поведению "Начать работу с сервисом" внизу страницы findtenders.ru/purchase/t...
Кнопки в последствии будут кликабельными ссылками.
Задача 2
2.а После поля "типа тендера" сделать область , привлекающую внимание , примерно как на картинке 2_banner_podbor tendera .png Цветовая гамма подходящая.
Ширина желтого фона на всю область (по ширине верхнего баннера Локо-банка)
Справа сверху по диагонали текст "Скидки до 30 %"
Сверху крупным шрифтом текст "Подобрать подходящие тендеры?"
В остальном дизайн примерно такой же. Остальные надписи должны быть текстом , а не картинкой. Они редактируемые. Фотография тоже должна быть редактируема.
Справа кнопка в стиле дизайна сайта "Подобрать". Кнопка кликабельна и ведет на внутреннюю страницу сайта
2.б. Для всплывающего окна сделать точно такой же дизайн, как в предыдущем пункте 2.а , только ширина 500px и нет кнопки "Подобрать" . Вместо этого внизу в строку 2 input-а "Ваше имя" , "Ваш телефон" и кнопка "Перезвонить"
3. После поля "Дата проведения" добавить 4 кнопки разных цветов схема (
3_4buttons.png)
- Хочу участвовать
- Подобрать похожие (сверху справа по диагонали надпись "free"
- Прогноз участников (сверху справа по диагонали надпись "хит"
- Рассылка победителей
Цвета соответственно пунктам :
Синий , Оранжевый, Зеленый, Темно-серый.
Дизайн кнопок как в пункте 1.
4. Fav иконки
Для сайта и для mail.ru
Форматы
4.а Для сайта:
формат ico 32X32
4.б Для почты mail.ru
Изображение должно быть в формате PNG, иметь размеры 180x180 и сохранять четкость при уменьшении до 32x32.
help.mail.ru/mail-help/wo...
Варианты дизайна. Буквы
FT
T+
F+
F
на ярком фоне, либо яркие буквы на прозрачном фоне.
Нужно сделать несколько вариантов для выбора лучшего.
Цвета оранжевый, темно-серый, синий и белый (прозрачный). Шрифт сглаженные, приятный. Иконка должна быть яркой , броской, привлекающей внимание.
Нравится фавиконка у сайта Ростендер
rostender.info/ Отличная иконка у tourbook.ru
yandex.ru/search/?text=to... 5. Верхний баннер. Ширина 880 x 80 формат GIF
Цвета примерно как на баннере "Локобанк" , к примеру на странице
findtenders.ru/tendery-ta... Он должен идеально "ложиться" под дизайн сайта.
Формат gif, 3 слайда. Тексты такие:
1. Шаг 1. Подберем «вкусные» тендеры от проверенных заказчиков
2. Шаг 2. Составим заявку на участие. Уладим формальности
3. Шаг 3. Выиграем тендер за вас!!! Оплата за результат
Цель баннера переход на страницу по услуге сопровождения тендера.
Дизайн и верстка новой страницы.
6. Дизайн и верстка страницы "2 способа получить подходящие тендеры"
структура макета примерно показана на картинке 6_choose.png Дизайн должен быть в цветах сайта. Основная цель чтобы как можно больше людей выбирала вариант "демо-доступа"
Вот пример хорошего оформления
findtenders.ru/purchase/t... Необходимо учитывать , что на новой странице слева будут также боковые модули как тут
findtenders.ru/purchase/t... Поэтому надо учитывать соответствующий размер области, куда будет помещена новая сверстанная страница