Прототипирование сайта: разновидности и реализация – подробное руководство

Прототипирование сайта: разновидности и реализация – подробное руководство

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

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

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

Содержание:

Введение

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

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

Рис. 1 – Готовый прототип сайта, выполненный в разработанной для этого программе

На данном этапе нет места красоте, ни о каких элементах дизайна речь не идёт. Главная задача – понять:

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

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

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

Такие доработки выливаются в задержки и дополнительные финансовые затраты (или убыток).

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

Рис. 2 – Основное отличие прототипа (показан слева) от макета (справа)

Читайте также:

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

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

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

Разновидности

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

Делятся прототипы на два вида:

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

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

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

Концепции реализации

В общем случае при создании прототипа можно пойти четырьмя путями:

  • олдскул – дешево и сердито – берём карандаш, листики бумаги, чертежные принадлежности и аккуратно, насколько это возможно, чертим/рисуем элементы страниц;
  • графический редактор;
  • интерактивная доска;
  • специализированный инструмент.

Бумажная

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

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

Рис. 3 – Самый простой способ решения проблемы

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

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

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

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

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

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

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

Читайте также:

Специальное программное обеспечение

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

Часть из них доступна бесплатно, за многие придётся выложить небольшую сумму.

Кратко рассмотрим наиболее популярные из них.

  • Axure RP Pro – платная и дорогая. Профессиональный инструмент, поддерживающий кликабельные прототипы и их экспорт во множество форматов, в том числе html, элементы проекта имеют массу свойств и отображаются в древовидной структуре.

Рис. 5 – Готовый проект, созданный в Axure RP Pro

  • Визуальный редактор Dreamweaver – позволяет делать сложные проекты путём перетаскивания в окно готовых элементов и редактировать полученный код вручную, поддерживает интерактивность.
  • Visio из пакета офисных программ от Microsoft – профессиональная среда для работы с макетами, схемами и диаграммами. Высокая стоимость перекрывается возможностью совместной работы над проектом, что отличает программу ото всех конкурентов.
  • Prototype Composer – один из немногих бесплатных редакторов для Windows.
  • CogTool – простое приложение для работы с макетами, оценивающее скорость выполнения операций.

Рис. 6 – Функционал Cog Tool

Особенности:

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

Сюда же можно отнести и онлайн-сервисы с соответствующим функционалом и дополнения для интернет-обозревателей (Pencil для FireFox). Увы, они не поддерживают русский язык и обладают рядом незначительных особенностей.

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

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

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

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

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

Прототипирование сайта – это, соответственно, процесс создания прототипа. Делается это для того, чтобы:

  • Грамотно продумать расположение нужных блоков и элементов дизайна
  • Увидеть наглядно концепцию будущего сайта
  • Правильно организовать систему навигации на сайте
  • Продумать возможности взаимодействия посетителя с сайтом

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

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

Требования к прототипам сайта:

  1. Быстрое создание прототипа
  2. Легкость внесения изменений в прототип
  3. Интерактивность
  4. Доступность – возможность оценить прототип заказчиком, программистом, менеджером и др.
  5. Детализация (в отдельных случаях)

Виды прототипирования

1. Бумажное прототипирование. Это наиболее простой и быстрый способ создания эскиза сайта.

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

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

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

3. Прототипирование при помощи специальных программ. Самыми распространенными здесь являются Axure Pro , Microsoft Visio , Adobe InDesign и Adobe Photoshop . Около 50% разработчиков прототипов все же предпочитают первую.

Axure Pro – достаточно простая и удобная программа. Здесь можно вполне быстро создать прототип, а затем с легкостью изменять объекты за счет повторного их использования и задания свойств. Прототипы здесь получаются эстетичными и интерактивными, имеется возможность частичного тестирования юзабилити. Результат можно выгрузить картинкой или в качестве html -документа, что говорит о полной доступности прототипа участникам проекта.

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

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

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

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

Прототипирование сайта – это, соответственно, процесс создания прототипа. Делается это для того, чтобы:

  • Грамотно продумать расположение нужных блоков и элементов дизайна
  • Увидеть наглядно концепцию будущего сайта
  • Правильно организовать систему навигации на сайте
  • Продумать возможности взаимодействия посетителя с сайтом

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

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

Требования к прототипам сайта:

  1. Быстрое создание прототипа
  2. Легкость внесения изменений в прототип
  3. Интерактивность
  4. Доступность – возможность оценить прототип заказчиком, программистом, менеджером и др.
  5. Детализация (в отдельных случаях)

Виды прототипирования

1. Бумажное прототипирование. Это наиболее простой и быстрый способ создания эскиза сайта.

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

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

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

3. Прототипирование при помощи специальных программ. Самыми распространенными здесь являются Axure Pro , Microsoft Visio , Adobe InDesign и Adobe Photoshop . Около 50% разработчиков прототипов все же предпочитают первую.

Axure Pro – достаточно простая и удобная программа. Здесь можно вполне быстро создать прототип, а затем с легкостью изменять объекты за счет повторного их использования и задания свойств. Прототипы здесь получаются эстетичными и интерактивными, имеется возможность частичного тестирования юзабилити. Результат можно выгрузить картинкой или в качестве html -документа, что говорит о полной доступности прототипа участникам проекта.

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

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

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

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

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

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

Причины, по которым стоит делать прототипы

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

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

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

Среди главных причин использования прототипирования перед созданием макета можно выделить следующие:

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

Основные виды прототипов

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

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

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

Инструменты для создания прототипа

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

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

Ниже приведены популярные инструменты для создания прототипа:

1. Omnigraffle (приложение для OSX) — создает графические схемы, соединяя отдельные элементы линиями. Позволяет выстраивать диаграммы, содержит элементы моделирования, экспорта и импорта готовых файлов. Приложение легко освоить даже начинающему дизайнеру

