Пт, 17/02/17 – 3:54 | No Comment

Что 2017-й год вносит нового в Веб? Каких главных направлений и трендов в веб-дизайне, стоит ожидать? Сейчас все выясним – в формате емкого …

Читать статью »
Веб маркетинг

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

Дизайн

О создании веб-дизайна с примерами сайтов

Wordpress

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

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

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

Свой сайт

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

Главная » Дизайн

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

7 августа 2013 5 комментариев

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

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

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

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

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

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

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

landing page: лендинг пейдж

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

landing page: пример лендинга

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

красивый лендинг

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

привлекательные целевые страницы

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

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

landing page

Читайте также:  Психология влияния цвета на конверсию сайта

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

лендинг страница фото-бэкграунд

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

фотографии фонового изображения на целевой странице

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

примеры лендинг пейдж

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

landing page: фоновый бэкгроунд

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

лендинг пейдж

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

landing page: лендинг пейдж

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

landing page

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

примеры лендинг страниц

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

лендинг страницы

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

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

лендинг страницы

Читайте также:  30+ адаптивных лендинг пейдж шаблонов на HTML (бесплатные, премиум)