Красивый шрифт для сайта: Самые лучшие Гугл шрифты для сайта или ПК – ТОП 15

Шрифты для Сайта. Особенности Выбора и Восприятия

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

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

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

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

Основы типографики

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

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

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

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

Анатомия шрифта

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

Возьмем, к примеру, шрифт с засечками (Serif). Чтобы шрифт подходил под широкое семейство шрифтов с засечками, он должен иметь засечки на дизайне букв. Конечно, есть несколько подкатегорий под одним шрифтом с различными правилами, вплоть до деталей, но если стиль шрифта использует засечки, его можно отнести в семейство шрифтов с зачечками.

Почему типографика имеет значение?

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

Грамотная работа со шрифтами преследует такие цели:

• Создание уникального брендинга
• Расширение возможностей посетителей
• Влияйте на эмоции читателей
• Привлечение внимания к деталям

Основные стили и психология шрифтов

Исследование, проведенное Британским психологическим обществом в 1989 году, обнаружило корреляцию между прилагательными и шрифтами. Испытуемым показали несколько шрифтов и попросили оценить те качества восприятия, которыми они могут обладать, такие как тяжелый или легкий, быстрый или медленный. Исследование обнаружило самую высокую корреляцию со шрифтами Times New Roman и Helvetica и такими прилагательными как «формальный» и «разборчивый» соответственно. Также интересно отметить, что эти шрифты находятся на противоположных сторонах спектра типографики: Times New Roman является шрифтом с засечками, а Helvetica — без засечек.

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

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

№1 Шрифты с засечками (Serif)

Некоторые таких шрифтов: Times New Roman, Garamond, Georgia и Palantino.

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

Какими прилагательными обычно описывают шрифты с засечками?

• Традиционный
• Респектабельный
• Надежный
• Элегантный
• Сложный

№2 Шрифты без засечек (Sans-Serif)

Некоторые примеры шрифтов без засечек: Arial, Helvetica, Tahoma и Calibri.

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

Какие эмоции вызывают шрифты без засечек?

• Чистота
• Ясность
• Современность
• Эффективность
• Прямолинейность

№3 Серия рукописных шрифтов (Script)

Примеры рукописных шрифтов: Alex Brush, Pacifico, Lobster и Tangerine.

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

Какие эмоции вызывают рукописные шрифты?

• Элегантность
• Творческий подход
• Уникальность
• Персональный подход
• Эмоциональность

№4 Декоративные шрифты (Decorative)

Примеры декоративных шрифтов: Phosphate, Chalkduster, Graffiti, Grunge и Stencil.

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

Типичные характеристики декоративных шрифтов:

• Уникальность
• Творческий подход
• Оригинальность
• Гибкость

Дополнительные факторы, влияющие на восприятие шрифтов

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

Типографский акцент для привлечения внимания

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

Если говорить более конкретно, некоторые шрифты, использующие типографский акцент, также называются по разному, например, Helvetica Bold и Times New Roman Italic. Однако с современными текстовыми редакторами и инструментами для создания сайтов вам не нужно менять шрифт, поскольку вы можете использовать CSS команды для вставки элементов выделения.

Цвет — еще один психологический фактор

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

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

Вот как люди воспринимают основные цвета:

Иерархия шрифтов повышает удобочитаемость

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

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

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

Дополнительные способы для создания уникальности

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

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

• Округлые и угловатые шрифты
• Строчные и прописные шрифты
• Сжатые и расширенные шрифты
• Короткие и высокие шрифты

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

Выбор правильных шрифтов для дизайна сайта

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

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

Доступность шрифтов в браузерах и приложениях

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

• Используйте системные и веб-шрифты
• Используйте широко используемую библиотеку шрифтов
• Создавайте резервные шрифты в коде вашего сайта

Системные шрифты — это предварительно установленные шрифты на вашем компьютере или устройстве. Однако в зависимости от операционной системы, которую использует устройство, доступные шрифты могут отличаться. Например, Android использует Roboto в качестве системного шрифта, а приложения iOS используют шрифт Apple San Francisco.

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

Другой способ, особенно в Интернете — использовать библиотеку шрифтов, такую ​​как Google Fonts или Adobe Fonts. Эти службы широко поддерживаются на нескольких платформах и расширяют диапазон выбора шрифтов за пределы системных. Вы можете загружать шрифты прямо на свой сайт из библиотеки или использовать плагин, позволяющий вставлять шрифты.

