Прототипирование сайта: создание, инструменты и программы

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

Они были разные, но всё это походило на ситуацию “кто в лес, кто по дрова”. Такое мы до сих пор видим во многих компаниях.

Решений масса, но главное из них - это предварительное прототипирование сайта. Поэтому знать и использовать обязательно.

роста прибыли не будет

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

Если Вы будете внедрять этот подход, Ваша прибыль не увеличится, но процесс станет легче и эффективнее.

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

1. Прототип - схема Вашего сайта (страницы) со всеми элементами и текстами на нём;
2. Прототипирование - схематичная реализация Вашего сайта с целью оценки и дальнейшим созданием будущего макета.

Часто схему сайта путают с его макетом. Это шаги одного процесса, но находятся они на разных уровнях.

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

самая сложная часть

Руководители бизнеса считают, что создать прототип landing page это самая лёгкая часть при разработке одностраничника.

Но я Вам открою тайну - это САМАЯ СЛОЖНАЯ ЧАСТЬ! Без преувеличения. Дизайн и программирование стоит не много. В своей статье я уже акцентировал на это внимание.

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

1. Аудит компании;
2. Анализ рынка и конкурентов;
3. Определение целевой аудитории;
4. Разработка структуры;
5. Прототипирование;
6. Написание текста.

Первые три шага являются подготовительными к началу действий. Но как сделать прототип, если не готовиться? Никак.

Тогда лучше его вообще не делать. Такая подготовка занимает не менее 3 дней (если Вы знаете свою компанию), но обычно уходит одна рабочая неделя.

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

Четвёртый шаг - это написание последовательности блоков лендинга, что за чем идёт.

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

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

1. Меню;
2. Первый экран;
3. Продукт;
4. Свойства + выгоды;
5. О компании;
6. Команда;
7. Кейсы;
8. Отзывы.

Здесь нет конкретики. Но это существенно помогает в следующем шаге. Такую последовательность мы создаём на основе лестницы Ханта, критериев выбора, страхов и потребностей клиента.

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

После структуры мы переходим к созданию прототипа, который и является героем нашей статьи.

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

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

Большинство маркетологов считают, что на этом процесс разработки прототипа сайта закончен.

У нас в In-scale мы придерживаемся другого мнения. И считаем, что без текста прототип нельзя назвать финальным, так как мы не можем разумно оценить, какой размер должен быть, чтобы вошёл необходимый текст.

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

Если Вам создали прототип страницы сайта за 1 день, то Вас обманули. Вы получили очень сырой продукт без глубокой проработки.

Как сделать прототип

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

Для начала нужно понять , мы будем только смотреть прототип или потрогать его тоже будет необходимо. Звучит странно, но сейчас всё поймёте ;-)

На правах рекламы

Изучить сервис Изучить сервис Изучить сервис

Подход 1. Смотрим или клик-клац

В зависимости от задачи и серьезности проекта, мы можем использовать прототипы двух видов: статические или динамические.

Причём второй вариант можно реализовать только через программное решение.

1. Статический. Состоит из неактивных элементов и для совершения действия или переключения между страницами нужно запускать новый файл;
2. Динамический. Состоит из активных элементов и для совершения действия или переключения между страницами нужно просто кликнуть по необходимому элементу.

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

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

Мы не исключение, только у нас команда, понимающая друг друга с полуслова, а если Вы отправляете всё это фрилансеру, то могут произойти казусы.

ВКЛЮЧАЙТЕСЬ В СОЦСЕТИ УЖЕ 40 000+ С НАМИ

Екатерина

Сергей

Иван

Елена

Екатерина

Подписаться

Подход 2. Камень, ножницы или компьютер

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

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

Лист бумаги. Вариант из серии олдскул. Не буду ходить вокруг-да-около, сразу скажу - вариант самый плохой.

Главная причина - это ошибки, которые исправить практически невозможно. Как говорится, “Что написано пером, не вырубишь топором”. Но повторюсь, мы ничему не удивляемся. Даже Вашим заполненным брифам от руки...

Графический редактор. Если Вы профессиональный дизайнер, и у Вас мощный компьютер, то тогда можете реализовать прототип с помощью Photoshop и его аналогов.

Но опять же, вариант на 3+, потому что по времени это как создать готовый дизайн-макет, каждый элемент приходится отрисовывать с нуля.

Программы для прототипирования. Есть специальные программы, которые заточены именно под создание прототипов.

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

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

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

Наш выбор - программа или сервис. Так как они заточены именно под прототипы, следовательно сделать их там довольно легко даже с нулевыми знаниями. По уровню навыков достаточно владения редактором Paint (стандартный редактор в Windows).

Важно. Многие забывают про самое главное при создании сайта - систему оплаты. И наш выбор - Yookassa. Внедряется легко и есть решение для отправки чеков в налоговую. Кликайте -> Yookassa

5 сервисов для разработки

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

Чтобы Вы не тратили время на изучение и сравнение, ниже представляю Вам список программ для создания прототипа сайта (русского интерфейса нет).

Его будет достаточно для полного закрытия этого вопроса и перехода к действиям:

1. Balsamiq (программа и сервис);
2. Mockflow (сервис);
3. Moqups (сервис);
4. Axure (сервис);
5. Hotgloo (сервис).

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

Отличия минимальны. Всё, что Вам требуется, это определить, будете Вы создавать прототип сайта онлайн или оффлайн, а затем выбрать понравившийся ресурс (даже по субъективному мнению) и начать работать.

На крайний случай почти везде есть бесплатные пробные или укороченные версии.

Коротко о главном

Если мы берём за разработку лендинга 60 т.р., то 30 т.р. это прототип. В нём накапливаются все наши знания и фишки маркетинга.

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

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

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

Нашли ошибку в тексте? Выделите фрагмент и нажмите ctrl+enter