Статьи по теме:

Что такое прототип веб-сайта

Создание прототипа веб-сайта — ключевая часть процесса UX

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

Существует множество различных способов создания интерактивного прототипа.Мы видели интерактивные прототипы в PowerPoint, PDF-документах и ​​даже в MS Word. Но на рынке доступно множество специализированных инструментов для создания прототипов, специально разработанных для упрощения создания прототипов. Посмотрите всего несколько примеров на Blasamiq, Axure и Mockingbird.

Преимущества прототипирования сайтов

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

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

На чертежной доске легче использовать ластик, чем кувалду на стройке.
— Фрэнк Ллойд Райт

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

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

Недостатки прототипирования сайта

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

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

Заключение

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

Возможно вам понравится

Что такое прототип веб-сайта или приложения? Руководство по созданию прототипов

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

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

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

Что такое прототипы веб-приложений и мобильных приложений?

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

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

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

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

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

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

• Макеты экрана
• Простые контуры элементов
• Размеры, расстояние и расположение элементов
• Базовая интерактивность и навигация между экранами

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

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

Обычно прототипы Hi-Fi можно идентифицировать по следующим аспектам:

• Взаимодействие
• Расширенный дизайн пользовательского интерфейса
• Реальный контент
• Визуализация данных

Естественным образом базовая навигация в прототипе Hi-Fi подвергается дальнейшим итерациям для создания более сложных взаимодействий.

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

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

Проверка и обмен информацией с заинтересованными сторонами

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

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

Зачем создавать прототипы веб-сайтов и приложений?

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

Ускорьте разработку и вывод продукта на рынок

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

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

Улучшение принятия продукта и вовлечения пользователей

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

Демонстрация функциональности

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

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

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

Задачи перед запуском прототипа

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

Сбор требований к проекту

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

Разработать информационную архитектуру

Установление базовой навигации по кликам в прототипе lo-fi и создание фирмы IA позволяет нам перейти к более усовершенствованному прототипу. На этапе высокой точности вы будете опираться на эту навигацию и создавать более сложные взаимодействия, например:

• Прокрутка
• Меню с вкладками
• Аккордеоны
• Выпадающее меню
• Гамбургер-меню (на мобильном)
• Карусели
• Эффекты прокрутки параллакса

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

Необязательно: создайте каркас

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

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

1. Начните с прототипа с низкой точностью

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

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

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

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

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

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

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

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

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

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

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

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

Уточненный интервал и позиционирование

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

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

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

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

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

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

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

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

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

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

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

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

На этапе высокой точности должна быть возможность просматривать такие данные в следующих форматах:

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

• Применение фильтров
• Сортировка данных

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

Создание прототипа веб-сайта: что нужно учитывать

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

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

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

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

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

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

Сделать элементы кликабельными

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

Создание прототипа мобильного приложения: важные моменты

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

Для iOS такого меню нет, поэтому вам придется встроить навигацию в приложение, которое соответствует лучшим практикам Apple.

В комплекте пользовательского интерфейса Material Design от Justinmind вы можете использовать множество различных предустановленных экранов Android. В вашем распоряжении также загружаемый комплект пользовательского интерфейса iOS!

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

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

Размер устройства и разрешение экрана

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

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

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

Лучшие практики для проектирования прототипов

Fail fast (итеративное прототипирование)

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

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

Создавайте по одной функции за раз

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

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

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

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

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

Как можно скорее откажитесь от Lorem Ipsum

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

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

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

Поделиться с владельцами проектов и клиентами

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

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

Сотрудничество разработчиков: до и после

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

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

• Предполагаемая функциональность
• Взаимодействия для определения кода, такого как Javascript
• Необходимые ресурсы, код HTML и стили CSS

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

Хотя над прототипом может работать только один профиль, например, UX-дизайнер, на самом деле это часто совместный процесс.

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

