В начале своего пути разработки лендингов мы допустили целый вагон и маленькую тележку ошибок. Были ошибки разные, но всё это походило на ситуацию “кто в лес, кто по дрова”. Такое мы видим до сих пор во многих компаниях. Решений масса, но главное из них — это предварительное прототипирование сайта. Поэтому знать и использовать обязательно.

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

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

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

prototipirovanie-sajta-sozdanie-instrumenty-i-programmy-celiy-prototyp

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

prototipirovanie-sajta-sozdanie-instrumenty-i-programmy-maket-i-shema

Самое дорогое

Руководители бизнеса считают, что создать прототип landing page это самая лёгкая часть при разработке одностраничника. Но я Вам открою тайну — это САМАЯ СЛОЖНАЯ ЧАСТЬ! Без преувеличения. Дизайн и программирование стоит не много. В своей статье “Cоздание лендинга под ключ: вся правда тут” я уже акцентировал на это внимание. И для того, чтобы Вы оценили почему я так говорю, опишу Вам правильные действия при разработке прототипа лендинга.

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

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

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

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

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

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

prototipirovanie-sajta-sozdanie-instrumenty-i-programmy-bez-teksta

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

prototipirovanie-sajta-sozdanie-instrumenty-i-programmy-s-tekstom

Важно! Если Вам создали прототип страницы сайта за 1 день, то считайте, что Вас обманули. Вы получили очень сырой продукт без глубокой проработки. Именно поэтому мы говорим всем, что хороший сайт сделать за 2-7 дней невозможно.

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

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

Смотрим или клик-клац

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

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

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

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

Камень, ножницы или компьютер

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

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

    prototipirovanie-sajta-sozdanie-instrumenty-i-programmy-maket-i-shema-brif

  2. Графический редактор. Если Вы профессиональный дизайнер и у Вас мощный компьютер, то тогда Вы можете реализовать протип с помощью Photoshop и его аналогов. Но опять же, вариант на 3+, потому что по времени это как создать готовый дизайн-макет, каждый элемент приходиться отрисовывать с нуля.

    prototipirovanie-sajta-sozdanie-instrumenty-i-programmy-maket-i-shema-photoshop

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

    prototipirovanie-sajta-sozdanie-instrumenty-i-programmy-maket-i-shema-balsamiq

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

    prototipirovanie-sajta-sozdanie-instrumenty-i-programmy-maket-i-shema-service

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

Берите и используйте

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

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

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

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

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

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

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