Белые заголовки в веб-дизайне
4 февраля 2015 | Опубликовано в статьюшечки | Нет комментариев »
Мода на использование больших изображений на весь экран в качестве фона для сайта спровоцировала появление нового тренда — заголовков белого цвета. Очень часто фоновые картинки темные, что позволяет говорить о белом цвете в веб-дизайне как о достойном сопернике черному. В этой публикации собраны примеры сайтов, в которых использован этот прием, а также даны комментарии к каждому примеру. Где-то он работает лучше, где-то хуже, но все примеры достойны внимания.
Believe.in
На этом британском благотворительном сайте используется слайд-шоу из фотографий на весь экран. Однако между фоном и текстом полупрозрачная подложка, которая позволяет тексту быть хорошо заметным вне зависимости от того насколько светла фотография на фоне.
DraughtMaster
На этом сайте с вертикальным скроллингом на каждой странице своя фотография. И на каждой странице заголовки белого цвета. Дизайнеры очень умно использовали текстуры, чтобы белый текст читался даже на фоне светлых изображений. Смотрите пример на скриншотах ниже.
The Form Group
Это еще один сайт, использующий слайд-шоу в качестве фона. Над фоном расположен полупрозрачный слой черного цвета, который позволяет белому тексту оставаться четким.
Where2GetIt
На этом сайте в качестве фона используется статичное изображение. Оно немного размыто, что позволяет тексту аккуратно выделяться. Еще один приятный момент: когда вы заходите на сайт, надпись «Transforming the way businesses» остается неподвижной, а слово под ней меняется на «get discovered», «get found», «engage» и «market».
Zeis Excelsa
Этот сайт, посвященный одежде, необычен своим горизонтальным слайд-шоу. Здесь также используется полупрозрачный слой черного цвета, который позволяет белому тексту оставаться четким.
Tap In Guide
Этот сайт посвящен чемпионату мира по футболу в Бразилии 2014 года. В качестве фоне на сайте использовано изображение с элементами анимации на весь экран, к которому применен фильтр сепия. В общем дизайн работает неплохо, но возможно надпись стоило бы поместить немного выше, чтобы лучше читался подзаголовок.
UNE
На этом сайте используется очень сильный фильтр размытия для того, чтобы белые заголовки выделялись.
Adveris
При создании этого сайта была выбрана совсем иная стратегия. Фон здесь состоит из сплошного цвета, на который наложена текстура в стиле боке, а поверх этого мелкая черная сетка. Очень интересен выбор палитры. Это не те цвета, которые приходят в голову в первую очередь во время работы над дизайном. Смотрите палитру ниже.
Night Walk
Это сайт Google и белый заголовок на нем выполнен в стиле гранж. Вероятно этот эффект передает настроение старины или страха, а может и то и другое. Когда вы заходите на сайт, вам показывают короткое видео о девушке, которая подходит к месту начала прогулки. Конечно белая надпись отлично смотрится на фоне ночных пейзажей.
Smart Codes
На этом сайте фоном служит видео на весь экран. В этом случае для выделения текста был использован еще один прием наложения — вертикальные линии. Сочетание красного и черного цветов смотрите необычно и интересно.
Allstate’s Holiday Home Decorator
Это сайт страхового агентства. Вы можете выбрать любой адрес или стандартный дом и украсить его, но если вы перегрузите электрическую сеть, случится пожар. А застрахован ли ваш дом? Синий фон с рождественским орнаментом, анимированный снег и большой баннер делают белый заголовок выделяющимся.
Astuteo
На этом сайте в качестве фона использована фотография с черным полупрозрачным перекрытием сверху. На сайте использованы надписи как белого так и желтого цветов, а у текста также есть легкая тень, что делает его еще более заметным.
The Ernest Hemingway Collection
Эрнест Хемингуэй был американским писателем, журналистом, лауреатом Нобелевской премии по литературе. Он внес значительный вклад в литературу ХХ века. Этот сайт продает вещи, посвященные писателю. Сайт выполнен в ретро-стиле и винтажная фотография является отличным фоном для белой надписи в стиле гранж.
InVision App
Вот еще один сайт, на котором используется полупрозрачное перекрытие черного цвета. В этом случае перекрытие применяется ко всем изображениям на сайте, чтобы визуально выделить белый текст. Также дизайнеры используют еще один тренд — прозрачные кнопки.
Profleet
На этом сайте используется круг голубого цвета в качестве подложки под текст, чтобы надпись хорошо читалась.
Surprisingly
Это заглушка для сайта, который должен появиться в ближайшем будущем. У вас нет картинки, все хранится в секрете, лишь цветной блок и большая белая надпись. Если вы прокрутите страницу ниже, то увидите обещания чего-то волшебного, а в самом конце форма подписки, чтобы вам могли сообщить когда это самое волшебство произойдет.
Denim Academy
На этом сайте в качестве фона используется джинсовая текстура. Белый текст просто создан для нее!
Check-In Arte
А этот сайт выполнен в виде табло прибытий и вылетов и включает звуковые эффекты при нажатии и крутящиеся буквы.
Imagina nas Ferias
На этом сайте использовано множество небольших блоков пастельных цветов с большим блоком с белым текстом посредине. Также на сайте множество эффектов при наведении мышки.
WebVDEO
А здесь вместо перекрытия черного цвета был использован красный. Приятная перемена. Этот эффект был особенно популярен несколько месяцев назад.
Автор статьи Carol Francis
Перевод — Дежурка
Смотрите также: