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

Но что именно такое пользовательский опыт? И почему это так важно?

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

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

2. Пять основных принципов UX-дизайна

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

Эмпатия

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

Стратегия

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

Удобство использования

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

Инклюзивность

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

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

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

Проверка

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

3. Что делают UX-дизайнеры?

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

Чтобы немного больше понять, чем занимаются UX-дизайнеры, давайте рассмотрим процесс UX-дизайна:

Сопереживайте

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

Фокусировка

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

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

Придумайте

Этот этап часто выполняется рекурсивно на всех этапах определения, прототипирования и даже тестирования — вы обнаруживаете потребности пользователя, и ваше воображение начинает придумывать способы решения этих проблем!

Прототип

Теперь пришло время взяться за ручку и бумагу и приступить к проектированию! Это этап, о котором думает большинство людей, когда речь заходит об UX-дизайне, поскольку он включает в себя фактическое создание продукта или услуги. Дизайнеры создают макеты и прототипы, чтобы изначально протестировать свои идеи и убедиться, что они действительно будут работать так, как задумано.

Тест

Как мы уже намекали, ни один процесс UX-дизайна не будет полным без тестирования ваших дизайнерских решений, чтобы убедиться, что они действительно будут работать так, как вы задумали!

Давайте начнем с основ: что такое типографика?

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

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

2. Почему важна типографика?

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

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

Давайте немного углубимся в то, почему типографика так важна.

Типографика повышает узнаваемость бренда

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

Уникальная, последовательная типографика поможет вам завоевать доверие пользователей, завоевать доверие пользователей и способствовать продвижению вашего бренда.

Типографика влияет на принятие решений

Типографика оказывает глубокое влияние на то, как пользователи переваривают и воспринимают информацию, передаваемую текстом.

Привлекательный шрифт гораздо более убедителен, чем слабые шрифты, которые не усиливают смысл текста.

Типографика удерживает внимание читателей

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

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

3. Различные элементы типографики

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

Шрифты и гарнитуры

Существует некоторая путаница, связанная с разницей между гарнитурами и шрифтами, и многие считают их синонимами.

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

Проще говоря, гарнитура — это семейство связанных шрифтов, в то время как шрифты относятся к весу, ширине и стилям, которые составляют гарнитуру.

Существует три основных типа шрифта: с засечками, без засечек и декоративный.

Вот наглядный пример каждого

:с засечками

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

Добавление этих небольших штрихов и элементов придает шрифтам с засечками атмосферу традиции, истории, авторитетности и целостности.

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

Без засечек

Как следует из названия, шрифты без засечек определяются тем, чего им не хватает.

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

Декоративный

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

4.Лучшие практики пользовательского интерфейса для использования шрифтов

Контраст

Подобно иерархии, контраст помогает передать читателям, какие идеи или сообщения вы хотите подчеркнуть.

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

Последовательность

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

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

Белое пространство

Часто называемое «негативным пространством», пустое пространство — это пространство вокруг текста или графики.

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

Выравнивание

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

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

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

Цвет

Цвет - один из самых захватывающих элементов типографики. Именно здесь дизайнеры могут по-настоящему проявить творческий подход и поднять интерфейс на новый уровень.

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

Цвет состоит из трех ключевых компонентов: значения, оттенка и насыщенности.

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

Иерархия

Установление иерархии - один из важнейших принципов типографики.

Иерархия типографики направлена на создание четкого различия между выделяющимися фрагментами текста, которые следует заметить и прочитать в первую очередь, и стандартной текстовой копией.

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

5. Как вы выбираете правильный шрифт для своего сайта?

Подумайте о личности

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

Вы хотите, чтобы сайт выглядел высококлассным, гостеприимным, игривым или серьезным?

Крайне важно, чтобы типографика отражала индивидуальность бренда или продукта. Хорошей отправной точкой при решении этой задачи является определение основных черт вашего бренда и начало подбора шрифтов, отражающих эти черты.

С этого момента вы можете начать замечать тенденцию.

Подумайте о тоне

Не менее важно учитывать, как шрифт гармонирует с тоном сообщения.

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

Не экономьте на функциональности

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

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

Может ли текст быть разборчивым без напряжения? Достаточно ли отчетливы символы?

Рассмотрим производительность

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

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

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

Черпайте вдохновение

Если вы не уверены, с чего начать, найдите время, чтобы посмотреть, что делают другие люди.

Откройте глаза на типографику, которую вы видите вокруг себя.

Если вам сложно создать композицию и вы не всегда понимаете, гармонична ли она, это правило поможет.

Суть правила третей заключается в том, чтобы разделить картинку на девять равных частей – самая важная должна находиться на пересечении линий.

