Как стать веб-дизайнером: 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 или в онлайн-чате на сайте. Не забывайте подписываться на нас в ВКонтакте. Будем дружить!