Пт, 5/04/19 – 9:26 | 2 комментария

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

Читать статью »
Дизайн

Секреты веб-дизайна, примеры стильных сайтов

Тренды / ТОП

Топ лучших идей, новые тенденции и тренды WEB’а

Маркетинг

Статьи о маркетинге сайтов, примеры эффективности

Свой сайт

Как создать, оформить, сделать сайт лучше

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Главная » Тренды / ТОП

Применение контурной типографики в веб-дизайне — 10 новых идей

12 января 2019 Нет комментариев

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

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

Будем откровенны, когда современный веб-сайт с первого экрана захватывает внимание Hero-изображением, изысками типографии заинтересовать не просто. А может дизайнеру не надо становиться жертвой предубеждений? На самом деле, в умелых руках все эти преграды не помеха. Смотрите, какие интересные композиции с большими контурными буквами без заполнения можно придумать. Эксперты прогнозируют популярность этого шрифтового стиля в веб-дизайне 2020-х.

Читайте также:  15 тенденций типографики 2020-х: сайты и трендовые идеи

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


A’ja Wilson

Начнем с официального сайта баскетболистки из Лас-Вегаса Эджи Уилсон. Захватывающий видеобэкграунд в главном экране. Придуманы броские фразы, чтобы пользователи не терялись. Для них использовали контурную типографику: требовалось не только подчеркнуть элегантность, но и создать ауру, необходимую женскому сайту.

Контурная типографика в веб-дизайне - эффективно используется на сайте Эджи Уилсон


Alphaputt

Анимации в hero-секции – еще одно актуальное в вебе направление. Интересная идея: совместить тренды, но минимизировать анимированные объекты и сохранить чистоту дизайна. Это позволило применить утонченную типографику в надежном контексте.


A la fut

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

Красивая типографика в веб-дизайне: креативно заштрихованный мелом ретро шрифт на сайте - alafut.qc.ca


Yard Agency

Сайт «энергичной команды» добавляет в монолитный дизайн контурную графику / типографику, призрачные кнопки и тонкие линии, чтобы ненавязчиво координировать пользователя. Это несмотря на довольно тяжелый и насыщенный видео-слайдер, не говоря уже о захватывающих внимание переходах. С одной стороны – визуально снижает значимость второго слова, с другой – служит декором для слайдов и увязывает элементы страницы.


Good Fortune

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

Оформление навигации на сайте стилизованным под старину контурным шрифтом с эффектной заливкой


Читайте также:  Навигационное меню: 15 примеров нестандартного дизайна

Toonami – Adult Swim  /  Dot to Dot

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

Эффектное использование контурной типографики на сайте с нестандартным технологичным дизайном

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

Удачное использование контурной типографики на сайте с технологичным дизайном

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


Yukie Nail New York

Можно считать использование контурной типографики сомнительным решением. Трудно пройти мимо Hero на основе canvas с  интерактивным / анимированным эффектом погружения в воду. Каждое движение мыши оставляет лёгкую рябь. Контурный заголовок сливается с таким фоном, однако поддерживает атмосферу женственности.

Нестандартное применение типографики в веб-дизайне: главная страница сайта с интерактивными типографскими эффектами


ACES Baseball  /  Timesheets Magazine

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

Контурная типографика служит украшением второго плана. Ее назначение декоративное и информативное одновременно. Благодаря утонченности шрифта, текст в глубине не конкурирует с передним планом.

Оригинальное и креативное применение типографики в веб-дизайне


Правила успешного применения

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

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

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