Фоном сайта должен быть бесшовный паттерн, который можно дублировать на всю протяженность страницы, независимо от разрешения и размеров экрана. В левом верхнем углу сайта размещаем текст: «Киев» и переключатель, при нажатии на который появится выпадающий список с выбором других городов. Переключатель в форме треугольника перевернутого вниз. Под названием города ставим переключатель «англ/русс».

Один из языков подсвечиваем как «активный».

Далее, по горизонтальному центру мы размещаем наш логотип (логотип прикрепляется с файлами этого ТЗ).

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

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

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

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

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

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

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

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

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

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

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

Экран 2

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

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

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

– Адрес

– Телефон

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

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

3й экран

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

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

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

И т.д….»

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

4й экран

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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