Пн, 9/01/17 – 17:44 | One Comment

Окинув взглядом главную страницу, средне-статистический посетитель сайта доверится впечатлению от дизайна, интерфейса, стиля. Оформленное

Читать статью »
CSS верстка

Оформление веб-страницы: css3 html5 приемы верстки сайтов

Дизайн

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

Wordpress

Wordpress сайту: современные и креативные, шаблоны вордпресс

Интернет магазины

Электронная коммерция, новинки и тренды в E-Commerce дизайне

Свой сайт

О создании оформления сайта, как сделать свой сайт лучше

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

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