2. ConceptDrawPro (приложение для Windows) — графическое приложение, которое используется для создания бизнес-проектов, прототипов и диаграмм, проектных документов.

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

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

5. ProtoShare (онлайн приложение) — удобный инструмент, дающий возможность создавать динамические изображения, интерактивные прототипы. Преимуществом приложения является возможность работать над проектом группой, просматривать результаты и оставлять комментарии.

Упрощение процесса разработки при использовании прототипов

Сам по себе процесс создания прототипа достаточно простой. Для упрощения его условно делят на три составляющие:

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

2. Оценка — обсуждение с клиентом насколько точно мы поняли его требования и пожелания;

3. Доработка — доработка проблемных участков эскиза или изменение макета полностью.

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

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

С середины июля 2019 года пользователи Instgram получили возможность создавать и загружать собственные AR-маски. В.

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

DoS-атака — комплекс хакерских действий, направленный на временную перегрузку атакуемого сервера с целью вызвать «.

Краткое введение в проектирование интерфейсов

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

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

Однако иногда можно обойтись и без прототипа, например, при создании:

  • несложных промо-сайтов;
  • одностраничных сайтов;
  • лэндингов.

С чего начинается работа над прототипом?

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

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

Пакет «MUSTHAVE-2020» для digital-агентств и веб-студий

RUWARD анонсировал главный коммерческий пакет MUSTHAVE-2020 для digital-агентств и веб-студий на весь 2020 год.

В пакет включено сразу 7 различных крутых опций, сервисов и рекламных форматов в рейтингах Руварда на следующий год.

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

Пара слов о боли

Очень важно определить «боль» клиента. Боль в нашем случае это такая проблема, которую заказчик стремится устранить, обратившись к нам. Часто он о ней не сообщает напрямую или даже не осознает. Например, клиент говорит: «Нам нужен интернет-магазин, чтобы повысить продажи». За этим может скрываться «боль» такого плана — клиента беспокоит неудобный каталог товаров на существующем сайте, из-за которого он теряет покупателей.

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

С помощью каких инструментов можно создать прототип?

Набросать несложный каркас сайта можно карандашом на листе бумаги. Этот простой и доступный способ прототипирования активно используется интерфейсчиками по всему миру. Конечно, есть современные инструменты типа Axure RP и InVision, которые дают возможность создания более сложных прототипов. В нашем рабочем процессе в Alto Vision мы используем бумагу на этапе брейнсторма, а затем более детально прорабатываем прототип в Axure.

Насколько подробным должен быть прототип?

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

Проектируем с клиентом

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

Что презентовать клиенту, если нет прототипа?

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

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

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


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

Работа после работы

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

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

От хаоса к порядку, от порядка к эффективности

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

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

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

6 инструментов для прототипирования сайта

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

Из статьи вы узнаете:

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

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

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

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

Структура интернет-магазина штор, сделанная в программе Xmind (источник)

Узнать, как продвигать интернет-магазин, избежать ошибок и вдохновиться на процесс можно на бесплатной онлайн-конференции “Интернет-магазин от А до Я” от обучающего центра Cybermarketing.

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

Существует более прозрачный способ передать идею и получить обратную связь на вашу работу — инструменты прототипирования.

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

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

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

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

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

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

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

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

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

Зачем нужно прототипирование

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

Инструменты для прототипирования

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

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

Principle

Приложение для MacOS, совмещающее в себе возможности дизайнерских программ Sketch и After Effects.

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

Посмотрите, как работает готовый прототип модуля “Чек-лист” от SeoPult, сделанный в Principle:

Прототип модуля «Чек-лист» в Principle

Balsamiq

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

Оглавление книги в интерфейсе приложения для чтения — пример «аккордеон»-меню, созданный в Balsamiq (источник)

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

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

Moqups

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

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

Прототип мобильного приложения с сайта Moqups (источник)

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

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

InVision

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

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

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

Pixate

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

Прототип интернет-магазина в Pixate

Чтобы делиться работой с коллегами, загрузите макеты в облако.

Axure

Дорогой, долгий, но фундаментальный. Он остаётся стандартом профессионализма для дизайнеров из России.

Пример интернет-магазина в Axure

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

Вызывает противоречивые мнения: одни говорят, что Axure сложная программа для быстрого прототипирования, другие разбираются в ней за 20 минут. Вы можете попробовать Axure. Для этого в инструменте есть пробная бесплатная версия на 30 дней.

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

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

Прототипирование сайта: разновидности и реализация – подробное руководство

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

Нажав кнопку «Принять и продолжить», вы соглашаетесь с Политики конфиденциальности

How-to – Читать 9 минут – 20 июня 2019

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

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

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

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

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

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

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

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

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

Но есть и другие преимущества для разработки:

  • валидация идей (например, отхода от традиционной структуры сайта), тест расположения блоков;
  • разработка use cases — примеров использования, которые покажут всем сторонам, как именно будет работать сайт;.

«Ты можешь быть сто раз прав, но какой от этого прок, если ТЗ составлено устно?» — грустно шутят разработчики сайтов.

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

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

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

Также можно использовать десятки профессиональных программ, которые предназначены для полномасштабной работы над дизайном сайта, — Sketch, Axure Pro, Microsoft Visio, Adobe InDesign, Adobe Photoshop. Прототип, разработанный в таком инструменте, не только серьезнее и эстетичнее выглядит, но также позволяет визуализировать все задумки и элементы интерфейса. В некоторых программах можно добавить кликабельные функции.

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

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

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

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

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

Рассмотрим несколько самых популярных инструментов для создания прототипов.

Ссылка на основную публикацию