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

POP App

Вот так выглядит POP App простой и быстрый инструмент для связывания экранов, нарисованных от руки

Это был первый сервис для прототипирования интерфейсов приложений, с которой я познакомился. Она позиционирует себя как простой инструмент для работы даже с очень сырым макетом. Вы прикидываете на бумаге, как будут выглядеть экраны в вашем приложении, фотографируете наброски и обрабатываете с помощью POP App. Объекты интерфейса, которые должны быть интерактивными, можно выделить и связать с другими объектами и экранами; например, кнопка login связывается с экраном регистрации. В итоге у вас получается быстрый прототип, экраны которого нарисованы на бумаге в буквальном смысле. Но вместо ручных эскизов вы можете использовать и макеты, созданные в графических редакторах.

POP App работает по принципу постраничных инструментов прототипирования интерфейсов. Вы загружаете в них кипу экранов (порядка 50–100) и соединяете их переходами. Редактор воспринимает каждый экран в макете как слитую картинку. На ней вы выделяете какую-то область и указываете, на какой экран человек попадёт, если нажмёт на эту область.

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

Как показать прототип заказчику или пользователю: попросить его поставить на свой девайс специальное приложение.

Цена: бесплатно для двух проектов и одного пользователя. Создать в POP App больше проектов можно, заплатив от 12 $ в месяц.

Экран проекта в InVision.

Этот инструмент прототипирования более продвинутая, чем Marvel, и позиционирует она себя как инструмент для профессионалов. У программы есть плагин для Sketch — Craft, который позволяет превращать дизайн-макет в прототип прямо в Sketch, без отрыва от производства. Среди других бонусов быстрый процесс подстановки шаблонов имён, заголовков, дат и текстов. Например, в макете вам нужно быстро представить кучу разных имён, тогда вы выделяете нужные слои и нажимаете соответствующую кнопку в плагине, и вуаля, плагин сам подставляет рандомный контент. Этот же плагин даёт возможность использовать фото с бесплатного стока Unsplash. Сделать дизайн прямо в InVision пока не получится, но, по слухам, скоро появится и такая возможность.

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

Плюсы: удобные комментарии к прототипам — можно прямо в чате обсуждать ту или иную функцию. Также недавно появилась возможность «инспектить» макет: разработчик может посмотреть размеры объектов в прототипе, расстояние между ними и так далее — прямо как в Zeplin. А ещё есть возможность совместной работы и менеджер задач, похожий на Trello.

Минусы: после Marvel интерфейс InVision не самый удобный. Чтобы выбрать нужный экран, нужно долго искать его в списке, то есть предварительно нужно запоминать название. А если экранов больше 50, это превращается в сущий ад.

Как показать прототип заказчику или пользователю. Показывать прототип пользователю можно также через мобильное приложение.

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

Графические редакторы

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

Особенности (в зависимости от выбранного продукта):

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

Рис. 4 – Пример разработки в Photoshop

Плюсы применения программного обеспечения:

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

Правильный протопит

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

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

Лучшие онлайн-сервисы для прототипирования

Перечисляем самые авторитетные и популярные на момент написания статьи веб-инструменты для прототипирования.

  • Draftium. Работает по принципу конструктора, предлагает больше 500 шаблонов и тысячи блоков, которые можно перетаскивать, менять местами, добавлять и удалять. Правда, если не платить, шаблонов будет несколько десятков.

  • «Марвел”. Этот сервис посложнее, чем Draftium — требуются базовые дизайнерские навыки, но зато и функционал больше. В Marvel можно создать интерактивный прототип какого угодно сайта. Серьезные функции доступны только в платных тарифах.

  • Wireframe. Простой в работе инструмент с упором на минимализм. Сильно похож на листы А4 — плохо это или хорошо, решать вам. Наряду с бесплатным решением предлагаются платные версии с расширенной функциональностью.

  • Just in Mind. Эта программа подойдет всем. С ее помощью создают элементарные, простые прототипы и сложные проекты с кликабельными блоками. Есть версия с ограниченным набором функций, за которую не надо платить, и три пакета разной степени дороговизны.

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

Какие технологии и оборудование используются для 3D-печати прототипов

Для решения задач быстрого прототипирования в основном применяются следующие аддитивные технологии:

  • моделирование методом послойного наплавления (FDM/FFF);
  • лазерная стереолитография (SLA);
  • DLP- и LCD-стереолитография;
  • селективное лазерное спекание (SLS); 
  • многоструйная 3D-печать (MJP/MJM).


Стереолитографический 3D-принтер ProtoFab SLA600 DLC на стенде iQB Technologies на выставке «Металлообработка 2019»

Наша компания предлагает широкий выбор оборудования для 3D-печати прототипов от ведущих производителей:

  1. профессиональные 3D-принтеры Sharebot (FDM, LCD, SLS);
  2. крупноформатные FDM-установки ;  
  3. промышленные фотополимерные 3D-принтеры ProtoFab.

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

