Руководство по цвету в ux/ui-дизайне

Знания, умения и личные качества

А теперь перейдем к вопросу, что должен уметь и понимать UX-дизайнер. Прежде всего это:

1. Наличие желания постоянно развиваться, следить и адаптироваться к изменениям и новостям, изучать специализированные книги и статьи.
2. Умение работать в команде.
3. Знание и применение принципов UX.
4. Владение средствами автоматизации и управления.
5. Умение оптимизировать и систематизировать каждый шаг во время выполнения профессиональных задач, а также планировать свое рабочее время.
6. Наличие навыков программирования и алгоритмизации.
7. Умение проектировать.
8. Владение графическими программами и редакторами, сервисами для построения интеллектуальных карт и другими приложениями для дизайнеров.
9. Умение создавать технический рисунок.
10. Наличие знаний в области веб-дизайна.
11. Умение создавать макеты сайтов.
12. Знание процесса тестирования готового продукта.
13. Умение проводить UX-исследования.
14. Знание HTML и CSS.
15. Понимание инженерной и компьютерной графики.
16. Знание клиент-серверной архитектуры.
17. Умение проводить диагностику автоматизированных систем.
18. Знание систем управления тестами.

Стоит обратить внимание и на личностные характеристики:

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

Где работать UI-дизайнеру

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

Есть несколько вариантов, где может работать UI-дизайнер.

1. Продуктовая компания

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

2. Аутсорсинговые компании

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

Разнообразие проектов — хорошая возможность «набить руку» и найти направление, которое наиболее интересно.

Навык 6. Копирайтинг

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

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

• К делу: используйте настоящий текст во всех ваших интерфейсах! Не используйте «рыбу», вроде «lorem ipsum» – это признак лени и бесполезной работы. Практикуйтесь и оттачивайте навык письма в информационном стиле;
• Прочтите статью Джона Зератски 5 правил написания замечательного текста для интерфейса и найдите способы использовать меньше слов, как Торрей Подмажерски.

Что это, Веб- UX- и UI- дизайн простыми словами

UI (англ. user interface) переводится как «пользовательский интерфейс». UI – охватывает не только графический интерфейс, а еще и тактильный, голосовой или звуковой.

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

В чем разница между UX и UI

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

Если кратко, то UX отвечает за проектирование и логическое расположение элементов на интернет-сервисе, а UI – это визуальная составляющая и приятная внешняя оболочка сайта или приложения.

UI-дизайн – это работа над звуком, текстом, анимацией, иллюстрациями, меню, слайдерами, шрифтами и т. д.

UX-дизайнер трудится над данными, схемами, таблицами, а UI-специалист оживляет страницы сайта или приложения.

К UI-дизайну приступают после разработки макета UX-специалистом.

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

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

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

Если вас интересует конкретно UI-дизайн, то советую познакомиться с подборкой курсов и книг по этой тематике на блоге iklife.ru.

Кто он — UI/UX-дизайнер?

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

User Interface является инструментом User Experience. Так что эти понятия по факту зависят друг от друга и отдельно в принципе не работают — это не эффективно.

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

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

Что должен уметь дизайнер UX UI

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

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

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

Однако знаний и навыков у дизайнера UX UI должно быть на порядок больше:

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

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

Навыки хорошего дизайнера интерфейсов

1. Насмотренность

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

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

2. Развитое чувство стиля и целостность дизайна

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

3. Типографика

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

4. Передача уникальности, эмоций продукта

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

5. Владение современными инструментами

Самые базовые и необходимые графические программы:

• Figma;
• Sketch;
• Adobe Illustrator;
• Adobe Photoshop.

Инструменты для создания прототипов:

• Figma;
• InVision;
• Marvel;
• Axure.

6. Презентация своей работы

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

Где пройти обучение на дизайнера UX UI

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

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

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

Работодатель обязательно просмотрит портфолио и выдаст тестовое задания.

Итак, самые лучшие курсы среди имеющихся на рынке:

• Курс «Профессия UX/UI дизайнер» от Нетологии. Продолжительность 14 месяцев. Стоимость обучения от 140 000 рублей. Предусмотрена рассрочка. По итогам обучения будет составлено портфолио из самый востребованных форматов. Выдается свидетельство о повышении квалификации. Трудоустройство возможно уже во время обучения.
• Факультет Дизайна интерфейсов (UX/UI) от Geekbrains. Продолжительность обучения 18 месяцев. Удобная рассрочка на 24 месяца по 7857 рублей в месяц. Есть возможность начать учиться бесплатно и пройти первый вводный курс. По итогам обучения на полноценном платном курсе будет выдан диплом. С трудоустройством помогают HR-менеджеры на этапе составления резюме и подготовке к собеседованию. Работодателей выпускники находят самостоятельно.
• Курс «UX-дизайнер с нуля до PRO» от Skillbox. Продолжительность обучения – 12 месяцев. Возможна оплата после обучения: дается отсрочка первого платежа на год. Оплата частями по 4900 рублей в месяц. Обучение проходит в комфортном режиме. Большинство студентов уже через 4 месяца обучения находят первых заказчиков и могут зарабатывать от 120 000 рублей.

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

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

Курс «UX-дизайнер с нуля до PRO» от Skillbox полностью отвечает этим требованиям. Обучение проходит в удобное время, с преподавателем. Есть возможность закрепить пройденный материал и исправить допущенные ошибки. По ходу обучения будет создано портфолио из 5-и работ.

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

Информацию о топовых курсах по UX/UI дизайну мы свели для вас в удобную таблицу:

Снижайте информационную нагрузку

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

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

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

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

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

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

