к новостям

UX/UI прототипирование

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

UX расшифровывается как User eXperience и подразумевает, какой опыт/впечатление получает пользователь от работы с продуктом. Задача UX дизайнера — спроектировать такой интерфейс, который позволит достигать нужной цели в использовании продукта максимально простым и удобным путем. К примеру, UX дизайнер анализирует пользовательские сценарии, продумывает логику перехода со страницы на страницу, тестирует A/B.

Задача UI дизайнера

UI — это User Interface, визуальный вид продукта. Задача UI дизайнера — сделать интерфейс целостным, красивым и понятным. UI дизайнер занимается непосредственно отрисовкой интерфейса на основе UX данных и ответственен за то, какие физические характеристики приобретет продукт — например, какого цвета будут элементы интерфейса, удобно ли будет пользователю попадать пальцем в кнопки, читабельным ли будет текст UX/UI дизайнер совмещает обе роли — проектирует, как пользователь будет взаимодействовать с интерфейсом и какие шаги ему нужно предпринять, чтобы сделать что-то (UX), а также определяет, как будет выглядеть каждый из этих шагов (UI). Допустим, UX/UI дизайнеру поручили спроектировать форму регистрации. Ему необходимо продумать, на каком именно этапе нужно выводить эту форму, до какого шага ее можно отложить, как минимизировать вероятность появления ошибки, как лучше сообщить об ошибке, как сделать так, чтобы пользователь ни при каких действиях не попадал бы в тупик (UX). Следующая задача — нарисовать эту форму со всеми необходимыми полями, с хорошим цветовым контрастом, удобочитаемыми шрифтами и правильно расставленными акцентами (UI). С понятиями UX и UI — понятно, посмотрим какими программами может пользоваться UX дизайнер: перечень на самом деле очень большой (можно ознакомиться по ссылке https://agente.ru/blog/best-ui-ux-design-tools) Среди них известные и UI дизайнеру – это Adobe Illustrator, Adobe InDesign, Adobe Photoshop.

Плюсы и минусы этих программ:

Минусы. Я считаю большим минусом то, что плохая коммуникация с заказчиком. Когда есть корректировки по макету, заказчику приходится описывать их где-то в отдельном документе, и не всегда ясно о каком блоке идет речь. Если заказчик знает, к примеру, Photoshop – это облегчает понимание, так как прям на макете можно написать правки. Не подходит для многостраничных сайтов, или лендингов где сложная логика (интерактив) Плюсы. хорошо знакома и быстро можно сделать макет, для просмотра изображения (макета) не требуется интернет. Есть и другие программы, в которых тоже есть свои плюсы и минусы, они интерактивные, в них одномоментно может писать правки как дизайнер так и заказчик, можно проследить логику страниц, кнопок и другое. Подходит для сложных многостраничных сайтов. Минус: ссылки работают с наличием интернета. Платная программа, или дается бесплатное место на 1 прототип. В МК по прототипу я показываю, что входит в задачи UX дизайнера, как ему бестро можно создать прототип с помощью программы Adobe Photoshop.

При работе обязательно учитывается:

— Реальный размер макета — Сетка — Высота блоков, есть ли сквозная прокрутка. — Если есть реальны текст, лучше его поставить, так сразу понятно сколько места он занимает. Это все технические моменты про которые не следует забывать. Далее идет логика, продумываем как будут листаться слайды, куда будут вести кнопки или что будет происходить при нажатии на них. После сделанного прототипа, за дело берется UI дизайнер, его задача сохранить эту логику и при этом сделать ее визуально понятной, чтобы кнопка выглядела как кнопка, чтобы были визуально понятно куда нужно нажать. Задача создать связь между юзером и сайтом, вызвать эмоции с помощью визуальных образов, учитывая фирменный стиль, бренд (если он имеется), сочетание цветов, форм, текстуры. В видео есть примеры как можно из одного прототипа, сделать 3 UI макета, которых будут нести разную эмоцию и настроение, поэтому задача UI дизайнера, не менее важна. Логику построенную UX дизайнером можно будет не понять, если она не корректно или не понятно будет отображена.

Мастер-класс на тему «Леттеринг»