Как сделать прототип будущего сайта, если вы не дизайнер

А также как и где их создавать

Обновлено: 01.10.2025

4K Разборы

Как сделать прототип лендинга без дизайнера

Автор

Татьяна Швецова

Главный редактор в сервисе «Моя удалёнка»

Обновила статью

Настя Богусловская

Редактор журнала «Конверт»

Когда серьёзные компании создают сайты или мобильные приложения, они начинают работу с прототипа. Это своего рода дорожная карта, которая помогает сориентироваться в структуре и содержании будущего продукта.

Прототип может сделать кто угодно, для этого необязательно быть дизайнером. В статье расскажем, как создать прототип лендинга в Google Документах.

Что такое прототип и зачем он нужен

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

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

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

Прототипы выполняют 4 основные функции.

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

Как правильно написать ТЗ для дизайнера, чтобы всё прошло как по маслу

Объясняют задачу дизайнеру. Прототип — это лучшая форма технического задания. Вместо кучи обсуждений, звонков и писем лучше один раз нарисовать схему.

Разбивают работу на итерации. Иногда бывает так: автор написал текст, клиент одобрил. Потом дизайнер нарисовал макет, а клиент вдруг понял, что структура у сайта какая-то не такая. Автор потратил время, дизайнер потратил время — и теперь всё переделываем.

С прототипом таких проблем нет: сначала мы показали клиенту структуру, он её понял и одобрил. Если что-то не так, поменяли. И только потом в дело вступает дизайнер и решает, как это все красиво оформить.

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

Так может выглядеть простейший прототип, нарисованный на бумаге. Здесь нет точного текста или иллюстраций, но видна структура будущего сайта

Когда нужно делать прототип

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

Прототип обязательно нужен, если в процессе участвует несколько сторон: клиент, дизайнер, копирайтер. Чем ответственнее и дороже проект, тем важнее прототип. Времени может уйти больше, зато проблем с согласованиями будет меньше.

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

Обычно прототипы делают редакторы и проджект-менеджеры — люди, которые придумывают будущий сайт и лучше других знают, что на нём должно быть. Им важно максимально просто и быстро создать прототип, без красоты и излишеств — дальше в работу вступят дизайнеры и разработчики, которые всё сделают как положено.

Самый простой способ создать прототип — воспользоваться Google Документами. На примере этого сервиса мы дальше и будем делать прототип лендинга, так как это понятный и знакомый многим формат.

Вот несколько экранов прототипа, который я делала для школы балета. Я пользовалась Google Документами — получилось вполне прилично даже на этом этапе. Перенеси это всё в конструктор, и получится полноценный лендинг

Как сделать прототип лендинга в Google Документах

Узнать ограничения формата. На лендинге возможно почти всё, но могут быть ограничения, связанные с бюджетом заказчика или с возможностями конструктора, в котором дальше лендинг будут верстать. Это нужно учитывать заранее.

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

Получилась вот такая таблица. Дальше будем объединять ячейки и таким образом делить сетку на блоки и модули

Как создать customer journey map: объясняем на примерах

Продумать путь клиента и структуру лендинга. Что должен понять пользователь, прежде чем он нажмёт на большую продающую кнопку? Какие аргументы подтолкнут его к целевому действию: отзывы, условия доставки, цена, что-то ещё?

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

Удобнее всего анализ ЦА оформить в виде майнд-карты. Каждая большая ветка «интеллектуального дерева» — это потенциальный экран будущего лендинга. Если сегментов ЦА очень много и они сильно отличаются друг от друга, лучше делать несколько лендингов под каждый из них.

Пример анализа ЦА, которая покупает женскую обувь. Майнд-карта сама подсказывает будущую структуру лендинга и преимущества, на которых нужно сосредоточиться

Набросать текст. Текст в прототипе — это не обязательно вылизанные формулировки. На этом этапе важно обратиться к анализу ЦА и понять, что мы точно будем размещать на лендинге. Потом формат и объём текста сам подскажет, как его лучше всего разбить на смысловые блоки.

Вернёмся к нашей таблице и добавим в неё текст. Это будет лендинг про возможность создавать чат-ботов в Unisender. На лендинге мы обязательно хотим рассказать:

как чат-боты помогают бизнесу и какие проблемы решают;
как работает конструктор чат-ботов;
как готовые шаблоны и сценарии облегчают работу;
кому пригодится инструмент.

Под каждый пункт списка пишем текст и получаем вот такой результат:

Такой текстовый прототип у нас получился. Пока без акцентов, но с чёткой структурой

Без строчки кода: 8 конструкторов для создания чат-ботов

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

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

Вот такой прототип у нас получился. Здесь есть кнопки, иллюстрации, заголовки и подзаголовки, колонки. Границы таблицы я скрыла, чтобы они не мешали просмотру. Потом из этого прототипа получится вот такая страница сайта

5 сервисов для создания прототипов

Если вам кажется, что с таблицами в Google Документах работать неудобно, можно сделать прототип в специальном конструкторе. Вот несколько самых популярных.