AngularJS

Объявление компоненты:

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

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

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

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

Кто такой UX-дизайнер и чем он занимается?

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

Пример сценария (User Flow) по заказу комбо.

Что нужно уметь делать UX-дизайнеру:

• Проводить UX-исследования (качественные и количественные)
• Упаковывать результаты исследований в различные форматы, например, Customer Journey Map
• Создавать прототипы с более эффективными способами достижения целей пользователями;
• Работать с метриками и повышать эффективность пользовательских сценариев с помощью аналитики и данных исследований;

Задача UX-дизайнера:

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

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

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

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

Модель и Интерфейс тесно взаимосвязаны. Чтобы понять разницу между Моделью и Интерфейсом, задайте вопрос: откуда вообще взялась корзина? Разве клиенты добавляют автомобили в тележку пачками, как в супермаркете? Или все-таки нужна модель не корзины/тележки из супермаркета, а тест-драйва в автосалоне?

То есть мы в приложении можем вместо корзины сразу при выборе автомобиля предлагать записаться на тест-драйв или начать оформление покупки (в том числе в кредит). А теперь задайте вопрос: как часто покупатели дорогого автомобиля готовы менять авто и вписывается ли мобильное приложение в их жизненный контекст?

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

Как стать UX-дизайнером:

Хочешь прокачаться в UX-дизайне? Упаковала в 10 шагов все, что помогло мне освоить навыки UX-дизайна, выполнить проекты и собрать портфолио. Читать статью →

Нужна ли техника Apple

Действительно есть много полезных программ, например, Sketch, Principle, которые работают только на платформе IOS. Все мои иностранные проекты я делаю в Figma, анимацию в After Effect, интерактивное прототипирование тоже в Figma. Поэтому можно смело сказать, что без техники Apple можно работать. Но все иностранные вакансии требуют Sketch, поэтому рано или поздно купить яболочный компьютер придется.

Мощность компьютера имеет значение, если вы будете пользоваться After effect и photoshop одновременно, открывая много вкладок. Figma не требует мощности и памяти компьютера, если проект небольшой.

Чтобы создавать приложения для Iphone, конечно, лучше быть постоянным пользователем яблочных телефонов, чтобы понимать паттерн поведения элементов, но такие проблемы решаются разными способами:

1. Есть множество статей, которые описывают как работает IOS и Android. Достаточно выучить чуть ли не наизусть вот эту статью. Так как вопросы про разницу платформ будут часто встречаться на собеседованиях.
2. Когда создаете дизайн, пользуйтесь готовыми шаблонами от IOS
3. Есть правила разработки приложений на IOS для разработчиков. Можно изучить их, но, к счастью, есть русский перевод 🙂

Как стать UX-дизайнером

Начните с изучения материалов по теме

Самое важное на первом этапе — погрузиться в дизайн-среду через прочтение профессиональной литературы (список мы рассмотрим позже), тематических блогов, просмотр уроков (например, на YouTube: «Наука Дизайна», Disarto). . Собирайте коллекцию различных дизайн-решений на Dribbble, Behance, Pinterest

Они пригодятся вам в дальнейшем. Заведите себе страницу на Dribbble, Behance, где позже будете размещать свое портфолио

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

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

Вебинары по теме:

1. Skillbox. Вебинары по направлению «Дизайн». Среди них есть и записи по UX/UI-дизайну.
2. Нетология. по направлению «Дизайн и UX». Для предстоящих вебинаров требуется регистрация. Записи доступны и незарегистрированным пользователям.

3. GeekBrains. : анонс предстоящих и записи прошедших. Требуется регистрация, в том числе и для просмотра записей.

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

Навык 2. Исследование пользователей

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

После простого общения мы можем уже начать сегментировать потенциальных пользователей и классифицировать их на разные типы персонажей («personas») и на то, чего они пытаются достичь («user stories»). Этот исследовательский процесс — ваш двигатель в UX дизайне — без него, вашим единственным компасом, могут быть только ваши предположения, которые зачастую ошибочны!

• К делу: Перед стартом следующего проекта, спросите себя: «Кому это нужно и зачем?» — Что именно им нужно и как мы можем помочь?
• Еще ​​лучше — опросите некоторых потенциальных пользователей и составьте список их потребностей и проблем, с которыми они сталкиваются в той области, которую вы решили улучшить. Используйте этот список, чтобы создать «Персон» (Personas), описать Job Story и задать вектор для направления своей работы;
• Прочтите книгу Джеффа Готельфа Lean UX. Она конечно немного техническая, но на самом деле, в ней вы найдете «все, что вы когда-либо хотели знать о разработке цифровых продуктов, но очень боялись спросить». Она обязательна к прочтению начинающим дизайнерам.

Продуктовый дизайнер

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

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

Некоторые компании используют термин “UX-дизайнер” или просто “дизайнер” как универсальный. Лучший способ понять, как компания распределяет обязанности между дизайнерами — это прочитать описание должностей.

Как UX-дизайнеру правильно составить портфолио

Лучше, если это будет не документ, а ссылка на профплощадки (Behance, Dribbble) или ссылка на интерактивную презентацию в Figma.

Сколько работ включать в портфолио

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

Какие работы включать

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

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

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

Что делать, если у меня нет опыта работы, нет проектов

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

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

Похожие записи:

B2b (би ту би) Обучающие материалы Что скрывают цифры: заложивший недвижимость чичваркин гастролирует с лекциями о том, как успешно вести бизнес Какие навыки стоит прокачать программисту в 2021 году чтобы зарабатывать больше Удаляем страницу в facebook Какой иностранный язык учить после английского