Библиотеки шрифтов, такие как Google Fonts, работают путем вставки ссылки таблицы стилей в ваш HTML-документ. Оттуда вы можете ссылаться на выбранный вами шрифт в стиле CSS, а интерфейс прикладного программирования (API) отображает шрифты для ваших посетителей. Когда пользователь получает доступ к вашему сайту, серверы библиотеки шрифтов автоматически отправляют файл шрифта в браузер пользователя в зависимости от того, какую технологию он поддерживает. Таким образом, вы минимизируете риски того, что выбранные вами шрифты не будут отображаться для вашего посетителя.

Добавляйте резервный шрифт

font-family: 'Roboto Condensed', Arial; // Добавление резервного шрифта Arial

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

Выводы

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

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

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

Лучшие шрифты Google для вашего сайта

21 июня 2019 г.

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

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

1. Open sans

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

2. Merriweather

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

3. Montserrat

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

4. LatoПолуокруглые детали букв придают Lato ощущение тепла, а прочная структура обеспечивает стабильность и серьезность. «Мужской и женский, серьезный, но дружелюбный, подходит для стартапов или компаний».

5. RobotoШрифт исполнен в геометрических формах. В то же время, шрифт имеет дружелюбные и открытые кривые.
Roboto позволяет укладывать буквы в их естественную ширину. Это делает более естественным ритм чтения, который чаще встречается у засечённых шрифтов.

6. Roboto CondensedКрасивый и аккуратный шрифт от Google.
Используется на сайте в текстах.

7. Source Sans Pro

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

8. UbuntuСовременный стильный шрифт. Лучше всего использовать для небольших текстов или заголовков.

9. Cuprum

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

10. Rubik

Шрифт со слегка закругленными буквами.

11. Exo 2Современный, не содержащий засечек геометрический шрифт, который пытается передать технологическое/футуристическое ощущение, сохраняя при этом элегантный дизайн.

Стоит использовать с небольшими размерами текста и длинными текстами.

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

13. Old Standard

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

14. Playfair Display

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

15.Comfortaa

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

Имейте в виду, что шрифты являются основой бренда, и выбор должен быть сделан с большой осторожностью. Лишь небольшое количество шрифтов хорошо читается в длинных текстах.

Недавние публикации

© Все права защищены. Smartiee Agency
e-mail us: [email protected]

Дизайн Вдохновение для рабочих процессов UX и UI

Иллюстрация Бхавьи Миноча

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

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

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

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

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

Вот что входит в каждый из этих этапов:

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

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

Низкоточный дизайн: Не существует единственно правильного способа сделать низкоточный дизайн; это действительно сводится к предпочтениям самих дизайнеров. Тем не менее, есть одно правило проектирования с низкой точностью: делать его быстро и грязно. Это могут быть наброски на салфетках, блокнотах и ​​досках или даже цифровая работа с Adobe XD. На этом этапе важно не тратить много времени на то, чтобы дизайн выглядел красиво, а скорее углубляться в фундаментальную концепцию или функциональность дизайна, тем самым сокращая время, необходимое для итерации.

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

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

Прототипирование: Последним шагом в рабочем процессе UX и UI является создание прототипа дизайна, координация и синхронизация ваших экранов, а также создание кликабельности для проведения дальнейшего пользовательского тестирования или передачи его команде разработчиков. Цель прототипирования — убедиться, что вы создаете продукты с использованием методов взаимодействия человека с компьютером (HCI). Таким образом, вы можете убедиться, что дизайн улучшает пользовательский опыт, а не мешает ему.

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

Дизайнер ищет вдохновение в Интернете. Изображение предоставлено Adobe Stock.

Куда пойти, чтобы найти вдохновение для дизайна

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

Medium

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

Pinterest

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

Designspiration

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

Dribbble

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

Instagram

Instagram больше не просто место для обмена фотографиями и личным опытом; он стал домом для всех видов искусства. Если вы еще этого не сделали, следите за хэштегами, связанными с UX-дизайном, такими как #ux, #uxdesign и #userresearch, чтобы получать регулярную дозу дизайнерской работы, которой делятся другие дизайнеры UX/UI.

Дизайнеры работают вместе и просматривают множество дизайнерских вдохновений, которые они собрали. Изображение предоставлено Adobe Stock.

Как использовать вдохновение в дизайне

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

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

Немного вдохновения в дизайне пробора

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

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

User TestingDesign Systems

Words by
Дэн Сильвейра

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

6 концепций, которые должен знать каждый UX-дизайнер

Иллюстрация Ницана Кламера

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

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

Проектирование взаимодействия человека с компьютером

Первая и наиболее фундаментальная концепция дизайна, которую должен знать каждый дизайнер, — это проектирование взаимодействия человека с компьютером (HCI). HCI объединяет концепции и методологии из трех дисциплин: компьютерных наук, дизайна и психологии. Эти концепции в целом помогают дизайнеру принимать решения по созданию доступных, простых в использовании и эффективных интерфейсов. Цель гиперконвергентной инфраструктуры — сделать компьютерные действия более человечными, тем самым сделав пользовательский опыт естественным.

