Шрифты для веб дизайна: 20 популярных шрифтов с поддержкой кириллицы для макетов сайтов и приложений

Leave a Comment / Разное / By /

Содержание

Выбор дизайнеров: лучшие шрифты Google на 2022 год

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

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

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

Несмотря на то, что существует так много удивительных инди-словолитней создающих всевозможные инновационные и классические шрифты, дизайнеры часто выбирают бесплатные шрифты, которые можно скачать в Интернете. В наши дни существует масса мест, где дизайнер может скачать шрифт, но сегодня мы хотим поговорить о нашем (и всеми) любимом – Google Fonts.

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

. Речь идет о высококачественных шрифтах, которые отлично работают на экранах любого типа и размера. Беда только в том, что их так много, что сложно выбрать. Фактически, вам доступно более 1200 бесплатных семейств шрифтов (и их число продолжает расти, поскольку Google регулярно добавляет новые), поэтому поиск подходящего вашему проекту шрифта может оказаться сложной задачей.

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

Krona One

Мы начинаем наш список с превосходного шрифта Krona One, созданного талантливым типографом Ивонн Шюттлер. Это малоконтрастный шрифт без засечек и один из немногих истинно полурасширенных стилей (хотя, мы рассматриваем его как полностью расширенный)

в репозитории Google Fonts. Вдохновленный рукописным шрифтом шведских плакатов начала 20-го века, Krona One несет в себе отчетливую атмосферу скандинавского ретро, ​​но на самом деле может соответствовать широкому спектру различных стилей и эстетики. Легко читаемый, просторный и яркий, Krona One – отличный выбор для заголовков или любого текста, который вы хотите сделать жирным и заметным. Тем не менее, это не значит, что его нельзя использовать и для более мелкого текста. Что мы и сделали в нашей теме Gracey, где Krona One используется для hero-типографики, а также для меню заголовка. Мы также сочли этот шрифт отличным выбором для демо Art Festival в теме Stockholm, где мы использовали как меньшие, так и большие стили Krona One.

Syne

Еще один шрифт, нашедший широкое применение в наших темах, Syne был впервые разработан в 2017 году в качестве пользовательского шрифта для художественного фестиваля Synesthésie в Сен-Дени. Концепция шрифта была придумана французской дизайн-студией Bonjour Monde, а спроектировал его Лукас Дескруа при участии Армана Мохтаджи. Syne выпускается в пяти различных стилях: regular, medium, semi-bold, bold и extra bold. Начало этой семье шрифтов, разумеется, положил regular стиль – прекрасный геометрический шрифт без засечек, удобный и подходящий для самого широкого применения, от заголовков до небольших фрагментов текста. Тем не менее, для тех, кто хочет заявить о себе более смело в своих заголовках, студия заказала дополнительные стили, каждый из которых тяжелее предыдущего и увенчан забавным, широким extra bold

стилем. Micdrop ​​– одна из наших тем, в которой более жирные стили Syne используются для создания особенно узнаваемого характера с легким намеком на ретро-эстетику. Некоторые домашние страницы тем, например, Label Showcase, используют только Syne, не комбинируя его с другими шрифтами, что показывает, насколько универсальным и практичным является этот шрифт, несмотря на его довольно громкий характер. Мы также выбрали Syne для нашей темы Laurits, где мы исследовали более мягкую сторону этого шрифта, который также очень хорошо сочетается с геометрическим, секционным макетом.

Italiana

Как следует из названия, Italiana – это шрифт без засечек, в значительной степени вдохновленный итальянской типографической традицией, в первую очередь рукописными стилями. Разработанный дизайнером Сантьяго Ороско как элегантный, утонченный шрифт с крохотной долей эстетики dolce vita, Italiana был в первую очередь предназначен для заголовков, напоминающих буквы, использовавшиеся в газетах и журналах начала 20-го века.

Italiana в настоящее время доступна только в обычном стиле, но семейство в разработке, поэтому мы надеемся, что скоро появятся дополнения. Это чистый, воздушный и пропорциональный шрифт, а его элегантный характер делает его особенно подходящим для модных и творческих проектов. В отличие от многих других дизайнерских творений, вдохновленных Италией, этот шрифт ни в малейшей степени не является производным и избегает обычных эстетических банальностей. Он легко адаптируется и хорошо вписывается в самые разные стили и контексты, и нам очень понравилось, как он соответствует атмосфере нашей темы Oráiste. Его сочетание тонких и толстых элементов, а также тщательный кернинг и интервалы делают Italiana воздушным, но самобытным шрифтом
, который отлично подходит для настроения, которое мы хотели создать с помощью нашей темы.

