Сегодня рассмотрим, какие обычно задачи выполняет UX/UI–дизайнер, какие программы для этого используются. Затронем графический дизайн в контексте UI дизайна. Познакомлю с новыми словами, с которыми будете сталкиваться ежедневно в работе. Очень много информации перекликается с прошлым уроком, но сегодня углубляемся в детали и учим профессиональные термины.
Для начала достаточно знать лишь Figma, но со временем вы будете развиваться и пробовать новый софт. После прочтения сможете сориентироваться и прикинуть, что подучить следующим.
Освоив один графический редактор, сможете быстро перейти на другой — отличия минимальны. Например, программы Figma и Adobe Xd практически в точности копируют Sketch.
И, конечно, поймем в чем разница между векторной и растровой графикой.
- Задачи UX-дизайнера
- Создание юзер флоу
- Таск флоу
- Вайрфлоу
- Скринфлоу
- Отрисовка вайрфреймов
- Лоу-фидэлити вайрфреймы
- Хай-фидэлити вайрфреймы
- Создание прототипа
- Usability-тестирование
- Инструменты UX–дизайнера
- Задачи UI–дизайнера
- Подбор цветовой палитры
- Работа с типографикой
- Подбор, обработка иконок и изображений
- Создание набора элементов интерфейса
- Отрисовка страниц
- Создание адаптивного и отзывчивого дизайна
- Инструменты UI–дизайнера
- Виды графики
- Векторная графика
- Растровая графика
- Задачи графического дизайнера
- Инструменты графического дизайнера
- Домашнее задание
- Выводы
Предположим, что нас наняла компания на самом раннем этапе создания сайта. Еще ничего нет, ни набросков экранов, ни дизайна, готова лишь техническая документация. Менеджер проектов объясняет, что новый сервис предназначен для покупки и продажи всевозможных вещей. Нам ставят задачу: придумать юзер флоу для покупки товара.
User flow (читается юзер флоу) — это пошаговая схема взаимодействия с веб-сайтом для решения поставленной пользователем задачи. Включает в себя действия и переходы между экранами, через которые проходит пользователь для достижения своей цели.
Добавим немного конкретики и представим, что наш воображаемый пользователь хочет купить велосипед.
Юзер флоу обязательно отвечает на такие вопросы:
- Кто пользователь? У нас это покупатель (роль пользователя);
- Какая у него цель? Хочет купить велосипед. Ответ следует из задания менеджера;
- Какие шаги предпринять, чтобы выполнить цель? Что конкретно нужно сделать пользователю, чтобы купить велосипед. Какие кнопки нажать и через какие экраны пройти?
Теперь в работу вступает UX-дизайнер. Отвечая на последний вопрос можно предположить, что пользователь начнет с главной страницы, где напишет велосипед в форме поиска. После чего попадет на страницу результатов поиска с фотографиями и ценами велосипедов. Выбрав подходящий, перейдет на следующий экран с более подробной информацией и кнопкой купить. Нажав которую, перейдет к форме оплаты. После подтверждения покупатель увидит сообщение спасибо за покупку.
Этот ответ сильно упрощен, но должен дать вам представление, о том какую информацию несет в себе юзер флоу. На практике вы должны отрисовать схему. В зависимости от детализации их бывает 3 вида: таск флоу, вайрфлоу, скринфлоу.
Task flow (читается таск флоу) — последовательность задач. Это схема включает в себя лишь названия экранов и действий. Часто вам даже не нужно притрагиваться к компьютеру, делаете набросок маркером в блокноте или на доске. Схемы могут включать разветвления в зависимости от действий пользователя:
Запомните ключевые моменты при составлении таск флоу:
- В прямоугольниках вписывается название экрана (главная страница, результаты поиска, детали товара, корзина, выбор способа оплаты и так далее);
- Под экраном (прямоугольником) иногда полезно расписать возможные действия пользователя, но только если это необходимо – избегайте излишней проработки (это делается на этапе отрисовки вайрфреймов);
- Стрелочкой обозначается переход между экранами. Для ясности их можно подписывать (нажимаем кнопку купить, кликаем по результату поиска, кликаем по карточке)
После отрисовки и правок на бумаге можно перерисовать схему в графическом редакторе, иногда это делается сразу:
Wireflow (пишется вместе, читается вайрфлоу) — это последовательность набросков экранов (вайрфреймов). Это схема включает грубые наброски экранов с важными элементами интерфейса (кнопки, поля ввода, места для картинок) и действия. Их тоже часто рисуют вручную:
Детализация и проработка зависит от ситуации. В этом примере все упрощено до максимума, но главные элементы интерфейса на каждом экране четко выделены. Для уточнения все детали прописывают текстом:
Screenflow (пишется вместе, читается скринфлоу) — последовательность экранов с готовой UI-частью. Этот вид используется на более поздних этапах разработки. Здесь дизайн каждого экрана выполнен с максимальной (финальной) детализацией. Выполняется только в графических редакторах и специализированных приложениях (к примеру Overflow помогает рисовать стрелочки между экранами):
Wireframe (читается вайрфрейм) – это статический набросок конкретного экрана, который определяет расположение и размер UI элементов. Визуальная часть всегда ограничивается черно-белой палитрой и простыми фигурами.
Если продолжить наше предположение с работой в компании, то после обсуждений нас могут попросить отрисовать вайрфреймы для главного экрана и юзер флоу покупателя.
В зависимости от задачи может использоваться, как в технической документации для разработчиков, так и основой для UI-дизайнера. Могут выполняться аналогично юзер флоу в блокноте, на доске или в графическом редакторе. Существуют даже специальные программы для имитации ручных набросков на компьютере (Balsamiq Wireframes).
Отрисовывается, чтобы определить или хотя бы предположить, как расположить элементы интерфейса, чтобы пользователю было максимально удобно пользоваться сайтом, выполнять конкретные задачи.
На рисунке сверху слева изображен вайрфрейм, а справа законченный дизайн (постарался UI-дизайнер). По степени детализации вайрфреймы можно разделить на два вида.
Лоу-фидэлити вайрфреймы
Low-fidelity wireframes (читается лоу-фидэлити вайрфреймс) – очень грубые и быстро выполненные наброски экранов. Обычно содержат минимум текста, в большинстве случаев он заменен горизонтальными линиями, все кнопки и изображения показаны прямоугольниками (иногда используются круги). Часто расположение и размер элементов приблизительны.
Хай-фидэлити вайрфреймы
High-fidelity wireframes (читается хай-фидэлити вайрфреймс) – точно выполненные наброски экранов. Содержат весь текст; расположение, размеры кнопок и остальных элементов максимально приближается к финальному дизайну. Требуют намного больше времени на отрисовку, содержат больше деталей.
Prototype (читается прототайп) или интерактивный прототип – это дизайн экрана, который реагирует на действия пользователей. То есть это не статическая картинка, как в случае с вайрфреймами или юзер флоу. Прототипы позволяют понять, как будет работать веб-сайт до начала программирования, выявить проблемные и неудобные экраны. Часто используются для тестирования на реальных пользователях.
Интерактивные прототипы запускаются в браузере на компьютере или в специальных приложениях на смартфоне и могут выглядеть и вести себя, как настоящие законченные продукты. Но на самом деле это лишь подделки, никаких серьезных вычислений или обработки данных там выполняться не может.
Наш интерактивный прототип на основе предыдущих набросков может быть использован для дальнейшего тестирования. Для одной функции иногда может быть разработано несколько прототипов и уже на основе отчетов usability-тестирования принимается решение, какой вариант утверждать.
Usability-тестирование (юзабилити) или проверка эргономичности – это исследование, чтобы проверить насколько удобно использовать интерфейс для выполнения конкретной задачи. Такие тесты выполняются на реальных людях с использованием интерактивных прототипов.
В большинстве случаев UX-дизайнер вручает устройство с запущенным прототипом, объясняет, что нужно сделать и наблюдает за пользователем. Далее все тщательно конспектируется и в дальнейшем анализируется. Иногда для комментариев используется диктофон. Проведя множество тестов, можно делать выводы о том, насколько удачен выбранный опыт взаимодействия или какая гипотеза сработала лучше.
Существуют и специальные сервисы для удаленного usability-тестирования. Там прототипы запускаются на компьютерах пользователей и ведется видеозапись экрана с голосовыми комментариями испытуемых (иногда пишется видео с веб-камеры, так что вы можете даже видеть выражение лица и эмоции пользователя).
- Блокнот и маркер – позволяет быстро создавать грубые наброски вайрфреймов, делать зарисовки юзер флоу. Незаменимый инструмент на ранних этапах;
- Figma — идеально подходит для всех задач. Позволяет даже создавать интерактивные прототипы с простой анимацией и запускать их на смартфоне. Работает на всех платформах (Windows, macOs, Linux) и в браузере. Поставляется с бесплатным набором вайрфреймов Конкуренты также неплохи – Sketch и Xd – есть все необходимое;
- Moqups — специализированное приложение для создания вайрфреймов и юзер флоу с компонентами на все случаи жизни (для вебсайтов, мобильных и настольных приложений). Пригодится, если не хотите все отрисовывать вручную или нет времени на поиск готовых библиотек для Figma. Работает прямо в браузере. Требуется регистрация, но возможности бесплатной версии неплохи;
- Axure — продвинутая работа с интерактивными прототипами. Есть возможность генерировать HTML, что потом позволяет встраивать Google Analytics (или любой другой сервис для отслеживания поведения пользователей) и проводить сложные удаленные usability-тесты.
UI дизайн включает в себя визуальную часть и определяет внешний вид и эстетический облик сайта. Это один из финальных этапов процесса разработки пользовательского интерфейса, когда мы работаем с очень точной версией. Круг задач очень широк и может посоперничать с дизайном опыта взаимодействия.
Цветовая палитра или цветовая схема — это набор базовых цветов, которые используются, как основа в дизайне. Помогает создавать целостные страницы, упрощает и значительно ускоряет работу, так как подбор нужно выполнить лишь один раз.
Обычно используется готовая палитра, которая опирается на фирменный стиль или рекламные материалы. Если таковых нет, то можно использовать логотип, чтобы получить несколько базовых цветов, а остальные подобрать самостоятельно. Если у клиента ничего нет, то всю цветовую схему вы делаете сами. Лучше заниматься созданием цветовой палитры после создания вайрфреймов, чтобы понимать какие элементы интерфейса и соответственно цвета вам понадобятся.
Когда создаете цветовой набор самостоятельно, то обратите внимание на цвета конкурентов и смежные области. Найдите как можно больше существующих примеров, составьте мудборд.
Есть множество сервисов для создания цветовых схем (Adobe Color, Coolors, Colormind, Colorhunt, Palettr), которые генерируют новый набор на основе лишь одного базового цвета или подгруженой вами картинки.
Работа с типографикой
Типографика — это правила, принципы и приемы оформления текста. Типографика является одним из разделов графического дизайна. Позволяет подать текст наиболее понятным образом для восприятия читателем. UI-дизайнер занимается подбором шрифтом, определяет размеры, начертания, расстояния между строками и символами. Определяет стили для заголовков, параграфов, списков и других элементов страницы. Далее несколько ключевых терминов из типографики.
Шрифт — это набор символов, оформленные в одном стиле и составляющие единую систему.
Гарнитура — это набор шрифтов, объединенные в одно семейство.
Кегль — это размер высоты буквы шрифта.
Интерлиньяж – это межстрочный интервал или расстояние между строками.
Более подробно с типографикой и ее основными принципами познакомимся через урок. А пока можете оценить насколько это сложная дисциплина по рисунку ниже.
Подбор, обработка иконок и изображений
Иконки – это простые и четкие образы (изображения) для ускорения понимания и восприятия информации. UI-дизайнеры часто используют готовые наборы иконок, которых существует великое множество (Fontawesome, Lineicons). Иногда иконки нужно править или перекрашивать. UI-дизайнер должен следить, чтобы все иконки были выдержаны в едином стиле.
Изображения используются для улучшения подачи и дополняют текст. Фотографии и иллюстрации обрезаются, подгоняются по размеру, проходят цветокоррекцию.
Существуют бесплатные и платные сайты для подбора иллюстраций и фотографий (Freepik, Unsplash, Shutterstock). UI-дизайнеры редко сами отрисовывают иконки и тем более иллюстрации. Это работа графического дизайнера.
Создание набора элементов интерфейса
UI-kit (читается юай-кит) или User Interface Kit — это набор элементов интерфейса для дальнейшей разработки страниц сайта. Набор будет разным для стартапа, блога и социальной сети. Самые распространенные элементы: кнопки, элементы навигации, поля ввода, выпадающие списки, переключатели, формы и так далее.
UI-kit в современных графических редакторах делается на основе компонентов. Это позволяет значительно ускорить внесение правок. Представьте себе ситуацию. У вас есть 20 отрисованных экранов. Внезапно заказчик захотел изменить скругление кнопок несмотря на все уговоры дизайнеров. Используя UI-кит на основе компонентов вам прийдется внести изменения лишь в одном месте, правки на всех страницах будут сделаны автоматически и мгновенно. Это ли не магия? Без компонентов (например, если вы используете Photoshop) вам прийдется пройтись по всем страницам и переделать каждую кнопочку вручную.
Отрисовка страниц
На основе созданной цветовой гаммы, типографики, сетки, UI-кита начинается отрисовка главных страниц. Если заказчик утверждает дизайн, то и все остальные страницы сайта берутся в работу.
Немного о самом процессе. Развею распространенный миф. UI-дизайнеры редко все придумывают сами с нуля. Чаще всего они ищут вдохновение на таких сайтах, как Behance и Dribbble, где лучшие коллеги из всего мира делятся своими работами. Это не значит, что все просто копируется, нет. Но дизайнер может подсмотреть какую-то деталь, удачное сочетание цветов, шрифтов, сетку, компоновку элементов. Таким образом, новый дизайн постепенно синтезируется из мировоззрения и вашего опыта, а также из уже существующих удачных решений. С наработкой проектов у вас постепенно сформируется свой неповторимый стиль с уникальными фишками. Но помните, на это потребуется очень много времени и усилий.
Mockup (читается мокап) — это дизайн отрисованной страницы. Также мокапом называют дизайн страницы или экрана, который вставлен в фотографию или иллюстрацию с устройством, на котором и предполагается его использование. Когда вы видите фото с ноутбуком и запущеным сайтом, то знайте, что это мокап.
Создание адаптивного и отзывчивого дизайна
Adaptive design (читается адаптив дизайн) или адаптивный дизайн — это проектирование сайта, компоновка которого меняется в зависимости от устройства (размера экрана), базируясь на нескольких макетах фиксированной ширины.
При разработке этого вида дизайна выделяются ключевые варианты отображения, между которыми происходит резкий переход. При изменении размера окна браузера сайт будет меняться «рывками» при переключении от одного отображения к другому. Каждое отображение может иметь уникальную компоновку.
Например, отображение для настольных компьютеров (где обычно используются большие мониторы) дизайн может включать правую колонку с дополнительной информацией. Отображение для смартфона будет попросту эту боковую колонку скрывать, так как экран узкий.
Responsive design (читается респонсив дизайн) или отзывчивый дизайн — это подвид адаптивного дизайна, в котором переходы между вариантами отображения плавные. При изменении размера окна браузера дизайн подстраивается словно "резиновый". При этом структура компоновки статична (боковые колонки не исчезают).
Все три программы замечательно справляются со всеми задачами UI-дизайнера. После изучения Figma вы быстро освоите остальные, чтобы заполучить больше клиентов.
- Figma – однозначный фаворит списка. Предоставляет широчайшие возможности для UI-дизайнера и работает на всех платформах (Windows, macOS, Linux) и даже в браузере. При этом делает это очень быстро и бесплатно;
- Sketch – платный ($99 с обновлениями на год) графический редактор только для macOS. Именно он послужил вдохновением для Figma и Xd. Является самым популярным из этой тройки в силу своего возраста. При этом по некоторым функциям уступает Figma (например, нет цветовых стилей);
- Xd – бесплатный графический редактор для Windows и macOS от компании Adobe. Обладает хорошим набором функций и отлично подходит, как и два других участника списка.
Виды графики
Графические ресурсы делятся на растровые и векторные. Когда вы приступите к практике, вы увидите, как это влияет на работу. Сейчас же я могу лишь объяснить это в теории.
Векторная графика
Векторная графика описывает изображение с помощью математических формул, а точнее кривых Безье. Такое изображение не теряет качество при увеличении по сравнению с растром. В этом его главное преимущество. Используется в основном для логотипов, иконок, иллюстраций. Кстати, Figma, Sketch и Xd являются по большей мере векторными редакторами, но имеют минимальный набор функций для работы с растром.
Растровая графика
Растровая графика описывает изображение с помощью набора цветных точек. При увеличении такого изображения можно наблюдать пиксели — мельчайшие элементы квадратной формы. Используется для фотографий и иллюстраций с большим количеством цветов. Photoshop является самым мощным растровым редактором, хотя и умеет работать с векторными фигурами.
Если открыть растровое и векторное изображение в соответствующих редакторах и увеличить их, то мы увидим, что:
- Увеличенный растр представляет собой сетку пикселей;
- Увеличенный вектор отрисовывается с таким же качеством и состоит он из точек и рычагов, которые определяют кривизну линий.
Задачи графического дизайнера
Сюда входит широкий круг задач, но я выделила лишь основные, которые пересекаются с UX/UI-дизайном:
- Отрисовка логотипа и создание фирменного стиля;
- Отрисовка иконок;
- Отрисовка иллюстраций;
- Отрисовка баннеров, маркетинговых материалов, упаковки.
В отличие от UX/UI дизайнера, графический дизайнер иногда использует дополнительное оборудование, например, графический планшет. Кроме того, художественное образование может сильно помочь в профессии.
В зависимости от предпочтений и стилистики графического дизайнера может использоваться, как растровый, так и векторный редактор.
- Illustrator – мощный платный ($21 в месяц) векторный графический редактор для платформ Windows и macOs от компании Adobe. Используется для отрисовки и редактирования иконок и иллюстраций;
- Photoshop – мощный платный растровый редактор от той же компании. Пожалуй это самый функциональный растровый редактор из существующих. Позволяет подготавливать, ретушировать и изменять фотографии до неузнаваемости;
- Gimp – бесплатный растровый графический редактор с широким набором функций, который уступает Photoshop лишь из-за своей молодости.
В списке нет Figma, Sketch и Xd, хотя они тоже позволяют работать с векторной графикой, рисовать иконки и иллюстрации (чего нам будет вполне достаточно для начала). А вот по работе с растром у этих программ очень серьезные ограничения. Вам доступны лишь обрезка фото, базовая цветокоррекция и маски.
Домашнее задание
Домашние задания больше не проверяются для граждан россии. Чтобы убедиться, что вы не из россии, после того как оставите комментарий с домашним заданием в конце урока на сайте, напишите мне в директ Инстаграмм @frusia.pro
- Выберите сайт, которым вы ежедневно посещаете. Нарисуйте такс флоу в блокноте для двух типичных сценариев использования этого сайта.
- Придумайте новую функцию для сайта, которым вы пользовались хотя бы однажды (необязательно для вашего любимчика из первого задания). Отрисуйте таск флоу для этой новой функции.
- Отрисуйте вайрфлоу для сценариев из первого задания. Можете использовать карандаш или вытирающуюся ручку, чтобы делать правки. Постарайтесь приблизиться в пропорциях к оригиналу.
- Последнее задание повышенной сложности. Отрисуйте вайрфлоу для сценария из второго задания. Здесь нужно быть очень наблюдательным, так как вы еще не знаете, какие элементы интерфейса существуют вообще. Но вы можете подсмотреть у других сайтов.
Делайте фото ваших юзер флоу и присылайте в директ в Instagram @frusia.pro (не забудьте указать, что это к третьему уроку) или оставляйте ссылки здесь в комментариях под уроком (ссылки я позже заменю на картинки прямо в комментариях).
По каждому ответу дам фидбек, так вы убедитесь, что усвоили материал правильно.
Выводы
Вот мы и получили представление, с чем приходится сталкиваться UX/UI-дизайнеру в повседневной работе. Это был самый длинный и сложный урок с массой новых терминов. Пожалуйста, изучите его досконально и сделайте домашнее задание. Все это лишь теория, в следующий раз (урок выйдет через неделю) мы переходим к практике, а именно к изучению Figma. Обещаю, будет еще интереснее!
Подписывайтесь на меня в Instagram @frusia.pro, будьте в курсе анонсов новых уроков, смотрите проверки домашек в сторис, задавайте вопросы, а также вас ждет множество полезных постов про дизайн.
Stay tuned!