Проще всего это сделать в Photoshop вы можете включить направляющие с помощью Ctrl+; – они не будут мешать работе, но при необходимости придут на помощь.

2 – Связь между объектами

Построение композиции должно начинаться с распределения ролей задействованных объектов.

Если они одинаково привлекают внимание, зритель будет сбит с толку и не поймет, чему посвящена картинка, и, скорее всего, сочтет ее неинтересной.

Вот почему важно подчеркнуть главный объект визуализации и построить композицию, используя методы привлечения внимания, которые мы обсудим ниже.

3 – Золотое сечение

Первое упоминание об этом принципе связано с Евклидом, математиком, который применил

В искусстве этот принцип получил широкое распространение благодаря Леонардо да Винчи и его книге “Витрувианский человек”, которая демонстрирует применение этого принципа к пропорциям человеческого тела.

4 – Точка фокусировки

Правильно расположив композицию, вы можете заставить зрителя обратить внимание на желаемый объект.

Для этого продумайте внешний вид и дизайн дополнительных объектов на картинке, которые будут “указывать” на объект.

Например, дорога, ведущая к хижине, ветка дерева, нависающая над путешественником, или рука, указывающая на объект.

5 – Ракурс

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

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

6 – Гармония и баланс

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

Если сомневаетесь, стоит ли что-то добавлять к картинке, подумайте о назначении этого элемента.

Помогает ли это создать атмосферу, раскрыть детали вашего плана или заполнить пространство? Если нет, то ход действий очевиден.

7 – Атмосфера и эмоции

Композиция, пейзаж и цвета должны подчеркивать эмоции, которые вы вкладываете в визуализацию.

Красные цвета, например, ассоциируются с романтикой, любовью, кровью и фильмами ужасов.

Холмы заставляют нас думать о мире, а море связано со свободой и приключениями.

Поэкспериментируйте с ассоциациями ваших изображений и заставьте их работать на вас.

8 – Визуальная целостность

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

Чтобы картинка выглядела привлекательно, нужно уделить достаточно времени проработке середины и фона.

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

9 – Нарушение правил

Часто самые захватывающие визуализации получаются, когда дизайнер намеренно нарушает правила дизайна, и законы композиции не являются исключением.

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

Что такое теория цвета?

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

Базовые основы теории цвета были заложены Исааком Ньютоном в 1666 году, и они по-прежнему остаются актуальными. В основном цветовом круге есть три группы цветов: первичные, вторичные и третичные.

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

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

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

Аддитивные и субтрактивные цветовые модели

Аддитивная цветовая модель (RGB)

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

Субтрактивная цветовая модель (CMYK)

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

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

Одноцветный

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

Аналогичный

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

Дополнительный

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

Сплит-комплементарность

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

Триадический

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

Тетрадный

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

Психологию цвета

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

• Оранжевый энергичный и теплый. Некоторые общие ассоциации с оранжевым включают креативность, энтузиазм, беззаботность и доступность.
• Красный — это цвет крови, поэтому он часто ассоциируется с энергией, войной, опасностью и силой, а также со страстью, желанием и любовью. Некоторые общие ассоциации с красным цветом включают действие, приключения, агрессию и волнение.
• Желтый вызывает позитив, молодость, радость, игривость, солнечный свет и тепло.
• Розовый вызывает чувства невинности и деликатности, благодарности, романтики, мягкости и признательности.
• Синий воспринимается как авторитетный, надежный и заслуживающий доверия. Общие ассоциации с синим цветом включают спокойствие, безмятежность, уверенность, достоинство и безопасность.
• Зеленый – это цвет природы. Он символизирует рост, свежесть, безмятежность, деньги, здоровье и исцеление.
• Черный цвет олицетворяет силу, элегантность и власть. Общие ассоциации с черным также включают класс, различие, формальность, тайну, секретность и серьезность.

Выбирайте цвета с умом

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

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

Не экономьте на контрасте

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

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

Придерживайтесь соглашений пользовательского интерфейса

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

Некоторые распространенные цветовые соглашения о дизайне пользовательского интерфейса включают в себя:

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

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

Лучшие инструменты для выбора цветовой палитры

Adobe Color

Будучи ресурсом «хлеба с маслом» для всех цифровых креативщиков, Adobe Color предлагает практически все цветовые палитры. По сравнению с другими генераторами цветовых схем, Adobe Color намного более всеобъемлющий, поэтому не делайте его своим выбором, если вам нужно что-то быстрое и простое. Одной из ключевых функций Adobe Colors является генератор цветовой палитры, который извлекает цвета из загружаемых вами изображений.

Coolors

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