Bellezza

Как и Italiana, Bellezza черпает вдохновение в итальянской культуре, на этот раз в ее моде. Этот красивый, изысканный женственный шрифт без засечек принадлежит к группе гуманистических шрифтов, заимствованных из старых латинских шрифтов. Благодаря немного большему контрасту между тонкими и широкими штрихами, Bellezza добавляет индивидуальности гуманистическому стилю, а его классические пропорции делают его более читабельным и удобным. Когда мы работали над темой Töbel, Bellezza стала естественным и очевидным выбором. Шрифт с особенно элегантным характером стал отличным средством придания макетам дополнительной нотки изысканности и уникального итальянского шика.

Space Grotesk

Space Grotesk – это шрифт, разработанный чешским дизайнером Флорианом Карстеном на основе шрифта фиксированной ширины Space Mono от Colophon Foundry (также шрифта Google) 2017 года. При создании этого пропорционального шрифта без засечек Карстен хотел

сохранить некоторую причудливость шрифта Space Mono, но и сделать его более читабельным. Этот универсальный, адаптируемый шрифт доступен в пяти стилях: light, regular, medium, semi-bold и bold. Он отлично сочетается со своим старшим братом с засечками, Space Mono.

Federo

В 1909 году знаменитый пионер шрифтов без засечек Якоб Эрбар разработал шрифт Feder-Grotesk, который был впервые отлит в 1910 году франкфуртской словолитней Ludwig & Mayer. В 2011 году Олекса Волочай разработал для Cyreal цифровую интерпретацию этого классического шрифта – дисплейный веб-шрифт Federo. Идея заключалась в том, чтобы шрифт оставался близким к оригиналу –

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

DM Sans

Многие шрифты, которые вы можете найти в репозитории Google Fonts, на самом деле были заказаны самой Google, как и в случае с DM Sans. Он был разработан Джонни Пинхорном под творческим руководством DeepMind и MultiAdaptor, его выпустили в 2019 году. В его основу легла гарнитура Poppins от Pinhorn. DM Sans – это

малоконтрастный геометрический шрифт без засечек, который действительно нравится Google, и обычно он предназначен для текста меньшего размера. DM Sans хорошо сочетается с родственным шрифтом DM Mono, а также с Baskerville, Roboto и Noe. Он доступен в нескольких стилях: regular, medium и bold, с соответствующим курсивом. DM Sans поддерживает расширенный набор латиницы, а значит подходит для английского и большинства других западно-европейских языков.

DM Sans, безусловно, является одним из наших фаворитов на все времена, и мы использовали его для ряда тем, например, Zermatt, где он хорошо сочетается с бруталистскими и швейцарскими дизайнерскими акцентами. Мы также использовали DM Sans для нашей многоконцептуальной темы Stockholm, и, совсем недавно, для Qi Theme, нашей первой в мире бесплатной темы WordPress. DM Sans также был выбран для плагина Qi Addons for Elementor. Наш выбор был продиктован тем, что это чистый, очень

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

Caudex

Первоначально созданный в конце 1990-х годов, Caudex – это шрифт с засечками, который позже был адаптирован для Интернета с помощью FontForge. Первоначально созданный с использованием стандарта ISO 8859–1 и следуя рекомендациям Medieval Unicode Font Initiative 3.0, Caudex был разработан с целью печати старого рукописного текста. Фактически, его стиль представляет собой современный взгляд на надписи из средневековых манускриптов, а его индивидуальность представляет собой сочетание современной функциональности и классического орнамента. Он имеет два веса – regular и bold, а также соответствующий курсив. Помимо латинских глифов, он также включает греческие буквы. Caudex – это шрифт, который хорошо сочетается со многими шрифтами, как с засечками, так и без. Например, для нашей темы Gaspard, мы использовали его для текста и заголовков и объединили с Italiana для типографики hero-изображения, и с Catamaran для навигационных ссылок, создав элегантный и сбалансированный микс.

Cinzel Decorative