HCI состоит из компьютерных наук, когнитивных наук и дизайна. Кредит изображения Quora.

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

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

Интерактивный дизайн

Интерактивный дизайн — еще одна психологическая концепция, которую должен знать и понимать каждый успешный дизайнер. Дизайн взаимодействия (IxD) — это дизайн взаимодействия между человеком и продуктами. За тем, как пользователи взаимодействуют с цифровыми продуктами и услугами, стоит психология. Вот пять вещей, которые следует учитывать при понимании психологии дизайна взаимодействия.

1. Доступность и означающие — Доступность — это очевидная функция свойства (т. е. дверь говорит нам, что ее можно открыть), где означающие являются визуальными подсказками, указывающими на доступность этой функции (например, дверная ручка). Без означающих пользователи часто не могут воспринимать аффорданс. В пользовательском интерфейсе форма кнопки, на которую можно нажать, является возможностью, а текст «Отправить» — означающим.
2. Обучаемость . Количество времени, которое требуется пользователю, чтобы понять, как использовать ваш интерфейс, относится к обучаемости. Если кривая обучения занимает слишком много времени, пользователи с большей вероятностью откажутся от опыта. Последовательность и предсказуемость помогают пользователю быстро научиться использовать продукт, тем самым создавая более приятный пользовательский опыт.
3. Удобство использования . Самой основой IxD является удобство использования: интерфейс должен быть удобен для использования пользователем, чтобы добиться успеха. Вы можете добиться этого, удалив ненужные шаги, настроив информационную архитектуру, изменив визуальную иерархию и т. д.
4. Обратная связь (и время ответа) — Без обратной связи нет взаимодействия между продуктом и пользователем. От тонких микровзаимодействий до звуковой очереди обратная связь позволяет пользователю понять, как он взаимодействует с продуктом. Имея дело с обратной связью, вы должны учитывать время отклика на эту обратную связь. В идеале, в течение 0,1 секунды пользователь должен получить сигнал, чтобы он почувствовал, что контролирует интерфейс. Примером обратной связи является звуковой сигнал при отправке электронного письма или звуковой сигнал, сообщающий о завершении загрузки.
5. Целеустремленный дизайн — Успешные продукты позволяют пользователям достигать целей. Понимание того, чего хотят ваши пользователи и их предпочтения для достижения цели, является центром дизайна, ориентированного на достижение цели. Исследование пользователей здесь очень важно, поскольку оно помогает вам определить свои болевые точки и персонажей, для которых вы разрабатываете дизайн. Как только вы поймете своего пользователя, его цели и его разочарования, вы сможете разработать для них решение для достижения своих целей.

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

Закон Хика

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

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

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

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

Эффект фон-Ресторфа

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

Три зеленые и одна красная. Красный выделяется и запоминается благодаря эффекту фон-Ресторффа. Кредит изображения SiteW.

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

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

Еще одна распространенная область, в которой UX-дизайнеры используют эту концепцию, — страницы продуктов. Это отличный способ выделить бестселлеры или новинки и учесть закон Хика (ограничение возможностей) и эффект фон-Ресторффа.

Один вариант помечен как «Бестселлер», что изолирует его от остальных и ограничивает выбор для пользователя. Изображение предоставлено Revolve Clothing.

Гештальт-принципы визуального восприятия

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

Основными гештальт-принципами визуального восприятия являются:

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

Показывает сходство по форме, размеру и цвету. Изображение предоставлено Interaction-Design.org.

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

Alt TSПоказывает похожие формы и линии с промежутками. Ум заполняет эти пробелы, демонстрируя принцип гештальта. Изображение предоставлено UX Misfit.

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

Показывает линии, которые вместе выглядят как самолет. Между этими формами есть пространство, которое разум автоматически заполняет и воспринимает. Изображение предоставлено Eye Can Learn.

• Близость: Простые формы, сложенные вместе, могут создать более сложное изображение.

Показывает две группы, состоящие из одной и той же круглой формы. Мозг воспринимал две группы из-за близости. Изображение предоставлено Smashing Magazine.

• Фигура/фон: Человеческий глаз изолирует формы от фона.

На переднем плане показаны два профиля одного цвета. Фон между ними другого цвета и выглядит как ваза. Изображение предоставлено Википедией.

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

Показывает уравновешенный круг, состоящий из половины велосипедного колеса и половины канализационной крышки. Кредит изображения Канва.

Понимание психологии UX-дизайна расширяет возможности дизайнеров

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