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

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

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

Как люди читают в интернете

Исследование «Как люди читают в интернете», опубликованное американской компанией Nielsen Norman Group в 2020 году, говорит о том, что люди предпочитают сканировать страницы глазами, прежде чем решают прочитать текст внимательно. Сканирование происходит по разным паттернам, но практически всегда взгляд читающего скользит по заголовкам.

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

Когда выбрал неподходящий шрифт

Разновидности шрифтов для сайта

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

1. Шрифты с засечками. Они облегчают чтение печатных изданий, визуально очерчивая строки. Но в веб-дизайне они скорее усложняют восприятие и рассеивают внимание читателя. Основное назначение таких шрифтов – использование в логотипах, выделение заголовков и важной информации на странице.
2. Рубленные. Шрифты нейтрального характера, без засечек. Подходят для заголовков, параграфов, основного текста.
3. Декоративные. Они выглядят оригинально, ярко. Такие шрифты отлично подойдут для молодежных сайтов и любой тематики, связанной с творчеством. Но применять их нужно очень осторожно: текст, написанный декоративным шрифтом, сложный для чтения. Чаще всего их используют для создания логотипов и выделения заголовков.

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

Какие шрифты актуальны в 2020-х

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

• Коллекция обширная и включает только качественные бесплатные шрифты.
• С ними не возникает проблем при верстке — легко подключить библиотеку и подтягивать из неё любой шрифт.
• Библиотека Google Fonts поддерживает разные виды сортировки содержимого.

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

Рейтинг самых популярных шрифтов Google Fonts начала 2020-х выглядит так:

1. Roboto. Легко читается даже в маленьком размере и прекрасно работает в паре с другими кириллическими шрифтами Google Fonts.

Roboto был взят за основу при разработке веб-студией «Бизнес Сайт» интернет-магазина «Мир клея».

2. Open Sans. Еще один универсальный шрифт для длинных текстов и заголовков. Читается в любом размере, вплоть до самого мелкого, годится для баннеров, презентаций, рекламных креативов.
3. Montserrat. Аккуратный шрифт в урбанистической стилистике, идеально подходящий для использования в рекламе. Его козырь — читабельность. Выглядит он тоже достаточно представительно, чтобы найти ему место в заголовке.

В дизайне страниц сайта веб-студии Business Site мы используем Ubuntu — приятный, понятный, читабельный, стильный

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

Характер и настроение шрифта

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

• Юмористические зарисовки, оформленные гарнитурой Times, посчитало смешными на 10% больше читателей, чем при оформлении Arial.
• Текст, напечатанный Baskerville, по сравнению с этим же самым, напечатанным Comic Sans, признали более убедительными

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

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

Если в этой паре соединить противоречащие друг другу гарнитуры, внимание читателя сосредоточится на самих шрифтах, а не на содержании страницы. Например, если заголовок выполнен в Franklin Gothic (элегантный, солидный, мужественный стиль), а основной текст в Souvenir (легкомысленный, игривый), в результате получится противоречивое сочетание, которое мешает гармоничному восприятию статьи. А если заменить шрифт заголовка на Futura Bold, картина полностью изменится: эти два шрифта дополнят друг друга благодаря схожести элементов и не создают ненужного напряжения.

Ищем правильные сочетания шрифтов для сайта

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

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

Задача дизайнера — проработать все эти факторы, выдерживая дресс-код тематики сайта.

Секреты правильного подбора шрифтов для сайта от дизайнеров

• Не использовать больше 3 шрифтов для оформления сайта. Большее количество будет отвлекать внимание посетителей. К тому же, на подгрузку шрифтов нужно больше времени, а даже доли секунды замедления скорости загрузки страницы отрицательно сказываются на эффективности поискового продвижения и лояльности пользователей.
• Следите за читабельностью. Когда текст не читается, всё остальное — не важно, просто меняйте шрифт.. Чтобы пользователь не покинул страницу в первые же секунды после перехода, важно убедиться, что текстовый контент легко читается и выбраны правильные параметры: цветовое сочетание, размер, начертание и пр.
• Используйте типографику логично. Для этого применяются разные гарнитуры или один и тот же шрифт, но с разными параметрами насыщенности, размера, начертания. Но так, чтобы в выборе была логика —- заголовки не были мельче подзаголовков, а основной текст не сливался с подложкой. Это помогает посетителю сориентироваться на странице.
• Следите за сочетанием шрифтовых пар и меняйте при возникновении малейших сомнений. Классические варианты: шрифт с засечками + рубленый, сочетание шрифтов разного класса, контрастная насыщенность шрифта в заголовке и в основном тексте, сочетание шрифтов различной тональности, яркое + нейтральное. Оценить гармоничность типографики можно приемом «бокового зрения»: направить взгляд левее или правее текста, чтобы воспринимать картинку в целом, не читая текст.

Полезные инструменты в работе со шрифтами

Подберите удачные сочетания шрифтов для сайта при помощи онлайн-сервисов:

• Google Type: большое количество шрифтовых пар, подобранных дизайнерами.
• Type Genius: вводите основной шрифт и получайте подходящую пару.
• Font Combinator , простой в использовании сервис, позволяет выбирать и гарнитуру и тип шрифта для заголовков и основного текста среди гармонирующих между собой вариантов.
• Font Pair: подбирайте шрифтовую пару по выбранным в фильтре характеристикам и скачивайте их на свой компьютер.
• The Art of Mixing Typefaces – таблица-шпаргалка по сочетаемости шрифтов для веб-дизайнеров.

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

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

ТОП 10 лучших шрифтов для сайта в 2020 году

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

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

Рукописный шрифт явно не подходит для сайта юридической компании

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

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

Тяжелый официальный шрифт с засечками не подходит детскому магазину сладостей
 

Посыл сайта

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

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

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

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

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

• Черно-белые фотографии, для придания винтажности
• Темные и насыщенные традиционные цвета
• Классический курсивный шрифт с засечками

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

Различия между семействами шрифтов

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

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

Black lettering – жесткий, тяжелый, трудночитаемый готический шрифт. Является древнейшим семейством шрифтов, именно с использованием таких шрифтов человечество писало свои первые книги. В настоящее время рекомендуется использовать его только в заголовках.

Slab-serif – семейство шрифтов с толстыми засечками. Являются современной версией шрифтов с засечками. Обычно такие шрифты ассоциируются с модой, молодежью, «хипстерами». Рекомендуется также использовать их только для заголовков или для выделения цитат в тексте.

Sans-serif – современный шрифт без засечек. Шрифты этого семейства могут быть различными: более округлыми, квадратными, легкими или более толстыми. В данном семействе достаточно много стилей шрифтов, поэтому разобрать их стоит отдельно.

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

Очень популярный шрифт без засечек – Helvetica. Причина его популярности – четкое сохранение разницы в высоте символов. Закруглённые символы шрифта делают чтение больших текстов комфортным и простым. Данный шрифт используется как в заголовках, так и для сносок, цитат и главного текста. Шрифт хорошо читается в любом размере.

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

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

Рекомендации по выбору шрифта

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

 Данное правило связано с тем, что почти все станицы сайта состоят из одних обязательных элементов: заголовка, основного текста и дизайнерских элементов (сноски, цитаты, описания изображений). Если использовать более 3 видов шрифта в этих видах контента, то на странице потеряется вся иерархия, всё будет выглядеть запутанно и «грязно».

Выбор шрифта для сайта

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

• Google Fonts – предлагает бесплатные шрифты, созданные профессионалами
• Fonts Adobe – шрифты предлагаются в едином пакете подписки Adobe Cloud.

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

На что стоит обратить внимание при выборе шрифта для веб-сайта:

Толщина шрифта

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

Проверка читаемости

После выбора шрифта с хорошим набором разных толщин, необходимо проверить как он отображается на мобильной и «декстопной» версии сайта. Ведь при нормальном отображении на большом экране, шрифт может оказаться не читаемым на мобильном устройстве. Особенно такое может случаться с очень тонким («Lite») шрифтом. Но так как у шрифта есть несколько толщин, то не составит особого труда сделать его немного толще, где это необходимо.

Сочетание шрифтов

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

Специалисты в веб-дизайне чувствуют и знаю какие шрифты стоит использовать вместе. А вот для начинающих это может быть проблемой, это станет точкой преткновения. Но для таких людей есть помощники в интернете, например, при выборе шрифта в Google Fonts система автоматически предложит сочетающиеся варианты шрифтов. Или можно использовать сервис fontjoy.com — он автоматически подбирает сочетающиеся шрифты, просто нужно нажимать на кнопку «Сгенерировать».

Размер загружаемого шрифта

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

Совместимость браузеров

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

Второстепенный шрифт

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

ТОП 10 лучших бесплатных шрифтов:

Roboto

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

Шрифт Roboto

Open Sans

Второй по популярности шрифт, также отлично читается при использовании на сайтах. Бесплатен в Google Fonts, поддерживает кириллицу.

Шрифт Open Sans

Montserrat

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

Шрифт Montserrat

Roboto Condensed

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

Шрифт Roboto Condensed

Source Sans Pro

Еще один вариант современного шрифта для сайта. Прекрасно читается, имеет множество вариантов толщины. Бесплатен в Google Fonts, поддерживает кириллицу.

Шрифт Source Sans Pro

Oswald

Прекрасно подходит для оформления заголовков в современном веб-дизайне. Шрифт вытянутый, стильный, внушительный. Бесплатен в Google Fonts, поддерживает кириллицу.

Шрифт Oswald

Merriweather

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

Шрифт Merriweather

Noto Sans

Шрифт без засечек с простым дизайном букв. Имеет несколько вариантов толщины. Бесплатен в Google Fonts, поддерживает кириллицу.

Шрифт Noto Sans

Yanone Kaffeesatz

Еще один шрифт для ярких, запоминающихся заголовков. По легенде, создавался под стилизацию кофеен начала 20 века. Шрифт выглядит дорого и старомодно, прекрасно подойдет для сайта и дизайна полиграфии. Бесплатен в Google Fonts, поддерживает кириллицу.

Шрифт Yanone Kaffeesatz

Caveat

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

Шрифт Caveat

Итог

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

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

В итоге вы остановитесь на том самом идеальном шрифте, которые идеально дополнит ваш сайт. Удачи!

5 веб-сайтов с лучшим дизайном 2020 года

Иллюстрация Трейси Дай

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

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

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

5 главных тенденций дизайна 2020 года

Каждый год мы видим, что в центре внимания оказываются определенные тенденции дизайна. Они распространяются как лесной пожар, и их использование может значительно способствовать вашему успеху. Идти в ногу со временем не только говорит с вашим пользователем, но и подтверждает ваш бренд. Ниже приведены 5 основных тенденций дизайна, которые мы наблюдали в 2020 году.0003

1. Темный режим

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

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

Целевая страница веб-сайта кофе в темном режиме. Изображение предоставлено akorn.creative. Целевая страница в темном режиме с основным изображением рубашки и костюма с кнопкой с надписью «Начать». Изображение предоставлено Davenport Blazers.

2. Совмещение фотографий с иллюстрациями и графикой

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

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

Целевая страница с фотографиями и графикой, чтобы произвести визуально привлекательное первоначальное впечатление. Изображение предоставлено Женей Рынжук. Главная страница компании, продвигающей подушки безопасности для велосипедистов. Он включает в себя настоящие фотографии байкеров, окруженные графикой, чтобы сделать целевую страницу визуально привлекательной. Изображение предоставлено Игорем Венско.

3. Минимализм и пустое пространство

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

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

Пример веб-страницы с минималистичным дизайном и большим количеством пробелов, привлекающих внимание к слогану. Изображение предоставлено Whiteboard.Photo маркетинговой кампании «Гадкий я 3», включающей пустое пространство. Изображение предоставлено Illumination Entertainment.

4. 3D везде!

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

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

Изображение 3D-обуви, создающее ощущение реальности. Изображение предоставлено Toke. Изображение 3D-рамки с предметами внутри и логотипом Gucci, написанным над ней на стене. Изображение предоставлено Г. Г. Мармоном.

5. Оптимизированная минимальная навигация

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

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

На целевой странице отображается очень мало вариантов навигации, кроме кнопки «Вниз» или «Уведомить меня». Изображение предоставлено deandesign. Пример веб-сайта с ограниченной навигацией; единственный призыв к действию — электронная почта. Изображение предоставлено Клинтом Инглишем.

5 веб-сайтов с лучшим дизайном 2020 года

Теперь, когда мы понимаем современные тенденции дизайна, давайте рассмотрим несколько хороших примеров дизайна веб-сайтов. Эти примеры отражают тенденции и показывают, насколько мощными они могут быть. Если вы когда-нибудь задавались вопросом: «Как выглядит хороший веб-сайт?» тогда я рад представить вам 5 веб-сайтов с лучшим дизайном 2020 года.

1. Harry’s

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

Существует также минималистичный подход к навигации, поэтому пользователь не будет так отвлекаться. Этот минималистичный подход хорошо работает в мобильном дизайне, поскольку пространство ограничено. Harry’s — отличный пример минималистичной и простой темы, выполненной хорошо. Целевая страница

Harry включает пустое пространство, предварительное ценностное предложение, минимальную навигацию и хорошо заметный CTA. Изображение предоставлено Гарри.

2. Hoang Nguyen

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

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

Целевая страница с красивыми 3D-изображениями и большим количеством пустого пространства. Кредит изображения Хоанг Нгуен.

3. Orano

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

Целевая страница с использованием темного цвета в дизайне. Изображение предоставлено Орано .

4. EmberHouse

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

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

5. Couro Azul

Есть много отличных примеров веб-дизайна, однако этот занимает призовое место. Этот шедевр гибкого дизайна демонстрирует кожаные салоны Couro Azul для основных рынков, включая самолеты, транспорт и железную дорогу. С их аккуратной информационной архитектурой, темными темами, 3D-визуализацией и захватывающим звуковым оформлением неудивительно, что он попал в список лучших веб-сайтов 2020 года.

Изображение трехмерного кожаного автокресла на одной стороне экрана и темный стиль на другой со словом «Добро пожаловать». Изображение предоставлено Куро Асуль.

Теперь ваша очередь

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

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

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

Дизайнерское вдохновение для рабочих процессов 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-дизайнер и писатель.

This entry was posted in Популярное