9 шагов к созданию аддитивного центра на предприятии

Прототип практически ничего не говорит о каждой конкретной странице

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

Одна сторона медали — текст определённого объёма, правильная подача, эмоциональная окраска, другая — грамотно подобранная графика, шрифты, цвета, расположение и оформление. Но продаёт вся медаль, а не какая-то её сторона. Или не продаёт.

Что полезнее для заказчика или фокус-группы: не очень аккуратный «почти конечный» дизайн страницы с «почти конечными» текстами, цветами, фотками, шрифтами — или чёрно-белая страничка с текстом из «Яндекс.Рефератов» и прямоугольниками с подписью «фотка улыбающегося ребёнка»?

Маркетинговый анализ как основной этап прототипирования сайта

1. Брифование заказчика и изучение продукта и компании.

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

2. Анализ целевой аудитории

  • анализ форумов и тематических статей;
  • анализ социальных сетей конкурентов — ищите комментарии и вопросы клиентов, читайте отзывы тех, кто уже купил продукт;
  • анализ ключевых запросов в Яндекс Wordstat подсказок Google — так вы поймете, как потенциальный клиент ищет товар или услугу в интернете;

  • Изучение записей разговоров из отдела продаж (какие вопросы задают клиенты, с какими проблемами обращаются, какие сомнения у них возникают, как быстро клиент принимает решение, из каких этапов состоит воронка продаж);
  • Обзвон действующих клиентов компании: почему обратились именно сюда, какие плюсы и минусы от сотрудничества выделяют, советуют ли компанию своим знакомым и почему;
  • анализ сайтов отзовиков — смотрим отзывы по товару/услуге или конкурентам.

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

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

проанализируйте отделы продаж конкурентов

Что такое быстрое прототипирование?

Чтобы сохранить и увеличить конкурентоспособность, производители стремятся выводить продукцию на рынок в минимальные сроки. Как достичь этой цели? Один из способов – сократить цикл разработки продукта.

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

Для достижения наилучших результатов эту стадию нужно завершать как можно раньше. Быстрое прототипирование, то есть создание прототипов посредством 3D-печати, позволяет существенно сократить цикл разработки и сэкономить ресурсы.

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

Хотите бесплатно протестировать 3D-печать? Закажите изготовление прототипа, макета, мастер-модели или функционального изделия из пластика, фотополимера, воска или гипса:


Прототип крышки
Оборудование: Discovery 3D Printer, материал: 3D850, размеры: 29 х 19 х 4,5 см, вес: 146 г

Прототипирование сайтов и интерфейсов программ и приложений

Прототипирование сайта, главным образом, означает проектирование его интерфейса. Оно помогает облегчить задачу программистам, дизайнерам и верстальщикам. Поэтому мы объединили эти два пункта в один.

При моделировании интерфейса нужно исходить из концепции UX дизайна (UX расшифровывается как User Experience, что переводится на русский как «пользовательский опыт») – всегда помнить о том, к чему привыкли пользователи.

Например, когда вы заходите на любой сайт, то, скорее всего, ожидаете, что справа или сбоку будет меню и название проекта. Чуть-чуть правее или левее центра – контент (статьи, фотографии, видео). А снизу – надпись «Все права защищены» и правовые документы.

Если же вы зайдёте и увидите совсем другую картину (к примеру, меню будет расположено где-то снизу, контентная часть будет слишком узкой и т.п.), вероятно, вы просто уйдёте на другой сайт – более привычный.

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

Прототип можно создать в любой программе, где можно рисовать. Если вы новичок, используйте Photoshop, Paint, Adobe Illustrator или даже Google Docs. Профессионалам рекомендуем программу Axure. И вот что нужно сделать дальше (в упрощенной форме):

Стиль сайта должен прослеживаться на всех его страницах. Не должно быть так, чтобы на главной странице преобладал минимализм (чёрно-белый дизайн и полное отсутствие лишнего), а в статьях – «рог изобилия», когда кажется, что попал совсем в другую реальность. Элементы нужно делать симметричными по размерам и расположению.

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

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

  • Мелкие шрифты (если человеку не удобно читать у вас, он быстро найдёт, у кого читать комфортнее).
  • Горизонтальные прокрутки (особенно это вызывает неудобство на смартфонах).
  • Отсутствие мобильной версии (международное агентство Social провело исследование и выяснило, что 5,26 миллиарда пользователей (именно пользователей, а не людей) заходят в Интернет с мобильных устройств).

Подробнее читайте в материале, подготовленном крупнейшим маркетинговым агентством России Texterra. Там очень хорошо и понятно изложено, что стоит внедрить на своём сайте/приложении, а что –  убрать. Однако не старайтесь всё время следовать нашим советам: экспериментируйте и пробуйте выяснить самостоятельно, что хотят видеть потенциальные клиенты на вашем сайте или в приложении.

