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

Что такое прототип и зачем он нужен Когда нужно делать прототип Как сделать прототип лендинга в Google Docs 6 сервисов для создания прототипов

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

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

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

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

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

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

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

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

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

Разбивают работу на итерации. Иногда бывает так: автор написал текст, клиент одобрил.

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

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

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

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

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

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

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

Как сделать прототип лендинга в Google Docs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Marvel

Цена. $12–42 в месяц.

Бесплатный тариф. Один пользователь с одним проектом.

Платформы. Онлайн-версия, мобильные приложения на iOS и Android.

Функции:

• Прототипирование.
• Тестирование.
• Автоматическая генерация кода под прототип.
• Командный доступ.

NinjaMock

Цена. $5–8 в месяц за одного пользователя.

Бесплатный тариф. Один проект без возможности экспорта.

Платформы. Онлайн-версия.

Функции:

• Разработка прототипов под разные виды устройств с помощью мокапов.
• Встроенные инструменты рисования.
• Командный доступ.

Justinmind

Цена. $9–19 в месяц за одного пользователя.

Бесплатный тариф. Версия с ограниченным функционалом.

Платформы. Десктопная версия для MacOS и Windows.

Функции:

• Создание прототипов для web и мобильных приложений.
• Интерактивный дизайн: с кнопками, загрузкой страниц и пр.
• Тестирование.

HotGloo

Цена. $13–54 в месяц.

Бесплатный тариф. 7-дневный пробный период.

Платформы. Онлайн-версия.

Функции:

• Создание интерактивных прототипов.
• 2000 элементов в библиотеке.
• Командный доступ.

Draftium

Цена. $99 в год

Бесплатный тариф. Три проекта и 50 доступных шаблонов.

Платформы. Онлайн-версия.

Функции:

• Прототипирование на основе 300 готовых шаблонов и 200 блоков.
• Автоматическое подстройка прототипа под мобильные устройства.
• Командный доступ.

Eskone

Цена. $2–5 в месяц.

Бесплатный тариф. 30-дневный пробный период.

Платформы. Онлайн-версия.

Функции:

• Создание интерактивных прототипов.
• Проектирование баз данных, скриптов, квизов.
• Создание майнд-карт для разработки структуры сайта.

Поделиться

СВЕЖИЕ СТАТЬИ

Другие материалы из этой рубрики

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса

Статьи почтой

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

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Как запустить email-маркетинг с нуля?

В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании.

В конце каждого письма даем отбитые татуировки об email ⚡️

*Вместе с курсом вы будете получать рассылку блога Unisender

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

инструменты и конструкторы для создания — OKOCRM

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

Оказывается, можно не страдать и не рисовать макет на салфетке. Есть специальные программы, в которых можно собрать полноценный прототип как конструктор Лего. А еще расшарить его для командной работы и вносить правки онлайн, находясь на созвоне с другими членами команды. Подходящего софта — море: от обычного Фотошопа, до узкопрофильного Зеплин. Чтобы не раздувать материал, мы решили разобрать 5 лучших на наш взгляд инструментов.

Встречайте Oko-ТОП для прототипирования от нашего веб-дизайнера:

1. Figma — для всех
2. MockFlow — для команд
3. Axure — для профессионалов
4. Mockingbird — для новичков
5. Mockup Builder — для новичков

Figma

Функционал: ✰✰✰✰✰

Сложность работы: ⚒ ⚒

Язык: английский, русского языка нет

Бесплатный тариф: есть, без ограничений по срокам

Самый дешевый тариф: от $12 в месяц

Приложение / веб-версия: есть десктопное приложение и браузерная версия

Для кого: для всех

Особенности: кросс-платформенный онлайн-сервис, который позволяет вести все этапы развития проекта: от сбора референсов, до разработки прототипа

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

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

Программа отлично работает в браузере, качать и устанавливать десктопную версию необязательно. Тем более, что без интернета она все равно не работает. А кросс-платформенность делает Фигму универсальной для последователей разных операционных систем: Windows, Linux, ChromeOS и MacOS. С учетом того, что Фигма — бесплатная программа с доступным базовым функционалом, мы ставим ей 5 звезд. Фигма просто ТОП, ничего добавить. 🙂

Что хорошего:

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

Что плохого:

