Что такое UX/UI-дизайн и как быстро освоить профессию

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

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

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

По теме
Главные soft skills для айтишников: подборка гибких навыков от разработчиц
Главные soft skills для айтишников: подборка гибких навыков от разработчиц
Содержание

🎯 самые полезные лайфхаки в мини-формате обитают в нашем telegram. постим раз в день, коротко и по делу.

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

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

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

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

Изображение: Nielsen Norman Group

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

Jobs-бот найдет работу: подключайте бота в Telegram и получайте подходящие предложения

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

По теме
Куда податься цифровому кочевнику: страны, где есть визы для фрилансеров и как их получить
Куда податься цифровому кочевнику: страны где есть визы для фрилансеров и как их получить
Изображение: Adam Kalin / Dribbble

Что такое UI-дизайн

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

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

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

Изображение: Itai Bracha / Figma

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

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

Начинающие обычно работают с небольшими фирмами: чтобы устроиться в крупную компанию нужно больше квалификации и опыта. Поэтому имеет смысл одновременно прокачивать навыки UX и UI.

100+ курсов по UI- и UX-дизайну на Udemy. Отличный способ войти в IT без навыков программирования 

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

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

По теме
10 бесплатных способов войти в IT: от самых очевидных к нестандартным
10 бесплатных способов войти в IT: от самых очевидных к нестандартным
  • Знание основ digital-маркетинга. Бизнес обращается за созданием сайтов и приложений, чтобы с ними получать больше прибыли. Дизайнер должен понимать, что мотивирует людей покупать и уметь достучаться до любой аудитории. В блоге UX Collective много практически полезных статей про маркетинг в создании интерфейсов — они помогут погрузиться в контекст.
  • Понимание методов UX-исследований. Это важно не только чтобы проводить свои. Крупные аналитические компании и маркетинговые агентства тоже изучают поведение пользователей и публикуют результаты — нужно их понимать и использовать. Почитайте вкратце обо всех методах на сайте продуктовой студии Maze. А чтобы углубить знания, можно заглядывать в блог Nielsen Norman Group: там много статей и видео о том, как правильно интерпретировать результаты исследований и каких ошибок избегать.
  • Коммуникабельность и умение быстро погрузиться в продукт. Заказчики будут приходить из разных сфер: может, вам нужно будет спроектировать маркетплейс, приложение интернет-банка или онлайн-кинотеатр. У каждого бизнеса своя специфика и аудитория — нужно уметь слушать клиента и задавать правильные вопросы.
  • Владение векторными графическими редакторами. Самая популярная программа для дизайна интерфейсов — это Figma: в ней можно делать вайрфреймы, рисовать иконки и кнопки, добавлять простую анимацию. Альтернативная программа — Sketch, хотя сейчас её используют уже меньше.
  • Знание основ типографики. Шрифты — важная часть интерфейса. Дизайнер должен их правильно подбирать — так, чтобы все тексты легко читались. Есть полезная статья на Medium, которая охватывает самые азы.
  • Навыки работы с сетками. Чтобы интерфейс был единообразным, весь контент размещают по сетке. Мелкие элементы обычно выравнивают по клеточкам, напоминающим миллиметровую бумагу (это пиксельная сетка). А основные блоки выравнивают по колонкам (это колоночная сетка). Самая популярная сетка — из 12 колок. На сайте агентства Talent House можно прочитать, как она устроена и какие еще бывают сетки.
  • Понимание колористики. Выбирать хорошие цвета для интерфейса — это тоже непросто. С помощью цвета можно акцентировать главное и передавать то или иное настроение. Хороший гайд по колористике есть на сайте Toptal.
  • Умение делать адаптивные версии. Сейчас крайне редко встречаются неадаптивные сайты — обычно делают версии для десктопа, планшетов и мобильных устройств. И даже если речь о мобильных приложениях, экраны смартфонов тоже различаются — и это нужно учитывать. На сегодняшний день есть два способа подогнать интерфейс под устройство — адаптивные версии и респонсив. Познакомиться с этими методами можете в блоге Geeks For Geeks.
  • Умение работать с контентом. Для создания интерфейса требуется подбирать фотографии, иллюстрации, иконки на стоках, незначительно их изменять и перекрашивать. Фото можно искать на Unsplash и Pexels, иллюстрации и иконки — на Freepik, Fraction и Icons8. Также можно поискать плагины для Figma с готовыми картинками. Установив их, можно добавлять бесплатные графики, иконки, схемы и иллюстрации, не выходя из программы.
  • Насмотренность. Нужно внимательно всматриваться в сайты крупных компаний, подмечать хорошие композиционные приёмы, типографику, цвета. А некоторые бренды выкладывают в открытый доступ свои дизайн-системы — набор элементов и правил вёрстки с пояснениями. Это почти учебники: в них показано и рассказано, как делали интерфейс. Самая популярная дизайн-система — Material Design от Google, изучить её будет точно полезно.

