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

Найти ответственного фрилансера, который самостоятельно, без какого-либо контроля, будет выполнять качественно и своевременно проекты, всегда сложно. Найдя такого, вцепитесь в него мертвой хваткой и не отпускайте. Скорее всего, его услуги будут стоить немного дороже, чем услуги других фрилансеров, но эта трата окупится временем и стабильностью доверия к вашей компании со стороны заказчиков.

Узнайте, что любит клиент

Когда вы обсуждаете с клиентом его будущий проект, не полагайтесь только на слова. Слова каждого из нас – это интерпретация внутренних визуальных образов. Слова могут быть одинаковыми, но скрываемые за ними образы – абсолютно разными.

Покажите клиенту некоторые примеры, которые, как вам кажется, могут быть похожи на то, что клиент хочет увидеть в результате. Пусть он отметит, какие цвета из предоставленных примеров ему нравятся, какие формы объектов, их компоновка.

То же самое необходимо сделать со шрифтами, размерами и стилем. Покажите клиенту 3-5 примеров и запишите себе, какой элемент из какого примера клиенту понравился. Сложите эскиз нового проекта из лучших пазлов других проектов.

Поинтересуйтесь у клиента, возможно, у него уже есть наброски или ссылки тех сайтов, которые ему нравятся. Соберите эти примеры, опишите их текстом и отправьте фрилансеру. Имея примеры, вы покажите фрилансеру: как именно вы видите реализацию задачи.

Чаще всего клиенту нужно дать то, что он хочет, и фоном разработать то, что ему действительно нужно, что и приведет к повышению продаж.

Пример рабочего тз для дизайнера

ЧАСТЬ ТЗ для ДИЗАЙНЕРА (Графическая концепция одностраничного сайта салона красоты).

Экран 1

Основной цвет для текста – черный. Для выделенного текста или ссылок – тёмно-оранжево-золотой.

Сайт нужно выполнить в деловых серых тонах. Все графические блочные элементы должны быть квадратно-ориентированными (все блоки, вставки фото и прочие рамки должны не иметь скругленных углов).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Экран 2

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

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

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

– Адрес

– Телефон

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

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

3й экран

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

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

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

И т.д….»

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

4й экран

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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