< Веб-разработка сайтов >
< Оптимизация >
< Контекстная реклама >
< Веб-дизайн >
< Реклама Яндекс и Google >

< Советы по дизайну подвала или «футера» (1 часть) />

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

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

Зачем сайту подвал
  • Во-первых, он дает сигнал об окончании страницы и что ниже контента больше нет. И чем более выражен подвал, тем быстрее посетитель перейдет к изучению другой информации либо примет окончательное решение уходить с сайта или сделать заказ/оставить заявку.
  • Во-вторых, содержание подвала продолжает основную мысль, которую хотели донести содержанием сайта. Иногда призыв к действию располагают именно в подвале, потому что начиная с шапки (header) зацепили внимание и интерес потенциального клиента, усилили эффект расположенным в теле страницы контентом и внизу их ждет уникальное коммерческое предложение с призывом заказа. Выглядит как минимум логично, особенно если представить все это в красивом дизайне.
  • В-третьих, в подвале могут быть расположены действительно важные вещи. Например, карту проезда гораздо сложнее будет оправдать с точки зрения дизайна где-то выше, разве что на странице контактов она будет смотреться уместно в любом месте, так как соответствует ожиданиям и привычкам пользователя. Сюда же можно отнести политику конфиденциальности.
  • В-четвертых, навигация в меню и дополнительная навигация в подвале (чтобы посетитель не запутался на сложном большом сайте) всегда даст свои плюсы, подкупая посетителя своей приветливостью и интуитивной понятностью.
  • В-пятых, отличающийся по дизайну подвал, акцентирует на себе внимание посетителя, поэтому ни один человек не сможет пропустить то, что Вы там разместили. Другой вариант исполнения подразумевает более шуточный подход для поднятия настроения или пестрые краски, контрастирующие с общей спокойной размеренной цветовой гаммой остальной части сайта.
Эффективный подвал сайта

Чтобы реализовать свои идеи максимально близко к проекту, нужно четкое понимание компановки графики с типографикой, навыки и осознание актуальности и удобства располагаемого контента.

Основное:

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

В качестве итога скажем, что перед работой надо подвалом при разработке и верстке сайта (коммерческого и не только), сначала можно ознакомиться с подборками от дизайнеров и сайтами конкурентов. Уверены, что сегодняшнее многообразие интернет проектов подскажет Вам идеальный подвал, который сможет помочь в продвижении и улучшении поведенческих факторов! А наша веб студия готова вдохнуть в Ваши визитки, лендинги, интернет магазины и корпоративные сайты все новшества веб дизайна, неповторимость и уникальный вид без потери в технической оптимизации и адаптивности под разные устройства. И все это без предоплат!

< Есть желание развить бизнес, сделать рекламу, сайт? />

< Остаьте заявку и мы Вам предоставим полную консультацию бесплатно />

< Заказать звонок />

< Заявка на обратную связь />