Являясь частью очень популярного семейства веб-шрифтов Cinzel, Cinzel Decorative является отличным выбором для дизайнов, которые хотят передать ощущение элегантности и класса. Этот шрифт с заглавными буквами, созданный Натанаэлем Гамой, следует классическим пропорциям и отличается элегантными росчерками и расширенными штрихами, которые придают ему каллиграфический вид. Это семейство шрифтов было основано на ранних римских надписях, но в современной интерпретации. Благодаря своему классическому характеру, Cinzel Contemporary прекрасно подходит для дизайна, связанного с литературой, искусством и культурой. Он доступен в нескольких стилях, включая extra bold и black. Более сдержанным представителем этого семейства является Cinzel, с теми же классическими пропорциями и стилем, но без завитков. Благодаря своему элегантному характеру, Cinzel стал идеальным выбором для заголовков нашей темы Belletrist, созданной для писателей, издателей и библиотек, где мы соединили его с не менее сложным Cormorant Garamond для абзацев и Open Sans для навигационных ссылок.

Viaoda Libre

Вдохновленный вьетнамским культурным наследием, символикой и письмом, Viaoda Libre – это семейство шрифтов, сочетающее в себе традиции и современность, привнося восхитительный твист в элегантную типографику с засечками. Созданный немецким дизайнером вьетнамского происхождения Gydient (Тра Джианг Нгуен) при участии Вьетаня Нгуена, Viaoda Libre предназначен для личного и коммерческого использования, и одинаково хорошо подходит как для заголовков, так и для меньшего текста. Название «Viaoda» представляет собой комбинацию «Vietnamese» и «Ao Dai» (Аозаи), термина, используемого для обозначения традиционной одежды, которую носят как женщины, так и мужчины. Штрихи шрифта напоминают мягкие плавные линии Аозай, а их общий характер тонкий и изысканный. Это вдохновение также заметно в ярко выраженных лигатурах между символами, таких как «st» и «ft», что делает шрифт таким ярким и узнаваемым. Будучи относительно новым семейством шрифтов, Viaoda Libre продолжает развиваться, и дизайнер надеется, что это добавит ценность вьетнамской культуре во всем мире.

Вывод

Это далеко не полный список наших любимых шрифтов Google на данный момент. Нашим дизайнерам было трудно сузить свой выбор, поскольку в репозитории Google есть так много невероятно хорошо продуманных гарнитур и семейств шрифтов, каждое из которых имеет свой характер и практическое значение. Выбор шрифта для дизайна, как всегда, зависит от множества факторов, среди которых его цель, предполагаемое использование и эстетический характер. При выборе шрифта также важно иметь возможность увидеть его в действии, и именно здесь такие ресурсы, как Fonts in Use, могут оказаться полезными. Мы надеемся, что наш список вдохновил вас на более глубокое погружение в репозиторий Google Fonts, а не использовать стандартные Open Sans, Roboto и Oswald. Множество замечательных, функциональных шрифтов с великолепным дизайном ждут вас и ваш следующий проект. Обязательно сообщите нам о своем открытии в области типографики и поделитесь тем, что вам понравится больше всего.

Перевод статьи medium.muz.li

ТОП-15 лучших дизайнерских шрифтов: самые крутые и популярные

На чтение 6 мин Обновлено ТэгиUX/UI-дизайн / Графический дизайн / Моушн-дизайн

Дмитрий Очаков

Дизайнер

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

Содержание

  1. Raleway
  2. Fira Sans
  3. Open Sans
  4. Uni Sans
  5. DIN Pro
  6. Avenir Next World
  7. San Francisco
  8. Geometria 
  9. Pragmatica
  10. Zona Pro
  11. Auch
  12. Garamond
  13. Colus
  14. Averta
  15. Forum

Открытая лицензия.

Источник

Raleway ― гротескный шрифт, то есть шрифт без засечек, который в 2010 году разработал дизайнер Мэтт Макинерни, он тогда создал первое начертание шрифтов. Затем над Raleway работали еще несколько дизайнеров: Пабло Импаллари, Родриго Фуэнсалида в Иджинио Марини. Они добавили в семейство другие начертания, в том числе курсив. Сейчас этот шрифт поддерживает 318 языков, начертания на латинице и кириллице.

Источник

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

Открытая лицензия.

Источник

Fira Sans ― еще один гротескный шрифт без засечек, созданный немецким типографом Эриком Шпикерманом специально для Mozilla Firefox. Он был разработан для удобства чтения как на большом мониторе, так и на мобильных устройствах с разным качеством экранов.

Источник

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

Открытая лицензия.

Источник

Open Sans завоевал популярность за счет применения в плоском дизайне (его еще называют flat design, то есть дизайн без передачи объема). Графический шрифт разработан Стивом Мэтисоном по заказу Google.

