Сб, 9/09/17 – 12:48 | 4 комментария

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

Читать статью »
Маркетинг

О маркетинге в Интернете и эффективности сайта

Дизайн

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

Wordpress

Самое современное для сайта на Wordpress

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

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

Свой сайт

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

Главная » В тренде

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

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

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

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

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

Читайте также:  Как правильно оформить главную страницу: 42 сайта в пример

Итак, разбираем эффективность использования контурной типографики на сайтах. 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

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

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

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


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

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

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

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