В какой программе сделать прототип

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

Директ Лайн
Крупнейшее региональное интернет-агентство России. ТОП-10 в рейтинге Рунета.
1200+ проектов
90 специалистов

15 лет на рынке

Что такое прототип

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

Прототип лендинга / сайта — как сделать. Инструкция [2021]

Образец прототипа лендинга

Для чего нужен прототип

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

Прототип нужен для того, чтобы:

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

Далее разберем основные виды прототипов.

Нет времени разбираться?
Разработка сайта под ключ

От проектирования каким должен быть сайт для лучших продаж до запуска и интеграции с любыми сторонними системами. Все сайты имеют мобильную версию и готовы к SEO-продвижению и приему рекламного трафика. Специализируемся на 1С-Битрикс более 10 лет.

Какие прототипы бывают

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

Интерактивный прототип лендинга

Второй тип — статический. Это просто изображение, на котором показано расположение элементов будущего сайта.

Статический прототип лендинга

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

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

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

Анализ конкурентов

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

Проектирование

Почти любой лендинг состоит из хедера, основной части и футера.

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

Привлекли 35.000.000 людей на 185 сайтов
Мы точно знаем, как увеличить онлайн–продажи

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

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

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

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

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

Создать прототип лендинга можно в любом графическом редакторе — Adobe Photoshop, Adobe Illustrator, Paint или даже в MS Word и Google Docs. Однако используя их, вы рискуете столкнуться с массой неудобств и потерять время. Поэтому для прототипирования мы рекомендуем использовать специальные сервисы. О некоторых из них расскажем ниже.

Axure RP

Это программой пользуются профессионалы. Выпускается она под операционные системы Windows и macOS. Бесплатный период пользования составляет 30 дней.

В Axure RP можно создавать сложные интерактивные макеты. Интерфейс программы приятен.

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

Программа Axure RP

Создание прототипа лендинга в Axure RP

Draftium

В отличие от программы Axure RP, Draftium — это онлайн-сервис, что облегчает доступ к проектам с разных устройств. Разработчики этой платформы подготовили ряд качественных шаблонов под разные цели: в бесплатной версии их 50, в платной ($99 в год) — более 300.

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

Онлайн-сервис Draftium

Создание прототипа лендинга в Draftium

Marvel

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

Если работать вы собираетесь в одиночку, то вам будет достаточно бесплатной версии. Для командной работы потребуется один из платных тарифов: 3 пользователя — $42, 6 пользователей — $84.

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

Сервис Marvel

ESK.ONE

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

На ESK.ONE есть занятная функция «Получить идею»: на соответствующей странице генерируются полезные советы, которые могут пригодиться вам в работе.

Сервис ESK.ONE

Функция запроса идей в ESK.ONE

Mockingbird

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

Платформа Mockingbird

NinjaMock

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

Используя бесплатный тариф NinjaMock, вы сможете создать только один проект, состоящий не более чем из 200 элементов. При этом учтите: проекты, сделанные на этом тарифе, доступны для просмотра всем пользователям сервиса.

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

Сервис NinjaMock

Ошибки, которые допускаются при создании прототипа

Обратите внимание на самые частые ошибки, которые допускают новички при создании своего первого прототипа лендинга:

1. Приверженность одной идее. Главное преимущество прототипирования перед разработкой дизайна — простота. Поэтому мы рекомендуем не ограничиваться одним вариантом макета. Вы сможете сделать идеальную в плане юзабилити страницу, только если будете создавать и дорабатывать версии прототипа.
2. Отсутствие понимания целей и задач проекта. Пожалуй, это основная ошибка, из-за которой вся работа не имеет смысла. Проектировщик интерфейса должен четко понимать цели заказчика и знать, на какую целевую аудиторию ему нужно ориентироваться при создании определенного продающего лендинга. Именно эти нюансы — ключ к успеху.
3. Чересчур высокая или, напротив, низкая детализация. Прототип может представлять собой лишь наброски или же выглядеть как практически готовый сайт с динамическим интерфейсом. Каждый из этих вариантов имеет свои преимущества и недостатки, но основное различие между ними — количество затрачиваемого времени. Если время на выполнение макета ограничено, рекомендуем выбрать промежуточный вариант, в котором элементы будут изображены графически, но при этом будут кликабельны. При выборе уровня детализации отталкивайтесь от сложности проекта и потребностей заказчика или команды.
4. Ошибочный выбор разрешения и неверная разметка сайта. Разрабатывая макет лендинга, помните об универсальном разрешении экрана (речь идет, в первую очередь, о ПК). Важно, чтобы все элементы на самом главном, первом экране вписались в разрешение минимум 768×1360 px.
5. Неправильное размещение элементов на странице. В процессе определения того, где какой элемент должен находиться, важно помнить о логике пользователя. Здесь не стоит экспериментировать. Например, главное меню должно быть расположено строго в верхней части экрана. В противном случае, если меню будет расположено в неожиданном месте, сайт рискует потерять часть конверсий. Учитывайте также, что пользователь должен иметь возможность сделать заказ или связаться с представителем компании, находясь на любой части страницы. CTA-кнопки должны соответствовать целям: совершение покупки, скачивание чего-либо, регистрация на сайте и т.д.