Источник

Где использовать: Open Sans по умолчанию используется в Mozilla Firefox, WordPress и Telegram. Так что если нужен популярный шрифт для веб-дизайна или сайтов, то присмотритесь к нему.

Открытая лицензия.

Источник

Uni Sans ― пример современного гротеска, с выраженным характером и геометрическим оттенком. Он смотрится дорого и профессионально, но чуть скругленные углы создают ощущение дружелюбия. Шрифт создан относительно недавно, в 2002 году, дизайнером Святославом Симовым и имеет 14 начертаний; из них бесплатно можно получить 4. 

Источник

Где использовать: Uni Sans используется для корпоративных проектов, телевидения, журналов, брендинга и упаковки.

Платная лицензия. Принадлежит компании Monotype.

Источник

DIN Pro был разработан голландским типографом Альбертом-Яном Пулом в 2009 году. Гротескный шрифт без засечек, создание которого уходит корнями в немецкие стандарты, определенные еще в 1931 году. У шрифта есть множество начертаний, функций, все знаки и почти все языки мира. 

Источник

Где использовать: Встретить DIN Pro можно на упаковках, плакатах, вывесках, также он подходит для рекламы и брендинга.

Платная лицензия. Принадлежит компании Monotype.

Источник

Шрифт Avenir создан в 1988 году Адрианом Фрутигером, который вдохновлялся геометрическим гротеском 1920-х годов. Позже на его основе появился Avenir Next World — это расширенная версия семейства, которая поддерживает более 150 языков, включая латиницу, кириллицу, греческий, иврит, арабский, грузинский, армянский и тайский.

Источник

Где использовать: В электронных и интерактивных материалах, приложениях, логотипах и полиграфии. 

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

Источник

San Francisco или просто SF разработан специально для Apple Watch в 2014 году. Поэтому он самый популярный среди брендовых шрифтов. Создатели ориентировались на то, чтобы текст можно было читать в маленьком кегле, на маленьком экране. Также он внедрен в iOS/Mac. Подсемейства у них два: Text и Display. Шрифт современный и динамично меняет начертания в зависимости от контекста. 

Источник

Где использовать: Для собственных, немонетизируемых проектов в digital-направлении.

Платная лицензия. Шрифт принадлежит компании Brownfox.

Источник

Geometria ― гротескный шрифт, который поддерживает 72 языка. Он разработан в 2013 году Вячеславом Кириенко и Гаяне Багдасарян. В России встречается часто, так как его используют государственные учреждения, например музеи. Geometria отлично подходит для чтения большого количества текста.

Источник

Где использовать: Geometria является одним из базовых веб-шрифтов, поэтому отлично подходит для сайтов.

Платная лицензия. Принадлежит компании Paratype.

Источник 

Pragmatica ― отечественный шрифт, который разработан Владимиром Ефимовым в 1987 году для энциклопедий. Позже его доработала Ольга Чаева, которая добавила еще 8 дополнительных начертаний. Pragmatica основана на шрифте Helvetica, поэтому не имеет засечек. 

Источник 

Где использовать: Используется для приложений, книг, журналов и рекламы.

Открытая лицензия.

Источник

Zona Pro создан греческим дизайнером Костасом Бартсокасом, который руководствовался геометрическими стилями 1920-х годов. В общей сложности у Zona Pro 16 начертаний, но бесплатны только несколько. Он поддерживает немного языков, но среди символов есть кириллица. 

Источник

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

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

Источник

Auch разработал турецкий дизайнер Мурат Юксель. Шрифт считается необычайно красивым и уникальным. В наборе есть спецсимволы и множество начертаний. Языков также много, поддерживает в том числе кириллицу.

Источник

Где использовать: Auch можно использовать в брендинге, на витринах и для заголовков. 

Открытая лицензия.

Источник

Garamond относится к классу антиква ― это типографские шрифты с засечками, которые появились еще в эпоху Возрождения. Вариантов этого шрифта много: есть классический, создание которого приписывают типографу Клоду Гарамонду в XVI веке, есть российская версия от Александра Тарбеева ― ITC Garamond, а есть версия для Apple ― Apple Garamond.  

Источник

Где использовать: Лучшее применение для Garamond ― приметные заголовки; еще его можно использовать в тех случаях, когда нужно создать чувство традиционности и неизменности. 

Открытая лицензия.

Источник

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

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

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

Источник

