Общая задача – доработка некоторых целевых страниц сайта с целью увеличения конверсии.
Сайт findtenders.ru. На нем публикуется информация о проводимых в России тендерах
Общие пояснения:
1.При верстке элементов / страниц использовать отдельный css файл. Существующие css менять не нужно.
2. Перед сдачей проекта проверить, нет ли коллизий или наложений стилей существующих css. Для этого в сверстанные страницы надо подключить существующие для страницы css файлы
3. Работа четко поделена на несколько подзадач. Интересует выполнение всех задач только одним исполнителем.
Итак подзадачи
На странице карточки тендера , к примеру
Задача 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
на ярком фоне, либо яркие буквы на прозрачном фоне.
Нужно сделать несколько вариантов для выбора лучшего.
Цвета – оранжевый, темно-серый, синий и белый (прозрачный). Шрифт сглаженные, приятный. Иконка должна быть яркой , броской, привлекающей внимание.
Нравится фавиконка у сайта Ростендер
Отличная иконка у tourbook.ru
5. Верхний баннер. Ширина 880 x 80 формат GIF
Цвета – примерно как на баннере "Локобанк" , к примеру на странице
Он должен идеально "ложиться" под дизайн сайта.
Формат – gif, 3 слайда. Тексты такие:
1. Шаг 1. Подберем «вкусные» тендеры от проверенных заказчиков
2. Шаг 2. Составим заявку на участие. Уладим формальности
3. Шаг 3. Выиграем тендер за вас!!! Оплата за результат
Цель баннера – переход на страницу по услуге сопровождения тендера.
Дизайн и верстка новой страницы.
6. Дизайн и верстка страницы "2 способа получить подходящие тендеры"
структура макета примерно показана на картинке 6_choose.png Дизайн должен быть в цветах сайта. Основная цель – чтобы как можно больше людей выбирала вариант "демо-доступа"
Вот пример хорошего оформления
Необходимо учитывать , что на новой странице слева будут также боковые модули как тут
Поэтому надо учитывать соответствующий размер области, куда будет помещена новая сверстанная страница