Как и где выбрать шрифт для сайта – База знаний Timeweb Community
Какой шрифт выбрать для своего сайта – вопрос кажется простым, но только на первый взгляд. Как известно, в дизайне мелочей не бывает. И то, что сначала кажется не особо важным, в дальнейшем может сыграть важную роль.
Разместить сайт на хостинге
1. Заголовки и текст
Для сайта оптимально выбрать два шрифта – один для заголовков, другой для текста. Это удобно для пользователей, им будет сразу ясно, где заголовок, а где текст. И дизайн самого сайта будет выглядеть более целостно.
Если двух шрифтов для выполнения нужных задач не хватает, и нужно использовать больше, то тогда придерживайтесь правила: не больше четырех шрифтов на странице.
Пример: заголовки – Verdana, текст – Arial.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Подписаться
2. С засечками или без?
Обычно шрифты с засечками (короткими штрихами на концах букв; так называемые serif-шрифты: Times New Roman, Garamond, Georgia) используются в печати.
На бумаге такие шрифты воспринимаются хорошо, при чтении глаза устают меньше.
Следовательно, для веба обычно используются шрифты без засечек (так называемые sans-serif: Arial, Verdana, Trebuchet, Helvetica), потому что на экране, в отличие от бумаги, засечки превращаются в помехи, которые только усложняют восприятие текста. При этом важно оставлять нормальное межстрочное расстояние, чтобы глаз визуально мог отделять одну строчку от другой.
Считается, что любые правила можно нарушать, так что шрифты с засечками на сайте использовать можно… но очень-очень аккуратно и в исключительных случаях. Например, шрифтом с засечками можно набрать заголовок, чтобы сделать его еще более отличающимся от основного текста.
Кстати, есть еще шрифты monospace (Courier, Lucida Console, Monaco). Они похожи на шрифты для пишущей машинки, а сейчас используются для оформления кода.
3. Сочетание цветов
В отношении шрифтов действует такое же правило, как и в отношении общей цветовой гаммы сайта — используйте цветовой круг, и будет вам счастье.
Например, удачные сочетания можно поискать в Color wheel от компании Adobe.
Естественно, тестируйте сочетаемость цветов не только между собой, но и на сайте, на том фоне, который вы выбрали. Особенно если фон не однотонный.
4. Выделение
Выделять текст можно не только цветом, но и выделением (текст — белый, выделение черным). Важно обратить внимание на контрастность — чем она выше, тем проще прочитать текст. Поэтому так легко воспринимать черные буквы на белом фоне и так сложно читать текст темно-серого цвета на светло-сером фоне.
5. Размер
Размер шрифта должен позволять без труда читать его.
В идеале это 12-14 пунктов; минимально — 10, максимально — 16.
Источники шрифтов
При выборе шрифта не забывайте про лицензию — ворованные шрифты грозят не только муками совести, но и проблемами с законом (а оно вам надо?). Сейчас существует множество разных бесплатных шрифтов, и вы легко найдете что-то подходящее для вашего сайта. Итак, где искать бесплатные шрифты.
Google Fonts
https://fonts.google.com/
Один из самых известных сборников бесплатных шрифтов. Присутствует латиница, кириллица и другие популярные и не очень языки; всего 900 семейств. Есть несколько фильтров — например, можно отсортировать шрифты по толщине букв, наклону или ширине.
Тексты можно редактировать, так что сразу можно посмотреть, как будет выглядеть нужная фраза в этом шрифте.
FontSpace
https://www.fontspace.com/
Здесь представлено больше 37 тысяч бесплатных шрифтов. Есть даже с пиктограммами (например, шрифт Trees Go с деревьями). Шрифты распространяются под разными лицензиями; некоторые нужно купить для того, чтобы использовать в коммерческих целях.
1001 Free Fonts
https://www.1001freefonts.com/
Еще один сайт с бесплатными шрифтами. Шрифты разделены на категории: например, в категории “Famous” (знаменитое) можно найти шрифты из «Парка Юрского периода» или «Черепашек-ниндзя».
FontStruct
https://fontstruct.com/
Ресурс для тех, кто хочет создать шрифт самостоятельно. Если такого желания нет, то можно заглянуть в галерею, где есть созданные другими пользователями шрифты.
Font Squirrel
https://www.fontsquirrel.com/
Еще один сайт со множеством разных шрифтов. Помимо бесплатного раздела, в нем есть раздел с платными шрифтами (Almost Free Fonts), где продаются шрифты с очень хорошей скидкой.
DaFont
https://www.dafont.com/
Здесь можно найти бесплатные шрифты для личного и коммерческого использования. Есть интересная категория шрифтов “Foreign look”, которые стилизованы под буквы из алфавитов разных стран: русские, арабские, азиатские и другие.
Urban Fonts
https://www.urbanfonts.com/
Здесь есть платные и бесплатные шрифты — вторые выделены в отдельный раздел “Free”.
Abstract Fonts
http://www.abstractfonts.
com/
Еще одна коллекция с постоянно пополняющимися шрифтами.
А если ищете какие-нибудь оригинальные платные шрифты, посмотрите в MyFonts. Там довольно большая коллекция всевозможных шрифтов.
Заключение
Выбор шрифта — важный момент при создании собственного сайта. Не нужно впадать в крайности — слишком простые шрифты (особенно в заголовках) могут смотреться скучно, слишком сложные (фантазийные) — мешать восприятию самой фразы.
P.S.
Тем, кто интересуется шрифтами и типографикой, рекомендую посмотреть фильм Helvetica:
Как выбрать шрифт — руководство для начинающих — Офтоп на vc.ru
Дизайнер и разработчик Джонатан Уайт рассказал о базовых принципах работы с типографикой.
43 670 просмотров
Один из самых важных навыков для дизайнера — это умение выбирать типографику, пишет Джонатан. Ведь текст — один из основных способов коммуникации дизайнера с пользователями.
И типографика может как улучшить дизайн, так и сломать его.
Типографика одновременно сложна и прекрасна. Некоторые люди посвящают ей всю свою карьеру. К счастью, их работа хорошо задокументирована, так что у нас есть множество типографических онлайн-ресурсов.
Этот материал призван сформировать начальные навыки выбора типографики для своего дизайна, а также стимулировать на эксперименты со шрифтами и их комбинациями — в том числе и неизвестными.
Определите свою цель
Прежде всего нужно понять, в чем цель вашего дизайна. Какую информацию вы хотите донести? С помощью чего? В хорошем дизайне типографика соответствует цели. Это связано с тем, что типографика — ключевой фактор в создании настроения, тона и стиля дизайна.
Например, если вы создаете дизайн приветственной карточки, который в основном полагается на изображения, лучше выбрать шрифт, который подходит к стилю иллюстраций. Шрифт должен находиться в гармонии с остальным дизайном.
Выбирайте шрифт, соответствующий стилю иллюстраций
Если вы создаёте дизайн лендинга, в котором большую роль играют изображения, берите шрифт, который не будет отвлекать от иллюстраций.
Шрифт в этом случае выступает как способ сделать акцент на значимой информации, несущей ключевой смысл.
Если изображения — главный элемент вашего дизайна, берите простые шрифты, чтобы подчеркнуть иллюстрацию
Определите свою аудиторию
Разобравшись с целью дизайна, определитесь с аудиторией. Этот шаг крайне важен, поскольку выбор шрифтов будет зависеть от возраста, интересов и культурного бэкграунда аудитории.
Например, некоторые шрифты лучше подходят для детей. Поскольку они только учатся читать, для них лучше всего подходят легкочитаемые шрифты с крупными и различимыми буквами. Хороший пример такого шрифта — Sassoon Primary. Его создала Розмари Сассун, основываясь на собственных исследованиях того, какие буквы легче всего считываются детьми.
Sassoon Primary
Другие шрифты лучше подходят для более взрослых детей. В таких шрифтах буквы подходящего размера, цвета — контрастные, а рукописного начертания и декоративных стилей нет.
Выбирая типографику, учитывайте аудиторию и её нужды. Проще говоря, ставьте себя на место пользователей.
Ищите вдохновение
Обратите внимание на работы других дизайнеров. Попытайтесь понять, как они определяли облик своей типографики.
Идеи для шрифтов
Если вы не знаете, какой шрифт выбрать, статья The 100 Best Free Fonts из CreativeBloq может быстро настроить вас на нужный лад. В ней автор объясняет, чем мотивирован дизайн каждого из ста представленных шрифтов.
Другой полезный источник идей — это 100 Greatest Free Fonts Collection for 2015 от Awwwards. К тому же, Invision не так давно собрали огромный список ресурсов о типографике. Там источников идей предостаточно.
Чтобы посмотреть, как идеи выглядят на реальных сайтах, зайдите на Typ.io. Там собраны примеры шрифтов со всего интернета. К тому же внизу каждого образца шрифта есть его описание в CSS.
Помимо таких сервисов «для вдохновения», обратитесь к своим любимым сайтам и посмотрите, какие шрифты они используют.
Идеи для сочетаний
Помимо просто шрифтов, ищите идеи для их сочетаний. Правильные сочетания не менее важны, чем сами шрифты. Благодаря правильно подобранному сочетанию шрифтов создаётся визуальная иерархия информации и улучшается читабельность дизайна.
В поисках вдохновения для сочетаний начните с Typewolf. Там собраны примеры сочетаний шрифтов с разных сайтов. Кроме того, на сайте есть рекомендации и статьи с глубоким разбором типографики. Настоящий кладезь информации.
FontPair — тоже хороший пример источника вдохновения для сочетаний шрифтов, особенно Google Fonts. Можно фильтровать комбинации стилей: например, Sans-Serif и Serif или Serif и Serif.
И, наконец, в сети есть множество коллекций хороших сочетаний шрифтов, собранных дизайнерами. Например, Typography: Google Fonts Combinations и Typography: Google Fonts Combinations Volume 2.
Или просто введите в поиск «сочетания шрифтов» (font pairing) на сайтах вроде Behance и Dribbble.
Выберите свои шрифты
Вдохновившись и вооружившись исследованиями, вы, наконец, готовы выбрать типографику. Когда дело доходит до этого, держите в уме следующие принципы: интересный внешний вид, разборчивость и смысл.
Прежде чем выбрать шрифт, узнайте, для чего он создавался
Выбирайте шрифт, который подходит цели по общепринятым меркам и легко читается. Избегайте слишком вычурных шрифтов в пользу простых и практичных. Также помните о том, зачем вам нужен шрифт. Например, некоторые шрифты лучше подходят для заголовков, другие — для основного текста.
Сочетание двух шрифтов, контрастирующих друг с другом
Что касается сочетания шрифтов, ограничьтесь максимум тремя. Кроме того, скомпонуйте их так, чтобы они контрастировали. Таким образом можно будет управлять движением взгляда читателя: сначала заголовок, потом основной текст.
Также можно создавать визуальный контраст, используя разные размеры шрифтов, цвета и «вес».
Для веб-шрифтов хорошо подходят Google Fonts, Typekit, и Font Squirrel. Google Fonts бесплатны, а в Typekit и Font Squirrel есть и бесплатные, и платные шрифты.
Определите размеры шрифтов
Разобравшись с комбинациями шрифтов, займитесь их размерами. Для этого отлично подходит Modular Scale от Тима Брауна, главы отдела типографики Adobe. Фактически Modular Scale — это система для идентификации исторически сложившихся идеальных соотношений размеров шрифтов.
Например, вы можете использовать шкалу соотношений, основанную на золотом сечении. Такими будут первые пять размеров шрифтов:
Золотое сечение (1:1.618)
1.000 x 1.618 = 1.618
1.618 x 1.618 = 2.618
2.618 x 1.618 = 4.236
4.236 x 1.618 = 6.854
6.854 x 1.618 = 11.089
Значение вашего соотношения может оказаться слишком большим.
Например, вот как выглядят последние интервалы в нашей шкале, основанной на золотом сечении:
Золотое сечение (1:1.618)
…
11.089 x 1.618 = 17.942
17.942 x 1.618 = 29.03
29.030 x 1.618 = 46.971
46.971 x 1.618 = 75.999
75.999 x 1.618 = 122.966
Как видите, интервалы между цифрами становятся слишком большими. Для большинства интерфейсов такие интервалы не подходят — нужно меньше. К счастью, в Modular Scale есть множество разных соотношений, основанных на принципах геометрии, природы и музыки.
Малая секунда: 15:16
Большая секунда: 8:9
Малая терция: 5:6
Большая терция: 4:5
…
Так что вместо того, чтобы использовать золотое сечение, вы можете прибегнуть к соотношениям, которые дают меньшие интервалы. Вроде чистой кварты.
Чистая кварта (3:4)
…
9.969 x 1.
333 = 13.288
13.288 x 1.333 = 17.713
17.713 x 1.333 = 23.612
23.612 x 1.333 = 31.475
31.475 x 1.333 = 41.956
41.956 x 1.333 = 55.927
333 = 13.288Определившись со шкалой размеров, вы можете выбирать отдельные размеры из списка и округлять их в сторону ближайшего целого числа.
Размеры шрифтов
Заголовок 1: 55px
Заголовок 2: 42px
Заголовок 3: 31px
Заголовок 4: 24px
Заголовок 5: 14px
Текст: 17px
Подпись: 14px
Modular Scale генерирует размеры с помощью математических формул. Однако это лишь инструмент. Пользуйтесь этим методом как основой, а затем подгоняйте размеры по своему вкусу.
Создайте типографический стайлгайд
Последний шаг процесса — создание типографического стайлгайда, чтобы стандартизировать типографику в разных ваших дизайнах.
Sketch
В программах вроде Sketch вы можете создавать общие стили текстов, чтобы быстро вставлять их, руководствуясь общей идеей проекта.
Что касается цвета: при его выборе учитывайте свою палитру и выбирайте тон, который хорошо с ней гармонирует.
Создавая стайлгайд, убедитесь, что в нём есть как минимум такие пункты: названия шрифтов, их размеры, цвета и примеры использования. Типографические гайдлайны Material Design компании Google — хороший пример того, что должно быть в стайлгайде. По ссылкам ещё пара примеров от Mailchimp, Apple и Focus Labs.
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.
Как использовать вдохновение в дизайне
Вдохновение в дизайне означает не поиск дизайна для повторения, а скорее изучение работ других дизайнеров, чтобы вдохновить на какой-то элемент вашего дизайна. Это может быть что-то совершенно не связанное с проектом, над которым вы работаете, но оно все же может зажечь творческую идею о том, как решить тот или иной аспект вашего дизайна.
Дизайн, как в реальном, так и в виртуальном мире, стимулирует новые и уникальные идеи. Как дизайнеры, вы не пытаетесь просто скопировать чужой дизайн, а вдохновляетесь использовать определенные элементы при создании собственного дизайна. Дизайн — это прекрасно, и удивительное разнообразие — это то, что мотивирует нас, когда вы чувствуете себя менее чем вдохновленным.
Вдохновение в дизайне прощания
Творчество — это не просто переключатель, который можно включать и выключать в любое время. Иногда вам нужна небольшая помощь, чтобы начать работу или преодолеть приступ дизайнерского ступора.