• нет русскоязычной версии;
• слабые возможности работы с текстом
• обязательное наличие интернета
• отсутствие расширяемости — дописать скрипты не получится

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

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

MockFlow

Функционал: ✰✰✰✰

Сложность работы: ⚒ ⚒

Язык: английский, русского языка нет

Бесплатный тариф: есть, на 1 проект из 3 страниц с доступом до 5 пользователей

Самый дешевый тариф: от $14 в месяц

Приложение / веб-версия: только браузерная версия + автономная работа, есть мобильное приложение.

Для кого: для команд, проектов средней и высокой сложности

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

MockFlow — годный конструктор прототипа сайта, который отлично подходит для новичков и прост в освоении. Позволяет строить модели интерфейсов для веб-сайтов и приложений. Из крутого — в софт входит пакет отдельных приложений, включая WireframePro, AnnotatePro, BannerPro, DesignCollab, WebsitePro, которые помогут создавать прототипы.

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

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

Что хорошего:

• есть внутренний командный чат, комментарии
• возможность автономной работы при отсутствии доступа к сети
• возможна визуализация Sitemap и преобразование файла в эксель-таблицу
• возможность захвата веб-страниц для работы с референсами
• обширная библиотека компонентов для макетов
• возможность экспортировать дизайн в png-файл
• есть инструменты для презентации макета

Что плохого:

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

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

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

Axure

Функционал: ✰✰✰✰✰

Сложность работы: ⚒ ⚒ ⚒ ⚒

Язык: английский, русского языка нет

Бесплатный тариф: пробный период, длительностью в 30 дней

Самый дешевый тариф: $29 в месяц для одного пользователя

Приложение / веб-версия: есть десктопное приложение, веб-версии нет

Для кого: для профессионалов

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

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

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

Работать в облаке не получится, веб-версии нет — нужно скачивать и устанавливать софт. Во время работы программа сохраняет результаты в виде файлов HTML, Javascript, CSS.

Что хорошего:

Что плохого:

• нет русскоязычной версии
• нет веб-версии для работы в браузере — только офлайн-софт
• нет полноценной бесплатной, только 30-дневный триал

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

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

Mockingbird

Функционал: ✰

Сложность работы: ⚒

Язык: английский, русского языка нет

Бесплатный тариф: пробный период, длительностью 6 дней

Самый дешевый тариф: от $11/месяц для 3 проектов без ограничений по пользователям

Приложение / веб-версия: только браузерная версия

Для кого: для новичков

Особенности: простой сервис для создания несложных прототипов

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

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

Собственно, это и все, что умеет Mockingbird. И мы уверены, что у этого продукта есть свой потребитель, которому ни к чему вагон функций в Axure или возможности и универсальность Фигмы. Ему нужен набросок сайта, и Mockingbird это умеет делать без особых заморочек. А за бесплатные 6 дней использования можно собрать целую библиотеку страниц. :)

Что хорошего:

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

Что плохого:

• нет русскоязычной версии
• не работает оффлайн
• минимальный функционал
• короткая триал-версия

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

В редакторе Mockingbird минимум функций. Зато есть все самое важное для примитивного прототипирования.

Mockup Builder

Функционал: ✰

Сложность работы: ⚒

Язык: английский, русского языка нет

Бесплатный тариф: пробный период, длительностью 14 дней

Самый дешевый тариф: от $7/месяц для 1 проекта на 15 страниц, 1 пользователя и 3 рецензентов.

Приложение / веб-версия: только браузерная версия

Для кого: для новичков

Особенности: простой инструмент со стандартным набором функций. Ничего особого.

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

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

Бесплатная версия работает 2 недели. За это время можно наштамповать с десяток прототипов и отправить исполнителю на отрисовку. Однозначно лайк.

Что хорошего:

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

Что плохого:

• нет русскоязычной версии
• не работает оффлайн
• только базовый функционал

Итог: рабочий инструмент для новичков, которые не готовы вникать в Фигму и разбираться с Axure.

Интерфейс Mockup Builder похож на полноценный редактор для прототипирования, но его возможности не сильно отличаются от простейшего Mockingbird.

Сравнительная таблица

	Figma	MockFlow	Axure	Mockingbird	Mockup Builder
