UI UX дизайн на пальцах

80 и даже 120 тысяч рублей в месяц предлагают региональные работодатели для молодого UX UI дизайнера в России сегодня. Почему рынку необходимы эти специалисты и что значат эти аббревиатуры, давайте разбираться! UX и UI дизайн тесно связаны так как обслуживают поле внимания пользователя. Только UX со стороны быстроты и эффективности решения задачи продукта, а UI – со стороны эстетического переживания. Любой элемент сделанных нами устройств можно оценить с точки зрения этих двух практик. Возьмём кнопку лифта. Где она расположена, как далеко от входа, как далеко от других кнопок; при каких обстоятельствах она подсвечивается зелёным и как быстро пользователь поймёт, что эта подсветка значит решает UX дизайнер. Округлость, материал, шрифт номера этажа и форма кнопки определяется уже UI дизайнером. 

Теперь поподробнее: 

Начнём с UX, или User Experience, или — опыт пользователя. Вкратце: это вся совокупность опыта использования вашего продукта, позитивная или негативная. Впервые понятие UX появилось в книге “Дизайн привычных вещей” Дональда Нормана, одного из основателей компании Эпл, которая уделяет особое внимание юзабилити и создаёт лучшие интерфейсы в мире. Навигация по сайту, кнопки, поиск, поисковой запрос — всё оставляет впечатление от использования интерфейса. Именно с этим впечатлением и работает UX дизайнер в конечном счёте. Каким образом мы можем воздействовать на впечатление пользователя? Используя богатый опыт психологии, физиологии, гигиены и эргономики, мы можем приспособить наш продукт под нужды усреднённого человека, сделать его заведомо безопасным и эффективным. Приложение открытий из этих областей в UX дизайне можно обнаружить в круговых интерфейсах, по которым удобно перемещаться. В телефонных интерфейсах принцип укорочения перемещения воплощён в близких к нижнему краю интерфейсах — чем чаще пользователь использует какой-то элемент, тем ближе к нижнему краю, то есть к большому пальцу руки, этот элемент должен быть расположен.  

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

1. Маркетинговый анализ 

2. Дизайн, разработка прототипа 

3. Тестирование, UX исследования  

4. Внедрение проекта  

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

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

• поведение целевой аудитории 
• сценарии взаимодействия с интерфейсом 
• продуманная структура сайта 
• удачные решения в сфере UX дизайна  

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

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

Этап UI разработки интерфейсов включает в себя: 

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

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

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

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

1. Adobe Photoshop — лидирующий в мире растровый редактор. С его помощью вы будете редактировать изображения, создавать фоны, сложные кнопки. 

1. Adobe After Effects нацелен на создание короткой анимации. Motion design — часть веб дизайна. С его помощью оживляется визуал сайта, увеличивается иммерсивность. 

Теперь о теории: 

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

За подробной информацией по направлениям образования переходите по ссылкам ниже:

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