Landing Page в стиле минимализма. Типографика и фото-бэкграунды в основе целевых страниц

Оригинальная типографика и красивые фото-бэкграунды – фундаментальные составляющие удачного и перспективного веб-проекта. На примере стильных и современных веб-дизайнов можно увидеть как эти две идеи помогают справиться с поставленными перед сайтом задачами. Благодаря им создаются многие успешные Landing Page (лендинг пейдж: страницы захвата или целевые страницы), также называемые продающими страницами. Именно бэкграунд и шрифты в первую очередь встречают пользователей сайта:

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

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

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

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

Минималистичные Landing Page: типографика и фото-бэкграунды

PI’s Epic Journey вызывает ассоциации связанные с риском: дизайн создает у нас впечатление опасности, а местами смутную инстинктивную тревогу. В разделе приветствия используется фотоманипуляции с эффектом Боке (Bokeh) производящие впечатление на пользователя и простой, без украшательств подзаголовок белого цвета в рамке.

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

Melbourne Central Tower – Хороший пример продающей страницы (Landing Page) в стиле минимализма и она удачно интегрируется с остальным сайтом. На фоне красивых фотографий с размытыми бекграундами стильный логотип, меню и пр. утонченные элементы расположены в точности как на контент-содержащих страницах.

Видим, как минимализм в дизайне позволяет создать тот тип лендинга, когда страница может гармонировать с остальной архитектурой сайта даже на фоне полноэкранного фото. То, что называют еще «clean design», и он обладает превосходным UX . Внимание посетителя фиксируется на жирных заголовках текстовых блоков с эффектом всплывающей миниатюры при наведении. Мелкий шрифт легче прочесть увеличивая его и в центр смещается призыв к действию (…персональный ассистент к вашим услугам) с миниатюрой более крупным планом – красивой успешной леди. До формы заказа – всего два клика. Продуманный дизайн этого адаптивного сайта выглядит также стильно и на экранах мобильных устройств. Наверное такой вариант Landing Page должен работать. Этот абсолютно свежий сайт уже пользуется доверием Google.

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

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

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

Borgo 27 создает теплую атмосферу благодаря мягкому, полному света фото-бэкграунду и трепещущему полупрозрачному объекту круглой формы, который служит основой для заголовков и кратких описаний.

Deleting Borders – В центре целевой страницы весьма короткий слоган. Приглушенное и слегка зашумленное фоновое изображение идеально подходит для использования на нем чуть прозрачного и довольно претенциозного шрифта.

House Landing Page имеет яркий вид с ноткой гламура. Цвет шрифта логотипа замечательно дополняет полноэкранное фоновое изображение, в котором ощущается стиль ломографии (изображения с эффектами аналоговой фотографии)

Basader – Еще один пример удачного использования видео в качестве фона сайта. Огромная курсивная надпись темного цвета выглядит могущественно на фоне картины бушующего моря.

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

Web Akademie использует эффект размытого фона на целевой странице и изысканную гарнитуру со стройными шрифтами, что придает сайту современный и стильный вид.

Samaritaine для достижения целей Landing Page, дизайн на данной странице комбинирует трогательное видео с красивым скринсейвером. Здесь ставка сделана на цветовую схему c пастельными тонами и огромный жирный шрифт, с гладкими очертаниями букв.

Wearegoat разделяет экран на две части и фокусирует внимание пользователя на главных аспектах. Первая имеет целью представление себя (реализовано небольшим текстовым блоком), а вторая визуально демонстрирует рабочий процесс.

Digital Park – Особенностью данной страницы захвата является довольно необычная трехмерная полигональная графика в центральной части страницы, создающая эффект глубины. В дополнение, огромная надпись черного цвета хорошо смотрится на монотонном сером фоне.

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

Demi Creative красиво комбинирует картину рабочего места в теплых цветах с серьёзным, бросающимся в глаза заголовком и этим создает некоторую символичность для проекта.