Функционал	✰ ✰ ✰✰✰	✰ ✰ ✰ ✰	✰ ✰ ✰ ✰ ✰	✰	✰
Сложность	⚒ ⚒	⚒ ⚒	⚒ ⚒⚒ ⚒	⚒	⚒
Для кого	Для всех	Для команд	Для профи	Для новичков	Для новичков
Русский язык	Нет	Нет	Нет	Нет	Нет
Бесплатный тариф	Есть	Есть	Триал 30 дней	Триал 6 дней	Триал 14 дней
Минимальный прайс	$12 в месяц	$14 в месяц	$29 в месяц	$11 в месяц	$7 в месяц
Приложение	Есть	Нет	Есть	Нет	Нет
Веб-версия	Есть	Есть	Нет	Есть	Есть

Что в итоге

Мы собрали вместе 5 лучших на наш взгляд инструментов прототипирования. У каждого — своя аудитория и задачи. Если вам нужен универсальный инструмент для командной работы над веб-порталами, в котором есть функционал для создания прототипов — присмотритесь к Figma. Нужен мощный инструмент для профессионалов? Это Axure. Ну а если вы новичок и ваша задача — сделать набросок своей идеи для дизайнера и разработчика, вам поможет Mockup Builder и Mockingbird.

бесплатных платформ для создания прототипов приложений или веб-дизайна | by Sagara Technology Idea Lab

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

Создание прототипа не так сложно, особенно если вы следуете передовым методам и набору инструментов соответствует вашим навыкам.

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

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

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

1. Figma

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

На Figma есть несколько бесплатных наборов, но те, что доступны, могут помочь разработчикам мобильных приложений начать работу. Последний комплект iOS Facebook и Android UI готовы к использованию. Существует также ссылка на ресурсы Figma, где сообщество представляет последние макеты, значки, наборы и другие ресурсы.

Цена: Бесплатно для индивидуальных пользователей. Профессиональные планы начинаются с 12 долларов в месяц.

Подробнее: Золотые правила дизайна пользовательского интерфейса

2. Скетч

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

Цена: Бесплатно.

3. Adobe XD

Являясь частью Adobe Creative Cloud, XD — это платформа, помогающая командам проектировать и сотрудничать. Создайте свой проект с направляющими монтажной области и сетками макета. Переключитесь из режима разработки в режим прототипа и подключите монтажные области, чтобы передать поток и пути многоэкранных приложений. Используйте автоматическую анимацию, голосовые триггеры, поддержку наложений, временные переходы и многое другое. Создавайте общие ссылки, чтобы получать отзывы о своих проектах. Записывайте взаимодействия с прототипом в виде видео.

Цена: Стартовый план бесплатен для одного активного общего прототипа. Стандартный план составляет 9,99 долларов США в месяц на пользователя.

4. Marvel

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

Цена: Бесплатно для одного проекта. Премиум-планы начинаются с 12 долларов в месяц.

5. Craft

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

Цена: Бесплатно.

6. Proto.io

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

Цена: Бесплатный аккаунт с ограниченными возможностями. Премиум-планы начинаются с 24 долларов в месяц.

7. Студия оригами

Origami Studio — это инструмент для создания прототипов от дизайнеров на Facebook. Создавайте слои или импортируйте слои из Sketch. Используйте маски, системы частиц и живые камеры. Сэкономьте время с готовыми компонентами или создайте собственную библиотеку. Создавайте потоки и взаимодействия. См. изменения немедленно в средстве просмотра. Тестируйте и корректируйте на лету.

Цена: Бесплатно.

8. Vectr

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

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

Цена: бесплатно.

Подробнее: Основы дизайна UX и UI

9. Adobe Comp

Adobe Comp предлагает инструменты, необходимые для преобразования естественных жестов рисования в готовую к производству графику. Этот инструмент позволяет легко создавать макеты для печати, веб-сайтов и мобильных устройств, которые можно интегрировать с Photoshop, Illustrator и InDesign.

Он работает с Adobe Stock и Typekit и предлагает вам изображения, графику и многочисленные шрифты, которые можно объединить при работе над прототипом дизайна. Adobe Comp имеет удобный дизайн и предлагает несколько учебных пособий, которые помогут новым веб-дизайнерам легко проектировать и разрабатывать прототипы.

Цена: Бесплатно.

