Применение контурной типографики в веб-дизайне — 10 новых идей
Если контент – король, то типографика на сайте – королева бала, что большая ответственность. В веб-дизайне шрифт не просто элемент отображения теста или заголовков. Это эффективная составляющая интерфейса, которая добавляет визуальный вес в графическое оформление, создает эстетику и производит впечатление.
Сегодня контурная типографика – актуальное направление. Надо рассматривать не только ее читабельность, но и как игрока развлекающего на арене аудиторию. Современные дизайны удивляют шрифтовыми решениями с идеями визуального контекста. Эра скучных гарнитур закончилась и дизайнеры экспериментируют с формами & стилями, даже если они не в тренде.
Будем откровенны, когда современный веб-сайт с первого экрана захватывает внимание Hero-изображением, изысками типографии заинтересовать не просто. А может дизайнеру не надо становиться жертвой предубеждений? На самом деле, в умелых руках все эти преграды не помеха. Смотрите, какие интересные композиции с большими контурными буквами без заполнения можно придумать. Эксперты прогнозируют популярность этого шрифтового стиля в веб-дизайне 2020-х.
Итак, разбираем эффективность использования контурной типографики на сайтах. 10 свежих примеров дизайнерских идей.
A’ja Wilson
Начнем с официального сайта баскетболистки из Лас-Вегаса Эджи Уилсон. Захватывающий видеобэкграунд в главном экране. Придуманы броские фразы, чтобы пользователи не терялись. Для них использовали контурную типографику: требовалось не только подчеркнуть элегантность, но и создать ауру, необходимую женскому сайту.
Alphaputt
Анимации в hero-секции – еще одно актуальное в вебе направление. Интересная идея: совместить тренды, но минимизировать анимированные объекты и сохранить чистоту дизайна. Это позволило применить утонченную типографику в надежном контексте.
A la fut
Сайт запоминается шикарной ретро типографикой с hover-эффектом на главной странице. Жирный контурный шрифт гигантского размера – вот, что нужно, чтобы выделить одно слово. Шрифт, частично заполненный штриховкой мелом не только обогащает эстетику делая заголовок трогательным, но и добавляет буквам весомости.
Yard Agency
Сайт «энергичной команды» добавляет в монолитный дизайн контурную графику / типографику, призрачные кнопки и тонкие линии, чтобы ненавязчиво координировать пользователя. Это несмотря на довольно тяжелый и насыщенный видео-слайдер, не говоря уже о захватывающих внимание переходах. С одной стороны – визуально снижает значимость второго слова, с другой – служит декором для слайдов и увязывает элементы страницы.
Good Fortune
Красивое совмещение ретро-стиля с контурной типографикой. Изящным шрифтом оформлены ссылки навигации. Монохромность и свободное пространство помогают не перегружать дизайн гигантскими размерами. Роль шрифта декоративная – создавать располагающую атмосферу.
Toonami – Adult Swim / Dot to Dot
Для этих необычных сайтов, выбор типографики был предсказуемым. Toonami с космической энергетикой, кругами, сетками и кубиками. Полые зеленые / синие буквы, напоминая о высоко технологичном мире, идеально вписываются в идею дизайна.
Dot to Dot воплощает собой технологичную элегантность. Идеальная основа для применения на сайте креатива с ультратонким контурным шрифтом, заливаемым эффектом наведения.
В обоих дизайнах трудно представить более интересную типографскую идею. Выбор шрифта – хорошо продуманное решение.
Yukie Nail New York
Можно считать использование контурной типографики сомнительным решением. Трудно пройти мимо Hero на основе canvas с интерактивным / анимированным эффектом погружения в воду. Каждое движение мыши оставляет лёгкую рябь. Контурный заголовок сливается с таким фоном, однако поддерживает атмосферу женственности.
ACES Baseball / Timesheets Magazine
Оба дизайна доказывают, что контурная типографика никогда не бывает слишком крупной. Лаконичный заголовок на главной странице выглядит элегантно и ничего более не бросается в глаза. Безусловно, поддерживается тонкий баланс.
Контурная типографика служит украшением второго плана. Ее назначение декоративное и информативное одновременно. Благодаря утонченности шрифта, текст в глубине не конкурирует с передним планом.
Правила успешного применения
Есть правила, помогающие выживать новым идеям использования типографики в дизайнах веб-сайтов. Прежде всего: размер имеет значение. Даже если утонченное начертание контурного шрифта совершенно подходит дизайну – не поддавайтесь соблазну оформить им надписи небольшого размера (решение вне всяких сомнений провальное). Так что, больше – лучше.
Второе, буквы должны приобретать лишь ощутимые очертания. Не перегружайте дизайн излишне жирным шрифтом, когда без этого можно выделить надпись из остального контента.
Наконец, ваш верный друг контраст. Хорошую контрастность дают белые буквы на черном или зеленом фоне. Эксперименты и самые неординарные типографские идеи приветствуются.