Как следует из названия, модерируемое пользовательское тестирование предполагает помощь обученного фасилитатора или модератора в следующих вопросах:

• Гид участников
• Управление задачами
• Ответить на сомнения
• Регистр поведения

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

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

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

• Дизайн
• Тест
• Итерация
• Идеальный

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

Типичные профили в дизайне прототипа

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

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

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

Менеджеры по продукту / владельцы проектов

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

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

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

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

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

Это люди, к которым вы обратитесь, когда вашему прототипу понадобится нечто большее, чем Lorem Ipsum.

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

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

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

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

Как создать прототип веб-сайта?

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

Создайте свой собственный прототип

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

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

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

Мокап можно рассматривать как каркас на стероидах — он вводит типографику, цвета, шрифты, логотипы и т. Д.оставаясь статичным.

Вам нужен прототип веб-сайта, если вы хотите:

1. Визуализировать свою идею , чтобы лучше понять детали;
2. Поделитесь концепцией дизайна своего веб-сайта с деловыми партнерами, коллегами и друзьями;
3. Четко укажите, что вы ищете , нанимая дизайнеров и команду разработчиков программного обеспечения;
4. Выполните пользовательское тестирование и получите полезную обратную связь.

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

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

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

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

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

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

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

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

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

Если вы не создаете что-то чрезвычайно сложное, все, что вам действительно нужно, это простой, надежный и, желательно, бесплатный инструмент для создания прототипов (например, Mockplus или Draftium) .

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

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

Создание прототипа веб-сайта

Примеры и шаблоны прототипов веб-сайтов

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

1. Пример прототипа веб-сайта Cruise Liner

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

Вот еще один отличный пример встроенного прототипа веб-сайта Draftium прототип веб-сайта:

2.Пример каркаса веб-сайта VR Startup

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

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

3. Шаблон прототипа веб-сайта Flower Boutique

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

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

Готовы бесплатно создать прототип веб-сайта в несколько простых шагов?

Откройте для себя Draftium

Люси Кухаренко

Контент-маркетолог и копирайтер в Weblium

Как создать прототип веб-сайта из каркаса

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

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

Я хотел изучить и расширить, что на самом деле означает прототипирование, проведя вас через весь процесс.

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

В этом руководстве мы рассмотрим:

1. Что такое ранний прототип
2. Создание структуры: фрейм, строки, столбцы
3. Добавление содержимого: заголовок, слайдер, около
4. Проектирование разделов
5. Заключение: что мы извлекли уроки из процесса создания прототипа

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

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

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

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

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

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

В этом примере я буду использовать Figma для создания прототипа. Вы можете просмотреть весь прототип Figma здесь.

Как создать структуру прототипа веб-сайта: рамка, строки, столбцы

Когда мы создавали каркас, мы учитывали сетки, но они были нарисованы вручную.

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

В этом примере я буду использовать дизайн из 12 столбцов с обычной шириной 1140 пикселей, который традиционно используется и встречается в дизайнах Bootstrap.Это дает нам поле в 15-30 пикселей между единицами сетки.

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

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

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

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

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

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

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

• Размер и расположение шрифта
• Расположение и интервалы между содержимым
• Поля и отступы между разделами и содержимым

Как создавать разделы прототипа веб-сайта

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

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

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

Заключение: что мы узнали из процесса создания прототипа

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

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

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

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

Бонус: добавление интерактивного прогона прототипа

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

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

Надеюсь, вам понравилась эта статья. Если вы не знаете, кто я, я Адриан из Австралии. ? У меня есть крошечный канал в Twitter и YouTube, поэтому, если вы хотите узнать обо мне больше или насладиться моим контентом, посмотрите меня когда-нибудь?

Как разработать прототип для вашего сайта!

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

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

Преимущества разработки прототипа

Прототип может иметь множество различных форм, от едва проработанных до очень подробных.

Вот определение из Википедии:

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

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

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

Прототип + пользовательское тестирование = лучшие продукты?

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

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

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

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

