Сейчас, на многих сайтах присутствует форма приветствия посетителей. Эта область, обычно, появляется для новых посетителей, объясняя суть сайта и его функционал.

Приветственные страницы, как правило, более распространены на личных сайтах, портфолио, или интернет-магазинах. Они менее популярны на новостные сайтах (где вместо приветствия, обычно располагается сводка новостей). Конечно, области с приветственной частью не считаются необходимыми на сайтах с понятной тематикой и уже сложившейся аудиторией — например, нет никакого смысла размещать приветствие на CNN.com, поскольку посетители, скорее всего, уже и так знают, что это.

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

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

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

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

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

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

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

Вдохновляющие приветствия

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

Syropia Labs

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

Olive and Twist

Здесь приветственное сообщение написано жирным шрифтом, дабы привлечь посетителей. Фраза «Творческая студия дизайна» отлично определяет сайт. Кроме того, белый текст хорошо выделяется на темном фоне, еще раз подчеркивая ценность данного приветствия.

Adrenalin Media

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

Luca Vercellio

Сайт использует минималистический дизайн, где приветственная часть занимает большую часть страницы. Эта область выполнена в утонченном стиле: мягкий световой эффект, белая и голубая цветовые гаммы. Шрифты меняются довольно часто, но они выполнены в легком, современном стиле. Все здесь пропитано легкостью и непринужденностью, что особенно подчеркивает фраза: «привет, я Лука».

Somersby Cider

Больше чем типография, на данном сайте привлекает визуальное оформление. Тут присутствует стандартная фраза «оставайся открытым для новых идей», но по-настоящему впечатляет здесь фотография на фоне, которая представляет все особенности продукта в привлекательной форме. Мир, созданный здесь, создает настроение волшебства для новых посетителей, вкладывает некоторое количество интриги, что должно заставить вас продолжить знакомство с сайтом.

Sentel

Красота, минимализм и ограниченная несколькими цветами гамма, заключаются в данном приветствии. Ключевые слова «дизайн» и «продвижение», которые описывают основные направления деятельности компании, для придания заметности, выделены синим цветом. Текст написан легким, светлым шрифтом, контрастирующий с фоном сайта.

BeMobile

Be Mobile действительно смелый сайт, выполненный в черной, желтой и белой гамме.

Приветственное сообщение использует оригинальный прием: каждая строчка начинается со слова «be», что отсылается к названию компании «be mobile», завершающее приветствие. В дополнении ко всему, используется жирный шрифт.

Aleks Faure

Еще один отличный пример. Этот вариант представляет нам дизайнера: что он делает и насколько качественно. Приветственная часть простая, но эффективная, использующая правило @font-face, для внедрения креативных шрифтов.

Narax

По-настоящему привлекательная область для приветствия, с анимированной фигуркой оригами, которая отлично сочетается со слоганом. Простая фраза «Your ark to the web» не особенно впечатляет, как и не разъясняет чем занимается сайт. Тем не менее вносит немалую долю интриги. Под слоганом находится текст с объяснением деятельности сайта. Пастельные цвета и заштрихованная область на бумаге, создает творческую атмосферу, которая отлично сочетается с функциями компании.

Syropia

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

Giebe Graphics

Еще один отличный пример приветственной области. Очень личное обращение создателей сайта к своим посетителям. Здесь, как и в предыдущем примере, ключевые слова окрашены в ярко синий цвет. Первая фраза в приветствии («Рады видеть вас!») содержит очень много энергии и по-настоящему помогает достучаться до пользователей. Шрифт большой и жирный с тонким отступом, для того чтобы отделиться от фона сайта.

Tiny Verse

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

Noutes

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

Touch Tech

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

Gabriel Aloysius

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

Bear Grylls Live on Stage

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

Goodsie

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

Epic Fleet

