Прототип сайта: сначала что и в каком порядке, потом как это выглядит
Прототип — это порядок экранов, заготовки текстов и объяснение, почему каждый блок стоит там, где стоит. Картинки в нём нет намеренно: как только появляется оформление, разговор уезжает в шрифты и цвет, а решается совсем другое — что человек увидит первым и что должен понять к третьему экрану.
- Заготовки текстов в каждом блоке, а не серые полоски вместо слов
- Исходники и документ отдаём вам: с ними можно идти к любому подрядчику, включая не к нам
- Разработку заказываете у нас — прототип входит в неё и отдельной строкой не продаётся
- Спорят о шрифтах и оттенке кнопки, хотя решается порядок экранов
- Передвинуть блок — значит переверстать макет, поэтому не двигают
- Тексты пишутся последними, под уже нарисованные рамки, и в них не влезают
- Спорят о том, что человек увидит первым и что поймёт к третьему экрану
- Передвинуть блок — это минуты, поэтому вариантов пробуют несколько
- Тексты написаны раньше рамок, и рамки подгоняются под них, а не наоборот
Правая колонка не обещает, что сайт получится лучше: прототип этого не гарантирует и гарантировать не может. Он делает другое — переносит несогласие туда, где оно стоит минуты, а не недели.
Что лежит в прототипе
Шесть позиций, и ни одна из них не про оформление. Словом «прототип» называют очень разные вещи — от схемы на салфетке до почти готового макета, — поэтому проще перечислить, что получите именно вы.
Не просто список блоков, а объяснение по каждому: почему он здесь, что человек должен понять на нём и почему следующий именно такой. Обоснование важнее самого порядка — по нему видно, о чём спорить, и по нему же следующий человек поймёт логику, не расспрашивая нас.
Заголовок, подзаголовок, пункты списка, надпись на кнопке — в каждом блоке. Не «Lorem ipsum» и не серые полоски: без реального текста нельзя понять, влезает ли мысль в отведённое место. Это черновики, их ещё будут править, но они про ваш бизнес и написаны словами ваших покупателей.
Сначала проектируется узкий экран, потом широкий. Причина простая: на узком видно, что блок в действительности длинный, а текста в нём много. Порядок, придуманный на мониторе, на телефоне превращается в ленту, по которой человек прокручивает мимо главного, и обнаруживается это обычно на вёрстке.
Там, где придётся показать факты: примеры работ, документы, отзывы, расчёты, фотографии процесса. Отдельно помечается то, чего у вас пока нет, — и это одна из самых полезных частей документа. Половина будущих задержек проекта выясняется здесь, а не на сборке.
Расставлены по всей длине, а не только внизу, и у каждой написано, для кого она: одному хватило первого экрана, другой дочитает до цен, третий вернётся к списку работ. Здесь же решается, что просим на каждом шаге — контакт, вопрос или расчёт: чем дальше по странице, тем больше можно просить.
Что этот блок должен сделать с читателем и как проверить, что он это делает. Комментарии пишутся для того, кто будет верстать и рисовать: без них дизайнер переставляет блоки по вкусу композиции, а разработчик выбрасывает то, что кажется ему лишним. Оба делают это из лучших побуждений.
Чего в прототипе нет: цвета, шрифтов, фотографий, иллюстраций и анимации. Это не экономия и не следующий этап «если понравится» — это условие, при котором обсуждение остаётся про смысл. Оформлением занимается дизайн, от 45 000 ₽, и делается оно по готовому прототипу.
Прототип, макет и техзадание — три разных документа
Их регулярно путают, и путаница дорогая: заказывают одно, ждут другого, получают третье. Разводятся они по простому признаку — что именно в них зафиксировано и что от этого меняется дальше.
Порядок ниже — рабочий: каждый следующий документ опирается на предыдущий. Пропустить первый можно, но тогда его вопросы всплывут позже и будут стоить дороже.
- Прототип: порядок и смысл что где стоит и почему, без оформления. Правится минутами, спорят о нём про содержание. Главное его свойство — дешевизна изменений: переставить блок здесь стоит движения мышью, в свёрстанном сайте — дня работы
- Макет: как это выглядит шрифты, цвет, фотографии, отступы, состояния кнопок. Делается по прототипу и фиксирует вид. Правится часами и днями, спорят о нём про вкус — и это нормально ровно до тех пор, пока структура уже согласована
- Техзадание: обязательства что должно работать, при каких условиях и как проверяется приёмка. Нужно там, где есть расчёты, интеграции, роли и личные кабинеты. На простом сайте его роль спокойно выполняют прототип и смета
Что бывает, если пропустить первый документ. Дизайнер получает список пожеланий и рисует красивый порядок блоков, который никто не обсуждал. Потом выясняется, что главное обещание не влезает в заголовок, доказательств для третьего экрана не существует, а форма стоит после того места, где люди уходят. Каждая из этих находок на макете стоит перерисовки, а на вёрстке — переделки, хотя на прототипе стоила бы разговора.
И обратная ошибка, которая встречается не реже: заказать техзадание вместо прототипа. Получается документ, который невозможно прочитать глазами и по которому нельзя понять, как это будет выглядеть для человека. Требования в нём, может, и верные, а согласовывать их приходится на веру.
Нужен ли вам прототип отдельной работой — шесть проверок
Отмечайте то, что верно про вас. Первый же вердикт этого списка может звучать «платить отдельно не надо»: если разработку вы заказываете у нас, прототип входит в неё. Мы предпочитаем сказать это до сметы, а не после.
Вердикт появится после первой отметки. Он умеет сказать «прототип войдёт в разработку, отдельно платить не надо» — это самый частый ответ, и он бесплатный.
Сходится 0 из 6
Разобрать структуру будущей страницы
Полчаса по вашей будущей странице — набросаем порядок экрановРасскажите, что продаёте и кому, — на разговоре набросаем, из чего должна состоять страница и в каком порядке. Этого часто хватает, чтобы понять: нужен ли отдельный прототип или структура и так очевидна. Во втором случае скажем прямо и не возьмём денег.
Кому отдельной работой, а кому он входит в разработку
Прототип делается всегда — вопрос только в том, платите ли вы за него отдельно. Отдельная работа имеет смысл там, где документ должен пережить наш разговор и оказаться в чужих руках.
- Делать будет ваш разработчик, знакомый или другая студия — документ нужен как задание для них
- Вы сравниваете подрядчиков и хотите, чтобы все считали одну и ту же работу, а не свою
- Сайт большой, структура спорная, и внутри компании мнения расходятся
- Будущий сайт надо показать инвестору или руководству до того, как выделен бюджет
- Разработку вы заказываете у нас — прототип входит в неё первым этапом, это видно в порядке работ
- Страница одна, предложение одно и структура очевидна — обсудим за полчаса на разборе и ничего не возьмём
- Сроки горят, решение принято и подрядчик выбран — тогда прототип делается внутри проекта, а не до него
Отдельно про случай «хотим посмотреть, как вы работаете, прежде чем отдавать большой проект». Это законный повод, и мы его не отговариваем: маленькая работа с понятным результатом — самый дешёвый способ проверить подрядчика. Но прямо скажем и то, что при продолжении с нами эти деньги не вычитаются из сметы разработки: прототип — законченная работа, а не аванс.
Как идёт работа
Четыре шага, и первый — разговор, а не анкета. Полный порядок работ по направлению лежит на родителе; здесь то, что специфично для отдельной работы, и её особенность в том, что участвовать придётся вам.
-
01
Разговор голосом, а не анкета с терминами
Спрашиваем про то, что вы знаете лучше всех: кто у вас покупает, что спрашивают чаще всего, из-за чего отказываются, чем вы отличаетесь от соседей по рынку. Бриф с полями «опишите УТП» и «укажите целевую аудиторию» не задаём — на такие вопросы честно ответить нельзя, а неправильный ответ утащит всю структуру.
-
02
Смотрим, как это устроено у соседей и что люди ищут
Не чтобы скопировать, а чтобы знать, с чем вас будут сравнивать: человек открывает три-четыре вкладки и решает по ним. Заодно смотрим формулировки запросов — они показывают, какими словами про вашу услугу думают снаружи, и эти слова потом стоят в заголовках.
-
03
Собираем порядок и пишем заготовки текстов
Сначала узкий экран, потом широкий. В каждом блоке — настоящий текст, пусть черновой: только так видно, влезает ли мысль и не пустует ли блок, придуманный ради ритма. Здесь же помечаются места под доказательства и то, чего у вас пока нет.
-
04
Проходим вместе и правим
Отдаём ссылку, которая открывается с телефона, и проходим её вместе экран за экраном. Два прохода правок — в работе; обычно их и хватает, потому что спорное вылезает на первом. Всё, что осталось несогласованным, записывается отдельно, с вашей и нашей позицией, — чтобы через месяц не выяснять, о чём договорились.
Без вашего участия эта работа не делаетсяПрототип — единственный формат направления, где мы не можем «сделать и показать»: структура собирается из того, что знаете вы, и утверждается вами же. Час на разговор и час на разбор готового — это тот минимум, без которого документ получится правдоподобным и неверным.
Что спрашиваем на стартеОт чего считается объём
Ступени в лестнице направления у этой работы нет, и это не уклонение от ответа: три сметы направления считают сайт целиком, а прототип — часть, которая кончается до вёрстки. Поэтому объём считается по четырём вещам, и цифру мы называем на разборе, когда видим все четыре.
-
Число экранов и разделов
Одностраничник и сайт на двадцать разделов — разная работа, и разница не только в объёме. На многостраничном добавляется то, чего нет у одной страницы: переходы между разделами, повторяющиеся типы страниц, меню, которое должно остаться понятным при росте. Это считается не по числу экранов, а по числу непохожих типов.
-
Число услуг
Каждая требует своего обещания, своих доказательств и своих возражений. Две услуги — это не «та же работа, только длиннее»: если покупатели у них разные, придётся решать, разводить их по разным страницам или выстраивать внутри одной. Чаще всего берут одну, главную, а остальные потом делают по тому же образцу.
-
Есть ли, на что опереться
Готовые тексты, прайс, записи разговоров с покупателями, старый сайт, хотя бы список частых вопросов. Если это есть, половина работы сводится к разбору и перекладыванию; если нет, всё собирается с нуля в разговорах, и времени уходит заметно больше. Это самый недооценённый из четырёх факторов.
-
Нужен ли разбор рынка перед структурой
Базовый взгляд на соседей по рынку входит всегда. Отдельный разбор — кто и что обещает, по каким ценам, какими словами — это уже другая работа: исследование, от 40 000 ₽. Оно нужно не всем и не всегда, но там, где вы выходите в незнакомую нишу, без него структура собирается на догадках.
Срок называем тоже после разбораОн считается от тех же четырёх вещей, а главное — от того, как быстро мы получаем ответы на вопросы: прототип нельзя собрать, пока не решено, что вы обещаете. Пока не посмотрели — вилка, а не дата. Зато вилку называем сразу на разборе и после этого её не двигаем.
Что входит в работу, а что покупается отдельно
Граница здесь перечисляется заранее, потому что именно на ней расходятся ожидания: слово «прототип» каждый понимает по-своему, и выясняется это обычно в конце. Правая колонка — не мелкий шрифт, а самая полезная часть страницы.
Входит в работу
- Разговор голосом и базовый взгляд на соседей по рынку
- Порядок экранов с обоснованием каждого блока
- Заготовки текстов в каждом блоке и мобильная раскладка
- Кликабельная ссылка, которая открывается с телефона
- Два прохода правок вместе с вами, экран за экраном
- Исходники и документ со структурой — в ваших руках, без условий
Покупается отдельно
- Оформление: цвет, шрифты, иллюстрации — дизайн, от 45 000 ₽
- Вёрстка и сборка сайта — разработка, от 50 000 ₽
- Тексты набело под каждый экран: в прототипе они черновые
- Фотографии, съёмка и подбор изображений
- Решение, что и кому вы продаёте, — упаковка продукта, от 80 000 ₽
Про черновые тексты — важное уточнение. Заготовки в прототипе пишутся всерьёз: они про ваш бизнес и годятся для обсуждения. Но это не финальные тексты сайта — в них не вычитана каждая фраза, не выверена длина под макет и не написаны разделы, которых на прототипе нет. Довести их до чистового вида можно и своими силами: структура и смысл уже зафиксированы, а это самая трудная часть.
Остаётся документ, который читается без нас
У этой работы нет видимого результата: не сайт, не картинка, не то, что можно показать знакомым. Её результат — документ, и единственная проверка его качества в том, понял ли его человек, которого не было в разговоре. Поэтому всё, что ниже, отдаётся сразу и без условий, включая случай, когда делать дальше вы будете не с нами.
Список несогласованного — самая недооценённая часть. То, о чём мы не договорились, записывается с обеими позициями: что предлагали мы, что решили вы и почему. Через два месяца, когда кто-нибудь спросит «а почему у нас нет вот этого», ответ уже написан, и разговор не начинается заново.
- Кликабельный прототип по ссылке, открывается с телефона и с компьютера
- Исходники: правите сами или отдаёте кому угодно, формат читается без нас
- Заготовки текстов отдельным файлом — их можно доводить параллельно с дизайном
- Документ со структурой: что за чем, почему и что должен делать каждый блок
- Список того, чего у вас не хватает для сайта: доказательств, фотографий, данных
- Список несогласованного — с вашей и нашей позицией по каждому пункту
В разработке это первый этап, а не отдельная покупка
Мы повторяем это третий раз на странице и повторим ещё: если сайт делаем мы, платить за прототип отдельно не нужно. Отдельная работа существует ради тех, кто делать будет не с нами или ещё не решил.
Калькулятор объёма тоже живёт на направлении; для прототипа он не подходит — считает он сайт целиком, а не его проектную часть. Поэтому здесь его нет, и цифру мы называем на разборе. Разработка сайтов целиком
Когда прототип отдельной работой не нужен
Четыре ситуации. В двух из них вы просто не должны за него платить, в третьей он ничего не решит, а в четвёртой вам нужен другой документ и другая работа.
-
Если разработку вы заказываете у нас
Тогда прототип входит в неё первым этапом и отдельной строкой не продаётся. Мы говорим это на первом же разговоре, даже когда человек пришёл именно за прототипом и готов за него платить: продать отдельно то, что всё равно будет сделано, — самый простой способ заработать один раз и потерять на этом доверие.
-
Если страница одна и структура очевидна
Одно предложение, один покупатель, один способ его убедить — такую страницу можно набросать за полчаса разговора, и мы это сделаем бесплатно. Документ на тридцать экранов там, где хватает схемы на листе, — это работа ради объёма. Отличить один случай от другого можно заранее: если вы сами легко называете порядок блоков, прототип вам не нужен.
-
Если не решено, что и кому вы продаёте
Прототип зафиксирует нерешённое и придаст ему вид документа — а через месяц, когда предложение поменяется, придётся переделывать целиком. Порядок обратный: сначала обещание и цена, потом структура. Это соседняя работа — упаковка продукта, от 80 000 ₽, и мы отправим туда, если увидим этот случай на разборе.
-
Если нужен красивый документ для показа, а не рабочая структура
Прототип нарочно некрасивый: без цвета, шрифтов и картинок. Если задача — произвести впечатление на инвестора или совет директоров, нужен другой жанр и другая работа: дизайн презентации. Мы скажем это прямо, а не станем раскрашивать прототип, чтобы он выглядел дороже, чем есть.
Первый случай мы называем чаще всех остальныхК нам приходят за прототипом как за безопасным первым шагом — и это разумно. Но если по ходу разговора становится понятно, что делать сайт вы всё равно будете с нами, честный ответ один: отдельно платить не надо, прототип входит в работу. Мы теряем на этом отдельный счёт и не считаем это потерей.
Когда вам это не нужноЧто идёт до прототипа и что после него
Прототип стоит в середине цепочки. До него кто-то должен был решить, что вы продаёте; после — кто-то должен это нарисовать и собрать. Работа, взятая без обеих сторон, заканчивается красивым файлом, который никто не открывает.
Отдельно скажем то, чего обычно не говорят: с готовым прототипом можно пойти и на конструктор — собрать там самостоятельно, если структура простая и бюджета на разработку нет. Документ написан так, чтобы это было возможно. Нижние границы всех направлений — на странице цен
Прототип сайта: что стоит знать до заказа
Почему структуру решают до картинки
Стоимость изменения растёт вместе с готовностью. Переставить блок в прототипе — движение мышью. В макете — перерисовать экран и всё, что с ним связано. В свёрстанном сайте — переделать вёрстку, проверить на телефоне и заново пройти приёмку. Содержание при этом во всех трёх случаях одно и то же, меняется только цена разговора.
Поэтому спорить дешевле в самом начале — и прототип существует ровно для того, чтобы спор случился там. Он специально сделан некрасивым: без цвета, шрифтов и фотографий. Как только появляется оформление, обсуждение переключается на него — это не вина заказчика, а свойство внимания: картинка заметнее логики. А решается на этом этапе не «нравится ли», а «понятно ли и в том ли порядке».
Второе следствие того же свойства: тексты пишутся до макета, пусть и вчерне. Дизайнер, получивший структуру без текстов, ставит подпись «Заголовок в две строки» — а реальное обещание оказывается в четыре, и либо ломается макет, либо режется смысл. Заготовки в прототипе нужны не ради красоты документа, а чтобы проверить, влезает ли мысль в то место, которое ей отвели.
Чем прототип отличается от макета и техзадания
Тремя вещами: что фиксирует, сколько стоит изменить и о чём спорят. Прототип фиксирует порядок и смысл, меняется минутами, и спорят о нём про содержание. Макет фиксирует вид, меняется часами, и спорят о нём про вкус. Техзадание фиксирует обязательства — что должно работать и как проверяется приёмка, — и нужно оно там, где есть расчёты, интеграции, роли и кабинеты; на обычном сайте его роль выполняют прототип и смета.
Отсюда частая ошибка в обе стороны. Заказать макет без прототипа — получить красивый порядок блоков, который никто не обсуждал, и обнаружить это на вёрстке. Заказать техзадание вместо прототипа — получить документ, который нельзя прочитать глазами: требования, может, и верные, а согласовывать их приходится на веру, не видя, как это будет выглядеть для человека.
Есть и третья путаница, которая обходится дороже прочих: прототипом иногда называют набор слайдов в презентации. Разница принципиальна — прототип кликается. Его открывают с телефона по ссылке и проходят как настоящий сайт, и именно в этом прохождении обнаруживается, что блок слишком длинный, что до кнопки далеко, а на узком экране порядок читается иначе.
Кому нужна отдельная работа, а кому не нужна
Отдельная работа имеет смысл тогда, когда документ должен оказаться в чужих руках: делать будет ваш разработчик, другая студия или вы сами; либо подрядчик ещё не выбран, и вы хотите, чтобы все считали одну и ту же работу. Второй случай недооценивают: сметы на сайт различаются в разы не из-за жадности, а из-за того, что каждый считает своё представление о задаче. С одинаковым заданием разница становится объяснимой.
Не нужна отдельная работа в двух случаях. Если разработку вы заказываете у нас — прототип входит в неё первым этапом, и мы говорим это до сметы. И если страница одна, а структура очевидна: такую мы набросаем за полчаса на бесплатном разборе и денег не возьмём. Отличить случай от случая просто: если вы сами легко называете порядок блоков и внутри компании об этом не спорят, документ вам не нужен.
Про цену. Ступени в прайсе у прототипа нет — три сметы направления считают сайт целиком, а эта работа кончается до вёрстки. Объём считается от числа экранов и услуг, от того, есть ли материал, на который можно опереться, и нужен ли разбор рынка. Цифру и срок называем на разборе: пока не посмотрели — вилка, а не дата. Зато названную вилку после этого не двигаем.
Вопросы про прототип
Шесть вопросов именно про этот формат. Общее про разработку — сроки, гарантии, состав работ — на странице направления
Остался вопрос?
Написать в Telegram, отвечаем за 30 минутСсылку на кликабельный прототип, который открывается с телефона и с компьютера, исходники к нему, заготовки текстов отдельным файлом и документ со структурой: что за чем идёт, почему и что должен делать каждый блок. Плюс два списка — чего вам не хватает для сайта (доказательств, фотографий, данных) и о чём мы не договорились, с обеими позициями. Чего не получите: цвета, шрифтов, фотографий и анимации — их в прототипе нет намеренно.
Да, и документ специально сделан для этого: он читается человеком, которого не было в разговоре, и не содержит наших внутренних сокращений. Файлы отдаются сразу и без условий, уговаривать остаться мы не станем. Скажем больше: с готовым прототипом можно идти и на конструктор, если структура простая и бюджета на разработку нет, — мы это тоже предусматриваем. Работа, результат которой полезен только в наших руках, была бы не документом, а привязкой.
Два прохода вместе с вами, экран за экраном, — и обычно их хватает, потому что спорное вылезает на первом. Правка на этом этапе стоит минуты, поэтому мы не считаем их поштучно и не торгуемся из-за переставленного блока: смысл работы в том, чтобы спорить именно здесь. Границу мы проводим в другом месте: если после согласования меняется само предложение — другая услуга, другая цена, другой покупатель, — это новая структура, а не правка, и мы скажем об этом прямо.
В прототипе тексты черновые. Это не полуфабрикат: они про ваш бизнес, написаны словами ваших покупателей и годятся для обсуждения — но в них не вычитана каждая фраза и не выверена длина под будущий макет. Самая трудная часть при этом уже сделана: решено, что говорить и в каком порядке. Довести черновик до чистового можно и своими силами; если хотите, чтобы это сделали мы, работа считается отдельно — скажем сколько, посмотрев объём.
Предметом и ценой изменения. Прототип фиксирует порядок и смысл, правится минутами, и спорят о нём про содержание. Макет фиксирует вид — шрифты, цвет, фотографии, состояния кнопок, — правится часами и днями, и спорят о нём про вкус. Делается он по готовому прототипу, а не вместо него: это соседняя услуга, дизайн, от 45 000 ₽. Порядок обратный обходится дороже: находки, которые на прототипе стоили бы разговора, на макете стоят перерисовки.
Если вы заказываете разработку сразу — да, прототип её первый этап, отдельно платить не нужно, и мы говорим это до сметы. Если вы сначала взяли прототип отдельной работой, а потом решили продолжить с нами, эти деньги из сметы разработки не вычитаются: прототип — законченная работа со своим результатом, а не аванс. Зато сама разработка после него считается точнее и обычно идёт быстрее: структура согласована, тексты есть, спорить не о чем.
Расскажите, что продаёте — набросаем порядок экранов
- За полчаса разговора наметим, из чего состоит страница и почему именно в таком порядке
- Назовём объём и вилку срока — по числу экранов, услуг и тому, есть ли на что опереться
- Если прототип отдельно вам не нужен, скажем это и не возьмём денег
Заявка принята
Вернёмся в течение рабочего дня и договоримся о получасовом разговоре. Если срочно — напишите в Telegram.
Или напишите сразу:
Telegram · отвечаем лично за 30 минут