Прототипы с высокой и низкой точностью

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

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

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

Как должен выглядеть ваш прототип?

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

• Насколько далеко должен быть разработан мой прототип?
• Каков мой бюджет на прототип и какие ресурсы я хочу инвестировать?
• Кто участвует в разработке?
• Как будет выглядеть рабочий процесс и внутреннее общение?
• Как мне получить первый отзыв от пользователей?
• Какие инструменты мне нужны для разработки прототипа?

Правильные инструменты

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

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

Отзывы пользователей

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

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

Заключение

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

3 основных способа создания прототипа веб-сайта

Вопрос: «Как лучше всего создать прототип веб-сайта?» это все равно что спросить: «Как лучше всего создать веб-сайт?» Не существует единственного «лучшего» способа. У каждого отдельного прототипа, как и у каждого отдельного веб-сайта, есть свои стили, цели и стратегии.

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

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

Для начала, есть традиционный PowerPoint, надежный бизнес-продукт, который используется для презентаций более двух десятилетий.Если вы ищете более современную альтернативу, популярность Keynote растет.

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

Плюсы создания прототипов с помощью презентационных программ

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

Минусы прототипирования с помощью презентационных программ

• Ограниченный объем: Как описано в бесплатной электронной книге UXPin The Ultimate Guide to Prototyping, однажды вы начинаете экспериментировать с расширенными пользовательскими потоками и взаимодействиями, вы в основном достигли предела программного обеспечения для презентаций
• Ограниченное сотрудничество: Большинство программ для презентаций не предлагают никакого сотрудничества (кроме Google Presentation).Компромисс заключается в том, что программному обеспечению для совместной презентации не хватает интерактивности, графических манипуляций, форм, текста и цветовых параметров, которые делают их полезными для создания прототипов. Если вы хотите сотрудничать без компромиссов, используйте инструмент для создания прототипов.
• Ограниченная блок-схема: . программное обеспечение для создания прототипов
• Ограниченная интерактивность: Находчивые пользователи могут далеко продвинуться, если будут использовать все функции Keynote или Powerpoint, но если вы собираетесь приложить все усилия, может быть проще и эффективнее переключиться на что-то специализированное

Если вы хотите узнать больше, в Keynotopia есть несколько базовых руководств по созданию прототипов для Powerpoint и Keynote.

02. Закодированное (HTML) прототипирование

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

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

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

Плюсы кодированного прототипирования

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

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

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

03. Использование программного обеспечения и приложений для создания прототипов

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

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

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

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

Плюсы использования специального инструмента для создания прототипов

• Скорость: Опытные пользователи могут работать со специализированными инструментами даже быстрее, чем бумажное прототипирование, потому что они могут создавать, копировать и производить расширенные взаимодействия всего несколькими щелчками мыши
• Элемент библиотеки: В то время как такие инструменты, как InVision, отлично подходят для быстрых интерактивных прототипов, которые объединяют несколько экранов с помощью простых взаимодействий (например, щелчок и наведение), другие инструменты, такие как UXPin, поставляются со встроенными библиотеками элементов (и позволяют создавать свои собственные для многократного использования)
• Расширенные пользовательские потоки: Поток и функциональность являются наиболее важными аспектами прототипирования, и большинство инструментов имеют эти встроенные функции.Большинство из них также позволяют создавать карты сайта при создании новых экранов и позволяют просматривать их бок о бок для удобной навигации
• Встроенная совместная работа: Многие специализированные инструменты помещают совместную работу в центр внимания, в том числе возможность комментировать проекты, редактируйте их как команда и делитесь ими через URL. Лучшее предложение: история изменений и облачное хранилище, чтобы упростить рабочий процесс, сделав его независимым от устройства
• Оптимизированная презентация: Это может означать экспорт в PDF или экспорт в веб-приложение или мобильное приложение для реального опыта прототипа

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

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

