Твоя продающая веб-студия за 14 дней

[Если логотипа у вас нет, предлагаете клиенту Разработать логотип дополнительно. Если клиент соглашается – хорошо. Если нет – значит, работаем без логотипа, и говорим дизайнеру прорисовать в графическом исполнении тематический текст, заменяющий логотип].

С двух сторон от логотипа рисуем меню навигации: 2-3 пункта слева от логотипа и 2-3 справа.

Справа, на уровне меню, прорисовываем иконки Инстаграма и Фейсбука + выделяем оранжевым цветом текст: «Записаться онлайн».

В данном случае «подложка» может быть как квадратной, так и круглой, подготовить оба варианта (впоследствии выберите понравившийся).

С новой строки, через несколько отступов, размещаем текст: «Ограниченное издание…» меньшим шрифтом, под основным текстом пишем: «В продаже…».

Под текстом размещаем ещё один логотип <указываем логотип>.

Под логотипом вставляем изображение Кейса (необходимо найти несколько вариантов и предоставить на проверку).

[Сами также ищите картинки для вставки или ищите, где купить/заказать их прорисовку. Нет никакой гарантии, что фрилансер найдет именно то, что вы одобрите].

Напротив прорисованного логотипа «модельная стрижка» ставим стрелку прокрутки слайдера.

Вертикально центрируем её относительно нижней границы «кейса» и текст: «Ограниченное…».

Конец первого экрана.

Экран 2

Дублируем шапку (элемент «Киев + выбор региона/языка»). Дублируем логотип по центру, меню, Запись онлайн + соц. сети.

Далее, размещаем 4 фотографии с небольшими отступами между собой. Под каждым элементом продумываем стили для размещения:

– Названия фото

– Адрес

– Телефон

– График работы

– * опциональное поле (доп. Комментарий).

3й экран

В левый сайдбар (левая колонка) размещаем построчно текст:

«Мужская стрижка… цена

Женская… цена

И т.д….»

В области контента, который находится в свободной области от сайдбара (область, где находится основная информация этого блока) прописываем текст или пишем Пробный текст, и прорисовываем абзацы, отступы, цвета для ссылок, телефонов.

4й экран

Ставим логотип/изображение (указываем) по центру. Делаем выделяемую подложку под это изображение.

Вставляем изображение «глина для волос». Или заказываем дизайнеру это изображение, детально описав в ТЗ, что должно быть на изображении.

– разделитель экранов с изображением—

Размещаем текст (указываем текст, если он есть, или заполняем заглушкой на русском языке).

– снова разделитель с изображением –

Вводный текст над формой.

По центру – форма для отправки анкеты с полями (имя, телефон, почта, компания, город).

Обязательные поля для заполнения: почта, телефон.

Справа от формы вставляем <вот такой текст> про франшизу.

Кнопка отправить, выделенная черным цветом, с хорошо читаемым шрифтом.

– разделитель—

И рисуем в правом нижнем углу черную выноску с текстом: «Оставить отзыв».

Пример рабочего тз для программиста

Интегрируем верстку в движок (например, wordpress).

Реализуем возможность выбора города/языка и соответствующую смену контента всей страницы.

Вывод пунктов меню и задание ссылок к каждому из элементов меню реализуем через админку.

Кнопка «Записаться онлайн» ведёт на страницу <описываем какую>.

Первый экран, а именно Фон + содержимое текста «Ограничение….» и до окончания изображения кейса – делаем слайдером. Создаем возможность изменять контент слайдов, их кол-во, фон, текст через админку.

На втором экране – аналогично прописываем работу кнопок переключения языка и контента, исходя из города. Для каждого города абсолютно разное текстовое и графическое наполнение сайта [этот пункт нужно уточнить у заказчика. Если в разных городах всё остается прежним и

меняется только телефон и адрес, тогда пишем фрилансеру какие именно поля будут меняться].

Далее. На втором экране, при нажатии на адрес, реализуем открытие нового окна и открытие адреса соответствующего объекта через задание координат на гугл карте.

На блоке «мужская стрижка… цена».

Реализуем возможность редактировать /удалять/добавлять услуги из админ-панели, а также задавать цену из админки.

Реализовываем возможность редактировать текст из блока контента, возле сайдбара.

Блок «Важный момент…»

Реализуем редактирование текста поверх изображения через админ-панель.

[Когда у нас готов дизайн, нам ничего не мешает скидывать скриншоты дизайна и подчеркивать те пункты, о которых мы пытаемся донести информацию].

В блоке с фотографией нужна возможность менять её + редактировать текст под ней.

В блоках с названиями/адресами нужна возможность редактировать данные из админ-панели.

В поле формы нужна возможность редактировать текст, название полей, задавать обязательные поля + менять адрес электронной почты, на которую будут приходить ответы.

P.S. Весь пробный текст берем с тематических сайтов на русском языке. Размещение текста «Lorem Ipsum…» – недопустимо.

Сайт должен генерировать ЧПУ + необходимо установить модуль SEO и базово настроить его под тематику сайта.

Общая ЧАСТЬ ТЗ

Работа должна быть выполнена до xx.xx.xxxx