В чем отличия веб-, UX- и UI-дизайна?

Что такое веб-дизайн?

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

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

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

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

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

Чем занимается UX-дизайнер?

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

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

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

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

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

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

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

Основным вариантом изучения поведения пользователей можно назвать A/B-тестирование. Если говорить условно, то это значит, что сегодня на сайте будет красная кнопка, а завтра — зеленая. Ту, которая принесет больше конверсии, UX-дизайнер и оставит. 

Также инструментом анализа можно назвать Customer Journey Map: когда аналитик понимает, как пользователь попал на сайт, и отслеживает его путь на нем. А MouseTracker помогает понять, на каких блоках или картинках пользователь задерживался дольше всего, на какие кнопки больше нажимал.

Читайте также

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

Тогда кто такой UI-дизайнер?

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

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

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

Если учитывать то, что функции UX и UI обычно совмещает один человек, то рост дизайнера в компании можно обозначить следующим образом: 

• Джуниор — рисует и делает так, чтобы было красиво. В основном он либо обращается к заказчику с вопросами о том, как все должно выглядеть, либо советуется с арт-директором. 
• Мидл — знает, что такое UX, понимает и умеет формировать гипотезы. Чаще всего у него уже есть свои идеи. 
• Сеньор — уверен в своих идеях, хорошо их тестирует. У него в подчинении может быть джуниор, который выполняет визуальную часть по его заданию. 
• Тимлид — глава команды, который распределяет задачи. 

Что ждет человека, решившего пойти в веб-дизайн (UX в том числе)?

Самое главное, что будет ждать человека, — множество экранов. Да, в прямом смысле. 

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

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

Заказы можно искать на фрилансе уже через 1,5–2 месяца учебы, а можно устроиться в студию, где нужны джуны. Чем больше занимаешься, тем больше растешь. 

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