9 шагов как стать UX/UI дизайнером, если нет образования и опыта работы. | by Sati Taschiba
= Dare to dream BIG ⭐=
В последнее время ко мне очень часто пишут ребята с приблизительно одинаковыми вопросами:
- Что можно посоветовать тому, кто хочет пройти подобный путь, как я, что рекомендую посмотреть, почитать, послушать и изучить?
- Проходила ли я какие-либо курсы и если да, то как они мне помогли?
- Какие навыки требуют в компаниях как Wargaming и пр.
- Какую роль сыграло портфолио? Какие работы в нем преобладали?
- Где найти работу (если нет ни образования ни опыта работы)?
Поэтому я решила посвятить этому вопросу целый пост, и описать как я начинала работать дизайнером и как, пройдя уже весь этот путь, я советую другим начать свою карьеру в области дизайна.
По специальности я графический дизайнер и работала с такими компаниями как Montblanc, Dunhill, Saks Fifth Avenue и многие другие. Итого у меня в общем около 10 лет опыта работы в сфере дизайна.
Спустя 7 лет работы графическим дизайнером я решила переквалифицироваться в дизайнера с уклоном на web-дизайн, говорю просто о вебе, так как в то время не было таких делений как UX, UI и другие. (Причиной смены сферы деятельности был интерес к новому направлению в дизайне, большей свободе выражения своих идей и как бы это не звучало типично- больший спрос на рынке и большие перспективы в долгосрочном плане).
Напишу сразу, что у меня, как и у многих из вас сейчас, кто читает эту статью не было опыта в работе над веб и мобильным дизайном. Единственное преимущество, что у меня было- это то, что я боле-менее владела фотошопом. У меня не было подобающего портфолио и опыта. Но спустя некоторого времени подготовки, я все же нашла первую работу, потом другую, потом следующую, пока меня не заметили в Wargaminge и не пригласили на позицию Senior Visual Designer.
P.S: Если вам интересно как я устроилась на работу в Германии и мои наблюдения о жизни и работе дизайнера в Берлине, добро пожаловать на мой канал в Youtube — Design Lead.
Ниже скидываю свое портфолио👇.
И далее читайте, как у меня все это происходило, шаг за шагом и какой алгоритм действий я бы предприняла на вашем месте:
1. Поймите направления в дизайне
Самое ключевое для вас сейчас понять чем именно вы хотите заниматься? Многие мне пишут: “Хочу рисовать иллюстрации” и человек сам не знает, что за иллюстрации? Мультики или иконки или анимацию? Вы сами должны выбрать для себя то, что вы хотите. Никто не сделает это лучше вас.
- Нравится работать над визуальной частью дизайна?- то вам в визуальные дизайнеры (UI).
- Нравится продумывать саму логику работы продукта с пользователем, делать интерфейс удобным, анализировать, тестировать? — то вам в дизайнеры пользовательского опыта (UX).
- Нравится делать и первое и второе, и углубляться глубоко в продукт, полностью быть хозяином продукта, знать и улучшать его — то вам в продуктовые дизайнеры.
- Нравится верстать журналы, листовки, флайеры и другие POS-материалы, придумывать айдентику компании — то вам в графические дизайнеры .
- и так далее… Есть и универсалы, которые знают всего понемногу. Начните с того, что бы выяснить, какая специализация вас интересует. Направлений очень много (!) ищите, то, что будет нравится именно вам и вы сможете посвятить этому уйму времени!
2. Изучите инструменты для работы
Я думаю, что далее объяснять не нужно. Как работать, если еще не освоили нужной программы? Вам повезло, если вы новичок, то вам не прийдется переучиваться с Adobe Photoshop и Illustrator, переходите сразу на Sketch или Figma. Почитайте в чем их различия, подумайте, что вы бы хотели изучить. Лайфхак от меня, если уже выбрали то направление в дизайне, по которому хотите идти, зайдите не поленитесь на Headhunter, Linkedin или любую другую платформу по поиску работ и посмотрите, что ищут работодатели, какие программы вы должны знать и пляшите уже от этой информации.
Здесь ниже свежие программы, которые могут пригодиться в работе:
- Sketch для дизайна интерфейса
- Figma для дизайна интерфейса с возможностью совместной работы
- Balsamiq для создания макетов
- Adobe XD для дизайна интерфейса, создания прототипов
- Invision App для создания прототипов и совместной работы
- RedPen для совместной работы
3.
Начинайте обращать внимание на дизайн
До того как стать веб-дизайнером я совершенно не обращала внимание на структуру и содержание сайтов и мобильных приложений, не видела используемые цвета и шрифты, не замечала составляющие. Если вы решили стать дизайнером интерфейсов начинайте обращать внимание на всё и задавать себе вопросы: а почему они поставили логотип сюда, а не сюда? А почему кнопка одна и в конце, а не в начале? Изучите из чего обычно состоит сайт? (я говорю про элементарные вещи как header, body и footer). Задавая себе вопросы и отвечая на них, прокручивая варианты в голове, вы начнете не просто использовать сайт, а оценивать его с профессиональной точки зрения.
4. Окружите себя дизайном
Советую погрузиться полностью в дизайн, каждый день смотреть чужие работы. Есть миллион ресурсов, вот те, чем пользуюсь я:
- Behance платформа-портфолио
- Dribbble платформа-портфолио
- Awwwards платформа-присуждающая звание лучших в веб-дизайне
Такая практика просмотров чужих работ и портфолио поможет вам войти в колею дизайна, видеть, что делают другие (так же в хороших проектах есть описания работы и описания принятия решений), вы будете в курсе модных тенденций, будете вдохновляться.
5. Смотрите и повторяйте за другими
У меня часто спрашивают как начать работать веб-дизайнером, не имея опыта и образования. Начните тупо повторять и копировать чужие работы, те сайты, которые вам понравились. Вот сядьте, возьмите сайт, что хотите скопировать и скатайте весь сайт. Этот совет я даю, не для того, чтобы вы потом показывали чужую работу у себя портфолио, нет! А для того, чтобы набить руку и хоть как-то начать! Воспринимайте это как урок. У меня в художественной школе было занятие история искусств, там мы проходили разные направления в искусстве, разных художников и даже были занятия по копированию картин или стиля, потому что не попробовав чужое, вы не найдете своего.
6. Найдите менторов и станьте менторами
У профессионалов очень мало свободного времени, тем более на новичков. Поэтому не буду давать такой совет, как найдите себе жертву и нудите ей, чтобы учила вас дизайнить. Я вот честно еще не встречала людей, которые готовы просто так помочь в смысле карьеры.
Это очень много занимает времени, сил и нервов. А я говорю о менторах, тех дизайнерах, кто делится своим опытом в блогах, в влогах, в соц.сетях. Найдите топовых дизайнеров кто вам нравится и подпишитесь на них, следите за тем, что они читают, на какие конференции ездят, какие новые программы изучают, таким образом без особых усилий вы будете в курсе дизайн событий и новинок. Вот список дизайнеров (кого сразу вспомнила) чьи блоги и статьи я читаю:
- Yury Vetrov дизайн директор @ Mail.Ru. Пишет о UX дизайне, создатель ежемесячного дизайн-дайджеста (можно найти в фб), ежедневно публикует тучу новых штук и новинок в дизайне
- Tobias van Schneider был дизайнером Spotify. Еще делает кучу интересных вещей, пишет свой блог (где интересно почитать рубрики), даже кроссовки шьет
- Alexander Kirov для мотивации почитайте его статьи про то как он нашел работу и уехал в США
- Julie Zhuo вице-президент продукт дизайна facebook. Пишет свой блог о дизайне и о жизни.
Вы новичок, но можете и сами стать ментором.
Например начните писать блог, про свои первые шаги в индустрии дизайна. Или, если у вас есть друг, можете рассказывать ему, что интересного вы узнали или нашли. Пересказывание недавно приобретенных знаний поможет наиболее глубоко изучить тему и лучше запомнить материал.
7. Пройдите курсы
Многие задают вопрос нужны ли курсы? Есть разные типы личностей, кому-то интереснее и удобнее самому дома копаться в новой профессии, смотреть видео-ролики на ютубе, читать книжки и статьи. А кому-то нужно дизайн окружение и атмосфера. Если вы второй тип плюс у вас есть финансовые средства и время на прохождение курсов, то я скажу- да! Пройдите курсы! — это поможет. Только выбирайте курсы основательно, просмотрите комментарии и отзывы, посмотрите насколько популярна школа. Вот например список, что было в последнее время на слуху (сама эти курсы я НЕ проходила):
8. Читайте
Я не буду здесь описывать миллион книг и статей, что нужно прочитать, чтобы стать дизайнером, потому что в интернете полно информации на эту тему, стоит лишь поискать.
Напишу лишь парочку книг, что меня вдохновили и возможно и вам они дадут ускорение:
“Выйди из зоны комфорта. Измени свою жизнь. 21 метод повышения личной эффективности” — Брайан Трейси
Рекомендую книгу всем, кто любит саморазвитие. В книге очень четко описаны методы собственной дисциплины, постановления целей, способов и мотивации, как не отвлекаться и упрямо идти к своей цели, а тем самым и к успеху. Для меня было немного воды, когда автор повторяется и фиксирует свою мысль и все выводы в конце каждой главы, но возможно кому-то такая подача наоборот поможет запомнить полезную информацию. Для себя я вынесла кучу уроков, как точнее определить свои цели, быстрее взяться за план действий и самое главное начать действовать, не смотря ни на что! Очень мотивирующая книга, легко читается, отличный автор.
“Сожги свое портфолио! То, чему не учат в дизайнерских школах” — Майкл Джанда
Эта книга даст гораздо больше для успешной карьеры в дизайне, чем профильное дизайнерское образование или впечатляющее портфолио.
Вы познакомитесь с реалиями дизайнерского бизнеса, существующими практиками и неписаными правилами ведения дел, о которых большинство дизайнеров, фотографов и представителей других творческих профессий узнают, только окунувшись в реальную работу. Автор книги, Майкл Джанда, владелец собственной дизайн-студии в утонченной юмористической манере делится сотнями советов, выстраданных за 10 лет, которые он провел в дизайнерском бизнесе.
“Кради как художник. 10 уроков творческого самовыражения” — Остин Клеон
Не нужно быть гением, достаточно быть самим собой! Эта книга родилась из лекции, с которой Остин Клеон выступил в одном Нью-Йоркском университете. Он дал студентам десять советов, которые хотел бы получить сам, когда был начинающим художником.
В мире нет ничего оригинального, поэтому не отвергайте чужое влияние, коллекционируйте идеи, обдумывайте их еще раз, аранжируйте по-новому в поисках собственного пути. Следуйте за своими интересами, куда бы они вас ни завели, и предоставьте свободу своему творческому «я»!
“Покажи свою работу! 10 способов сделать так, чтобы тебя заметили” — Остин Клеон
В своем бестселлере «Кради как художник» Остин Клеон показывал читателям, как развить креативность с помощью «кражи» идей.
В этой еще более важной книге он показывает, как сделать следующий ключевой шаг — стать известным. Используйте свою сеть знакомств, вовлекайте других в творческий процесс и позволяйте красть свои идеи. Полная иллюстраций, статей, цитат и примеров, эта книга содержит 10 правил («Вам не обязательно быть гением», «Делитесь чем-то небольшим каждый день»), которые помогут вам стать смелым, продуктивным, открытым и известным.
UX/UI – что это? Разбираемся в терминах
В юзабилити одинаково важны и UX, и UI, которые используют широкий арсенал инструментов для достижения нужного результата.
| UX | UI |
Аналитика и исследование пользователей:
Прототипирование:
|
Интерфейс сайта и его составляющие:
|
В UX все определяют аналитика и прототипы, а в UI – базовые правила юзабилити и UX.
В аналитике и сборе данных UX сходен с DDD.
Тренды
Увлечение UX/UI породило несколько трендов, которые влияют и на дизайн, и на дизайнеров:
Упрощение визуальной части интерфейсов. Дизайнеру теперь не нужно тратить время на отрисовку рельефной кнопки и поиск хорошо считываемых образов. Современный пользователь без труда понимает условные обозначения. Уже не нужно объяснять, что цветной прямоугольник – это кнопка, а три горизонтальные полоски – меню.
Усложнение самого дизайна как дисциплины. Интерфейсы упростились, но сам дизайн стал сложнее и многослойнее. Сейчас сайты представляют собой комплексные системы с множеством разных элементов: формами заявки, личным кабинетом, подписками и онлайн-консультантами. Нужно четко продумывать путь пользователя на сайте, чтобы он не заблудился, быстро находил нужные разделы, а в идеале – совершал целевые действия.
Пример хорошего UX.
Картинка показывает, какие данные нужно ввести и как это будет выглядеть. Вводите данные, нажимаете на единственную кнопку и переходите к следующему шагу.
Появление профессии UX/UI дизайнера. Рынок наводнили разномастные узкие специалисты с приставкой UX/UI. Крутой UX/UI-дизайнер видит все стороны процесса и умеет хорошо делать и аналитику, и дизайн. Но в реальности каждый, кто наслышан об этих терминах и хоть немного имел дело с сайтами, стремится обозвать себя UX/UI.
Появление множества специализированных инструментов для веб-дизайна: Sketch, Figma, Readymag, Framer и другие. Это облегчило и ускорило работу дизайнерам.
Figma в действии
Вывод
Веб-дизайн прошел долгий путь становления и развития, и в итоге переродился в UX/UI. Сейчас это единственная форма существования сайтов, основные принципы которой – опора на потребности пользователей и юзабилити.
С появлением UX/UI работа дизайнера не стала легче.
Упростилась только внешняя сторона. Внутри же все гораздо сложнее. UX/UI ввели ряд стандартов и методик, которые можно и нужно брать на вооружение при работе над проектами.
Теперь недостаточно просто работать в фотошопе и уметь рисовать макеты. Сильный дизайнер понимает запросы людей и делает дружелюбные интерфейсы.
Материалы по теме:
Профессия UX UI дизайнер. Ui Ux дизайн. Ux дизайн. Ui дизайн
Курс UX UI дизайнер
Добро пожаловать на курс «UX UI дизайнер»!
Курс дает знания позволяющие освоить одну из самых прибыльных профессий на рынке UX UI дизайнера и начать строить свою карьеру, работаю в крупной компании, стартапе или удаленно из любой точки планеты земля.
СОДЕРЖАНИЕ КУРСА:
ГЛАВА 1: UX
1.1. ЧТО ТАКОЕ UX.
1.2. КАК ПРОВОДИТЬСЯ UX ИССЛЕДОВАНИЕ
1.3. ИНСТРУМЕНТЫ ДЛЯ ИССЛЕДОВАНИЯ UX
1.4. МЕТОД UX-ИССЛЕДОВАНИЙ: ФОКУС-ГРУППЫ
1.
5. ЧТО ТАКОЕ UX СТРАТЕГИЯ
1.6. ГИД ПО СОЗДАНИЮ ЭФФЕКТИВНОЙ UX СТРАТЕГИИ
1.7. 5 УРОВНЕЙ ОПЫТА ВЗАИМОДЕЙСТВИЯ
1.8. КАК РАЗРАБОТАТЬ ПОЛЬЗОВАТЕЛЬСКОЕ ПОВЕДЕНИЕ
1.9. ЧТО ТАКОЕ РЕКЛАМНЫЙ ИНСАЙТ И КАК ПРИДУМАТЬ ХОРОШИЙ ИНСАЙТ
1.10. КАК НАПИСАТЬ ПОЛЬЗОВАТЕЛЬСКИЙ̆ СЦЕНАРИЙ ДЛЯ ИНТЕРФЕЙСА САЙТА ИЛИ ПРИЛОЖЕНИЯ
1.11. КАК РАБОТАТЬ С WIRE FLOW
1.12. A / B ТЕСТИРОВАНИЕ
1.13. ОФОРМЛЕНИЕ UX СТРАТЕГИИ
ГЛАВА 2: UI
2.1. ОСНОВЫ UI
2.2. ТИПЫ UI
2.3. АНИМАЦИЯ UI ЭЛЕМЕНТОВ
2.4. КАК АНИМИРОВАТЬ UI ИНТЕРФЕЙС
2.5. 6 ПРАВИЛ СОЗДАНИЯ ХОРОШЕЙ АНИМАЦИИ В UI
2.6. КАК ПОДОБРАТЬ РЕФЕРЕНСЫ ДЛЯ ДИЗАЙНА
2.7. ЭТАПЫ СОЗДАНИЯ ИНФОГРАФИКИ
2.8. 10 ШАГОВ ДЛЯ СОЗДАНИЯ ИДЕАЛЬНОЙ ИНФОГРАФИКИ
2.9. РЕСУРСЫ ДЛЯ UX UI ДИЗАЙНЕРА
2.10. ТЕКСТ В UX И UI
2.11. ЧТО ТАКОЕ BACKEND И FRONTEND
ГЛАВА 3: WORKFLOW
3.1. ПОЧЕМУ ДИЗАЙНЕР И РАЗРАБОТЧИК ДОЛЖНЫ РАБОТАТЬ ВМЕСТЕ
3.2.
КАК УБЕДИТСЯ, ЧТО КОМАНДА РАЗРАБОТКИ ПОНИМАЕТ ДИЗАЙН
ГЛАВА 4: ФИШКИ КРУТОГО UX ДИЗАЙНЕРА
4.1. ПСИХОЛОГИЯ UX ДИЗАЙНА
4.2. 8 UX СЕКРЕТОВ
4.3. ЧТО НУЖНО, ЧТОБЫ БЫТЬ ВЕДУЩИМ ДИЗАЙНЕРОМ В ТОП-СТАРТАПЕ
4.4. 5 ОСНОВНЫХ ОШИБОК СТАРТАПОВ В ДИЗАЙНЕ И КАК ИХ ИЗБЕЖАТЬ
4.5. КАК ДИЗАЙНЕРУ СДЕЛАТЬ ПОРТФОЛИО
4.6. КАК ПРЕЗЕНТОВАТЬ ПРОЕКТ
ГЛАВА 5:
5.1. КАК УСТРОИТЬСЯ В КРУПНУЮ КОМПАНИЮ
5.2. КАК РАБОТАТЬ УДАЛЕННО ИЗ ДОМА В КРУПНОЙ КОМПАНИИ
ГЛАВА 6:
6.1. ТРЕНДЫ В ДИЗАЙНЕ
ГЛАВА 7:
7.1. ВЫВОД
После того как вы закончите курс «UX UI дизайнер» вы будете знать:
-
Что такое UX
-
Как провести UX исследование
-
Какие инструменты использовать в UX исследовании
-
Что такое UX стратегия
-
Как разработать пользовательское поведение
-
Что такое рекламный инсайт и как придумать хороший инсайт
-
Как написать пользовательский сценарий для интерфейса сайта и приложения
-
Как работать с WireFlow
-
Как проводить A/B тестирование
-
Как оформить UX стратегию
-
Что такое UI
-
Как анимировать UI элементы
-
Как анимировать UI интерфейс
-
Как подобрать референсы для дизайна
-
Что такое backend
-
Что такое frontend
-
Почему дизайнер и разработчик должны работать вместе
-
Как стать крутым дизайнером
-
Как создать дизайнерское портфолио
-
Как презентовать свой дизайнерский проект
-
Как найти работу дизайнеру
-
Как работать дизайнером удаленно
UX/UI дизайн — правильный подход к проектированию интерфейсов
Сейчас модно писать про политику или как мыть х*й, но мы в этом не разбираемся, поэтому вас ждёт очень полезная статья про современный дизайн.
UX/UI дизайн — это проектирование любых пользовательских интерфейсов (сайт, приложение, crm-система или иное прикладное ПО), в которых удобство использования так же важно, как и дизайн-оформление. Но нам ближе тематика сайтов и приложений, поэтому расскажем на их примере.
UX – в переводе с англ. «Опыт пользователя».
UI – «пользовательский интерфейс»
Можно заметить, что современные сайты становятся менее нагруженными по оформлению. Приоритет отдается по представлению информации и действиям на сайтах. Это связано в том числе с эволюцией способов просмотра и взаимодействия.
Маркетинг
Прямая обязанность UX/UI-дизайнера – продажа товара или услуги через интерфейс. На основании результата работы дизайнера пользователь решает купить ли этот товар, отправить ли заявку, подписаться на новости на данном сайте или закрыть его через 2-3 секунды. Естественно, неудобный, нечитаемый или недоработанный по функционалу проект имеет меньше шансов на успех среди пользователей.
А следовательно, низкие продажи и проблемы с поисковой выдачей – спутники проекта.
Цель UX/UI-специалиста – довести пользователя до какой-либо конечной точки взаимодействия. Формирование целей и путей их достижения – один из ключевых моментов при разработке современных проектов.
Коротко и наглядно о работе UX/UI дизайнера:
Данная тема относится и к дизайну окружающих нас вещей, но вернёмся к сайтам 😉
Удобство
Например, ещё лет 15 назад никто и представить не мог, что с мобильного телефона можно будет оплатить билеты на самолёт, заказать еду, одежду, забронировать отель, оплатить квитанции за ЖКХ и получить любую информацию в считанные секунды. Сайты и интерфейсы прикладных программ использовались только на стационарных компьютерах, а приложений ещё не существовало. Мониторы имели небольшое разрешение, однако любое пустое место все старались заполнить плашками, картинками или фонами.
Мы были не исключением.
В начале 2010 стали появляться мобильные версии сайтов, сделанные отдельно под смартфоны и планшеты.
Как правило, они урезали функционал основного сайта. В большинстве случаев хотелось вернуться на полноэкранную версию. Да и администрирование отдельной версии сайта достаточно трудоёмкий процесс. А на планшетах вообще было непонятно что показывать – мобильная версия разъезжалась и смотрелась как недоразумение, а основной сайт был мелковат для чтения или заказа. Мы всячески открещивались от мобильных версий и не разработали ни одну.
Но через несколько лет мобильным версиям пришла на смену адаптивная вёрстка, которая не урезала функционал, а собиралась под любое разрешение экрана.
На сегодняшний день существует огромное количество разрешений экранов смартфонов и планшетов, ноутбуков и прочих гаджетов. Более 50% посетителей сайтов заходят на них через мобильные устройства. А это значит, что сайт должен быть не только удобным, но ещё и лёгким для загрузки, соответственно графика должна не мешать.
Весь накопленный опыт UX-дизайнер должен отразить при проектировании и прототипировании сайта.
UI-дизайнер должен графически оформить проект.
Если всё ещё непонятно что же такое UX/UI дизайн, то возьмите в руки ваш смартфон. Найдите как отключить push-уведомление в каком-либо приложении на вашем телефоне. Это займет у вас несколько секунд зайти в настройки и снять галочку. Это и есть интуитивно-понятный интерфейс, разработанный десятками специалистов, чтобы вам было удобно пользоваться вашим гаджетом.
Опыт
Легко ли разработать успешный интерфейс сайта или приложения? Скорее нет, чем да. На момент проектирования мы стараемся использовать весь свой накопленный за 11 лет опыт, однако результат можем оценить только после сдачи проекта и привлечения пользователей. Удобные и современные сервисы для анализа поведения посетителей подскажут какие именно ошибки были допущены при разработке или что следует улучшить. UX/UI – это не результат, а постоянный процесс по улучшению взаимодействия с конечным продуктом.
основные понятия дизайна цифрового продукта
В июне 2017 года корреспонденты Теплицы будут подробно рассказывать о двух формах дизайна цифровых продуктов: опыта пользователя (UX – User eXperience) и пользовательских интерфейсов (UI – user interface).
Также мы поговорим о дизайн-мышлении, юзабилити сайта, человек-ориентированном дизайне (human-centered design), сервис-дизайне (service design) и посоветуем, как улучшить сайт некоммерческой организации. В этой статье мы разберем основные понятия, которые стоит знать при изучении UX и UI дизайна.
В эпоху цифровых технологий понятие «дизайн» сильно изменилось. Теперь в это понятие входит не только графический дизайн, но и новые формы дизайна цифровых продуктов. Их задача в том, чтобы создать дружественные по отношению к пользователю интерфейсы. Главные требования – практичность, интуитивная понятность и удобство. Именно UX и UI дизайн призваны выполнять эти требования.
UX (User eXperience) дизайн – комплексный подход к взаимодействию интернет-пользователя с интерфейсом сайта, мобильного приложения или программы. Он призван разработать максимально удобный и легкий для восприятия продукт для целевой аудитории. UX дизайн отвечает за то, как продукт функционирует и какие эмоции вызывает у пользователей.
Для пользователя крайне важно на интуитивном уровне изучать ваш сайт. Но если он непонятен для него, вы можете потерять читателя.
UX включает в себя разные компоненты. Например, информационную архитектуру, проектирование взаимодействия, графический дизайн и контент. При UX дизайне нужно изучать поведение пользователей, разрабатывать прототипы поведения и проводить тестирования. Всей этой работой занимается UX-дизайнер.
UI (User interface) дизайн – узкое понятие, которое включает набор графически оформленных инструментов. Например, кнопки, меню, слайдеры. UI дизайн призван помочь пользователю наладить взаимодействие с сайтом или программой.
UI дизайнер отвечает за то, как выглядит сайт или мобильное приложение. Он в ответе за то, чтобы элементы интерфейса были грамотно организованы, структурированы и взаимосвязаны, были сгруппированы, выполнены ровно и в едином стиле.
Термины в UX дизайне
1.
Доступность (Accessibility) – деятельность по улучшению доступности продуктов и интерфейсов. Это набор практик, который делает интерфейс доступным для широкого круга лиц, в том числе и для людей с ограниченными возможностями здоровья. Для этого используется сбалансированная цветовая гамма, альтернативное управление клавиатурой, специальная разметка на страницах, адаптированные версии и другие инструменты.
2. Контекст анализа использования (Context of Use Analysis) – сбор и анализ подробной информации о потенциальных пользователях. Для этого проводятся интервью, семинары, опросы, работа с фокус-группами.
3. Легко обучаемый (Easy to Learn) – аспект удобства использования. Он призван облегчить пользователям взаимодействие с интерфейсом, при этом потратив минимальное время на его изучение.
4. Эффективность, производительность (Efficiency) – своего рода коэффициент полезного действия, важный атрибут юзабилити сайта.
Принцип таков: чем меньше пользователь занял времени и чем меньше приложил усилий, чтобы найти какой-либо элемент на сайте, тем эффективнее продукт.
Еще по теме: 60+ полезных инструментов и ресурсов для дизайнеров
5. Фасилитатор (Facilitator) – человек, который обеспечивает коммуникацию в группе разработчиков. Он улаживает конфликтные ситуации, следит за проведением встреч и помогает участникам сконцентрироваться на целях. По сути это проводник, который помогает всей команде достичь наилучшего результата, найти общий язык, сформулировать конечную цель. В процессе работы он создает комфортную атмосферу.
6. Фокус-группа (Focus Group) – группы потенциальных пользователей вашего продукта, которые формируются, чтобы получить от них обратную связь. Мнение фокус-групп важно на этапе планирования продукта, сбора всех требований к нему. Участники высказывают свое мнение о прототипах, задачах, стратегиях, выбранных для создания продукта.
7. Информационная архитектура (Information Architecture) – процесс организации информации, который включает структуру, дизайн, макет и навигацию. Он позволяет сотрудникам и пользователям находить нужную информацию и управлять ею. Например, информационная архитектура определяет размещение элементов на странице, их навигацию, связь самих страниц.
8. Интерфейс (Interface) – неотъемлемая часть любого продукта. Это объект, среда, набор инструментов, с помощью которых пользователь взаимодействует с готовым продуктом. Например, кнопки, галочки, текстовые поля, подсказки, переключатели на сайте. По сути, интерфейс ведет за собой пользователя.
9. Совместная разработка (Participatory Design) – процесс, в который включены разработчики, представители бизнеса и пользователи. Все они работают вместе для создания решения. Например, разработчики активно привлекают пользователей к процессу проектирования, чтобы быть уверенными в востребованности функций продукта.
10. Плюралистический подход к юзабилити (Pluralistic Usability Walkthrough) – метод тестирования юзабилити, который используется для оценки дизайна на ранней стадии. В этом тестировании участвуют пользователи и разработчики интерфейса.
11. Прототип (Prototype) – первоначальный дизайн интерфейса или продукта, который нужен для получения отзывов от пользователей, участников проекта и заинтересованных специалистов.
12. Раскадровка (Storyboard) – способ иллюстрирования взаимодействия человека и продукта в описательном формате. Раскадровка может состоять из серии рисунков, эскизов и описания к ним. Она рассказывает историю о том, как пользователь тестирует и оценивает продукт.
Термины в UI дизайне
1. Аффорданс (Affordance) – элемент, который описывает, куда кликают пользователи. Не всю информацию на сайте можно передать словами, именно аффордансы стрелок помогают пользователю понять, что будет, если он нажмет на какую-либо кнопку.
Правильное использование этих элементов поможет улучшить интуитивность интерфейса.
2. Каскадные таблицы стилей (Cascading style sheets, CSS) – так называется формальный язык. Он используется для описания внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML. CSS используется, например, для того, чтобы задать шрифт, цвет и расположения отдельных блоков на веб-страницах.
Еще по теме: Александр Христолюбов: дизайн-мышление – методология поиска новых решений
3. Система управления контентом (Content management system, CMS) – программа, которая позволяет совместно создавать, редактировать и управлять контентом на сайте.
4. Анимация (Animation) – моделирование движения путем быстрого появления изображений в последовательности.
5. Навигация, меню (Navigation) – это форма, система ссылок, которая позволяет пользователю перемещаться по сайту либо приложению.
6. Пустое пространство (Negative Space) – часть страницы, которая не содержит текста или изображения.
7. Метки (Labels) – названия для кнопок и других элементов для навигации по сайту.
8. Путь (Path) – маршрут, который проходит пользователь на веб-сайте.
9. «Что видишь, то и получишь» (What you see is what you get) – это свойство веб-интерфейсов или программ, в которых макет выглядит похожим на конечную продукцию и может быть представлен в виде печатной версии или презентации. Такую функцию выполняют «визуальные редакторы».
Основные термины UX дизайна перечислены в справочнике Usability Body Knowledge, а UI – на образовательном сайте Usability.gov
В чем отличие UI от UX дизайна
Думаю, данный вопрос: “В чем разница между UX и UI дизайном?”, постоянно возникает в головах начинающих веб-дизайнеров, веб-программистов, предпринимателей и маркетологов.
А ведь и действительно, в своей практике мы встречали многих ребят, которые путают данные понятия или все приписывают к UX дизайну, так как он постоянно на слуху.
Для начала, чтобы разобраться в вопросе, нам с вами нужно дать определение UX и UI дизайну.
Что же такое UX
Я пользователь! Я так вижу! или UX.
Сам термин расшифровывается как User Experience — что дословно переводится как “Пользовательский опыт”.
Начало 90-х является по настоящему прорывным для пользовательского опыта и изучения поведения в сети. Появление PC у большей части людей в мире, распространение всемирной паутины — все это позволило начать изучать поведение людей и их взаимодействие с it-продукцией.
Термин “Пользовательский опыт” ввел в индустрию в 1995 году Дональд Норман. Обсуждая свое время работы в Apple, он рассказал, как его команда стремилась сформировать интерфейс не только программного обеспечения, но и всего, что создавало этот опыт (имеются в виду эмоции):
“Я придумал этот термин, потому что считал фразы “человеческий интерфейс” и “удобство использования” слишком узкими.
Я хотел охватить все аспекты опыта человека в системе, включая промышленный дизайн, графику, интерфейс, физическое взаимодействие и руководство.”
В современности данный термин чаще применим к дизайну веб-приложений, мобильных приложений и программ на PC и Mac.
Что же такое UX-дизайн на самом деле
UX-дизайн — проектирование интерфейса, который основывается на исследованиях поведения пользователя и его опыта (работы с будущим интерфейсом).
Своей целью UX-дизайн ставит получение пользователем сайта (приложения, программы), того, за чем он пришел. UX не ограничивается только посещением сайта, его цель более глобальна — закрыть потребность (цель) пользователя.
В реальности пользовательский опыт формируется из многих критериев после работы с приложением. Например: Пользователь отправил заявку, но не получил подтверждение в виде смс или уведомления с приложения, даже менеджер не перезвонил — это все говорит о проблемах с UX.
Если пользователь без затруднений прошел по всей воронке продаж: Заход на сайт — Нашел товар — Оформил заказ — Получил подтверждение оформления — Проследил доставку — Получил заказ. Это и есть хороший UX дизайн.
Другими словами, UX — это впечатления от взаимодействия с интерфейсом программы, поэтому мы можем увидеть, что, несмотря на большое количество однотипных программ, в лидеры выбиваются 2-3, которыми чаще пользуются.
Сам опыт пользователя зависит от множества факторов: графики, архитектуры, текста и отклика программы на действия клиента.
Поэтому, по большей части, UX-дизайн основывается на изучении привычек, разработке прототипов и алгоритмов поведения человека. Ну и, конечно, тестирование, ведь все гипотезы должны быть проверены.
Что такое UI или «Пользовательский интерфейс»
User Interface (Пользовательский интерфейс) — это способ взаимодействия пользователя и приложения. Данная тематика активно развивалась, сначала в разработке первых программ.
На данный момент интерфейс может быть тактильным, голосовым, аудио и так далее.
UI — это процесс визуализации прототипа, который разработали на основе поведения пользователя и исследования целевой аудитории (на этапе проектирования UX).
Своей целью UI-дизайн ставит эстетику интерфейса продукта на первое место. Например, как выглядит меню, поиск, кнопки, анимация переходов и другие элементы.
Я думаю, вы уже заметили, что UX дизайн больше похож на науку, где в основном считаются цифры и закономерности. UI в своем проявлении больше похож на искусство, где фокус смещается на цвета, шрифты, анимацию элементов. Но это все об одном.
Зачем тогда разграничили UX и UI?
Все дело в прогрессе! В мире, где пользовательский опыт растет, а его тенденции меняются быстро, узкие специальности стали ключом к улучшению продукта, так как в тематику нужно углубляться гораздо глубже.
Поэтому чаще в компаниях (в вакансиях) видно две позиции: UX-дизайнер и UI-дизайнер.
Где один проектирует интерфейс, а другой делает его приятней. Они друзья, которые работают над тем, чтобы было красиво и удобно.
Кратко: в чем же отличие UI и UX?
Разница между UX и UI — в том, что UX-дизайнер планирует, как пользователь будет взаимодействовать с интерфейсом, какие шаги ему нужно предпринять, чтобы достичь цели. А UI-дизайнер продумывает, как будут выглядеть эти шаги и путь к цели в целом.
UX и UI дизайн — что это?
Если вы желаете развиваться в области дизайна или пока только подумываете о том, чтобы заняться дизайном (design), вы просто обязаны знать такие понятия, как UX и UI. Собственно говоря, об этом написано уже довольно много, но иногда, к сожалению, слишком сложно и не очень понятно. В этой статье мы попробуем рассказать о том, что такое UI-дизайн и чем он отличается от UX-дизайна. Сделаем это простыми словами и без интегралов)).
UX/UI-дизайн: объясняем на пальцах
Давайте начнём с аббревиатуры UX, которая расшифровывается, как User Experience. Дословный перевод — опыт пользователя. Задача UX-дизайна — решить вопросы функциональности, обеспечив удобство пользования ресурсом, инструментом, сервисом. И относится это не только к ИТ, но и к любой другой области. Если UX-дизайн сайта продуман, пользователю удобно взаимодействовать с ним, выполнять поиск, переходить по ссылкам и разделам и т. д.
К примеру, UX-дизайн шариковой ручки характеризует следующие её свойства:
— насколько хорошо пишет;
— надолго ли хватает чернил;
— помогает ли ручка формировать правильный почерк;
— удобна ли она в транспортировке;
— есть ли защитный колпачок, автоматическая ли она и т. д.
В общем, как вы уже догадались, речь идёт о том, насколько хорошо наш продукт решает задачи, для которых предназначен, и, что не менее важно, понятен ли продукт пользователю.
Что же, теперь поговорим про UI-дизайн. Аббревиатура обозначает User Interface, то есть пользовательский интерфейс. Этот вид дизайна определяет форму, цвет, размер и расположение элементов и заголовков, тип шрифтов и т. д. По факту, речь идёт о визуальной составляющей. Задача UI — выделить некоторые элементы продукта, расставить акценты, сделать сайт или ресурс интуитивно удобным и приятным для эстетического восприятия. Если говорить о ручке, то это её стилистическое оформление, внешний вид.
Или возьмём, например, текст. Если он написан сплошной простынёй, то читается он тяжело. Но если он имеет заголовки, иллюстрации, отступы, абзацы, удобный для чтения шрифт, то, согласитесь, совсем другое дело.
Каковы отличия между UX- и UI-дизайном
На первый взгляд, эти понятия имеют схожие черты. Но, несмотря на это, они выполняют несколько разные функции, являясь неотъемлемой частью почти любого проекта.
Для наглядности давайте посмотрим на поисковую выдачу Яндекса. Иерархия, внутренняя структура, различные дополнительные сервисы — это UX. А вот чистый белый фон сайта, подсветка ссылок, по которым вы переходили, фавикон, отступы между результатами выдачи для комфорта восприятия, интерфейс почты в правом верхнем углу — это уже UI.
Таким образом, задача UX-дизайнера — продумать, как же пользователь будет взаимодействовать с системой, а также обеспечить, чтобы это взаимодействие соответствовало его ожиданиям. А вот иконки, шрифт, картинки, цветовая композиция, удобство восприятия — в общем, то, как всё должно выглядеть — за это отвечает специалист по UI-дизайну. Хотя, по правде говоря, очень часто выполнением данных задач занимается один и тот же человек, поэтому нередко в вакансиях пишут, что требуется UX/UI-дизайнер.
Как видите, понятие всё же разные. Основное сходство — направленность на обеспечение наибольшего комфорта пользователя.
Как оценить, качественный ли у вас дизайн?
Мы уже говорили, что UI- и UX-термины актуальны не только для ИТ-сферы. По сути, они справедливы практически для любого продукта, хотя в большинстве случаев термины используют во время разработки веб-интерфейса и коммерческого дизайна. И вот здесь нередко возникает вопрос, а хорош ли дизайн?
В случае с UX всё более-менее понятно: проводим А/Б-тестирование или набираем фокус-группы, в результате чего узнаём, насколько понятен интерфейс пользователю, удобен ли он, может ли юзер найти нужный отдел, зарегистрироваться и т. д. И если всё хорошо, то и UX-дизайн хорош.
Что касается UI, то всё сложнее и субъективнее, так как зависит от вкусов конкретного пользователя. То, что нравится одному, другому будет резать глаза и наоборот. Тем не менее и здесь есть ряд рекомендаций, в которых прописывается, как понятно расположить блоки, какая должна быть контрастность текста по отношению к окружающему фону, как лучше делать подсветку или выделять кликабельные элементы и т.
д. Впрочем, эти рекомендации знает каждый, кто профессионально занимается дизайном цифровых продуктов.
Но чтобы разбираться во всех этих нюансах, недостаточно просто прочитать известный учебник по дизайну. Эта область динамично меняется и развивается, поэтому вчерашние требования могут быть сегодня муветоном, а значит, вы должны постоянно быть «в теме» и подтягивать свой уровень в соответствии с современными реалиями. А значит, вы должны постоянно учиться и быть готовыми познавать новое. Впрочем, так обстоит дело сегодня во всех областях, согласны?
UI против UX-дизайна: сходства и различия
Когда дело доходит до дизайна продукта, мы часто слышим термины «User Experience (UX)» и «User Interface (UI)». Несмотря на то, что оба термина не новы, люди, занимающиеся дизайном цифровых продуктов, часто используют эти термины как синонимы, а иногда и неправильно.
В этой статье мы предоставим определения UX и UI и исследуем нюансы между ними.
Что такое UI?
Пользовательский интерфейс — это место, где происходит взаимодействие между людьми и машинами.Он позволяет пользователям эффективно управлять машиной для выполнения задачи или достижения определенной цели, например, совершить покупку или загрузить приложение. Фактически, вы используете пользовательский интерфейс, чтобы прочитать эту статью прямо сейчас.
Пользовательские интерфейсы состоят из оборудования ввода (устройства, которые управляют машиной от человека, например, клавиатуры, мыши или джойстика) и оборудования вывода (устройства, которые предоставляют информацию пользователям, например мониторы, аудиоколонки или принтеры). Устройства ввода работают вместе с устройствами вывода, поэтому пользователи могут полностью управлять машиной.
Есть много разных типов
пользовательского интерфейса. Вот три самых
общие пользовательские интерфейсы — интерфейс командной строки, графические пользовательские интерфейсы и
голосовой пользовательский интерфейс.
Интерфейс командной строки
Еще в 70-е, на заре компьютерной эры, люди
взаимодействовал с компьютерами через интерфейс командной строки. Взаимодействия были
линейный — пользователь («оператор») набрал команду, и машина ответила на
команда либо с использованием печатного вывода, либо путем отображения сообщения на
монитор.Поскольку пользователи должны знать машинный язык для взаимодействия с
компьютеры, сложность такого взаимодействия была довольно высокой.
Код интерфейса командной строки
Графический интерфейс пользователя
Графический интерфейс пользователя (GUI) — это форма пользователя.
интерфейс, который позволяет пользователям взаимодействовать с цифровыми продуктами через визуальные
элементы. Когда пользователи взаимодействуют с графическим интерфейсом, они просматривают серию страниц или
экраны. Эти страницы / экраны содержат статические элементы (например, текстовые разделы).
и активные элементы (например, кнопки и другие интерактивные элементы управления).
Первый графический интерфейс был разработан Xerox PARC в 80-х годах.
был основан на метафоре офисного стола. В 1984 году Apple выпустила Macintosh.
— первый коммерчески успешный домашний компьютер с графическим интерфейсом. Это было
важный шаг в развитии технологий, потому что каждый может использовать компьютер
(специального кодирования не требуется).
Старый компьютер Apple Macintosh
Сегодня графический пользовательский интерфейс является наиболее распространенным типом пользовательского интерфейса для цифровых продуктов. Популяризация интерфейсов GUI также создала спрос на людей, которые будут разрабатывать продукты для этих интерфейсов — дизайнеров пользовательского интерфейса.Сегодня спектр обязанностей UI-дизайнеров значительно расширился. Мобильные устройства, гарнитуры виртуальной реальности и автомобильные человеко-машинные интерфейсы имеют графические интерфейсы.
Голосовые интерфейсы
«Лучший интерфейс — это не интерфейс» — это известная цитата из книги Золотого Кришны «Простой путь к блестящей технологии».
Кривая обучения — огромная проблема, с которой взаимодействует графический интерфейс. Каждый раз, когда пользователи взаимодействуют с новым продуктом с графическим интерфейсом, им нужно потратить некоторое время на изучение того, как его использовать. Как правило, чем больше времени пользователи тратят на изучение того, как использовать конкретный продукт, тем выше становится кривая обучения.В течение долгого времени люди в индустрии дизайна мечтали о нулевом пользовательском интерфейсе.
Ближе всего к нулевому UI мы подошли к голосовым интерфейсам, которые позволяют голосу пользователя взаимодействовать с системой. Недавний прогресс в обработке естественного языка позволил разработать интеллектуальные системы на базе искусственного интеллекта, такие как Amazon Alexa.
Основные свойства хорошо спроектированного пользовательского интерфейса
Независимо от того, какой пользовательский интерфейс вы создаете,
Вы всегда должны проверять, что он имеет следующие характеристики:
- Ясность.
Все элементы пользовательского интерфейса, такие как визуальные метафоры, кристально понятны для пользователей. Пользователям не нужно расшифровывать значение определенного элемента. - Знакомство. Ваш пользовательский интерфейс позволяет пользователям использовать свой предыдущий опыт при взаимодействии с вашим продуктом.
- Согласованность. Обеспечение единообразия интерфейса для всего продукта позволяет пользователям распознавать шаблоны использования.
- Прощение. Хороший интерфейс прощает пользователям их ошибки.
- Эффективность. Хороший пользовательский интерфейс позволяет пользователям предоставлять минимальный ввод для достижения желаемого результата. Он также предоставляет опытным пользователям ярлыки, чтобы сделать их взаимодействие более продуктивным.
Методы проектирования интерфейсов
Основными методами проектирования интерфейсов являются прототипирование и моделирование.
Дизайнеры пользовательского интерфейса создают прототип на основе требований, которые они предъявляют к сеансам разработки идей и спецификациям взаимодействия. Моделирование — это часть проверки проектных решений путем тестирования прототипа на людях, представляющих целевую аудиторию.Это важная часть сеансов юзабилити-тестирования. При проведении юзабилити-тестирования продуктовая группа предоставляет участникам тестирования прототип и заранее определенный набор задач и видит, с какими проблемами они сталкиваются во время взаимодействия.
Что такое пользовательский опыт?
Теперь, когда мы познакомились со значением пользовательского интерфейса, пришло время изучить UX. Пользовательский опыт — это опыт взаимодействия человека с продуктом. Этот термин был придуман Доном Норманом еще в 90-х годах, когда он работал в Apple.Дон Норман говорит, что «пользовательский опыт» охватывает все аспекты взаимодействия конечных пользователей с компанией, ее услугами и продуктами ».