10. InVision

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

С помощью страницы управления проектами InVision вы можете легко упорядочить компоненты дизайна в рабочий процесс состояния и установить их в соответствующие столбцы. Используя этот инструмент, вы можете легко анимировать, создавать ресурсы, импортировать файлы дизайна из Sketch или Photoshop, предварительно просматривать прототипы на мобильных устройствах и связывать страницы для имитации реальных веб-сайтов. Этот инструмент легко интегрируется с такими приложениями, как Slack, Dropbox, Box и другими.

Цена: Бесплатно.

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

Теперь, когда у вас есть готовый, достаточно красивый и проверенный пользователями прототип — давайте его построим!

https://www.sagaratechnology.com/blog/2019/12/17/free-platforms-to-create-prototyping-for-apps-or-web-design/

(SA)

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

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

Итак, как создать прототип и какие нюансы учесть? Найдите все ответы ниже.

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

Прототип — это быстрый набросок модели будущей системы или продукта.

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

Существует два вида прототипов, различающихся по способу взаимодействия: 

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

Какова цель прототипа?

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

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

1. t — это возможность определиться с умным расположением блоков, элементов дизайна, разработать понятную навигацию по сайту.
2. Экономит много времени: тестирование начинается на ранних стадиях, изменения, которые занимают секунды на этапе прототипирования, могут потребовать часов, дней и недель при написании кода, сокращается объем бумажной работы.
3. Упрощает процесс проектирования. Когда у вас есть схемы всех страниц, расположение всех элементов и рисование макетов упрощается.
4. Выводит работу с контентом на совершенно другой уровень. Каждая страница создается как интерфейс со структурированной информацией, акцентами, иллюстрациями и интерактивными элементами.
5. Функциональные прототипы позволяют проверить сложные этапы взаимодействия пользователя с сайтом. Он также подходит для тестирования фокус-группами.
6. Помогает клиентам сформулировать требования. Когда проект обретает форму, они понимают, что требует изменений и исправлений, которые легко реализовать сразу.
7. Это лучший способ узнать, является ли проект слишком дорогим или сложным для разработки и запуска.

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

Сколько стоит изготовление прототипа?

Совершенно бесплатно , с использованием инструмента прототипирования Draftium.

Как вы разрабатываете идею?

Прототипировать можно все — идею продукта, текст, лендинг, весь сайт и так далее. И абсолютно все можно прототипировать на листе бумаги. Собственно так и делалось раньше, задолго до цифровизации. Погуглите «пример прототипа продукта», и вы даже найдете картонные ноутбуки и смартфоны.

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

Как сделать прототип: пошаговое руководство 

Мы рассмотрим как теоретические, так и практические аспекты, которые помогут создать прототип сайта, проекта или идеи.

Шаг 1. Определите цель вашего проекта

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

Шаг 2. Изучите своих конкурентов

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

Шаг 3. Проанализируйте содержимое

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

Шаг 4. Создайте концептуальный эскиз

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

Шаг 5. Войдите в Drafrtium

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

 Шаг 6. Выберите шаблон

Нажмите «Создать новый».

драфтиум

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

Шаг 7. Отредактируйте верхний и нижний колонтитулы

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

Шаг 8. Настройте домашнюю страницу

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

Шаг 9. Добавьте остальные страницы

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

Шаг 10. Примените свой контент

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

Шаг 11. Настройте ссылки

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

Шаг 12. Предварительный просмотр на разных устройствах

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

Шаг 13. Оставляйте комментарии и редактируйте

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

Шаг 14. Запрос блока

Если вы вдруг обнаружите, что отсутствует какой-то важный блок, мешающий вашим планам по созданию идеального прототипа, нажмите «Запросить блок». Команда свяжется с вами для уточнения деталей.

Шаг 15. Опубликуйте свой прототип

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

Пример прототипа

№1. Сайт учителя: https://vyg26.draftium.site/

Несколько слов о Draftium 🙂

Есть несколько причин, по которым мы выбрали Draftium, чтобы объяснить, как создать прототип. Draftium отличается от остальных инструментов прототипирования тем, что он более функционален и намного проще в использовании для непрофессиональной аудитории. Среднестатистическому пользователю достаточно функционала бесплатной версии, тогда как агентства могут рассмотреть версию Pro.