Ui ux это: Почему UX- и UI-дизайнер — это два разных человека — Дизайн на vc.ru

Почему UX- и UI-дизайнер — это два разных человека — Дизайн на vc.ru

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

{«id»:119554,»url»:»https:\/\/vc.ru\/design\/119554-pochemu-ux-i-ui-dizayner-eto-dva-raznyh-cheloveka»,»title»:»\u041f\u043e\u0447\u0435\u043c\u0443 UX- \u0438 UI-\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u2014 \u044d\u0442\u043e \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430″,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/119554-pochemu-ux-i-ui-dizayner-eto-dva-raznyh-cheloveka»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/119554-pochemu-ux-i-ui-dizayner-eto-dva-raznyh-cheloveka&title=\u041f\u043e\u0447\u0435\u043c\u0443 UX- \u0438 UI-\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u2014 \u044d\u0442\u043e \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/119554-pochemu-ux-i-ui-dizayner-eto-dva-raznyh-cheloveka&text=\u041f\u043e\u0447\u0435\u043c\u0443 UX- \u0438 UI-\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u2014 \u044d\u0442\u043e \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/119554-pochemu-ux-i-ui-dizayner-eto-dva-raznyh-cheloveka&text=\u041f\u043e\u0447\u0435\u043c\u0443 UX- \u0438 UI-\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u2014 \u044d\u0442\u043e \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/119554-pochemu-ux-i-ui-dizayner-eto-dva-raznyh-cheloveka»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u041f\u043e\u0447\u0435\u043c\u0443 UX- \u0438 UI-\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u2014 \u044d\u0442\u043e \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430&body=https:\/\/vc.ru\/design\/119554-pochemu-ux-i-ui-dizayner-eto-dva-raznyh-cheloveka»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

6509 просмотров

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

Куда делись web дизайнеры или краткая история интернета.

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

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

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

​Пример вырви-глаз-дизайна. Дальний родственник современного дизайна

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

Сайт-простыня. Огромное количество текста и разделов. Лишь бы Google заметил​

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

Эпоха web дизайна. Сайты и приложения становятся визуально приятными. Основной акцент на оформление​.

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

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

Проект roobinium. Пример эпохи UX/UI дизайна. Всего два возможных действия пользователя — связаться, либо посмотреть портфолио.

Кто такой UX дизайнер? Обязанности и ответственность

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

• Проведение брифингов с бизнесом
• Проведение face-to-face интервью с пользователями
• Интерфейсный анализ решений конкурентов
• Составление информационной архитектуры проекта
• Прототипирование
• Аналитика и тестирование

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

UI дизайнер. Что делает и за что отвечает.

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

Основные обязанности UI дизайнера:

• Общая стилистика проекта
• Визуальные акценты
• Типографика
• Брендирование
• Подготовка UI к верстке

Почему бы не сделать UX и UI за одну цену?

UX и UI два важных этапа при разработке IT проекта. Кто-то совмещает в себе роль UX/UI, но здесь логично сравнить архитектора и интерьерного дизайна. Можно сказать, что оба участвует в строительстве дома, но вряд ли будут выполнять работу друг друга.

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

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

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

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

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

Профессия веб-дизайнер: UX/UI — кто это такой, как им стать и сколько они зарабатывают

Ре­зуль­тат ра­бо­ты ди­зай­не­ров окру­жа­ет нас по­всю­ду. У сай­тов — ди­зайн. У но­ут­бу­ка или те­ле­фо­на — тоже дизайн. У чай­ной круж­ки, стола, одежды, книг — ди­зайн есть у все­го. От­сю­да и мно­же­ство от­дель­ных ди­зай­нер­ских про­фес­сий: гра­фи­че­ский ди­зай­нер, ди­зай­нер мо­биль­ных при­ло­же­ний, веб-дизайнер. 

Интересно и то, что у многих дизайнерских профессий появились свои ответвления. Например, в digital-мире есть UX-дизайнер и UI-дизайнер. В рамках этих должностей специалисты решают разные задачи, но по сути объединены одной корневой профессией — веб-дизайном. 

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

UX vs UI: в чем отличие? 

UX и UI часто путают или воспринимают как одно целое, не вдаваясь в подробности. 

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

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

При проектировании интерфейсов удобство взаимодействия так же важно, как и внешний вид

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

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

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

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

Терминология:

• UX — User eXperience — Пользовательский опыт. Цель UX — сделать продукт удобным.

• UI — User Interface — Пользовательский интерфейс. Цель UI — сделать продукт красивым.

Какие инструменты используют дизайнеры

Для разработки эффективного веб-дизайна недостаточно владеть только Adobe Photoshop. Чем больше инструментов и платформ вы покорили, тем выше шанс грамотно спроектировать рабочий дизайн. Разные программы подходят для решения разных дизайнерских задач. 

Если задача сложная, требует построения сложных логических связей используйте mindmap-сервисы — XMind, FlowMapp, MindMeister.

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

Для создания интерактивных прототипов можно использовать Figma, InVision, Axure, Adobe XD.

Если хотите проработать анимацию в интерфейсе, можно использовать Framer и UXPin.

Аналитическая сторона работы

Веб-дизайнеры всегда анализируют и буквально встают на место пользователя. Они копают глубоко и постоянно задают вопрос «Почему так?». 

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

Поэтому главными фишками сайта стали минимализм и интуитивно-понятная структура.

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

Рассмотрим на примере. Вы только прилетели из путешествия и вспомнили, что у подруги сегодня день рождения. Открываете переписку — праздник сегодня, вы приглашены. Срочно нужен подарок! По пути на мероприятие вы смотрите на карте ближайший цветочный магазин — отлично, есть прям рядом с ее домом. Открываете сайт цветочного — картинки четкие, на товарах стикер «В наличии», букеты разделены по цене и есть удобная кнопка для заказа, которая при нажатии открывает чат в Whatsapp. Вы написали продавцу, забронировали букет и со спокойной душой успели на праздник с подарком. 

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

Soft skills 

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

Сколько зарабатывают веб-дизайнеры

Российский портал rbc.ru составил список востребованных профессий за 2019, в его топ вошли UX и UI-дизайнеры. Но спрос на кадры растет не только в России. Например, в Google Trends за последние 5 лет интерес к запросу «UX-дизайн» в Европе, США, Канаде и Австралии удвоился и продолжает увеличиваться. 

Диапазон зарплат зависит от обязанностей, скиллов и места работы: на фрилансе или в студии. По данным hh.ru, средняя предлагаемая зарплата в 2019 году была вот такой:

 

5 советов для тех, кто хочет стать веб-дизайнером

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

2. Окружите себя дизайном. Рекомендуем погрузиться полностью в дизайн и каждый день смотреть чужие работы. Такая практика просмотров чужих портфолио поможет вам видеть, как и что делают другие. Вы будете в курсе модных тенденций и сможете вдохновляться. Посмотреть работы других дизайнеров можно на Behance, Dribbble или Awwwards. 

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

4. Читайте. Литературы, статей, материалов для веб-дизов создано очень много. Поделимся подборкой книг, которые вдохновили нас и наших студентов — Остин Клеон «Кради как художник» и «Покажи свою работу!», Майкл Джанда «Сожги своё портфолио!», Брайан Трейси «Выйди из зоны комфорта. Измени свою жизнь».

5. Практикуйтесь до упора и не бойтесь ошибаться. Попробуйте начать работать над важным для вас проектом еще на этапе обучения на курсах и во время обучения инструментов. Старайтесь все время делать какой-нибудь проект. Лучший способ учиться — тут же делать то, что вы читаете и слушаете. Конфуций как-то сказал: «Скажи мне — и я забуду, покажи мне — и я запомню, Дай мне сделать — и я пойму!».

Остались вопросы? С удовольствием ответим на все по телефону 8 (800) 551-39-04 или в онлайн-чате на сайте. Не забывайте подписываться на нас в Instagram и ВКонтакте. Будем дружить! 

UX – это не UI — CMS Magazine

“UX – это неосязаемый дизайн, это разработка стратегии, которая приводит нас к решению”.

Понятие «UX» стало неологизмом. Говоря, что что-то «имеет хороший UX», мы имеем в виду ключевые UX-компоненты (исследование, возможно, персону потребителя, информационную архитектуру, взаимодействие, интерфейс и так далее). В сущности, отпала всякая необходимость и желание добавлять в конце слово «дизайн». Это слово сбивает с толку, провоцируя ненужные ассоциации: складывается впечатление, будто UX – это UI, user interface design, разработка пользовательского интерфейса.

На написание заметки меня вдохновила презентация Элизабет Хьюберт (@lishubert) на конференции the Future of Web Design 2012 в Праге. В своём выступлении Элизабет довольно чётко обозначила следующее:

Больше не нужно искать и обзванивать каждое диджитал-агентство
Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →

Интерфейс – это не решение.

Именно эта идея лежит в основе разногласий между сторонниками UX и теми, кому нужен только UI или кто не видит разницы между двумя.

Как UX-специалисты видят UX

UX – это акроним от английского user experience, что в переводе означает «опыт взаимодействия». За ним почти всегда следует слово «дизайн». Так сложилось, что люди, занимающиеся этой работой, называются UX-дизайнерами. Однако в отличие от графических дизайнеров и дизайнеров интерфейсов они не разрабатывают каких-либо объектов. UX – это неосязаемый дизайн, это разработка стратегии, которая приводит нас к решению.

Многие UX-дизайнеры стали называть себя по-новому: UX-архитекторами, UX-инженерами, UX-стратегами. Некоторые и вовсе избавились от «взаимодействия с пользователями» и называют себя не иначе как стратегами, инженерами или архитекторами опыта. Думаю, отчасти это связано с желанием выйти за рамки дизайна интерфейсов, отчасти – с расширением границ самого UX. Как специалист в области UX вы можете быть ведущим исследователем или старшим маркетологом-копирайтером, и при этом никогда не заниматься проектированием интерфейсов – и даже не иметь к этому способностей.

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

Мы хотим, чтобы они видели следующее:

• Полевые исследования
• Опросы в формате личной беседы
• Создание и контроль текстовой информации
• Сбор, организация и презентация статистических данных
• Фиксирование персон пользователей и открытий
• Разработка продукта
• Описание функций
• Описание требований
• Разработка схем
• Интерактивный дизайн
• Информационная архитектура
• Юзабилити
• Прототипирование
• Разметка интерфейса
• Дизайн интерфейса
• Графический дизайн
• Создание классификации
• Разработка терминологии
• Копирайтинг
• Презентации и выступления
• Тесное сотрудничество с программистами
• Проведение мозговых штурмов
• Трансляция корпоративной культуры
• Общение с партнёрами

Они видят:

• Полевые исследования
• Опросы в формате личной беседы
• Создание и контроль текстовой информации
• Сбор, организация и презентация статистических данных
• Фиксирование персон пользователей и открытий
• Разработка продукта
• Описание функций
• Описание требований
• Разработка схем
• Интерактивный дизайн
• Информационная архитектура
• Юзабилити
• Прототипирование
• Разметка интерфейса
• Дизайн интерфейса
• Графический дизайн
• Создание классификации
• Разработка терминологии
• Копирайтинг
• Презентации и выступления
• Тесное сотрудничество с программистами
• Проведение мозговых штурмов
• Трансляция корпоративной культуры
• Общение с партнёрами

 (Сравнительную схему на английском языке можно загрузить с сайта UX – это не UI – www.uxisnotui.com)

Дизайн интерфейсов – это огромный раздел UX. Я бы сказал, что в большинстве случаев UX-дизайнер действительно занимается разработкой интерфейсов. Но UX – это не UI. Здесь в игру вступают знания других людей. Понять суть UX и его важное значение поможет модель – «зонт UX».

Зонт UX В своей презентации на Startup Weekend в Вашингтоне в 2011 годуДэн Уиллис (@uxcrank) использовал потрясающее изображение, которое наглядно демонстрирует все компоненты UX:

Из элементов под зонтом намеренно исключены два – UX-дизайн и дизайн интерфейсов.

UX не попал в список, так как это широкое понятие, охватывающее все указанные дисциплины. Любой так называемый «UX-дизайн» является лишь комбинацией двух и более компонентов под зонтом.

Дизайн интерфейсов не включён в список, так как является результатом взаимодействия двух других элементов: графического дизайна (внешнего вида и ощущений пользователей) и интерактивного дизайна (как работают внешний вид и ощущения). Соедините их, и получите интерфейс. Интерфейс является результатом «дизайнерского решения», которое появилось перед тем.

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

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

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

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

Как получить эффективный пользовательский интерфейс

Реализация интерфейса в коде обычно осуществляется frontend-разработчиком. Я, как и другие HTML/CSS-верстальщики, всегда рад поработать над созданием работающего прототипа. Однако в случае сложного взаимодействия внутреннего кода и внешнего javascript’а лучше доверить дело профессионалам.

Так как же добиться впечатляющего интерфейса? Представим себе идеальный порядок разработки:

1. Допустим, в ходе исследования пользователей, рынка или персон была выявлена проблема.
2. Пользовательские сценарии и истории написаны, забракованы, переписаны заново, затем использованы в новой итерации – и так до тех пор, пока не определён сценарий решения проблемы.
3. На основе нескольких предполагаемых способов решения проводятся быстрые эксперименты. Их цель – подтвердить допущения относительно персон потребителей.
4. Разрабатывается информационная архитектура, продукт/сайт делят на логические уровни и разделы.
5. Для определения того, когда на экране должны появиться те или иные элементы, создают наброски и прототипы.
6. Имея на руках материалы исследований и всей проделанной в области UX работы, можно уверенно приступать к созданию интерфейса и HTML-разметки.
7. Готовый интерфейс и разметка тестируются пользователями. На основе экспериментов и прототипов производится несколько итераций.
8. После проверки разметки пишут код. Пришло время UI-дизайна!
9. Как только удалось добиться высокого уровня юзабилити, можно переходить к производству – созданию того, что называют интерфейсом.

Это несколько идеализированный путь. В зависимости от времени и ресурсов от определённых этапов можно отказаться. Кроме того, ничто не мешает быстрому прохождению всех этапов, например, за нескольких дней. Бесчисленное множество интерфейсов отправились на экран прямиком из моей головы, минуя все указанные шаги, но это не UX-дизайн. Думаю, это называют «дизайнерской небрежностью». Хороший пользовательский интерфейс не может быть тривиальным или простым: убедительный продукт, потрясающая визуализация и эффективное взаимодействие – все это компоненты формулы.

Не останавливайтесь на достигнутом!

Мне бы хотелось, чтобы люди именно так представляли себе UX и именно так понимали понятие «UX-дизайн». Функциональный, элегантный и приятный для глаза интерфейс требует напряжённой работы, незаметной для постороннего наблюдателя. Но интерфейс – не решение. Нужно бороться с этим заблуждением ещё в школе UX и рассказывать специалистам о реальных возможностях UX. Это трудоемкий стратегический процесс, направленный на создание продукта или сайта, способного привлечь внимание покупателей/пользователей/посетителей, простого и понятного в использовании. Через работу в области UX мы придем к правильному решению интерфейса.

Благодарю Дэна Уиллиса (@uxcrank) заЗонт UX и Элизабет Хьюберт (@lishubert) за «Интерактивный дизайн за пределами интерфейса».

Оригинал: http://www.helloerik.com/ux-is-not-ui

Как сделать интерфейс удобным? UI/UX исследования

Рассмотрим основные задачи специалиста в области UX дизайна:

1. Разработка структуры и стратегии работы программного продукта.

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

2. Разработка средств коммуникации в дизайн-процессе.

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

• Варфреймы (Wireframes)

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

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

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

Как сотруднчают UX и UI дизайнеры?

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

UX/UI дизайн — правильный подход к проектированию интерфейсов

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

UX/UI дизайн — это проектирование любых пользовательских интерфейсов (сайт, приложение, crm-система или иное прикладное ПО), в которых удобство использования так же важно, как и дизайн-оформление. Но нам ближе тематика сайтов и приложений, поэтому расскажем на их примере.

UX – в переводе с англ. «Опыт пользователя».

UI – «пользовательский интерфейс»

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

Маркетинг

Прямая обязанность UX/UI-дизайнера – продажа товара или услуги через интерфейс. На основании результата работы дизайнера пользователь решает купить ли этот товар, отправить ли заявку, подписаться на новости на данном сайте или закрыть его через 2-3 секунды. Естественно, неудобный, нечитаемый или недоработанный по функционалу проект имеет меньше шансов на успех среди пользователей. А следовательно, низкие продажи и проблемы с поисковой выдачей – спутники проекта.

Цель UX/UI-специалиста – довести пользователя до какой-либо конечной точки взаимодействия. Формирование целей и путей их достижения – один из ключевых моментов при разработке современных проектов.

Коротко и наглядно о работе UX/UI дизайнера:

Данная тема относится и к дизайну окружающих нас вещей, но вернёмся к сайтам 😉

Удобство

Например, ещё лет 15 назад никто и представить не мог, что с мобильного телефона можно будет оплатить билеты на самолёт, заказать еду, одежду, забронировать отель, оплатить квитанции за ЖКХ и получить любую информацию в считанные секунды. Сайты и интерфейсы прикладных программ использовались только на стационарных компьютерах, а приложений ещё не существовало. Мониторы имели небольшое разрешение, однако любое пустое место все старались заполнить плашками, картинками или фонами.

Мы были не исключением.

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

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

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

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

Если всё ещё непонятно что же такое UX/UI дизайн, то возьмите в руки ваш смартфон. Найдите как отключить push-уведомление в каком-либо приложении на вашем телефоне. Это займет у вас несколько секунд зайти в настройки и снять галочку. Это и есть интуитивно-понятный интерфейс, разработанный десятками специалистов, чтобы вам было удобно пользоваться вашим гаджетом.

Опыт

Легко ли разработать успешный интерфейс сайта или приложения? Скорее нет, чем да. На момент проектирования мы стараемся использовать весь свой накопленный за 11 лет опыт, однако результат можем оценить только после сдачи проекта и привлечения пользователей. Удобные и современные сервисы для анализа поведения посетителей подскажут какие именно ошибки были допущены при разработке или что следует улучшить.  UX/UI – это не результат, а постоянный процесс по улучшению взаимодействия с конечным продуктом.

5 различий между UI и UX дизайном

Для создания лучших шоколадных пирожных потребуется как UX, так и UI. Я серьезно.

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

Но что из этого UX, а что UI? Процесс изготовления — это UX, а процесс раскладывания по тарелкам и подачи к столу — UI.

А как насчет поедания? Это UX; кроме случаев, когда это не UX. Получит ли потребитель другой опыт, если пирожные будут поданы сразу со сковородки или красиво разложены на тарелке? Я бы сказал, да, последнее было бы предпочтительнее.

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

С этой оговоркой, давайте взглянем на некоторые различия между ними.

UX — это не UI

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

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

Дизайн пользовательского интерфейса = Визуальный дизайн + Дизайн взаимодействия.

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

И хотя и UX, и UI дизайнеры создают взаимодействия, UX дизайнеров можно считать архитекторами макровзаимодействий, а UI дизайнеров — создателями микровзаимодействий, занимающихся деталями.

По словам дизайнера Ника Бабича:

«Лучшие продукты хорошо справляются с двумя вещами: функциями и деталями. Функции — это то, что привлекает людей к вашему продукту. Детали — это то, что их удерживает».

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

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

UX делает интерфейсы полезными

UI делает интерфейсы красивыми

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

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

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

UX помогает пользователям достигать целей

UI создает эмоциональные связи

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

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

После того, как вы настроили основное юзабилити, согласно Аарону Уолтеру, автору книги «Дизайн для эмоций», лояльность ваших пользователей будет зависеть от личности вашего интерфейса. Яркий дизайн может привлечь к вашему сайту людей, они даже могут задержаться, если там можно что-то сделать. И когда образуется личная связь — они на крючке. Заставляет ли ваш интерфейс их смеяться? Цепляет ли он их? Насколько он дерзкий? Аарон говорит: «Люди простят ваши недостатки, последуют за вами, и будут петь вам дифирамбы, если вы наградите их положительными эмоциями.» Вот здесь вступает UI дизайнер.

Сначала создается UX дизайн

Потом (иногда) создается дизайн UI

Как UX и UI дизайнеры работают вместе на протяжении процесса проектирования ?

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

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

Однако этот путь не всегда линеен, и зависит от многих факторов. Например:

• Кто занимается UX и UI?
• Один и тот же человек, или кто-то другой, и другая команда?

UX используется во всех продуктах, интерфейсах и услугах

UI относится только к интерфейсам

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

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

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

Выводы

Почти невозможно отделить UX от UI или UI от UX.

Но если попытаться, то можно заключить, что:

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

Источник: uxgu.ru

10 основных навыков современного UI и UX дизайнера

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

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

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

1. Как правильно располагать объекты

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

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

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

Зачем использовать жесткую сетку? Аргументом в пользу жесткой сетки (8px или 4px) является использование прозрачных фоновых блоков с последующим группированием их с элементами переднего плана. С ней легче отслеживать поля и отступы для каждого элемента. Затем мы можем привязать эти контейнеры к сетке, как кусочки пазла.

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

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

Зачем проектировать с шагом 8? Вне зависимости от того, какую сетку выбирают дизайнеры, обычно они размещают элементы используя значения кратные 4 или 8 px.

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

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

2. Как подобрать идеальную цветовую палитру

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

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

1. Выберите цвет бренда (фирменный цвет). Я начинаю с основного цвета, который определяю на основе бренда, личных предпочтений (если это побочный проект), исследований или психологии цвета.
2. Выберите системные цвета. Определите цвет для различных элементов, таких как фон, текст, ошибка, успех и т. д.
3. Создание палитры из базовых цветов. После того, как я выбрал базовые цвета для бренда и интерфейса, я поместил их в Google color tool, чтобы получить разные оттенки этого цвета.
4. Обеспечьте доступность. Web Content Accessibility Guidelines рекомендуют коэффициент цветового контраста не менее 4,5: 1 между любым текстом и фоном. Загрузите плагин Stark, чтобы проверить доступность палитр (они должны быть созданы с помощью инструмента цвета Google).

3. Как создать руководство по системе пропорций шрифтов

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

Если вы не хотите создавать рекомендации по типографике с нуля, попробуйте Material type scale generator для создания размеров шрифтов для абзацев, заголовков, кнопок и т. д. Чтобы создать рекомендации по масштабированию шрифтов для проекта интерфейса, вот как я это делаю:

1. Выберите шрифт. Я люблю выбирать высококачественные гарнитуры для интерфейса среди шрифтов Googleили Adobe.
2. Избегайте использовать более двух шрифтов. Вместо того чтобы добавлять в интерфейс новые шрифты, используйте семейства шрифтов. Шрифты из одного семейства предназначены для совместной работы, поэтому они гибкие и согласованные.
3. Установите базовый размер шрифта. Я начинаю с определения наиболее часто используемой шкалы шрифтов для основного текста и определяю подходящую высоту строки.
4. Высота строки. Как показывает практика, высота строки должна быть в 1,5 раза больше размера шрифта. Это не всегда так, но начните с такого значения, а затем при необходимости корректируйте его.
5. Определите шкалу. Шкала обеспечивает последовательность, ритм и иерархию, потому что она предсказуема. Чтобы установить шкалу шрифта для заголовков h2, h3, h4, основного текста, кнопок и т. д., нам нужно значение масштаба, умноженное на базовый размер шрифта. Обычные шкалы для шрифта: 1.250x, 1.414x, 1.5x, 1.618x.
6. Тестируйте вес шрифта на устройствах. Протестируйте шрифт с разными масштабами на разных размерах устройств, чтобы выбрать подходящее значение.

4. Как создать идеальное кейс-стади

Ознакомьтесь с созданным мной шаблоном кейс-стади – View Figma.

Ритуал составления комплексного тематического исследования по завершении дизайн-проекта – это сам по себе дизайн-проект.

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

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

Вступление

1. Обзор. Дайте подробное описание проекта.
2. Клиент. Кто был заказчиком? Для кого было создано решение?
3. Роль. Какова была ваша роль в проекте? (например, ведущий UX дизайнер)
4. Продолжительность. Как долго длился проект?
5. Инструменты. Перечислите инструменты, которые вы использовали в проекте. (т.е. XD, Whimsical и т.д).

Определение проблемы

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

Тестирование

1. Интервью. Если предположить, что на этапе открытия были обнаружены потенциальные возможности, то теперь пора опросить потенциальных клиентов. Обозначьте количество респондентов или участников опроса, возрастной диапазон (если применимо), пол (если применимо) и продолжительность интервью.
2. Цели. Укажите различные открытия, которые пытались сделать во время интервью.

Идеи и возможности

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

Решение

1. Сформулируйте решение. Заявление о решении, в котором описывается, как дизайн решит основные проблемы, с которыми сталкиваются люди.

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

1. Принципы дизайна. Какими принципами вы руководствовались при принятии дизайн-решений?
2. MVP. Покажите минимально жизнеспособное решение, которое вы создали для решения вышеупомянутых проблем и возможностей.
3. Сбор фидбека. Как вы собирали отзывы о MVP? (например, пользовательское тестирование, hotjar, аналитика Google, опросы и т. д.)
4. Тестирование идей. Опишите выводы, полученные в результате тестирования дизайна. Процитируйте пользователей.
5. Новая итерация в ответ на полученный фидбек. Процесс проектирования по своей сути является итеративным и непрерывным, поэтому мне нравится заканчивать тематические исследования обновленными дизайнами, основанными на первоначальных отзывах

Вывод

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

5. Как написать эффективный UX текст

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

• Пишите весь текст сразу. Может возникнуть соблазн писать текст по ходу, в процессе проектирования продукта, но это часто может привести к смешанным тонам и отсутствию согласованности в сообщениях. Создайте один документ для всех предупреждений, сообщений, модальных окон, поясняющего текста и т. д.
• Будьте кратким и любезным. Скорее всего, в UX-тексте есть какие-то мелочи, от которых можно легко избавиться. Вместо того, чтобы сказать: «Только члены Premium подписки имеют доступ к этой функции», скажите: «Присоединяйтесь к Premium, чтобы получить доступ».
• Будьте последовательны. Обращаясь к пользователю, обязательно придерживайтесь первого или второго лица, в зависимости от того, что вы выбрали ранее. Поэтому вместо «изменить свое местоположение в моей учетной записи» скажите «измените свое местоположение в учетной записи».
• Избегайте жаргона. Если только мы не проектируем приложение для экспертов. Избегайте отраслевых терминов, таких как «буферизация» или «конфигурирование».
• Пишите в настоящем времени. Вместо того чтобы написать: «сообщение было отправлено» (message has been sent), напишите «сообщение отправлено» (message sent).
• Начните с цели. Когда фраза описывает цель и действия, необходимые для ее достижения, начните предложение с цели. Вместо того, чтобы написать: «Перетащите фотографию в корзину, чтобы удалить ее из этого альбома», скажите: «Чтобы удалить фотографию из этого альбома, перетащите ее в корзину».

6. Критика дизайна

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

Незнание основных навыков фидбека приводит к тому, что клиенты дают расплывчатую и бесполезную обратную связь, например: «Вы можете сделать это модным?»

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

• Мы должны четко и конкретно излагать мысль. «Изображения, которые вы использовали на странице вакансий, не соответствуют нашей культуре. Давайте покажем веселую и непринужденную графику, для улучшения взаимодействия с кандидатами, которых мы надеемся привлечь». Такой фидбек намного полезнее, чем «добавьте на страницу картинки поприкольнее».
• Представьте дизайнеру проблему, а не только ее решение. На первый взгляд может показаться, что мы знаем решение, и просим дизайнера «лучше используйте эту картинку для страницы вакансий». Однако, когда мы начинаем с представления проблемы, дизайнер может понять, почему мы хотим изменить графику, и может предложить идеи, которые мы, возможно, даже не рассматривали.
• Приводите качественные примеры. Всегда полезно делиться образцами от других компаний или дизайнами, которые мы нашли. Не потому, что дизайнер должен их скопировать, а потому что это поможет понять, как можно улучшить дизайн.
• Не забывайте о комплиментах. Поскольку дизайнеры получают список комментариев, исправлений, проблем и т. д. им может быть весьма непросто. Обязательно сбалансируйте фидбек, выделив те части опыта, которые, по нашему мнению, действительно хорошо работают. Например, «Мне очень нравится, как вы разместили экран приветствия – он отлично перетекает с предыдущего экрана. Однако мне потребовалась секунда, чтобы заметить кнопку входа в систему. Мы можем сделать ее более заметной? “
• Тон имеет значение. То, как мы представляем фидбек и формулируем мысль, может сильно повлиять на то, как дизайнеры (или люди в целом) отреагируют на него. Вместо того, чтобы сказать: «Эта иконка не годится для пункта «Доставка», скажите: «Иконка доставки сбивает меня с толку. Я привык к иконке в виде посылки. Разве это не лучший вариант?»

7. Как создать немодерируемый план удаленного тестирования юзабилити

Для сбора результатов можно использовать множество различных методов пользовательского тестирования. К наиболее распространенным вариантам относятся: тестирование юзабилити, сортировка карточек, древовидный тест, A / B-тестирование и опросы фидбека. Чтобы разобраться в различных вариантах тестирования, я рекомендую прочитать «Методологии количественного исследования пользователей».

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

Определите цель

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

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

1. Гипотеза

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

2. Отсеивающие вопросы

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

Например, если мы тестируем приложение для тренировок, мы можем задать такие вопросы, как «используете ли вы в настоящее время какие-либо приложения для тренировок?» или «вы регулярно занимаетесь спортом?» Если пользователи ответят на эти вопросы «нет», то они не подходят и не могут продолжить наш тест.

3. Сценарии

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

4. Задачи и вопросы для каждого сценария

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

5. Финальная анкета

Соберитесь с мыслями и задайте последние вопросы, чтобы связать все сценарии вместе. Какой вариант они предпочли? Как бы вы оценили каждый опыт по шкале от 1 до 5? Не забудьте снова показать визуальные эффекты, чтобы напомнить тестировщикам о каждом сценарии.

6. Результаты

Вот несколько советов по получению наилучших результатов удаленного тестирования пользователей:

• Не все пользователи технически подкованы, поэтому крайне важно создавать тесты, не требующие выполнения слишком сложных задач.
• Задавайте подробные контрольные вопросы, чтобы убедиться, что мы получим подходящих тестировщиков. Или еще лучше, выбирайте собственных пользователей или целевых клиентов.
• Всегда используйте упрощенные формулировки, а не технические термины.
• Согласно данным Neilson Norman Group, нам нужно протестировать всего 5 пользователей, чтобы выявить 85% проблем юзабилити.

8. Как проектировать для разработки

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

Ряд шагов для обеспечения беспрепятственной передачи проекта разработчикам:

• Рассмотрите возможность повторного использования паттернов, если только уникальный дизайн не добавляет реальной ценности. В процессе проектирования мы должны проверять дизайн при введении новых соглашений, элементов, анимации и т. д. Если они не приносят дополнительной пользы для пользователя, их следует пересмотреть. Кнопки, макеты экрана, юзерфлоу и т. д. следует использовать как можно чаще для единообразия и экономии времени.
• Воспользуйтесь преимуществами таких инструментов совместной работы, как Zeplin, для создания фрагментов кода, проверки, простой загрузки активов и многого другого. Figma, InVision, Adobe или Marvel также неплохо справляются с этой задачей.
• Избегайте введения новых, ненужных функций. Не добавляйте функции, которые усложнят процесс разработки и не принесут дополнительной пользы приложению. Сосредоточение внимания на бизнес-целях, потребностях пользователей, масштабах проекта, сроках и способах разработки продуктов поможет определить приоритетность функций.
• Организуйте все экраны в разделы в Zeplin и файле дизайна.
• Назовите все артборды последовательно для облегчения поиска и понимания.
• Отметьте активы для экспорта.
• Храните архив старых экранов и убедитесь, что все новые экраны обновлены.

9. Как делать вайрфреймы с низкой детализацией

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

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

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

10. Как каждый день становиться лучше.

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

Вот несколько вещей, которые я сделал, чтобы улучшить свои дизайнерские навыки:

• Побочные проекты. Побочные проекты – вот что в первую очередь развило мой интерес к продуктовому дизайну. Если мы полагаемся исключительно на работу, предоставляемую работодателем, то мы ограничиваем свой потенциал роста. Если у вас есть свободное время по вечерам и в выходные, попробуйте проработать идею, которая вам нравится. Сайд-проекты отлично подходят для портфолио и демонстрируют аутентичные дизайнерские работы без вмешательства клиента.
• Обращайте внимание на детали. Легко бездумно использовать приложения или проходить цифровой опыт, не задумываясь о них. Часто лучший дизайн остается незамеченным. Как дизайнеры, мы должны отметить дизайн-решения, принимаемые известными брендами и продуктами.
• Проходите собеседование, даже если вы довольны текущей работой. Собеседования в других компаниях могут многое рассказать о пробелах в наших знаниях или о том, какие навыки востребованы в настоящее время. Тестовые задания также могут быть отличным упражнением, чтобы напрячь наши творческие мускулы и решить интересные задачи.
• Прочтите документацию по дизайн-системам. Чтение проектной документации популярных дизайн-систем – надежный способ получить больше тактических UI / UX знаний. К моим любимым дизайн-системам относятся IBM Carbon,Zendesk Garden, Workday Canvas, Atlassian, и Material.

Освоить основы визуализации: как стать UI / UX дизайнером-самоучкой | by Dawid Tomczyk

Имейте в виду, что есть много разных способов попасть в эту область — не существует единого / простого пути, по которому все идут! Вот как я начал, и ваш путь становления UI / UX, вероятно, будет совершенно другим. Хотя я хотел бы выделить несколько моментов, которые могут быть полезны на вашем пути становления UI / UX дизайнером.

1. Освоить основы визуального и веб-дизайна

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

1. Цвет

Отличная серия из трех частей по теории цвета — словарь цвета, основы и психология цветов.
Теория цвета для дизайнеров

2. Системы сеток

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

3. Композиция и баланс

Узнайте, как сбалансировать композицию
Принципы дизайна: композиционный, симметричный и асимметричный баланс

4. Типография

Лучший веб-тип — это просто — следовать курсу электронной почты по веб-типографии для веб-дизайнеров и веб-разработчиков. Создано Matej Latin
Запишитесь на бесплатный курс типографики

5. Contrast

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

2. Понимание процесса проектирования UX

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

Что такое дизайн-мышление?

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

Дизайн-мышление — это гибкий и повторяющийся процесс

1. Подчеркните

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

2. Определение

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

3. Идея

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

4. Прототип

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

5. Тест

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

Дизайн-мышление — это гибкий и итеративный процесс. — это означает, что процесс не должен следовать этапам в последовательном последовательном порядке. 5 этапов следует понимать как разные режимы, которые вносят вклад в проект. Я очень кратко описал эти шаги, поэтому, если вам нужно узнать больше о каждом конкретном шаге, вы должны посетить www.interaction-design.org

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

Очень сильный визуальный / Дизайн пользовательского интерфейса — очень ценный актив и важный шаг на пути к тому, чтобы стать дизайнером UI / UX, и, вероятно, самая сложная дисциплина для совершенствования — на это уходят месяцы, годы практики.Вам нужно сосредоточиться на визуальном / пользовательском дизайне как на очень важной части вашего набора навыков. Вы должны научиться разрабатывать пользовательские интерфейсы для различных типов устройств, включая настольные ПК, планшеты, мобильные устройства и т. Д. Каждый день вам нужно работать, совершенствовать и оттачивать свои дизайнерские навыки — как это сделать? Я указал ниже несколько идей и методов, которые вы можете использовать.

Ознакомьтесь с шаблонами проектирования UI / UX

Вам необходимо ознакомиться с шаблонами проектирования UI / UX и с какими конкретными проблемами они решают.

pttrns.com Отличная коллекция шаблонов мобильного дизайна

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

Я составил список лучших мест, где можно найти шаблоны дизайна в сети:

Копирование лучших дизайнеров

Нет ничего лучше, чем учиться у лучших и более опытных дизайнеров. Не у всех есть наставник или кто-то, кто помогает в изучении UI / UX-дизайна, поэтому я хотел бы поделиться с вами очень эффективным методом, который поможет вам улучшить свои визуальные навыки самостоятельно. Как начать? Вам нужно зайти на Dribbble, Behance, Pinterest (или любой другой веб-сайт, где вы можете найти хорошие дизайны) и буквально начать копировать топовых дизайнеров .Хотя не следует просто слепо копировать эти дизайны, вам нужно внимательно изучить их и обратить пристальное внимание на следующее:

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

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

«Лучший и самый быстрый способ изучить дизайн, на который можно смотреть и подражать более опытным и опытным дизайнерам»

Приложение для мероприятий Якуба Анталика

Детали действительно имеют значение

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

«Дьявол кроется в деталях»

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

Вот мои любимые сайты для вдохновения:

• behavior.net Откройте для себя последние работы из лучших онлайн-портфолио творческих профессионалов из разных отраслей.
• dribbble.com Сообщество дизайнеров, делящихся своими работами.
• Uplabs курирует лучшие идеи в области дизайна и разработки,
• awwwards.com Сайт наград, поощряющий дизайнерские таланты.
• uimovement.com Лучшее вдохновение для дизайна пользовательского интерфейса, каждый день.

4. Работа над фальшивыми / обучающими проектами

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

Roxane fashion store5.Изучите инструменты, связанные с ui / ux

Несколько лет назад, когда я начал заниматься UI / UX дизайном, на рынке не было так много инструментов дизайна — у дизайнеров не было большого выбора, и они начали использовать Adobe Photoshop в качестве основного UI / Инструмент UX-дизайна (в том числе и я). Adobe Photoshop как программное обеспечение никогда не создавалось для разработки веб-сайтов или приложений. В настоящее время на рынке существует масса отличных и гораздо более эффективных инструментов дизайна UI / UX — хорошая новость в том, что вам не нужно изучать их все.Просто попробуйте несколько из них, а затем придерживайтесь одного / двух и овладейте ими. Приложение

Sketch — один из самых популярных инструментов дизайна UI / UX (MAC)

Я уже давно использую приложение Sketch , поэтому, если вы пользователь Mac, я настоятельно рекомендую этот инструмент. Если вы работаете в Windows, попробуйте Adobe XD. Вот список программного обеспечения, которое вам стоит попробовать:

• Sketch — ведущий инструмент дизайна UI / UX (для пользователей Mac)
• Adobe XD для дизайна интерфейсов и прототипирования
• Framer — Инструмент интерактивного дизайна и прототипирования
• Figma для совместного проектирования интерфейсов
• UXPin — для дизайна, прототипирования, совместной работы (приложение на основе веб-браузера)
• Invision App для создания прототипов и совместной работы

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

Sketch вместе — один из лучших каналов YouTube для изучения приложения Sketch Принцип для Mac Учебники Дэниела Хупера UPin Tutorials6. Инвестируйте в свои знания

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

Вот список моих любимых веб-сайтов и блогов, связанных с дизайном:

UI Trends 2021: 13 главных тенденций, которые понравятся вашим пользователям

На этот раз я пошел дальше и спросил наших дизайнеров из UX Studio, какими они ожидают трендов пользовательского интерфейса 2021 года.

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

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

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

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

13 трендов пользовательского интерфейса 2021

1. Уникальные иллюстрации и анимация

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

Lottie Animations от Drawer

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

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

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

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

2.Повествование с анимацией с запуском прокрутки

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

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

3. Искусственный интеллект

AI продолжает интегрироваться практически во все возможные продукты. Но мы очень сомневаемся, что он заменит дизайнеров. Напротив, это принесет пользу и облегчит нашу работу. Благодаря способности ИИ собирать данные (собирать огромные объемы данных.) мы заметим больше персонализированных продуктов, которые на 100% адаптированы к потребностям каждого человека.

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

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

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

Продукты

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

4. Дополненная реальность

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

Google и Apple уже представили свои собственные платформы разработки дополненной реальности, ARCore и AEKit, которые сочетают в себе физический и цифровой миры. AR UI может иметь разные подходы:

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

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

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

5. Виртуальная реальность

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

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

6. Год виртуальных встреч

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

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

Wonder уже вырвался из привычного скучного интерфейса видеочата. В значительной степени просто MVP, но это интересный случай UX / взаимодействия.

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

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

7.

Удобство использования

Удобство использования стало новым трендом «UI» точно так же, как розовый когда-то стал новым черным.

Вы, наверное, уже слышали об объявлении Google о том, что в 2021 году они представят три новых показателя взаимодействия с пользователем для измерения скорости загрузки, интерактивности и визуальной стабильности веб-сайта. Все вместе они называются Core Web Vitals. Я написал статью о том, как мы оптимизировали веб-сайт нашего продукта, чтобы повысить его рейтинг. UX-аудит — это проверенный метод выявления недостатков юзабилити в вашем продукте и повышения его эффективности в Интернете.

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

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

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

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

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

8.

Глассморфизм

Вы, наверное, помните, что видели этот стиль в старой доброй Windows Vista или ios 7, но эффект матового стекла, похоже, вернулся, и мы, вероятно, увидим его еще больше в 2021 году.

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

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

Также этот стиль реализован в новом обновлении macOS под названием macOS Big Sur.

9.

3D будет UI rockstar

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

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

Adobe XD также может повлиять на будущие 3D-элементы в дизайне. Он представил новую функцию под названием 3D Transforms, которая теперь может добавить совершенно новую перспективу в предстоящие проекты. Как они описали, «3D-преобразование позволяет манипулировать объектом в трехмерном пространстве, создавая наклоны и повороты, а также изменяя глубину объекта на холсте.”

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

Это также может открыть дверь к проектированию для AR или VR.

10. Слишком похожие значки

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

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

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

Бывшие логотипы Google G Suite или логотипы Facebook Messenger и Instagram — это значки, которые используются ежедневно. Бесчисленные пользователи нажимают и нажимают на них более одного раза в день. Они должны быть в состоянии обнаружить их менее чем за секунду.

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

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

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

11.

Шрифты ловушки чернил

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

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

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

12. Ретро эстетика Board.boldare.com

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

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

13. Младший код и платформы без кода

Программное обеспечение

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

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

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

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

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

---

Какие факторы повлияют на тенденции пользовательского интерфейса в 2021 году?

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

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

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

---

Сделайте следующий шаг, чтобы улучшить UX своего веб-сайта Студия

UX успешно сотрудничала с более чем 250 клиентами по всему миру.

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

Наши специалисты будут рады помочь со стратегией UX, исследованием продуктов и пользователей, дизайном UX / UI.

17 Тенденции UX / UI на 2021 год

2020 год превратился в американские горки. Так много всего произошло в том году и произошло быстро.

С ростом культуры виртуальной и удаленной работы UX Что такое UX? UX — это сокращение от User Experience, которое относится к мыслям и чувствам человека при использовании определенного продукта или услуги. Он направлен на исцеление… / За год тенденции пользовательского интерфейса резко изменились.

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

В этой статье мы рассмотрим 17 основных трендов UX / UI на 2021 год, что влияет на изменение тренда и почему вам следует проверить новые тенденции.

Основные тенденции UX / UI на 2021 год

# 1 Dark Mode

Рост темных сторонников, вероятно, продолжится и в этом году.

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

Но темный режим — это не просто белые тексты на темном фоне. У него есть еще пара преимуществ.

• Экономит батарею, если в устройстве используется OLED или AMOLED экран.
• Лучше по читабельности текста.
• Это лучше для уменьшения нагрузки на глаза при использовании устройства в ночное время.
• Уменьшает блики на экране и минимизирует синий свет.

(Источник: разработчики XDA) (Темный режим в системных приложениях macOS)

# 2 Неуморфизм

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

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

Хотя он настолько популярен среди дизайнеров пользовательского интерфейса Dribbble, большинство экспертов по UX думают как раз наоборот.

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

Но он красивый и футуристичный по дизайну. Итак, мы можем увидеть больше реализаций Neumorphic UI в 2021 году.

# 3 Анимации

В последнее время мы заметили значительную популярность UI-анимации.

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

# 4 Расширенные микровзаимодействия

Микровзаимодействия существуют в каждом программном приложении. Мы используем его каждый раз при использовании разных приложений. Функция «Нравится» в Instagram и «ретвитнуть» в Twitter — прекрасные примеры микровзаимодействия.

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

(Заголовок: канал Instagram) (Заголовок: варианты твита в Твиттере) (Источник: Medium.com)

# 5 Полужирный шрифт

Вы заметили, что веб-типографика становится больше и смелее?

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

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

Смелая типографика выделяется на фоне своего окружения и требует чтения.Но это должно быть неотъемлемой (и неотъемлемой) частью общей эстетики.

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

Целевые страницы Dropbox, Drift и Nike — лучший пример использования смелой типографики.

(домашняя страница Dropbox) (домашняя страница Drift) (целевая страница Nike-Canada)

# 6 Плавные градиенты

Царство плавных градиентов в самом разгаре.

Гибкая система дизайна Microsoft и новый подход Apple к дизайну в macOS Big Sur — два важных шага в градиентном дизайне. Google также присоединился к вечеринке с переработанными логотипами Gmail, Календаря, Диска, Документов и Meet.

(Свободные значки для Microsoft Office) Новые значки из MacOS Big Sur (Новые значки для некоторых продуктов Google)

# 7 3D повсюду

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

В 2021 году 3D будет продолжать развиваться, особенно учитывая растущую популярность технологий VR и AR.

# 8 Иллюстрация пустых состояний и состояний ошибок

Ошибки пугают, а пустота утомляет.

Но они оба являются неотъемлемой частью программного приложения.

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

(Подпись: Иллюстрация состояния ошибки YouTube)

# 9 Дизайн-система

Эта тенденция связана с дисциплиной в мире дизайна, и она не нова.

Все больше и больше компаний серьезно относятся к единому опыту проектирования и построению своей системы проектирования. Material Design, Ant Design, Fluent Design System — самые популярные системы дизайна с открытым исходным кодом. Кроме того, существует множество других бесплатных систем дизайна. Мы надеемся увидеть в этом году более комплексные системы проектирования.

(Источник: Saif71.com) (Источник: Dribbble)

# 10 Удаленное и виртуальное сотрудничество

Мы все (в основном) работаем из дома.

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

# 11 Дополненная и виртуальная реальность

Есть бесконечные возможности для инноваций и создания захватывающих впечатлений в пространстве AR / VR.

Многие игры AAA приходят на платформы VR. Дизайн пользовательского интерфейса для AR станет одной из важных тенденций в 2021 году.

(Источник: Road to VR)

# 12 Голосовой пользовательский интерфейс (VUI) и бесконтактное взаимодействие

Еще одна тенденция пользовательского интерфейса и UX, начавшаяся после пандемии — это бесконтактное взаимодействие.

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

# 13 Отличная адаптация пользователей Что такое адаптация пользователей? Адаптация пользователей — это важный процесс, который начинается с первого входа нового пользователя и заканчивается в момент их «ага», а обычно после…. опыт

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

(Пользовательский интерфейс мобильного приложения Slack)

# 14 Простая аутентификация

Мы все ненавидим пароли.

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

(Источник: MacRumors)

# 15 UX-письмо и микрокопия

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

(страница запроса файла из Dropbox)

# 16 Персонализированный опыт

Персонализированный и индивидуальный подход — новый способ сохранить интерес пользователей.

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

(Воспоминания из Google Фото) (Facebook в этот день)

# 17 Рост суперприложений

В настоящее время так называемые «суперприложения», такие как Wechat и Yandex Go, безумно популярны в азиатских странах.

Кремниевая долина всегда скептически относилась к суперприложению. Но сейчас время меняется. В ближайшие дни мы увидим рост «суперприложений».

(Подпись: Yandex Go) (Wechat: одно приложение охватывает все функции 12 популярных приложений)

Зачем проверять тенденции UX / UI?

UX / UI развивается, как и любые другие знания.

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

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

Что влияет на тенденции 2021 года?

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

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

(Работа на дому.Фото «Standsome Worklifestyle» на Unsplash)

Заключение

Надеюсь, что упомянутые мною тенденции помогут вам отметить, где мы находимся с UX / UI сегодня.

И принесите ручку и бумагу, или новую страницу Notion, и будьте готовы отслеживать изменения в трендовых концепциях UX / UI в этом году.

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

---

Часто задаваемые вопросы

---

Какая следующая большая тенденция в веб-дизайне?

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

---

Что такое тенденция UX-дизайна?

Тренд UX относится к направлению, в котором что-то в UX / UI развивается или изменяется; например, склонность к VUI в последние годы.

Сильно недооцененный секрет качественного UI / UX-дизайна

Можете ли вы угадать, со сколькими веб-сайтами и мобильными приложениями ежедневно взаимодействует типичный пользователь? В Америке каждый день мы потребляем в среднем 6,5 часов экранного времени, выходя в Интернет с настольных и мобильных устройств.Неудивительно, что мир мобильных приложений, веб-дизайна и разработки сильно вырос за последнее десятилетие.

Знаете ли вы: в последнем квартале 2019 года для загрузки было доступно более 4,41 миллиона приложений для iOS и Android. Для сравнения: 10 лет назад в магазинах Google Play и Apple App было всего 51 000 устройств.

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

Что такое дизайн-система и почему она полезна?

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

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

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

Натан Кертис, EightShapes

Каковы 5 основных преимуществ дизайн-системы?

1. Структура, структура, структура Эффективное использование системы дизайна облегчает дизайнерам воспроизведение своей работы. Создание привлекательного, полезного веб- или мобильного дизайна требует внимания к деталям и последовательности. Пользователи ожидают согласованности (даже если они ее не озвучивают), и задача дизайнера — создать систему, устраняющую несоответствия.Использование и повторное использование набора компонентов означает, что при создании новой страницы или экрана вы не рискуете внести новые ошибки.
2. Брендинг: знакомый шаблон для пользователя Руководящие принципы бренда и системы дизайна существуют параллельно друг другу. Надежная система дизайна создает основу для сотрудничества между командами дизайна, разработки и цифрового маркетинга. Это позволяет каждому объединиться вокруг одной движущей, последовательной силы. Сохранение последовательного имиджа бренда намного проще с установленным набором принципов и указаний, которым должны следовать все команды.Использование системы дизайна помогает укрепить идентичность бренда, построение на ее основе побуждает каждого члена команды усиливать узнаваемый интерфейс.

   Несколько известных примеров популярных систем дизайна поступают от ведущих узнаваемых брендов, таких как Shopify, Airbnb, Google’s Material Design, Atlassian, IBM, MailChimp и, конечно же, Apple и Microsoft. Ознакомьтесь с этим постом, чтобы ознакомиться с набором из 12 лучших примеров дизайн-систем.

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

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

4. Четкое общение с разработчиками Когда дизайнеры поддерживают свое рабочее пространство «чистым» с помощью таких инструментов дизайна, как Sketch или Zeplin (предпочтительные инструменты дизайна нашей команды здесь, в SingleMind), все органично сочетается. «Чистая» система дизайна ускоряет реализацию. Инструменты дизайна будут просто генерировать CSS и стили, которые команда мобильных и веб-разработчиков может просто скопировать и вставить в свой код.

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

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

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

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

Ключевые выводы

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

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

Заинтересованы в UX-дизайне? Продолжай читать!

3 совета по созданию эффективного дизайна веб-сайта электронной коммерции

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

5 советов по улучшению вашего пользовательского интерфейса

13 футуристических веб-дизайнеров UI / UX, которым можно следовать в Twitter

Только в Соединенных Штатах индустрия веб-дизайна стоит более 20 миллиардов долларов, и в ее успехе участвуют как любители, так и профессионалы.Каждый месяц создается около 16 миллионов новых веб-сайтов! В Европе тоже есть процветающее и постоянно растущее сообщество креативных веб-дизайнеров. Не только глобальная индустрия веб-дизайна растет, но и развивается. От технологических достижений до дизайнерского мышления и подходов к веб-дизайну. Если вы начинающий веб-дизайнер или думаете о карьере, то вот вам учебник.

Определение UI и UX

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

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

С другой стороны, UX-дизайн — это процесс, улучшающий пользовательский опыт, удовлетворение и желаемый результат взаимодействия. Веб-дизайнеры UX работают стратегически, чтобы повысить удобство использования и удовольствие от взаимодействия между клиентом и продуктом, в данном случае веб-сайтом. Дон Норман, соучредитель консалтинговой компании Neilsen Norman Group Design, придумал этот термин в 1990-х годах. Согласно его объяснению, пользовательский опыт «охватывает все аспекты взаимодействия конечного пользователя с компанией, ее услугами и продуктами.”

UI и UX-дизайн часто взаимозаменяемы в индустрии веб-дизайна, потому что у них много общего — их отношения похожи на скелет (UX) и скин (UI).

Футуристический дизайн

Благодаря постоянно меняющимся достижениям в области технологий, Интернета и творчества дизайнеры UI / UX всегда работают на шаг впереди времени. Такие фильмы, как «Гаттака», «Отчет меньшинства», «Аватар», «Матрица» и «Звездный путь» вдохновляют нас, они также мотивируют веб-дизайнеров воплощать будущее в настоящем.

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

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

1. Энди Бадд

Энди Бадд (Andy Budd) — дизайнер пользовательского интерфейса из Брайтона, Англия, внесший большой вклад в мир UI / UX-дизайна. он также является соавтором книги «CSS Mastery: Advanced Web Standards Solutions». Он был партнером Clearleft, агентства цифрового дизайна, одновременно работая куратором лондонских мероприятий по UI / UX-дизайну, таких как dconstruct и UXLondon.

Твитов @andybudd

2. Стив Фрашини

Фраскини, креативный UI / UX веб-дизайнер и мобильный дизайнер из Франции, в прошлом композитор. Его множественные навыки укрепляют и пронизывают его художественное сознание. Он был фрилансером в Nespresso, Adidas, KitchenAid, Kenzo, AXA и т. Д. Его опыт будет большим подспорьем для всех дизайнеров, желающих работать фрилансером.

@Peugeot Fractal — Веб-сайт Tribute от @Novagraphix на @dribbble
#Ui #Webdesign #FrenchTech — https: // t.co / 7CCLZ8UGb4 pic.twitter.com/Ho4xrZVhBR

— Стив Фрашини (@Novagraphix) 2 октября 2015 г.

3. Космин Капитану

Дизайн румынского UI-дизайнера Capitanu отличается современным стилем, полным плоских значков и прозрачности. Он экспериментирует с графическим и веб-дизайном с 16 лет, когда наткнулся на таблоид в швейцарском стиле. С тех пор он работал над макетами, логотипами, интерфейсами и всеми другими способами визуального представления. Его подход к дизайну прост: чистый и рациональный.

Тестирование сетки и макета сома. Вы можете увидеть это здесь https://t.co/3LalhxxBuC

— Cosmin Capitanu (@CosminCapitanu) 29 мая 2014 г.

4. Джеймс Ричман

Ричман, признанный арт-директор в Лос-Анджелесе, имеет более десяти лет дизайнерского опыта. Он работал дизайнером пользовательского интерфейса и пользовательского интерфейса в NBC Universal, Technicolor и Pawazii. Кроме того, с 2009 по 2011 год он был лауреатом множества наград. Знания Ричмана помогут вам занять твердую позицию в индустрии веб-дизайна.

Быть самым умным 1 в комнате значит не только знать, когда молчать, но и найти лучшее решение. #UX # дизайн # дизайн

— джеймс ричман (@james_richman) 13 апреля 2015 г.

5. Джеки Тран

Чешский дизайнер Тран работал в качестве дизайнера пользовательского интерфейса и иконок в Victoria’s Secret, Skoda, HTC, MetaLab, Cleevio, Snippit, CloudApp, Tapmates и т. Д. Кроме того, он является отмеченным наградами фотографом. Его дизайн представляет собой гармоничное использование цвета и выглядит так, будто ему нравятся градиенты!

Я бы предпочел кнопку «Не нравится», чем 6 разных смайликов на FB.#useless

— Джеки Тран (@jackietrananh) 9 октября 2015 г.

6. Алекс Фор

Не очень опытный парень, но Фор связан с индустрией пользовательского интерфейса достаточно лет, чтобы стать источником вдохновения для тех, кто думает о выборе этой карьеры. Он — внештатный арт-директор из Парижа, Франция. Он работал с TextMaster, Colorz.fr, TONTON, Epiclist и т. Д.

Bonjour 👋 Я рад поделиться с вами своим новым портфолио, написанным @clem_vion 🔥
Зацени 👉 https: // t.co / QvlavNRQ6x pic.twitter.com/pVLnv0to0U

— Aleks (@AleksFaure) 11 февраля 2019 г.

7. Николай Лечев

Лечев — UX-дизайнер и фронтенд-разработчик, который работал внештатным веб-дизайнером. Кроме того, он является основателем AetherThemes. В 2013 году он был в числе особых упоминаний от Awwwards. О том, как получить признание в качестве фрилансера, читайте в Твиттере.

«Великолепный дизайн должен быть частью всего, а не просто украшением, чтобы ваш продукт выглядел красиво…» http: // t.co / 11TTM4ADOL

— Николай Лечев (@iamlechev) 14 мая 2015 г.

8. Андерс Драге

Драге, многопрофильный дизайнер, родом из Норвегии. В качестве своего проекта по дизайну пользовательского интерфейса он создал PicPac.com и работал с такими клиентами, как BabyShop и Buggmakker (крупнейший магазин бытовой техники в Норвегии). Если вы ищете современное вдохновение, то это мужчина.

Eksell Display — уникальный шрифт 1962 года, разработанный легендарным Олле Экселлом.

http: // t.co / ScBoyTfBRq pic.twitter.com/AJeeg1n9cm

— Андерс Драге (@AndersDrage) 28 июня 2015 г.

9. Эллиот Кондон

Веб-разработчик из Мельбурна, Кондон создал популярный плагин Advanced Custom Fields. Он доступен в большинстве социальных сетей и в своем блоге. Если вы заинтересованы в создании плагинов, он может быть вашим источником вдохновения или руководством.

У меня есть планы на следующее обновление #advancedCustomFields PRO! Все, что я говорю, это очень много

— Эллиот Кондон (@elliotcondon) 2 октября 2015 г.

10.Тимоти Руссиль

Руссиль, родившийся в 1990 году, учится в Интернет-школе HETIC и увлечен цифровым миром. Он стажировался в 8P Design в Монреале, DDB Paris и Tribal DDB. Все молодые дизайнеры и студенты, изучающие связанные с веб-дизайном области, могут связаться с Roussilhe, чтобы получить знания о том, как молодые умы должны работать во время своей стажировки в области дизайна.

VR и художественная интерпретация сенсорных перспектив видов.
Автор @marshmallowlf.
https://t.co/fScEUKSG0y pic.twitter.com/SwWYdtA39R

— Тимоти Руссиль (@TimRoussilhe) 6 октября 2015 г.

11. Люк Ван Латум

Основатель thinkLuke, Lathum работает с командой преданных своему делу разработчиков и совместных дизайнеров, специализирующихся на идентификации бренда, веб-дизайне, онлайн-маркетинге и поисковой оптимизации. Его работы доступны на сайтах по обмену дизайном, таких как Deviant Art и Behance.

Я только что скачал SEQUI — БЕСПЛАТНЫЙ TYPEFACE, и это здорово! http: // t.co / J9TrJQ5vr9

— Люк Ван Латум (@thinkLuke) 28 августа 2013 г.

12. Стефан Хийенурм

Креативный дизайнер пользовательского интерфейса и пользовательского интерфейса, Хииенурм не только работал с несколькими компаниями, но также помогал компаниям и стартапам улучшать свои цифровые продукты. За свои работы с 2013 по 2015 год он получал призы, в том числе награды Kuldmuna Bronze и Estonian Design Awards. Более того, он является соучредителем Thorgate и работал с GateMe.

«Молодой дизайнер года» и одно золото.🎉 # Эстония #adc #disainiauhinnad pic.twitter.com/RMTRUR08Hb

— Стефан Хииенурм (@shiienurm) 12 октября 2015 г.

13. Павел Хаза

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

Это надоедливое всплывающее окно возвращает меня в приложение для заметок… @evernote pic.twitter.com/mEJNbQpHr0

— Павел Хоза (@huzic) 5 октября 2015 г.

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

За кем вы собираетесь следовать? Сообщите нам свои причины в поле для комментариев ниже.

PM 101: Пользовательский интерфейс и взаимодействие с пользователем

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

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

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

Макет

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

Элементы

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

Графика

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

Что такое пользовательский интерфейс (UX)?

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

Сравнение дизайна пользовательского интерфейса (UI) и взаимодействия с пользователем (UX)

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

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

Вкратце: дизайн пользовательского интерфейса

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

Вкратце: UX-дизайн

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

Как взаимодействуют дизайнеры UI и UX

После того, как пользовательский интерфейс примерно определен в прототипе, дизайнер UX намеревается найти способы направить дизайнера пользовательского интерфейса к улучшениям. Дизайн прост в использовании? Позволяет ли это пользователю эффективно взаимодействовать и ориентироваться? Цели пользователя остаются неизменными или меняются? Какие изменения могут улучшить поток? Благодаря идеям и рекомендациям, которые UX-дизайнер генерирует в результате тестирования и экспериментов, UI-дизайнер может существенно обновить интерфейс, чтобы искусство отражало намерения продукта.

Чем на практике различаются UI и UX?

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

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

Рекомендуемая литература

Не заставляйте меня думать: здравый подход к удобству веб-использования (2-е издание) Стив Круг

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

Количественная оценка взаимодействия с пользователем: практическая статистика для исследования пользователей (2-е издание) Джефф Сауро и Джеймс Льюис

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

«PB&J UX и продукта», Аманда Варни

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

«Полное руководство по стратегии исследования UX» Кэрри Бойд

Эта пошаговая разбивка того, что, почему и кто участвует в исследовании UX, является легким для чтения справочником как для новичков, так и для опытных профессионалов UI / UX.

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

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

«Углубляясь в учебник по дизайнерскому мышлению» Лео Фришберг

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

«Ошибки юзабилити: шесть честных и ценных советов от UX-дизайнера» Шандор Зеленка

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

10 портфелей UX / UI-дизайна, которые вас вдохновят

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

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

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

С помощью наставников и профессиональных тренеров сообщество Designlab создало впечатляющие портфолио.Читайте дальше, чтобы изучить подборку портфолио UX / UI-дизайна от студентов Designlab, которые обязательно вдохновят вас.

10 сияющих портфолио студентов Designlab

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

1. Аврора Шао

Портфолио

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

2. Джаред Бартман

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

3. Сиривина Нандам

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

4. Ребекка июнь

Чисто, просто, последовательно. У Ребекки также есть сильная страница «Обо мне». Если вы меняете профессию, вам часто нужно будет рассказать, почему вы занялись дизайном. Это не означает эссе из тысячи слов, но что-то короткое и по существу, которое соединяет точки для вашей аудитории и основывается на предыдущем опыте, сработает.

5. Су Парк

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

6. Кэтрин Чен

Портфолио

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

7. Джейми Чой

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

8. Кэти Льюис

Портфолио

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

9. Эрик Брито

В портфолио

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

10. Бен Григгс

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

Если вы хотите создать портфолио дизайна UX / UI, которое вдохновляет, мы приглашаем вас узнать больше о нашей программе UX Academy для тех, кто меняет карьеру и повышает квалификацию. К концу вы выполните более 100 практических упражнений и составите портфолио из 4 значительных проектов.

Николь Локлер

Сотрудничество с талантами и карьерные услуги

.