Что такое прототип сайта или лендинга?

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

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

По личным наблюдениям – если вы согласовываете прототип до этапа дизайна, то количество правок на этапе дизайна и верстки сокращается минимум в 2 раза (а иногда и полностью исключается). Это позволяет выпускать качественные сайты и лендинги в несколько раз быстрее и работать с довольными клиентами, которые знают заранее, какой результат они получат, и охотнее оплачивают услуги.

Что такое прототип – определяемся с терминологией

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

Маркетологи из Convert Monster приступают к прототипированию после брифа с клиентом и агрегации требований к проекту (цели и задачи проекта, исследование рынка, конкурентов, целевой аудитории и план лендинга) и отводят на разработку от 3 до 7 рабочих дней в зависимости от сложности проекта.

Общая последовательность действий такая:

• бриф;
• агрегация требований + согласование с клиентом;
• прототип (структура блоков и тексты) + согласование с клиентом;
• дизайн + согласование с клиентом;
• верстка + согласование с клиентом;
• тестирование сайта;

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

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

Типы прототипов

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

Таким образом, прототипы можно условно классифицировать по способу изготовления (аналоговый, т.е. на бумаге, или цифровой), по степени проработки деталей, по UX (традиционный, т.е. в виде изображения, или интерактивный, с которым можно взаимодействовать).

Термин прототип неоднозначный, и путаница возникает из-за того, что на английском слово prototype означает конкретный тип – живой прототип, который можно прокликать. А то, что мы называем прототип (по сути простая схема страницы), по-английски называется wireframe (вайрфрейм). Помимо этого, есть еще несколько понятий, которые используются как синонимы прототипа, это скетч и мокап. Разберем нюансы каждого термина по-отдельности и дадим определения, ведь часто бывает, что в них путаются даже профи.

Скетч

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

Это самый дешевый и быстрый способ визуализировать идею без необходимости долго объяснять ее «на пальцах». Этот способ прототипирования подходит для быстрой коммуникации внутри команды, меньше – для презентации идеи перед заказчиком. Причина проста – клиентам трудно представить, как все будет выглядеть в результате, и вы нарветесь на дополнительный цикл вопросов, ответов и уточнений.

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

Вайрфрейм (Wireframe)

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

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

Мокап (Mockup)

Мокап – это расширенная версия вайрфрейма, в нем допустимо «накидать» цветовые решения, добавить изображения, шрифты, иконки. Он нужен, чтобы утвердить последовательность блоков, общую стилистику, а также продумать некоторые визуальные фишки. Здесь точно пригодятся финальные версии текстов. В результате получается симпатичное изображение, которое не стыдно показать клиенту.

Я рекомендую воспользоваться простым чек-листом того, что должно быть отражено в мокапе:

• план страницы;
• готовый копирайтинг;
• расположение элементов;
• состояния элементов (пометки, что и как работает);
• референсы для изображений и типографики;

Прототип (живой прототип)

По всем правилам, prototype – это интерактивный вариант вайрфрейма (такое определение дает агентство Сибирикс ). Он четко показывает, как работают элементы будущего сайта без дополнительных пометок, комментариев или ТЗ. С ним можно взаимодействовать практически так же, как с готовым сайтом.

Живые прототипы используются для утверждения заказчиком сложных интерфейсов, а также для проведения UX-тестирования командой или фокус-группой.

Какой тип выбрать?

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

Преимущества, которые дает использование прототипа

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

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

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

Существует грубое, но правдивое выражение «без внятного ТЗ – результат хз». Если работать без прототипа, может оказаться, что нужно полностью менять сайт на этапе готовой верстки. Это значит, что нужно вновь подключать к работе целую команду из верстальщика, дизайнера, программиста, интернет-маркетолога и оплачивать их труд.

Основные преимущества, которые дарит использование прототипа:

• визуализированные требования клиента к интерфейсу и функционалу сайта;
• внесение правок быстро и без перерисовки дизайна и «переверстки»;
• правки на этапе прототипа стоят дешевле и позволяют либо вообще обойтись без правок на других этапах и уж точно минимизировать их количество;
• оценка реальных сроков разработки и стоимости (т.к. фронт работ понятен и согласован с клиентом);
• клиент видит промежуточный результат и четко понимает следующие шаги;
• активное общение с клиентом, разбитое на мелкие итерации-согласования, помогает поддерживать командный дух;
• именно на этапе прототипа закладывается эффективность будущего сайта;

Утвержденный прототип – гарантия того, что работа будет выполнена качественно и в срок.

Как создать прототип сайта?