Averta разработан тем же дизайнером, что и Zona Pro. Это изящный авторский шрифт, который имеет черты как американского, так и европейского гротеска. У него больше 40 начертаний, порядка 200 языков. Он постоянно обновляется и имеет два бесплатных начертания. Читается хорошо не только в заголовках, но и в тексте.

Источник

Где использовать: Подходит как для электронного формата, так и для печатного.

Открытая лицензия.

Источник

Forum создал Денис Мошаров в 2011 году. Шрифт имеет античные, классические «римские» пропорции. В нем есть множество символов, знаков и языков, однако имеет он всего лишь одно начертание. 

Источник

Где использовать: Forum подходит для основного текста, заголовков и подзаголовков.

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-дизайна расширяет возможности дизайнеров

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

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

Words by
Джастин Моралес

Джастин Моралес (Justin Morales) — старший UX-дизайнер, в настоящее время работает в Signify Health, компании B2B Healthtech, базирующейся в Лос-Анджелесе. Он вырос в Техасе, повзрослел в Колорадо и провел свои последние 20 лет, живя в Австралии, Новой Зеландии и Азии. Его любимая среда — фотография, и он любит UX, потому что это означает постоянную помощь людям.

20 крутых шрифтов для веб-дизайна. Ознакомьтесь с этим списком современных… | Абхиджит Наяк

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

Изображение предоставлено: Маркус Винклер, источник: Pexels.com

Вы когда-нибудь пытались использовать несколько шрифтов в дизайне, но ни один из них не работал?

У меня есть.

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

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

Я также убедился, что все шрифты в этом списке соответствуют следующим 5 критериям.

  1. Они должны иметь современный и минималистский внешний вид и не выглядеть излишеством. Это придает лаконичный и чистый вид и обеспечивает удобочитаемость, что является основным требованием.
  2. Они должны быть масштабируемыми достаточными для использования на экранах разных размеров и универсальными достаточными для использования в различных сценариях использования и отраслях.
  3. Семейство шрифтов должно быть открыто и свободно доступно онлайн ( не обязательно для коммерческого использования! ), и оно должно иметь несколько начертаний и стилей на выбор дизайнеров. Я добавил ссылки для каждой семьи, так что вы можете скачать и использовать их бесплатно.
  4. Ими не следует злоупотреблять до такой степени, что они кажутся вездесущими и скучными (например, Futura).
    С другой стороны, есть много популярных шрифтов, которые используются повсеместно и по-прежнему актуальны благодаря своей универсальности. Вездесущность не мешает, когда дело доходит до выбора шрифтов, и часто есть веские причины, по которым некоторые шрифты так часто используются.
  5. Они должны использоваться как для отображения, так и для основного текста . Выбор дизайна шрифта для вашего основного контента сильно отличается от выбора шрифта для вашего заголовка и остается одним из основных решений для любого дизайна. Гарнитуры, которые можно использовать только в заголовках (и, следовательно, большинство декоративных шрифтов), не попадут в этот список.

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

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

Изучите типографику для дизайна… за 15 минут

Если вы графический или UX-дизайнер, этот пост для вас.

bootcamp.uxdesign.cc

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

Руководство по стилям шрифта

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

www.fontsmith.com

Установив контекст и ожидания, давайте сразу перейдем к списку из 20 (в произвольном порядке).

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

#1. Gotham Текст на языке Gotham

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

Загрузите семейство шрифтов Gotham с веб-сайта Cufon Fonts.

№2. Proxima Nova

Текст в Proxima Nova

Один из самых универсальных и хорошо известных шрифтов moser, Proxima Nova одинаково подходит как для печати, так и для использования в Интернете, и дизайнеры справедливо называют его «Helvetica для Интернета». Гораздо старше, чем некоторые другие шрифты в этом списке, его популярности среди веб-дизайнеров отчасти способствовали другие простые геометрические шрифты без засечек, в первую очередь Gotham. Proxima Nova сочетает в себе геометрические формы с современными пропорциями и находит широкое применение как для отображения, так и для основного текста.

Загрузите семейство шрифтов Proxima Nova из Adobe Fonts.

№3. Lato

Текст на языке Lato

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

Загрузите семейство шрифтов Lato из Google Fonts.

№4. Avenir Next

Text in Avenir Next

Avenir Next — один из самых популярных геометрических шрифтов без засечек, а оригинальный Avenir был разработан как реальная альтернатива кажущемуся жестким Futura (еще один вездесущий шрифт). Со временем веса и стили были расширены, а также были внесены дополнительные изменения для оптимизации шрифта для различных интерфейсов. Он одинаково успешен как для экранных, так и для печатных приложений, а Avenir Next Pro — последний шрифт в этой серии.

