Помимо основного содержимого веб-сайт включает в себя верхний и нижний колонтитулы, которые служат определенной цели, чтобы помочь посетителям. Ранее мы поделились 17 ТАКТИК КОНВЕРСИИ ДЛЯ МАРКЕТИНГА В ВЕРХНЕЙ ЧАСТИ ВОРОНКИ – ПОЛНОЕ РУКОВОДСТВО для вашего вдохновения. Поскольку мы считаем, что дизайн нижнего колонтитула не менее важен, мы также составили список из 20 лучших бесплатных дизайнов нижнего колонтитула, на который вы можете посмотреть.
Прежде чем мы углубимся в наш список дизайнов нижних колонтитулов, давайте ответим на два жизненно важных вопроса:
- Что такое нижний колонтитул веб-сайта?
- Что должно быть в нижнем колонтитуле сайта?
Часть 1. Что такое нижний колонтитул веб-сайта?
Нижний колонтитул веб-сайта — это раздел содержимого в самом низу вашей веб-страницы. В отличие от заголовка веб-сайта, который отображается в самом верху вашей страницы, нижний колонтитул может быть последним, что видят ваши посетители, особенно для тех, кто быстро прокручивает вниз.В этом случае нижний колонтитул может быть более важным, чем вы думаете .
37 ТЕРМИНОВ ВЕБ-ДИЗАЙНА, КОТОРЫЕ СДЕЛАЮТ ВАС УМНЕЕ МАРКЕТОЛОГА
В целом нижний колонтитул дает два преимущества, которые улучшают ваш сайт:
Предоставьте ключевую информацию, которую вы хотите, чтобы ваши посетители снова увидели.
Тело вашего веб-сайта содержит основное сообщение, которое вы хотите передать, но нижний колонтитул может помочь выделить основную информацию. Кроме того, если у вас есть больше контента, который не может быть правильно отображен на странице, нижний колонтитул обеспечивает пространство на экране. Например, ссылки на внешние ресурсы, ссылки на дополнительные страницы, ваших спонсоров, политику конфиденциальности и условия.
Предлагайте рекомендации своим посетителям без необходимости возвращаться к началу страницы.
Ваши посетители могут не знать, какова длина вашей страницы, и это неудобно, если им приходится прокручивать до заголовка, если им нужно что-то искать. Нижний колонтитул веб-сайта позволит вашим посетителям легко перемещаться по вашему сайту, даже когда они находятся ближе к концу страницы (особенно если у вас нет кнопки «вернуться к началу»). Убедитесь, что нижний колонтитул вашего сайта содержит все разделы вашего сайта как можно более полно. Затем вы увеличите коэффициент удержания посетителей.
Если вы хотите использовать нижний колонтитул для успешного привлечения внимания посетителей, он должен быть функциональным и эстетичным. Ниже приведены некоторые принципы, о которых следует помнить:
Сделайте это простым и понятным: вы должны держать весь контент организованным и легким для глаз.
Сделайте это профессиональным и заслуживающим доверия: если вы хотите, чтобы посетители действовали, вы должны заслужить их доверие.
Сделайте это эстетично: вы должны тщательно выбирать цветовые контрасты, размер шрифта и структуру. Также убедитесь, что нижний колонтитул хорошо сочетается с общим дизайном вашего сайта.
Часть 2. Рекомендации по дизайну нижнего колонтитула веб-сайта
Создание функционального и красивого нижнего колонтитула на самом деле требует много работы. Прежде чем начать, вам нужно подумать над некоторыми вещами: что должно быть в вашем нижнем колонтитуле? Чего НЕ ДОЛЖНО быть в нижнем колонтитуле? .
Итак, что должно быть в нижнем колонтитуле веб-сайта?
1. Три обязательных элемента: авторское право, политика конфиденциальности и условия использования.
Эти три раздела контента необходимы для любого веб-сайта. Они необходимы для правовой защиты.
Авторское право : год и символ авторского права защитят ваш сайт от плагиата.
Политика конфиденциальности : объясняет, как вы будете использовать и защищать личные данные посетителей и другую информацию.
Условия использования: общие правила и рекомендации, регулирующие использование сайта и / или продуктов.
2. Связаться
Хотите, чтобы ваши посетители выходили на связь и становились вашими клиентами? Тогда обязательно предложите им простые способы связи с вами. Наиболее распространенные способы связи:
Номер телефона: лучше иметь кнопку с призывом к действию, чтобы посетители могли звонить напрямую.
Адрес электронной почты. Электронная почта по-прежнему остается одним из популярных способов развития бизнеса и общения.
Адрес: покажите своим посетителям, что вы являетесь реальным лицом, предоставив физический адрес. Это также поможет заслужить их доверие.
Социальные значки: упростите для посетителей возможность делиться вашей страницей, а также находить вас и подписываться на вас в другом месте в Интернете.
3. Карта сайта
Карта сайта позволяет посетителям легко перемещаться по вашему сайту. Кроме того, это помогает Google лучше индексировать ваши страницы.
4. Личность и бренд
Выделение вашей личности и бренда делает ваш сайт более надежным и способствует успеху вашего бизнеса. Используйте фотографии, видео и галереи, чтобы рассказать о себе.
5. CTA
CTA в нижнем колонтитуле позволяют вашим посетителям использовать ваш продукт или связываться с вами более удобно, потому что им не нужно прокручивать назад.
Подпишитесь: где ваши посетители могут подписаться по электронной почте
Вход: где ваши посетители могут войти в систему с помощью электронной почты.
Подписка: где ваши посетители могут подписаться на информационные бюллетени
6. Поисковая оптимизация
Если вы хотите выглядеть лучше в глазах Google, вы можете использовать некоторые ключевые слова для поисковой оптимизации. Однако не переусердствуйте, Google не любит чрезмерной оптимизации.
7. Личность и бренд
Расскажите своим посетителям, кто вы, чем занимаетесь и где находитесь. Выйдите из скучной деловой коробки и вместо этого проявите немного индивидуальности.
События: делитесь вехами и важными прошлыми, а также предстоящими событиями.
Логотип: разместите свой логотип в нижнем колонтитуле для брендинга.
Галерея: вставьте мини-галерею своих участников.
Награды: продемонстрируйте свои награды.
Часть 3：20 лучших примеров дизайна нижнего колонтитула веб-сайта
1. Griflan Design Inc.
Griflan предлагает услуги веб-дизайна, печати, бренд-маркетинга, иллюстрации и анимации. На всей его веб-странице преобладают темно-синий и белый цвета, а нижний колонтитул использует ту же цветовую схему. Это делает нижний колонтитул согласованным с основной частью веб-страницы.
Дизайн очень простой и понятный и содержит только контактные данные, такие как адрес электронной почты, номер телефона и социальные сети. Лучшая часть дизайна — это большое изображение прямо над нижним колонтитулом, которое отличается сильным эффектом наложения и эффектом подчеркивания анимированного текста. А еще лучше, это кликабельно!
2. Хрон
Chron — одна из крупнейших газет США. В его уникальном дизайне нижнего колонтитула веб-сайта отсутствуют столбцы по вертикали, но вместо этого используется горизонтальная структура и макет для отображения содержимого. Как и большинство газетных веб-сайтов, Chron предлагает несколько вариантов подписки, предоставляя пользователям свободу выбора.
3. Доброго времени суток
Awwwards — это веб-сайт, целью которого является признание и продвижение талантов и усилий лучших разработчиков, дизайнеров и веб-агентств в мире. Его нижний колонтитул отличается минималистичным, простым и эстетичным дизайном с использованием тонкого шрифта без засечек и большого количества белого пространства.
Футер сайта пример
Нижний колонтитул демонстрирует его индивидуальность и бренд с максимальной отдачей, особенно за счет линии «Награды за дизайн, творчество и инновации в Интернете». В самом низу находится панель навигации, которая побуждает посетителей исследовать сайт дальше.
4. Bluestag
Bluestag — очень креативная дизайн-студия, и их нижний колонтитул является свидетельством этого творчества. Анимация просто фантастическая. Внимание привлекает бегущий синий олень (который принимает форму логотипа) и серые горы на заднем плане. Такое сочетание делает бренд липким, оставляя у посетителей незабываемое впечатление. Кроме того, дизайн работает в тандеме с фиксированным логотипом в верхнем левом углу страницы. Безусловно, гениальный способ преумножить бренд.
5. WPBeginner
WPB — это ресурсный сайт для начинающих WordPress. Их нижний колонтитул очень прост и не украшен. Тем не менее, он хорошо спроектирован и содержит три раздела для передачи дополнительной информации. Первый — это членство в ассоциациях, которое показано вверху нижнего колонтитула. Основная часть состоит из их миссии и ценностей. В самом низу показаны авторские права.
Примеры футера
6. Орбитмедиа
Orbit — это дизайн-студия, которая делает Интернет более полезным и информативным, по одному проекту за раз. В его нижнем колонтитуле есть почти все, что мы обсуждали в Части 2. Вариант контакта находится вверху справа. Orbitmedia предлагает только адрес электронной почты, номер телефона и значки социальных сетей, но копия контакта также является интерактивной, перенаправляя на форму. Кроме того, нижний колонтитул ориентирован на призыв к действию и ориентирован на информацию о компании. Вы можете подписаться, начать проект или изучить их работу.
7. Случайный размер
Random претендует на звание самого случайного сайта в сети. Он специализируется на рандомизации разных вещей. Дизайн нижнего колонтитула сильно отличается от стандартного и почти достигает размера полного экрана. Он подчеркивает мощь социальных сетей, таких как Facebook и Twitter.
8. Лайфхакер
Сайт охватывает широкий спектр контента — от еды и здоровья до сплетен и политики, и всего остального под солнцем. Их дизайн нижнего колонтитула выделяет две большие группы вариантов подписки на социальные сети и информационные бюллетени. Вы можете нажать на значок «Больше из нашей сети», чтобы изучить остальную часть сайта.
9. Фэндом
Фэндом имеет четко очерченный и яркий дизайн нижнего колонтитула. Яркая цветовая схема привлекает внимание пользователей, а копия имеет эффект наведения. Варианты загрузки служат стимулом для пользователей, увеличивая базу пользователей Фэндома.
10. Wix
Wix четко группирует все функциональные страницы веб-сайта, все с черным текстом на белом фоне — чистые, простые и лаконичные. Его нижний колонтитул ориентирован на призывы к действию и ориентирован на информацию о компании, и вы можете легко перейти в любое место на сайте.
11. Mozilla
Хотя цветовая схема нижнего колонтитула тяжелая, она не ошеломляет пользователя. Напротив, он излучает чувство спокойствия. Он выделяет вариант загрузки с убедительным контекстом и большим изображением. Существует также выбор языка для посетителей, которые не говорят / не читают по-английски.
12. Isitwp
Интернет-сообщество isitwp, созданное на тему WordPress, имеет очень функциональный нижний колонтитул. Он отображает личность бренда с хорошо написанным текстом: «Бесплатный онлайн-ресурс, который предлагает учебные пособия, инструменты, обзоры продуктов и другие ресурсы WordPress, которые помогут вам создать лучший веб-сайт WordPress». Ссылки на сайты содержат раскрывающееся меню, чтобы указать, куда вы хотите перейти. Кроме того, в нижнем колонтитуле добавлена юридическая информация, такая как авторские права, РЕДАКЦИОННОЕ ПРИМЕЧАНИЕ и ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ.
13. Ардуино
Призыв этого сообщества с открытым исходным кодом к подписке на информационный бюллетень нельзя игнорировать. Дизайн нижнего колонтитула довольно прост, он предоставляет всю необходимую информацию без лишних хлопот.
14. Роблокс
Roblox — это игровая платформа, и ее нижний колонтитул подчеркивает различные магазины приложений, где пользователи могут загрузить приложение.
15. Крючок
Hook предлагает такие услуги, как веб-дизайн, SEO и анализ данных. Самое приятное — это большое фоновое изображение членов их команды, добавляющее элемент персонализации и доверия. Кроме того, он подчеркивает идентичность компании, карту сайта и CTA для регистрации.
Stacksocial — это веб-сайт, который помогает клиентам по всему миру находить удивительные продукты. В нижнем колонтитуле указано их специальное предложение для новых клиентов — скидка 10% для новых подписок. Это делает его привлекательным для тех, кто впервые зашел на сайт и решил совершить покупку.
17. Дуги
Doogee выводит на мировой рынок высокопроизводительные продукты с красивым дизайном и функциями. Веб-сайт оформлен в темном стиле, а нижний колонтитул помогает упорядочить вещи. Благодаря упорядоченному отображению значков социальных сетей и ссылок на них, Doogee показывает, что они действительно хотят, чтобы пользователи связались друг с другом. Справа — хорошо заметный призыв к действию для подписки на информационный бюллетень.
18. Lorealparisusa
L’Oréal Paris — ведущая компания в области косметологии, базирующаяся в Париже, Франция. При прокрутке вниз вы увидите доступные предметы роскоши с подробной информацией. Дизайн нижнего колонтитула его веб-сайта также впечатляет, отражая его миссию превосходства в красоте. Справа находится большая область, которая побуждает пользователей подписаться на последние новости о красоте, образцы продуктов и купоны. В нижних колонтитулах содержится дополнительная полезная информация.
19. Сефора
Sephora — известный бренд косметики. Его нижний колонтитул чрезвычайно прост, в нем используется только белый шрифт без засечек на черном фоне. Есть большое поле ввода белого цвета, где вы можете ввести свой адрес электронной почты для регистрации.
25+ самых крутых тенденций веб-дизайна в 2021 году, которые потрясли мир
20. Макияж
Макияж — это веб-сайт, на котором вы можете разделить взгляды на сферу красоты. Его нижний колонтитул полностью противоположен Sephora. Тонкий черный шрифт без засечек на белом фоне придает ему более женственный вид.
Часть 4. Дополнительные советы по дизайну нижнего колонтитула веб-сайта
Чтобы дать вам больше идей по созданию отличного дизайна нижнего колонтитула веб-сайта, мы постарались изо всех сил ответить на некоторые вопросы, которые, как мы думали, вы могли бы задать.
Вопрос 1. Как шаг за шагом создать хороший нижний колонтитул?
Если вы хотите начать с самого начала, следуйте этим советам:
Примите решение на основе исследования и вашего бизнеса: выясните, какой тип контента и информации вы хотите разместить на своем веб-сайте. Затем нарисуйте свою информационную архитектуру, как дорожную карту.
Каркасное построение и прототипирование: используйте инструмент для создания прототипов, чтобы превратить свои идеи в прототипы и тестировать, пока они не будут полностью соответствовать вашим потребностям.
Используйте инструменты дизайна экрана для разработки дизайна: вам нужно настроить каждый элемент.
Передача разработчикам и разработчикам: превратите свои визуальные эффекты в настоящие веб-страницы.
Если вам нужен старт, вам могут помочь бесплатные шаблоны нижних колонтитулов веб-сайтов. Вы можете просто загрузить шаблон нижнего колонтитула и настроить его в соответствии с вашими потребностями с помощью перетаскивания. Вот несколько бесплатных шаблонов нижних колонтитулов веб-сайтов:
Мы также настоятельно рекомендуем это видео на YouTube: Как создать полностью настраиваемый нижний колонтитул веб-сайта с помощью elementor.
Вопрос 2: Чего не должно быть в нижнем колонтитуле веб-сайта?
1. Чрезмерная оптимизация для SEO: Google будет знать, что вы используете методы черной шляпы SEO.
2. Слишком много ссылок. Дизайн будет загроможден, а жизненно важная информация не будет отображаться.
3. Абсолютно не все: в некоторых статьях может быть перечислено более 20 практик создания нижнего колонтитула веб-сайта, но не все размещается на вашей веб-странице. Все зависит от потребностей вашего бизнеса, поэтому выбирайте с умом.
Вопрос 3: нужен ли веб-сайт нижний колонтитул?
На самом деле, не на каждом сайте есть нижний колонтитул. Некоторые компании выбирают дизайн с бесконечной прокруткой. Это означает, что нет «дна страницы». Это предоставляет посетителям бесконечный контент, но затрудняет поиск контента на сайте. Тем не менее, он подходит для определенных типов веб-сайтов.
Веб-сайты, которые могут использовать бесконечную страницу: сайты новостей и СМИ.
Веб-сайты, для которых лучше использовать нижний колонтитул: сайты электронной коммерции.
Вопрос 4. Что такое нижний колонтитул?
Практически то же самое, что и нижний колонтитул. Нижний колонтитул помогает вашим посетителям переходить к другому контенту на вашем сайте, нажимая на ссылки.
В заключение
Мы надеемся, что эти 20 лучших примеров дизайна нижнего колонтитула пробудят ваше воображение и облегчат вашу работу. Если у вас есть другие потрясающие дизайны нижних колонтитулов, поделитесь ими с нами!