Поразительная приветственная область с отличным слоганом. Смелый текст «вы можете себе это позволить» подчеркивает основную суть этой компании. Следующий текст под слоганом, дает понять, что компания создает (веб-дизайн). Под всем этим находятся несколько примеров работ компании, которые расположены веером, для придания большего интереса у пользователей.

We Are Pandr

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

Bear Hat Studios

Класический пример приветственной области, которая использует огромную типографию. Простая текстура на фоне подчеркивает значимость текста, который занимет более 80% страницы. В тексте нет особо красивых слов, только лишь основа, определяющая задачи компании. Типография становится еще более интересной с помощью градиента и легких теней. Все эти приемы используются для того, чтобы подчеркнуть значимость текста приветствия.

Made by Vadim

Необычная область приветствия с крутой, абстрактной иллюстрацией в центре. Текст ясно дает нам понять, чем занимается дизайнер. Для его сообщения «привет» используется большой шрифт. Кроме того, абстрактные иллюстрации сразу помогают оценить уровень его работ.

Putra Roeung

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

Spout Creative

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

CMYK08

Отличный пример личной приветственной области. Дизайнер сочетает свою фотографию с неформальным приветствием (привет, люди!), выполнив все в гранж, чтобы выразить свой особенный стиль. Он отредактировал свою фотографию, чтобы она сочеталась с цветовой гаммой сайта: голубой, светло серый и черный. По его слогану «я думаю, мне нужная другая прическа», у нас складывается некоторое впечатление о нем и его отношению к дизайну.

Chapter Three

Формальная область приветствия. Заголовок написан ярким бирюзовым цветом, который контрастирует на темно-синем фоне. Ключевые слова выделены оранжевым цветом, а расположение компании (San Francisco) оригинально внедрено в форму логотипа Drupal ( что как бы намекает на то, какие услуги оказывает компания).

Masswerks

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

Alan Power

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

New Concept

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

Uproar PR

Великолепный пример эффективного использования типографии в области приветствия. Но помимо текста, здесь много уделяется внимания деталям. В данном случае, слово «шум» ломает под собой землю. Эффект блика и металлический блеск также привлекают взгляд. Слоган «make some noise!» носит явно агрессивный характер, что вписывается в жестокий характер отрасли pr.

Joe Guarino

Еще один дизайнер, который использует неформальное приветствие на своем сайте. Вместо того, чтобы прятаться за ложными корпоративными масками, Joe представляет себя честно и открыто, используя веселую иллюстрацию-автопортрет. Слоган «Привет, чувак!» устанавливает дружественную атмосферу для потенциальных клиентов и помогает привлечь их на сайт.

Kendra Schaefer

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

Shout Digital

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

Convax

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

Amit Tishler

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

Jeremy Man

Эта область приветствия выполнена в крутом западном стиле, которая хорошо вписывается в сайт. Текст приветствия на самом деле не является изображением, и использует @font-face и некоторые другие интересные эффекты CSS. Иллюстрации и фоновые текстуры создают подлинную атмосферу вестерна.

NorthEast Creative

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

Web Munky

Web Munky использует свой дерзкий талисман и красочный логотип в центральной области приветствия. Тем не менее, слоган «we craft online experiences» предоставляет информативное сообщение для посетителей. Яркие, живые цвета привлекают пользователей, и визуально сайт предлагает вам прокрутить страницу вниз и узнать больше об их услугах.

Media Germ

Еще один замечательный пример текстурированного текста. Эта медиа-компания предлагает посмотреть их работы на самом тексте. Который действительно яркий и притягивает взгляд.

Raven Tools

Raven Tools используют сравнительно небольшую цветовую палитру для своей приветственной области. Тем не менее, отличное освещение фона и креативная типография прибавляет этому примеру интереса. Краткий слоган сразу же позволяет пользователям узнать, чем занимается компания. Скриншоты под слоганом демонстрируют то, как платформа работает.

Crssrd

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

Оригинал статьи: http://www.noupe.com/design/traits-of-successful-website-welcome-pages.html