Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Белые заголовки в веб-дизайне

4 февраля 2015 | Опубликовано в статьюшечки | Нет комментариев »

Мода на использование больших изображений на весь экран в качестве фона для сайта спровоцировала появление нового тренда — заголовков белого цвета. Очень часто фоновые картинки темные, что позволяет говорить о белом цвете в веб-дизайне как о достойном сопернике черному. В этой публикации собраны примеры сайтов, в которых использован этот прием, а также даны комментарии к каждому примеру. Где-то он работает лучше, где-то хуже, но все примеры достойны внимания.

 

Believe.in

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

Believe.in

DraughtMaster

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

DraughtMaster

DraughtMaster 2

The Form Group

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

The Form Group

Where2GetIt

На этом сайте в качестве фона используется статичное изображение. Оно немного размыто, что позволяет тексту аккуратно выделяться. Еще один приятный момент: когда вы заходите на сайт, надпись «Transforming the way businesses» остается неподвижной, а слово под ней меняется на «get discovered», «get found», «engage» и «market».

Where2GetIt

Zeis Excelsa

Этот сайт, посвященный одежде, необычен своим горизонтальным слайд-шоу. Здесь также используется полупрозрачный слой черного цвета, который позволяет белому тексту оставаться четким.

Zeis Excelsa

Tap In Guide

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

Tap In

UNE

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

UNE

Adveris

При создании этого сайта была выбрана совсем иная стратегия. Фон здесь состоит из сплошного цвета, на который наложена текстура в стиле боке, а поверх этого мелкая черная сетка. Очень интересен выбор палитры. Это не те цвета, которые приходят в голову в первую очередь во время работы над дизайном. Смотрите палитру ниже.

Adveris

Adveris Color Palette

Night Walk

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

Night Walk

Smart Codes

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

Smart Codes

Allstate’s Holiday Home Decorator

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

Allstate's Holiday Home Decorator

Astuteo

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

Astuteo

The Ernest Hemingway Collection

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

The Ernest Hemingway Collection

InVision App

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

InVision App

Profleet

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

Profleet

Surprisingly

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

Surprisingly

Denim Academy

На этом сайте в качестве фона используется джинсовая текстура. Белый текст просто создан для нее!

Denim Academy

Check-In Arte

А этот сайт выполнен в виде табло прибытий и вылетов и включает звуковые эффекты при нажатии и крутящиеся буквы.

Check-In Arte

Imagina nas Ferias

На этом сайте использовано множество небольших блоков пастельных цветов с большим блоком с белым текстом посредине. Также на сайте множество эффектов при наведении мышки.

Imagine nas Ferias

WebVDEO

А здесь вместо перекрытия черного цвета был использован красный. Приятная перемена. Этот эффект был особенно популярен несколько месяцев назад.

WebVDEO

Автор статьи Carol Francis

Перевод — Дежурка

Смотрите также:




Коментарии запрещены.