Загрузите семейство шрифтов Avenir Next из Cofonts.

№5. Source Sans Pro

Текст в Source Sans Pro

Разработанный как первый шрифт Adobe с открытым исходным кодом, Source Sans Pro предназначался в основном для использования в проектах пользовательского интерфейса. Шрифт имеет высокую степень разборчивости и хорошо подходит для длинного контента.

Загрузите семейство шрифтов Source Sans Pro с сайта Fontsquirrel.

#6. Open Sans

Текст в Open Sans

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

Загрузите семейство шрифтов Open Sans из Google Fonts.

#7. Roboto

Текст в Roboto

Если вы дизайнер, вы знаете Roboto. Разработанный Google в 2011 году для использования в ОС Android, нетрудно понять, почему это убийственный шрифт для цифровых пользовательских интерфейсов. По сей день он продолжает оставаться шрифтом по умолчанию для Android.

Загрузите семейство шрифтов Roboto из Google Fonts.

#8. Nunito

Текст в Nunito

Сбалансированный шрифт без засечек, Nunito использует закругленные концы символов (см. окончания строчной буквы «l» и прописной буквы «N») и изначально был разработан для использования в качестве отображаемого текста. Также доступна некруглая терминальная версия Nunito Sans.

Загрузите семейство шрифтов Nunito из Google Fonts.

#9. IBM Plex Sans

Текст в IBM Plex Sans

Этот шрифт, вероятно, лучше всего описывается словами самой IBM: «Он глобальный, универсальный и определенно принадлежит IBM». спроектированный. Evergreen по своему дизайну задумывался как современная альтернатива знаменитой Helvetica Neue. Он также оптимизирован для улучшения разборчивости при меньших размерах.

Загрузите семейство шрифтов IBM Plex Sans из Google Fonts.

№10. Exo

Текст в Exo

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

Загрузите семейство шрифтов Exo из Google Fonts.

№11. Текст Ubuntu

в Ubuntu

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

Загрузите семейство шрифтов Ubuntu из Google Fonts.

№12. SF Pro Display

Text in SF Pro Display

SF Pro Display наиболее примечателен тем, что используется Apple на macOS и iOS. Этот нейтральный и универсальный шрифт без засечек имеет девять весов. Это переменный шрифт, который включает в себя переменную ширину в сочетании с весом и оптическими размерами.

Загрузите семейство шрифтов SF Pro Display из Cufon Fonts.

№13. Corbel

Текст в Corbel

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

Загрузите семейство шрифтов Corbel с сайта Dafont.

#14. TT Norms Pro

Текст в TT Norms Pro

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

Загрузите семейство шрифтов TT Norms Pro с веб-сайта Cufon Fonts.

№15. Монтсеррат

Text in Montserrat

Монтсеррат я намеренно оставил напоследок. Этот геометрический шрифт без засечек, разработанный в 2011 году и вдохновленный городской типографикой, был невероятно популярен среди веб-дизайнеров и использовался на миллионах веб-сайтов на протяжении многих лет. Но, как указывалось ранее, повсеместность не является решающим фактором, когда речь идет о шрифтах. Montserrat также часто рассматривается как альтернатива аналогичным шрифтам без засечек, таким как Gotham и Avenir.

Загрузите семейство шрифтов Montserrat из Google Fonts.

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

#16. Playfair Display

Текст в Playfair Display

Загрузите семейство шрифтов Playfair Display из Google Fonts.

#17. Merriweather

Текст в Merriweather

Загрузите семейство шрифтов Merriweather из Google Fonts.

#18. Libre Baskerville

Текст в Libre Baskerville

Загрузите семейство шрифтов Libre Baskerville из Google Fonts.

#19. PT Serif

Текст в PT Serif

Загрузите семейство шрифтов PT Serif из Google Fonts.

#20. Lora

Текст в Lora

Загрузите семейство шрифтов Lora из Google Fonts.

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

И последнее замечание: помните об этих простых советах при применении шрифта к дизайну

  • Ограничьтесь 1 или максимум 2 шрифтами . Если вы запутались, используйте разные веса из одного и того же семейства типов.
  • Установите высоту строки на ~150% от размера шрифта для хорошей читабельности. Так что, если ваш шрифт 12 pt, высота строки может быть 18 pt.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *