Как выбрать шрифт для сайта
7,728 просмотров всего, 3 просмотров сегодня
Оглавление
- Виды шрифтов
- Что нужно учитывать при выборе шрифта
- Технические параметры
- Выводы
Мы часто говорим о том, что текст должен быть уникальным и полезным для пользователей. Но наряду с содержанием большое внимание уделяется и форме подачи материала. В работе копирайтера под ней понимают структурированность текста, в работе дизайнера — типографику. Пожалуй, основным ее элементом является шрифт. И перед дизайнером встает эта непростая задача — подобрать его для сайта.
В этой статье рассмотрим, какие бывают виды шрифтов и чем руководствоваться при их подборе.
Как будет читаться текст, во многом зависит от того, как выглядят сами буквы. Быть может, вы удивитесь, но шрифт даже способен создавать настроение, влиять на общее впечатление от текста, сайта, а значит и компании в целом. Неслучайно, крупные бренды разрабатывают уникальное написание букв, которое затем становятся их визитной карточкой.
О фирменном стиле и шрифтах как одном из его элементов читайте в нашей статье “Фирменный стиль: правила, исключения, секреты”.
Может показаться, что настроение сайта, его тон задает графика. На самом деле шрифт ничуть ей в этом не уступает. Несмотря на обилие возможностей для работы с изображениями и видео, он не теряет своих позиций. Во многом это связано с современными требованиями к адаптивности сайта. Графика замедляет скорость загрузки страницы, а вот шрифты нет. При грамотном их подборе можно создать самые разные сайты от строгих до креативных. Таким образом, как и любой другой элемент дизайна, то, как выглядят буквы, будет влиять на поведенческие факторы.
Виды шрифтов
Существует два основных семейства, или гарнитуры. Буквы с засечками — антиквы, без засечек — гротески.
Первые изначально использовались в книгоиздательстве. Засечки формируют строку и взгляд не сбивается при переходе с одной на другую. Если раньше с монитора было трудно читать материал, написанный шрифтом с засечками, то благодаря современному разрешению дисплеев, это стало очень даже удобным.
Гротески изначально больше подходят для web-среды. Их можно использовать и в длинных, и в коротких текстах. Эта гарнитура более привычна для глаз пользователей. Также ее применяют для логотипов. Она широко распространена в дизайне благодаря своей лаконичности, динамике, современности.
К этой классификации добавим рукописные и моноширенные шрифты.
Если с рукописными все понятно, то вторая требует пояснений.
Моноширенный шрифт — тот, чьи знаки имеют одинаковую ширину и могут быть вписаны в квадрат.
Рассмотрим семейства и то как начертание букв отражается на восприятии текста.
- Антиквы — классика, элегантность, утонченность.
- Гротески — минимализм, динамика
- Рукописные — оригинальность, декоративность
- Моноширенные — устойчивость, уверенность.
Если антиквы и гротески могут применяться для любых текстов, то рукописные и моноширенные уместны для небольших текстовых блоков. Их использование обусловлено стремлением привлечь внимание к определенной информации или общей концепцией дизайна.
Есть и еще одна очень простая и важная классификация — стандартные и нестандартные варианты.
Стандартные поддерживаются каждой операционной системой, каждым браузером. Используя их, вы можете быть уверены, что пользователь увидит сайт таким, как вы задумали. Наиболее популярными из этой группы являются Times New Roman, Arial, Verdana, Tahoma, Georgia.
Если вы выбираете нестандартные, то они будут дополнительно подгружаться в браузер пользователя, что может незначительно снизить скорость загрузки страницы. С другой стороны, вы получите более выразительный, незаюзанный вариант. Подобрать такие шрифты можно на Google Fonts, MyFonts, Fontsquirrel. За большую часть придется выложить деньги, но при желании можно найти и бесплатные. При покупке или скачивании обратите внимание на его лицензию, где прописаны правила пользования. Так вы облегчите жизнь себе и своему заказчику.
Как и везде, где есть платные материалы, есть и пиратский контент. Пользуясь им, дизайнер и владелец сайта становятся пособниками мошенников, незаконно получивших к ним доступ.
Но как все же его выбрать, тем более, платный? Такая ответственность. Специализированные ресурсы ввели возможности тестирования онлайн. Вы не только можете посмотреть сочетаемость разных шрифтов, но и поэкспериментировать с начертаниями, цветом фона.
Что нужно учитывать при выборе шрифта
- аудиторию веб-ресурса
- содержание будущих текстов
- читабельность
Как правило, для сайта выбирается 3-4 шрифта. Это помогает показать иерархию подаваемой информации, выделить некоторые блоки. Сначала находится оптимальный вариант для тела сайта, затем для заголовков и после для отдельных смысловых элементов. Для дизайнера здесь все усложняется тем, что необходимо скомбинировать эти шрифты. Причем необязательно, чтобы это были представители одного семейства. Вот уж задача не из простых — найти варинты, которые будут гармонировать друг с другом, но при этом не будут казаться слишком похожими. А еще у каждого есть по несколько начертаний, например, жирное, полужирное, тонкое и т. д. Использование большого количества разных начертаний может дополнительно отразиться на скорости загрузки.
Основной совет при подборе — не злоупотреблять количеством. Некоторые дизайнеры обходятся одним шрифтом, используя разные начертания. Однако, правила существуют для того, чтобы их нарушать. И если концепция сайта подразумевает многообразие — действуйте. Только учитывайте, что такое решение будет постоянно перетягивать внимание пользователя из одной точки в другую.
Если вы начали свой путь в digital с создания логотипа, то там уже, как правило, использовано несколько шрифтов, чаще всего два. Поэтому прикидывая их количество для сайта, не забывайте учитывать уже примененные в лого.
Более подробно о создании логотипа читайте в нашем материале “Как самому создать логотип компании”.
БЛОК ПРО НАШ САЙТ НА ПОДЛОЖКЕ
Для сайта Stebnev Studio мы выбрали два шрифта: антикву PT Serif и гротеск Fira Sans. Сочетаемость достигается за счет идентичности основных форм букв. Наш логотип создан с использованием шрифта с засечками, так что антиква является продолжением фирменной темы, а гротеск разнообразит визуальную составляющую.
Еще один важный эстетический момент — соотношение цвета знаков с фоном, степень контрастности. Классическим сочетанием для человеческого глаза, конечно, является черный текст на белом фоне. Но раньше все было по-другому: из-за разрешения мониторов чаще всего использовался белый текст на черном фоне.
Сегодня, если вы хотите повысить читабельность текста, стоит сделать подложку не белоснежной, а сероватой. И сам шрифт может быть не черным, а темно-серым. Таким образом вы снизите яркость, и пользователи будут меньше уставать при изучении веб-ресурса. Сочетания цветов могут быть самыми разными. Главное, чтобы это не утомляло глаза и не “калечило” психику посетителй сайта.
Технические параметры
Размер — ключевой момент для читабельности. В веб-среде не принято использовать для тела сайта шрифт менее 12 пикселей. Для сносок и подписей применяется 8-10 пикселей. Оптимальным вариантом для тела ресурса будет 14-18 пикселей. Важно соблюдать единообразие. Т.е. каждый структурный элемент, например, заголовок должен быть везде одного размера.
Расстояние между знаками, или кернинг. Как правило, определяется создателем шрифта. Изменить его веб-дизайнер может в заголовке или в цитате, где важно именно визуальное оформление.
Еще два параметра относятся к типографике в целом.
Интерлиньяж — расстояние между строками. По сути текст представляет собой сочетание знаков и “воздуха”. Так вот, чтобы читатель не “задохнулся”, расстояние между линиями букв должно быть больше, чем размер шрифта в 1, 5 раза. Длина строки важна для комфортного перемещения взгляда по тексту. Оптимальным считается — 600 пикселей. Текст должен быть выровнен по левому краю. Если сайт подразумевает более широкие строки, то можно вспомнить газету и разбить текст на несколько колонок.
После того, как дизайн готов, начинается тестирование его элементов.
Не стоит обходить своим вниманием шрифт. Часто дизайнеры видят свое творение только через фотошоп, точнее, сквозь призму фотошопа. Но в реальности все может сильно отличаться. Проверьте, как выглядят страницы сайта в разных операционных системах и браузерах. В особенности если мы использовали нестандартные.Если вы собираете фокус-группу для тестинга дизайна, обязательно включите в задание оценку шрифта, а точнее читабельности текста.
Выводы
Задавшись вопросом, что лучше подойдет для вашего сайта, не упускайте из вида сочетание эстетики и функциональности. Если выбранный шрифт будет красивым, но текст будет трудно прочесть, вряд ли это улучшит юзабилити и поведенческие факторы.
Подбирая шрифт для сайта, руководствуйтесь не только собственными предпочтениями, но и объективными данными. Задача дизайнера — оформить площадку, на которой будет размещена определенная информация. И все должно работать на эту информацию и ни в коем случае не отвлекать внимание от нее.
- Еще раз выделим пункты, которые стоит учитывать при подборе шрифтов
- не больше 3-4 для сайта
- не использовать в основных текстах шрифты, сложные для чтения
- должен контрастировать с фоном
- для основного текста размер не менее 14 пикселей
- длина строки не более 600 пикселей
- интерлиньяж в 1, 5 раза больше высоты букв
Как и с любым другим элементом дизайна, здесь есть масса ограничений, которые затем превращаются в подспорье. Не бойтесь экспериментировать, и ваши сайты обязательно достигнут поставленных целей.
Как выбрать шрифт для сайта
Выбор шрифта, который бы подходил по тематике ресурса, был удобным для прочтения текста и гармонировал с общим стилем сайта – вопрос достаточно сложный, требующий тщательной проработки. Это ключевым образом играет на лояльности потребителей к деятельности компании, а также помогает принять положительное решение в сторону заказа услуг или товара с сайта. Подходящий шрифт подбирается по нескольким критериям.
Выбираем шрифт для сайта
Шрифт для сайта
Заголовки и основной текст
Для текстового контента на сайт подбираются 2 вида шрифта: для основного текста и заголовков. Это удобно для чтения статей, так как посетителям сайта сразу понятно, где основной текста, а где заголовки. Также такое разделение благотворно влияет на дизайн сайта. Общий стиль ресурса становится более целостным и структурированным.
Если 2 видов шрифта для тематики сайта не хватает, следуют простому правилу: не более 4 видов шрифтов на страницу. К примеру, заголовок – Verdana, основной текст – Calibri или Arial.
Нужен ли шрифт за засечками?
Засечки – короткие штрихи на концах букв. Альтернативное название serif-шрифты, к которым относятся Garamond, Times New Roman, Georgia. Наибольшей популярностью такие шрифты пользуется в печатной продукции. Они созданы специально, чтобы сделать процесс чтения на бумаге более комфортным. Глаза устают гораздо меньше даже при длительном чтении.
Влияние засечек и размера шрифта на сайте на восприятие информации
Размер шрифта на сайте
Это интересно! Для оформления кода используются шрифты monospace, имитирующие шрифт печатной машинки. К ним относятся Lucida Console, Courier, Monaco.
Для восприятия текстовой информации с экрана в большинстве случаев используется шрифт без засечек. Альтернативное название таких шрифтов sans-serif. К таковым относятся Trebuchet, Verdana, Arial, Helvetica. Дело в том, что на экране вне зависимости от вида и диагонали засечки существенно мешают чтению текста.
Важно также оставлять оптимальное промежуточное расстояние, что позволяет визуально разделять строки. Использовать засечки в шрифтах для сайтов можно только в случае необходимости выделить определенную часть текста или в заголовках.
Цветовые решения
Наиболее простое и эффективное решение – использование цветового круга. Цвет шрифтов должен соответствовать общей цветовой гамме сайта. Удачные сочетания расцветок представлены на сервисе Color Weel от компании Adobe. Подобранные сочетания все равно нужно тестировать (причем, как между собой, так и относительно фона сайта).
Правила выделений
Цветовое оформление – далеко не единственный способ правильно, эффективно и гармонично выделить текст. Для этого есть отдельный прием. К примеру, общий цвет текста – белый, а выделение важных фрагментов выполняется черным цветом. В этом случае нужно выдерживать контрастность. Чем выше этот показатель, тем эффективнее будет выделение. Это обуславливает простоту восприятия информации. Это касается и фона: черный текст гораздо проще читать на белом фоне и наоборот. Наоборот, светло серые буквы плохо просматриваются на белом фоне.
Размер имеет значение
Размер текста ключевым образом влияет на удобство восприятия информации. Размер шрифта на сайте для текста и заголовков должен отличаться. К примеру, заголовок – 16, основной подзаголовок – 14, основной текст – 12. Минимальный размер основного текста – 10, максимальный – 16. При этом, нужно соблюдать пропорцию между основным текстом и заголовками.
Где скачать популярные шрифты
При использовании шрифтов, обратите внимание на правила лицензирования. Использование ворованных шрифтов на сайте чревато ответственностью со стороны законодательства. Чтобы избежать волокиты с приобретением лицензий для сайтов существует множество шрифтов на бесплатной основе. Они доступны для скачивания на следующих популярных ресурсах:
- Google Fonts;
- FontSpace;
- 1001 Free Fonts;
- FontStruct;
- Font Squirrel;
- DaFont;
- Urban Fonts;
- Abstract Fonts.
Каждый из них имеет свои особенности. Сервисы наполнены платными и бесплатными шрифтами, которые уже широко используется для коммерческих и не коммерческих сайтах различной тематики. Для удобства поиска и восприятия шрифты поделены на категории. Это существенно упрощает поиск подходящей информации и дизайна шрифта. Благодаря такой особенности, веб-дизайнер и администратор сайта экономит свое время и силы.
Большое количество платных шрифтов расположено на сервисе MyFonts. Здесь представлена большая коллекция шрифтов, которые подходят для сайтов любой тематики. Ресурс характеризуется популярностью среди отечественных и иностранных специалистов в области создания сайтов.
Заключение
Одним из важных правил эффективного веб-дизайна является выбор шрифта. У него есть множество параметров (вид, размер, цвет, засечки или без них и так далее). При подборе шрифта нужно учитывать, что конечная цель – удобное и комфортное восприятие посетителями сайта предоставляемой информации.
Однако следует понимать, что слишком простой дизайн может навредить общей концепции внешнего вида ресурса, а также наоборот – вычурность может сыграть отрицательную роль при чтении текста. Наиболее эффективный путь – гармонично сочетать ключевые параметры шрифта с общей концепцией дизайна сайта.
Для максимально эффективной подборки вида и размера шрифта в Интернете существует множество сервисов (подбор цветовой гаммы, сервисы с платными и бесплатными шрифтами и так далее). Они имеют простой интерфейс, что позволяет разобраться в особенностях использования за минимальное время.
ЧИТАЙ ТАКЖЕ
Как настроить цели в Google Analytics на кнопку
Как считать LTV (Lifetime Value) клиента
Цена клика в Яндекс.Директ
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 — отличная платформа для проверки. Он предлагает широкий спектр вдохновения от моды до графического дизайна. Это также упрощает сбор и создание коллекций, специфичных для различных типов дизайнерских работ.
Designspiration
Концепция Designspiration, аналогичная Pinterest, уделяет особое внимание тенденциям в дизайне. Это отличное место, чтобы посетить и изучить широкий спектр дизайнерских работ, чтобы получить вдохновение для ваших будущих и текущих проектов.
Dribbble
Платформа номер один для обмена проектными работами и получения вдохновения — Dribbble. Платформа выступает в качестве места для обмена и продвижения вашей работы, а также для поиска любимых дизайнеров и подписки на них. Это прекрасное место, где можно найти вдохновение для дизайна с низкой и высокой точностью.
Instagram больше не просто место для обмена фотографиями и личным опытом; он стал домом для всех видов искусства. Если вы еще этого не сделали, следите за хэштегами, связанными с UX-дизайном, такими как #ux, #uxdesign и #userresearch, чтобы получать регулярную дозу дизайнерской работы, которой делятся другие дизайнеры UX/UI.
Дизайнеры работают вместе и просматривают множество дизайнерских вдохновений, которые они собрали. Изображение предоставлено Adobe Stock.Как использовать вдохновение в дизайне
Вдохновение в дизайне означает не поиск дизайна для повторения, а скорее изучение работ других дизайнеров, чтобы вдохновить на какой-то элемент вашего дизайна. Это может быть что-то совершенно не связанное с проектом, над которым вы работаете, но оно все же может зажечь творческую идею о том, как решить тот или иной аспект вашего дизайна.
Дизайн, как в реальном, так и в виртуальном мире, стимулирует новые и уникальные идеи. Как дизайнеры, вы не пытаетесь просто скопировать чужой дизайн, а вдохновляетесь использовать определенные элементы при создании собственного дизайна. Дизайн — это прекрасно, и удивительное разнообразие — это то, что мотивирует нас, когда вы чувствуете себя менее чем вдохновленным.
Вдохновение в дизайне прощания
Творчество — это не просто переключатель, который можно включать и выключать в любое время. Иногда вам нужна небольшая помощь, чтобы начать работу или преодолеть приступ дизайнерского ступора. Вот почему важно знать, где искать дизайнерское вдохновение и как использовать его в повседневной работе.
Лучший способ найти и использовать вдохновение для дизайна — это собрать элементы дизайна и идеи, собрав доску настроения для UX-дизайна. Взгляните на веб-сайты и платформы, указанные выше, и начните собирать коллекцию собственных дизайнерских вдохновений, чтобы направлять свои будущие рабочие процессы UX и UI.