Когда формируется структура сайта? Во время написания кода? Считаю, что гораздо раньше – фундамент закладывается еще на этапе маркетинговых исследований. После того, как собрана информация о нише, конкурентной среде и проведен анализ целевой аудитории, начинает вырисовываться главное, то, что интернет-маркетолог должен отразить в прототипе. Сюда относятся оффер, ключевые и дополнительные выгоды, возражения клиента, свойства компании и продукта/услуги.

Создание прототипов по методике Конверт Монстр – 60% работы отводится на этап исследования, разработку карты продукта, карты персонажей и прототип. Именно на этапе заполнения карты персонажей рождается вся магия и закладывается будущая структура сайта и грамотное расположение блоков.

Последовательность разработки в нашем агентстве следующая:

• карта персонажей;
• карта продукта;
• выгоды;
• аргументация;
• план блоков;
• перенос в прототип;
• копирайтинг элементов;

Методика – это тема отдельной статьи, в максимально полном (и обновленном!) виде ее дает Антон Петроченков на курсе «Интернет-маркетолог 3.0» .

Поделимся видеоинструкцией от нашего проджект-менеджера по быстрому созданию мокапа лендинг пейдж в веб-сервисе Balsamiq:

Дальше готовый прототип согласовываем с клиентом, при необходимости корректируем смету, затем пишем ТЗ и отдаем в работу дизайнеру.

Онлайн-сервисы по созданию прототипов

Специалисты топовых диджитал агентств работают в довольно простых и интуитивно понятных (а зачастую и бесплатных, или условно-бесплатных) веб-сервисах. Они не требуют особой подготовки и знаний дизайна и верстки, с ними легко справляется даже стажер. К тому же, многие из них работают по принципу конструктора и drag-and-drop элементов, а также имеют встроенные шаблоны под разные тематики.

Еще одно преимущество веб-сервисов по созданию прототипов – возможность совместной онлайн-работы над проектом (по аналогии с редактированием файла на Гугл-диске).

Один из них, Balsamiq, мы показали в видеоинструкции выше. Расскажем, какими еще несложными веб-сервисами пользуются интернет-маркетологи для создания прототипов:

Figma — кросс-платформенный онлайн-сервис для дизайнеров интерфейсов и веб-разработчиков. Функционал широкий: в сервисе можно рисовать полноценные дизайн-макета и собирать прототипы (в т.ч. живые). Считаю, что сервис не самый простой, но 2 дня на изучение ключевых функций и даже новичок начнет делать мокапы. Удобно то, что вся разработка ведется в онлайн-приложении.

У Figma есть 2 крутые опции: доступ к макету из окна браузера и совместная редактура макетов и прототипов командой. Есть бесплатная версия с урезанным функционалом.

Это минималистичный онлайн-сервис, с которым разберется и стажер. В нем можно рисовать мышкой базовые элементы и добавлять текст. Идеально подойдет для создания простого вайрфрейма (блок-схемы) и командной работы. Бесплатная версия с ограниченным функционалом.

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

Еще одна фишка сервиса – готовый прототип оттуда можно выгрузить в конструктор сайтов Weblium (и там тоже есть бесплатный тариф). Этих сервисов достаточно, например, чтобы сделать лендинг под ключ.

Профессиональное ПО для прототипирования, с которым легко разберется и новичок. Есть облачная версия. Про работу в Axure мы писали отдельную статью «Прототип landing page в Axure» , рекомендуем ознакомиться.

Заключение

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

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

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

Получите доступ к начальным урокам для
погружения в профессию “Интернет-маркетолог”

Получить доступ

Источник: convertmonster.ru

Пять онлайн-сервисов для создания прототипов сайтов, мобильных приложений

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

И вот пять инструментов, которые я нашел, все они достойные и подошли под мои требования.

Wireframe.cc

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

Премиум версия доступна от 15 долларов.

Сacoo.com

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

Платная версия от 4.95 долларов

Fluidui.com

Очень много инструментов, есть бесплатный план, нужна регистрация. Количество инструментов мне показалось избыточным. Макет сделать можно, но чтоб экспортировать в какой-нибудь формат или распечатать, нужно купить план.
Я было расстроился, но обнаружил кнопочку share. Она формирует ссылку, по которой будет доступен проект для просмотра.

Платная расширенная версия от 8.25 долларов

Balsamiq.com

https://balsamiq.com/
Популярный инструмент с очень широкими возможностями. Регистрация нужна.
30 дней — бесплатная версия.
От 12 долларов в месяц платная версия.

Lumzy.com

http://lumzy.com
После регистрации доступно сохранение проекта в PDF, JPEG, и можно создать ссылку для просмотра проекта в браузере.

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

Один жетон оплачивает 12 часов работы, стоит всего 50 центов. Правда, минимум нужно купить 10 за 5 долларов. Хрюша не очень надоедливая — работать можно даже с ней.

Источник: pllsll.com