UI/UX дизайн — что это и как стать веб-дизайнером?

Содержание:

  1. Что значит UI и UX?
  2. Что такое UI дизайн
  3. Что такое UX дизайн
  4. Можно ли заниматься одновременно UI и UX дизайном 
  5. Как стать проектировщиком интерфейсов?
  6. С чего начать изучение UI/UX
  7. Как создать портфолио веб-дизайнера

Что значит UI и UX?

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

UI и UX designэто два разных, но взаимодополняющих ответвления в веб-дизайне. Некоторые дизайнеры специализируются только на одном из них, некоторые могут работать сразу в 2х направлениях. UI — это “user interface”, и дословно с английского переводится как интерфейс пользователя. UX — это “user eXperience”, переводится как опыт пользователя. Очень часто эти понятия путают в меру того, что работодатели и сами могут не разделять направления заданий, а только требуют определенный набор скилов для конкретного проекта. При этом дизайнеры зачастую обладают навыками сразу двух направлений, так как невозможно разрабатывать визуальную сторону страницы, не понимая при этом как с этим дизайном будет справляться пользователь. Давайте разберем более подробно понятия UI/UX дизайна и выясним, в чем все таки их различия.

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

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

  • цветовая палитра, 
  • шрифты, 
  • изображения, 
  • кнопки,
  • иконки,
  • анимация,
  • меню, 
  • слайдеры,
  • сетки и их виды,
  • формы и их компоненты,
  • расположения объектов.

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

При работе с UI дизайном, специалист должен следить за тем, чтобы:

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

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

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

В UX входит:

  • информационная архитектура страницы, 
  • проектирование взаимодействия пользователя и всех активных элементов на странице, 
  • непосредственно варфреймы и скетчи.

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

UI/UX дизайн - что это и как стать веб-дизайнером? - фото №1

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

Можно ли заниматься одновременно UI и UX дизайном? 

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

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

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

Как стать проектировщиком интерфейсов?

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

С чего начать изучение UI/UX?

Многие начинающие дизайнеры, или те, кто только мечтает попасть в дизайн, считают, что знаний фотошопа будет достаточно, как минимум на начальном этапе, но это мнение ошибочно. Освоить нужно будет несколько программ, и основные (базовые) это:

  • Adobe Photoshop;
  • Adobe Illustrator;
  • Adobe XD; 
  • Adobe Acrobat;
  • Adobe After Effects;
  • Figma;
  • Sketch;
  • Axure;
  • Invision App; 
  • RedPen и пр. 

Не обязательно изучать все эти программы, в зависимости от проекта и направления, вам могут потребоваться только несколько из них. Также, могут использоваться и другие, всех их перечислить невозможно. Такие как Photoshop,  Figma, Sketch и программы из серии Adobe — самые востребованные. Для взаимодействия с девелоперами желательно изучить основы HTML и CSS. А еще следует понимать mobile first принцип, основы адаптивности сайтов и респонсив интерфейса, использование векторной графики.

UI/UX дизайн - что это и как стать веб-дизайнером? - фото №2

Также очень полезным будет почитать тематическую литературу. Например, настольной книгой веб-дизайнеров считается “Не заставляйте меня думать” Стива Круга. Она несет главный посыл — вы не должны заставлять пользователя думать о том, что ему нужно сделать на странице, сайте или в приложении. Далее, изучите гайдлайны гугла. Они написаны они на английском языке, но вполне возможно найти перевод. И конечно же, ищите актуальные статьи по теме, читайте тематические форумы и обсуждения, собирайте лайфхаки. 

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

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

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

Прежде чем приступить к созданию портфолио нужно много много практиковаться, чтобы начать чувствовать себя достаточно свободно в работе. Самым простым советом будет повторять за профессионалами и оттачивать навыки, но эти “копирки” не годятся для портфолио, так как это будет считаться попросту воровством. На этом этапе вы тренируетесь и прикидываете каким вы хотите сделать ваше личное портфолио. Найдите красивые сайты или свободные лендинги и повторяйте за макетом, пиксель в пиксель, каждую обводку, отступы, шрифт, и т.д — это разовьет чувство меры и даст понимание стиля. Есть, например, отдельные платформы-портфолио для веб-дизайнеров, такие как Behance, Dribbble и Awwwards, где вы можете черпать вдохновение. 

После этого можно начинать рисовать что-то свое. Например, найти сайт с неудачным дизайном и придумать как его улучшить. Либо придумать свой продукт и создать страницу с нуля исходя из вашего видения. Когда появится больше уверенности и знаний, можно начинать регистрироваться на сайтах для фрилансеров, залить портфолио своих(!) работ и пытаться начинать брать заказы. Начинайте с небольших заказов (логотипы, иконки, небольшие лендинги, приложения и т.д)  и постепенно наращивайте портфолио. Можно также взять интересный проект бесплатно, для портфолио. Не беритесь сразу за большие и дорогостоящие проекты, так как вы можете потерять много времени и не оправдать ожидания заказчика. Когда вы сможете похвастаться 5-6 хорошими проектами, их уже можно будет оформлять в полноценное портфолио, на том же Behance или Dribbble.

UI/UX дизайн - что это и как стать веб-дизайнером? - фото №3

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

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

Веб-дизайн — безумно интересное направление для тех, кто любит вносить творчество в свою работу. Читайте, изучайте, пробуйте и у вас все получится!

 

Все статьи
Контакты
/