С этим набором скилов уже можно работать. Список немаленький, но вполне постижимый. А если хотите обрести пару конкурентных преимуществ, вот дополнительные навыки, которые могут пригодиться:

  • Знание основ HTML, CSS и JavaScript. Программированием занимается разработчик, но круто, когда дизайнер может говорить с ним на одном языке.
  • Базовые навыки рисования — чтобы самостоятельно сделать векторную иллюстрацию или отрисовать набор иконок.
  • Умение создавать анимированные прототипы в Figma.
  • Владение Photoshop. Если в интерфейсе много фотографий и их нужно обработать, возможностей Figma может быть недостаточно. А в Photoshop, например, можно настроить пакетную обработку: чтобы одинаково обрезать и увеличить контрастность 100 фото для карточек товаров.
  • Умение самостоятельно проводить UX-исследования: выявлять проблемы в UX, правильно ставить испытуемым задачи и знать, как проверить полученные результаты.

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

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

Можно выбрать большой комплексный курс. Например, на Coursera исчерпывающая программа по UX/UI доступна бесплатно — для самостоятельного обучения по видео. Есть платные курсы с проверкой работ преподавателями — в Skvot и в Bang Bang Education.

По теме
Семь профессий, которые легко освоит веб-дизайнер
Семь профессий которые легко освоит веб-дизайнер

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

TL;DR

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

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

Почитать bubble в микро- и даже наноформате можно в instagram. подключайтесь 🤳

article widget img
«‎‎Главная ошибка собеса — подгонять ответы»‎. Рекрутеры рассказали о найме в IT
Откуда берутся IT-рекрутеры, с какими трудностями они сталкиваются в попытках закрыть позиции и какие ошибки сами совершают на интервью — полезно знать перед тем, как искать работу.
Телеграм-канал про Образо­вание, карьеру и жизнь в IT
Телеграм-канал про Образо­вание, карьеру и жизнь в IT

Читайте по теме

Дизайн
Дизайн
8

Дизайн

Как применять дизайнерский подход к работе и жизни
nerd head nerd letter

Мир содрогнулся, когда узнал, что читают разработчики по ночам...

Ничего криминального — только полезная еженедельная рассылка от Bubble. Тренды в айти, лайфхаки и советы экспертов.

Подписывайся!

Ты — котик! Проверяй почту
Нам нужен настоящий адрес эл. почты
Спецпредложения
Курсы со скидками для пользователей Bubble
Выбрать курс
Освоить за выходные
Экспресс-курсы программирования
Выбрать курс
Баг пофиксил
Курсы для QA-инженеров
Выбрать курс
Звездочка к резюме
Курсы по карьерному росту
Выбрать курс
Подписывайся на Bubble в соцсетях
Подписывайся на BUBBLE в социальных сетях
Телеграм-канал про Образование, карьеру и жизнь в IT
Только полезный контент и ничего лишнего.