Создать прототип сайта

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

Создание прототипов в Figma

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

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

Настройка всплывающего окна заявки

Клиент может прямо на прототипе оставлять комментарии к элементам.

Создание прототипов в Lucidchart

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

Фрагмент демонстрационного прототипа

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

У инструмента есть расширение для Google Chrome, так что с его помощью можно быстро добавить диаграммы из Lucidchart в документы и таблицы Google.

Рисование прототипа веб-страницы в Pencil

Бесплатная программа с открытым исходным кодом для рисования прототипов страниц сайта.

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

Отрисовка страницы сайта в программе

Скачать Pencil для Windows или Mac.

Выравнивание текста по сетке с помощью Sassline

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

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

Фрагмент примера страницы с линейками

PSD-шаблон для посадочной страницы

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

К примеру, мы нашли бесплатный psd-шаблон для одностраничного сайта, которым поделился дизайнер Arifur Rahman Tushar.

Внешний вид страницы

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

Мы проверили файл в Adobe Photoshop 2017: открывается, слои на месте, но скорее всего понадобится докачать шрифты.Скачать шаблон

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

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

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

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

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

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

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

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

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

Задача: прототипирование компонентов гоночных мотоциклов с целью улучшить конструкцию, аэродинамику, а также комфорт гонщиков при подготовке к чемпионату мира MotoGP.

Решение: 3D-печать прототипов на FDM-принтерах Sharebot 42 и Sharebot Q XXL.

Результат

  • Крепления подножки мотоцикла (на фото выше): из PLA-пластика напечатана серия деталей, чтобы выбрать наиболее подходящую для каждого из пилотов команды, затем конечные изделия произведены на фрезерном станке с ЧПУ.

Шаблоны для сверления для переднего обтекателя: 3D-модели шаблона созданы напрямую из CAD-моделей обтекателя, затем напечатаны на 3D-принтерах. Такое решение позволило выполнить отверстия с исключительной точностью, которая недостижима при использовании классических методов.

Воздухозаборник: из PLA изготовлена серия прототипов редуктора для тестирования и определения оптимальной геометрии воздухозаборника. 3D-печать позволила обойтись без оснастки, по результатам тестирования изготовлена одна финальная пресс-форма.

От прототипа самолета до биомедицины: Sharebot открывает новые возможности

Задача: создание точной модели позвоночника и трахеи пациента для подготовки к предстоящей операции.

Решение: печать на 3D-принтере ProtoFab SLA450 из фотополимера Formula L1 и вакуумное литье.

Результат:

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

3D-печать прототипа горнолыжного шлема: от идеи до готового изделия

Задача: оптимизировать процессы разработки и создания комплектующих и аксессуаров для душевых кабин различных типов.

Решение: 3D-печать функциональных прототипов и готовых изделий на профессиональном 3D-принтере Sharebot Q.

Результат:

  • значительное сокращение времени и денежных средств на получение готовых комплектующих благодаря возможности изготовить прототип на основе 3D‑модели всего за несколько часов;

упрощение процесса модификации изделий в ходе изготовления прототипов;

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

Пластик творит чудеса: как 3D-принтер имитирует органы человека

Задача: изготовление автомобильного бампера длиной 1,6 м.

Решение: 3D-печать цельного изделия на крупноформатном 3D-принтере ProtoFab SLA1600, вакуумное литье, полировка.

Результат:

  • данные испытаний и финальный план выпуска продукта могут быть готовы в течение 1-2 дней;

высокая размерная точность;

идеальное качество поверхности;

модель может использоваться для верификации конструкции или в качестве прототипа для вакуумного литья.

3D-принтер или станок? Сравниваем методы прототипирования в автопроме

Объекты, напечатанные на Super Discovery 3D Printer для проекта 3DCABINS:
– модульный туалет, материал: огнеупорный ABS, размеры: 2200 x 1700 x 1200 мм, вес: 250 кг
– вентиляционная решетка, материал: ABS с углеволокном, размеры: 59 х 89 х 4,5 см, вес: 3500 г

Задача: НИОКР для аддитивного производства сложных компонентов и изделий для военно-морских судов (проекты 3DCABINS и ADIBUQUE компании Navantia по заказу Военного-Морского Флота Испании). 

Решение: создание прототипов и готовых изделий с помощью крупноформатных 3D-принтеров линейки Discovery 3D Printer. 

Результат

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

Большому 3D-принтеру – большое плавание

Задача: изготовить прототипы деталей бампера для модели радиоуправляемого автомобиля. Размер деталей: бампер – 107 х 67 х 14 мм, небольшая деталь «вставка» – 28 х 13 х 17 мм.

Решение: 3D-печать из фотополимерной смолы Formula W на стереолитографическом принтере ProtoFab SLA600 DLC (проект выполнен компанией TWIZE).

Результат:

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

время печати составило 3 часа;

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

10 лучших российских кейсов внедрения 3D-технологий