Чтобы ответить на вопрос «Как лучше всего создать прототип?», Мы дадим ответ: «Какой способ лучше всего подходит для вас». Впрочем, это не эвфемизм для слов «Что проще всего» или «То, что требует меньше всего работы». Лучший способ создания прототипа — это способ, который для вас даст наилучшие результаты.

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

Чтобы получить дополнительные практические советы по созданию прототипов с низкой или высокой точностью, загрузите бесплатное Руководство по созданию прототипов. Узнайте, как и когда использовать различные инструменты и тактики создания прототипов, используя передовой опыт Zurb, Google Ventures, IDEO и многих других.

Статьи по теме:

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

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

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

Adobe XD

Adobe XD

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

–

Эскиз

Эскиз

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

–

Marvel

Марвел

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

–

Ремесло

Ремесло

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

–

Жидкость UI

Жидкость UI

Fluid UI — это платформа для быстрого создания прототипов и обмена ими. Используйте полный набор готовых наборов пользовательского интерфейса и более 2000 встроенных компонентов для iOS, каркасного моделирования и многого другого. Добавьте интерактивности своим прототипам с помощью касаний, смахиваний, анимации и ссылок. Сотрудничайте в режиме реального времени. Протестируйте свои прототипы на любом мобильном устройстве или планшете с помощью бесплатных приложений для проигрывания. Цена: Бесплатно для одного проекта. Премиум-планы начинаются с 8,25 доллара в месяц.

–

Proto.io

Proto.io

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

–

Framer X

Framer X

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

–

Оригами Студия

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

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

–

Justinmind

Justinmind

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

–

UXPin

UXPin

UXPin — это инструмент для создания прототипов, который предлагает интерактивные состояния, логику и компоненты кода, помогающие воплощать проекты в жизнь.Вместо статических рисунков используйте интерактивные текстовые поля, флажки и переключатели. Автоматически синхронизировать компоненты React.js. Доступ к библиотекам для iOS, Material Design и Bootstrap. Работайте со своей командой в режиме реального времени. Делитесь прототипами, собирайте отзывы, делитесь спецификациями, назначайте задачи и получайте одобрения от заинтересованных сторон. Цена: бесплатно для двух прототипов. Премиум-планы начинаются с 12 долларов в месяц.

–

Студия InVision

Студия InVision

InVision Studio — это платформа для проектирования, создания прототипов и анимации.Начните со слоев векторного рисования. Быстро проектируйте, настраивайте и автоматически масштабируйте под любой экран или макет. Создавайте плавные взаимодействия с помощью зеркалирования мобильных устройств и мгновенного воспроизведения. Включает переходы с умным смахиванием, редактирование временной шкалы и автоматическое связывание слоев. Используйте встроенные библиотеки общих компонентов. Цена: Бесплатно f или один прототип. Премиум-планы начинаются с 15 долларов в месяц за три прототипа.

–

HotGloo

HotGloo

HotGloo — это инструмент для взаимодействия с пользователем, каркаса и прототипирования на основе браузера для Интернета, мобильных устройств и носимых устройств.Создавайте интерактивные прототипы и делитесь ими, а также собирайте отзывы о процессе. HotGloo содержит более 2000 элементов, значков и виджетов пользовательского интерфейса. Сотрудничайте в режиме реального времени. Редактируйте, просматривайте и тестируйте свою работу на любом мобильном устройстве. Оставляйте заметки на странице или добавляйте комментарии. Цена: планы начинаются от 13 долларов в месяц.

–

Протопир

Протопир

ProtoPie — это инструмент для создания сложных прототипов без какого-либо программирования. Концептуальная модель ProtoPie основана на том, как объекты перемещаются в мире.Создавайте взаимодействия с объектами, триггерами и ответами. Разработайте видео, аудио, текст и слои ввода. Протестируйте прототипы на реальных устройствах с приложениями для iOS и Android. Цена: 129 долларов США с одним годом обновлений.