Эта статья предназначена для начинающих дизайнеров UX / UI.

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

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

• Он показывает основные куски контента
• Он рисует схему и структуру макета
• На нем изображен самый простой пользовательский интерфейс

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

Другой способ - использовать инструменты каркаса, такие как UXpin, Balsamiq и т.д.

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

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

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

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

В отличие от каркаса, вы не можете набросать макет. Возможно, вам понадобится использовать макет, можете попробовать Marvel, InVision или Moqups.

Кроме того, если вы хотите проверить некоторые отличные макеты, вы можете пойти на dribbble.

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

Но это не конечный продукт!

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

Одним из преимуществ прототипа является то, что он очень интерактивен, позволяет пользователям ощущать интерфейс и узнавать, что им нравится или не нравится в нем. Mockplus, Adobe XD - инструмент прототипирования, который вы можете использовать.

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

Источник /uxplanet.org