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

Содержание

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

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

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

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

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

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

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

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

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

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

прототипирование сайта макет и схема
Схема и макет

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

прототипирование сайта без текста
Прототип

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

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

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

прототипирование сайта копирайтинг
Прототип с текстовым наполнением

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

Важно. Хороший сайт невозможно сделать за 2-7 дней.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

прототипирование сайта лист бумаги
Лист бумаги

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

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

прототипирование сайта графический редактор
Графический редактор

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

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

прототипирование сайта программы
Программа для прототипирования

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

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

прототипирование сайта сервис
Сервис для разработки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кстати. Если Вы хотите самостоятельно создать лендинг, то можете это сделать через конструктор. В арсенале любой сайт Кстати. Создайте собственный сайт через конструктор за один день и без программистов. В арсенале готовые шаблоны, мобильная версия, корзина, платежи и еще +10 инструментов. Кликайте и тестируйте -> InSales (по промокоду "inscale" +30 дней бесплатно).

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

Автор Никита Жестков
5 Комментариев
Гость

А что же не указали программу для составления прототипа сайта Figma?

Ответить    
Александра Зимовцева

Итак достаточно программ :)

Ответить    
Narmin Kerimova

оч интересно :)

Ответить    
Миклуха Айклауд

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

Ответить    
Есения Есенина

спасибо за полезные рекомендации

Ответить    
Для добавления комментариев вам необходимо авторизоваться
Заберите подарок
Picture: Like
68 ФИШЕК МАРКЕТИНГА:
от привлечения до удержания

Скачайте методичку и внедрите самые актуальные фишки для увеличения продаж вдвое

Получить
Подпишитесь на рассылку
Picture: Subscribe
Дайджест новых статей
+ неопубликованное от in-scale

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

Подписаться