Как разработать идеальный футер сайта? Подробное руководство с примерами
бизнес сайт
Владельцы веб-сайтов часто не уделяют внимание футеру, думая, что он не несет ценности: находится в самом низу, поэтому и не интересен пользователям. Но это не так. Правильно разработанный подвал с продуманным дизайном, грамотной структурой и необходимым наполнением привлечет внимание пользователя, задержит его на сайте и скоординирует по дальнейшим действиям. Именно поэтому эффективность качественно созданного подвала бесспорна.
В этой статье мы подробно расскажем что это такое — футер сайта, в чем его важность и каким он должен быть, чтобы работал на ваш бизнес.
Что такое футер, насколько он важен и почему
Футер (подвал, нижний колонтитул) сайта — это самая нижняя часть страницы, куда выносится полезная, но не первостепенная информация. Это может быть абсолютно любая информация, которая может быть интересна целевой аудитории, а также те сведения, которые должны быть на сайте, но их не рационально выносить в основное меню, чтобы сохранить его компактность и логичность.
Хорошо оптимизированный футер облегчит навигацию сайта и поможет достичь бизнес-целей, так как является дополнительным источником важной для пользователя информации, если он не нашел ее на странице.
Основные преимущества нижней части сайта
Footer может включать абсолютно любую информацию, которая может быть интересна пользователю: от контактных данных до ссылок на страницы с дополнительными услугами компании. Эти элементы приносят ряд преимуществ для бизнеса.
Акцент на важном
Стоит лишь поколдовать над оформлением подвала, как он станет основным акцентом на полезной информации. С помощью футера можно подробнее рассказать своему клиенту о компании и ее деятельности, предложить подписаться на рассылку или предоставить информацию партнерам с помощью активной ссылки на соответствующие страницы. Подвал упрощает навигацию для пользователя, если ему необходимо перейти в какой-либо раздел на сайте. Для этого ему достаточно выбрать необходимую ссылку в конце сайта, не пролистывая всю страницу вверх. Поэтому напрасно думать, что нижняя часть сайта — бесполезна. Она обязательно найдет своего пользователя, привлечет внимание и удержит на сайте.
Рост лидогенерации
Футер скажет пользователю, что конец сайта вовсе не конец. Он поможет удержать потребителя, подтолкнуть его к дальнейшему действию: заполнить форму обратной связи, перейти на страницу сообщества в социальных сетях, записать контактные данные или зарегистрироваться. Это все влияет на общую конверсию сайта. Благодаря правильному оформлению подвала посетитель запросто может стать клиентом. Главное, знать, что интересно для ЦА и что разместить в этой части страницы. Каждая ошибка может привести к снижению лидогенерации и, как результат, показателя конверсии. Чтобы избежать этого, посмотрите какие бывают ошибки веб-дизайна.
Максимум полезной и важной информации
Вся полезная информация, которая не поместилась в меню или не подходит по своей специфике, может быть размещена в футере. Раскройте своему пользователю юридическую информацию, привлекайте спонсоров и партнеров, предоставьте полезные ссылки для сотрудников компании. Поверьте, такая информация не будет упущена из виду.
Навигация по сайту
Если пользователь ушел далеко от хедера (шапки сайта) и приближается к футеру, значит, он еще не нашел то, что ему интересно и важно. Значит, все в ваших руках. Размещение навигационных ссылок упростит вашему потенциальному клиенту поиск нужной ему информации и продлит время пользования сайтом.
Максимальный захват внимания
Подвал до последнего держит внимание посетителя сайта, удерживая его. Он, словно, финальный аккорд дает пользователю еще один шанс получить ценную информацию. А чтобы это хорошо отработало, необходимо лишь правильно оформить нижнюю часть сайта. Как это сделать — расскажем позже.
Что должно быть в футере сайта?
Наполнение и оформление футера подвала сайта тесно связаны. От того, что будет размещено в этой части, зависит дизайн целого блока. Элементы наполнения зависят от деятельности компании и особенностей целевой аудитории. Мы перечислим большую часть элементов, которые могут быть размещены внизу страницы. Вам останется лишь выбрать наиболее подходящие в вашем частном случае, основываясь на своем бизнесе.
Авторские права
Простой способ защитить свой контент от хищения — это заявить об авторских правах. Это подразумевает то, что за кражу любого контента или идеи/дизайна сайта, тот, кто это сделал, может быть привлечен к ответственности. На деле, конечно, все обстоит гораздо иначе, так как все равно могут быть произведены попытки украсть ваш контент.
Каждый год необходимо обновлять цифру около информации об авторских правах. Это можно делать двумя способами: вручную или автоматически с помощью простого скрипта в коде.
Награды и сертификаты
Любая информация о сертификатах, наградах и достижениях становится мощным социальным доказательством, которое повышает доверие пользователя к компании. Поэтому если у вашей компании есть какие-либо заслуги, обязательно расскажите о них в подвале. Дополнительным преимуществом станет и то, что так как подвал отображается на каждой странице, информация о ваших наградах обязательно будет замечена. Если у вашей компании нет каких-либо сертификатов или наград, но вы являетесь партнером Google, Samsung, Asus или другой крупной и престижной компании, то обязательно укажите это в футере.
Карта сайта
Карта сайта в футере — это список страниц вашего сайта, которые помогут поисковому алгоритму проиндексировать страницы. Или карта может выступать в виде URL, которые поисковик ранее не обнаружил при сканировании сайта.
Футер поможет проиндексировать абсолютно все страницы сайта с помощью Sitemap, что очень хорошо для его продвижения.
Политика конфиденциальности/условия пользования
Нередко в подвале сайта размещается информация о политике конфиденциальности. Здесь указывается как собирается, хранится информация и как ее можно использовать. Для некоторых сайтов размещение информации о политике конфиденциальности обязательно, исходя из соответствующих законов.
Ссылка на страницу условий пользования обязательна, если сайт содержит контент, запрещенный для несовершеннолетних. Например, если сайт продает алкоголь или табак. Перейдя на страницу условий пользования, потребитель должен будет с ними ознакомиться и подтвердить, что он совершеннолетний. Это снимает ответственность с владельца сайта в случае, если пользователь не достиг 18 лет.
Форма обратной связи
Не стоит упускать возможность удержать клиента, предложив ему заполнить форму обратной связи.
Форма обратной связи поможет сконвертировать пользователя в клиента. Она помогает посетителям принять окончательное решение о сотрудничестве, если ранее пользователь был не уверен, что готов к нему. При этом форма обратной связи может содержать различные призывы к действию. Например, призыв “Остались вопросы? Задайте их нам” очень неплохо работает. Особенно, когда пользователь не смог найти ответ на интересующий его вопрос. Размещение формы обратной связи в футере — большой и жирный плюс к конверсии сайта.
Безусловно, форма призыва должна быть не только в подвале, но и на главной странице, чтобы не упустить клиента в тот момент, когда он желает выполнить действие. Как должна выглядеть главная страница сайта читайте тут.
Контакты компании
Как правило, контактам компании посвящен целый раздел, ссылка на который размещается в меню. Но, чтобы упростить пользователю управление сайтом и не заставлять его листать страницу вверх, когда он находится ближе к концу, в подвале также нужно разместить контакты. При этом контакты должны размещаться в микроразметке, чтобы поисковая система лучше понимала контакты компании.
Помимо контактных номеров телефона и электронной почты, которые часто размещаются в хедере, можно указать адрес физического расположения офиса или офлайн-магазина, а также указать полный почтовый адрес, если деятельность компании предусматривает необходимость обмена письмами с помощью стандартной почты.
Полезные ссылки на сайт
Навигационные ссылки на страницы сайта помогут посетителю найти то, что его интересует, если ранее он еще это не нашел в основном меню. Также подобными ссылками могут служить дубликаты на страницы “Доставка”, “Оплата”, “О компании” и т.д.
Иконки социальных сетей
Нижняя часть сайта — отличное место для размещения иконок социальных сетей. По традиции, их размещают именно в этой части страницы, чтобы удержать внимание пользователя на сайте, не давая возможность быстрее уйти с него. Поэтому, если пользователя интересуют сообщества в соц.сетях, они по привычке спускаются для входа в них именно в конец сайта.
Интеграция социальных сетей очень важна для увеличения подписчиков, удержания внимания пользователей.
Ссылка на вход в личный кабинет
Не все посетители сайта являются клиентами. Сайт могут посещать партнеры и сотрудники. Поэтому разместить ссылку на вход в личный кабинет в футере — отличное решение.
Форма подписки на рассылку
Не всегда подписка на рассылку является основным требованием от пользователей сайта. Но она может выступать в качестве дополнительного для удержания клиентов путем постоянного их оповещения актуальной информацией. В таких случаях в нижнем колонтитуле можно разместить форму на подписку. Будьте уверены, она обязательно захватит всех пользователей, заинтересованных в этом.
Форма поиска по сайту
Для интернет-магазинов и крупных порталов форму поиска логично размещать вверху сайта на самом видном месте. Но для некоторых сайтов это неактуально.
Но здесь будьте готовы к тому, что пользователи не привыкли искать форму поиска в футере. Поэтому ее обязательно нужно обособить и выделить, чтобы привлечь к ней внимание. Однако подобный элемент в подвале редко можно встретить на отечественных сайтах. Чаще всего он встречается на американских ресурсах.
О компании
Не всегда есть смысл посвящать целую страницу с информацией о компании, когда, в первую очередь, необходимо продвинуть свой товар или услугу. Поэтому нередко практикуется размещение краткой информации о компании в футере сайта. Здесь можно сжато предоставить самую основную информацию, ценную для пользователя. При этом объем информации не должен превышать 300-500 символов. Писать тексты на 5000 символов и скрывать кнопкой “читать дальше” бессмысленно, так как футер размещается на всех страницах и будет дублирующийся контент.
Ключевые запросы
Футер — прекрасное место, чтобы разместить блоки перелинковки с продвигаемыми запросами страниц для повышения релевантности сайта поисковой системой.
Но здесь количеством ключевых вхождений злоупотреблять не стоит — поисковая система Google не добавляет повышает эффективность SEO-продвижения за них. Поэтому одного-два ключа вполне достаточно, чтобы ключевики смотрелись гармонично с общим контентом.
Последние обновления в блоге
Если вы ведете блог для привлечения дополнительного внимания к вашей компании, то информацию об обновленном контенте можно демонстрировать внизу страницы. Но размещать такой блок в этой части сайта рекомендуется только в тех случаях, когда блог является лишь дополнительным инструментом и будет интересен лишь небольшой группе вашей ЦА.
По этому же принципу можно размещать любую информацию в подобном блоке. Например, ссылки на полезные статьи.
Оформляя футер, очень важно дать пользователю возможность доскроллить до него. Очень часто многие сайты содержат серьезную ошибку с точки зрения пользования — используют ajax (аякс), который при пролистывании страницы вниз постоянно подгружает контент. В результате пользователь просто не доходит до футера и он становится бесполезным. Такая технология эффективна, так как человеку не нужно перезагружать страницы чтобы узнать больше, но нужно давать возможность человеку самостоятельно решить хочет ли он смотреть контент дальше. Поэтому, оформляя футер и при этом используя аякс подгрузку контента, делайте подгрузку по клику, чтобы потребитель мог дойти до конца страницы и найти интересующую его информацию без возврата страницы наверх.
Призыв к действию
Давайте сотрудничать! Напишите нам! Оставьте свой номер телефона и мы перезвоним в течение 5 минут! Простой, но броский призыв к действию в совокупности с формой обратной связи или формой для рассылки, размещенные в подвале, поможет повысить конверсию сайта. Не забывайте, что призывы должны быть понятные и четкие, чтобы пользователю не пришлось думать как сделать действие, которое ему предложено.
Карта
С помощью размещенной в футере карты вам удастся повысить доверие посетителей к вашей компании. Кроме того, вы значительно упростите жизнь пользователям Google Maps, которые хотят быстро найти где размещен ваш офис.
Размещайте рабочую карту, которой пользователям будет удобно пользоваться. Нет смысла размещать карту Yandex, если сайт ориентирован на украинских пользователей, так как сервис заблокирован для Украины и при загрузке подобной карты — будут пустота. Что, согласитесь, не солидно.
Какие элементы лучше выбрать в футер зависит от рода вашей деятельности, вида сайта, его дизайна, наполнения и целевой аудитории. Ответить на этот вопрос вам поможет анализ интересов ЦА и грамотная структура сайта.
Чего не должно быть в футере?
Несмотря на то что, подвал сайта не является основным фокусным блоком сайта, которому посвящается все внимание, это не становится поводом создавать из футера мусорник. Поэтому избавляйтесь от лишних, ненужных и не несущих ценность ссылок, оставляя самые полезные и важные. Как понять, что ссылки не нужны? Все просто: если они не вписываются по логике с вашей навигацией или категориями, вероятнее всего, вы сможете обойтись и без них.
Не переусердствуйте с SEO-оптимизацией футера. Не забывайте, что поисковая система на раз увидит черное SEO и накажет за это.
И не бойтесь свободного пространства. Чрезмерное количество ссылок испортит впечатление о сайте и усложнит пользователю поиск интересующей его информации, что приводит к недовольству. А если ваш пользователь не доволен, он уйдет к вашим конкурентам даже не задумываясь.
Как грамотно разработать дизайн подвала сайта? 5 ценных рекомендаций
Дизайн подвала сайта и его структура должны быть продуманы, чтобы интересовать и привлекать онлайн-пользователя. Как это сделать — читайте 5 ценных рекомендаций.
Используйте креативные решения
Основной фон футера должен отличаться от общего фона сайта, чтобы бросаться в глаза. Но при этом он обязан соответствовать идее дизайна проекта и гармонично сочетаться с ней.
Чтобы эффектно выделить подвал сайта, вы можете использовать более яркие тона или вовсе использовать тематические картинки, которые подчеркнут направление сайта.
Если решили покреативить, обязательно свяжите дизайн футера и дизайн сайта с помощью элементов, которые будут исполнены в одном цвете. Сделайте логический переход между предпоследним и последним блоком, но при этом не забудьте про акценты на футере. Главное — правильно подберите цвета, чтобы смотрелось стильно. В этой статье вы сможете узнать как правильно подбирать цвета для сайта.
Разместите анимацию
Анимационные элементы всегда интересны для просмотра. К тому же, они играют на эмоции человека, подсознательно подталкивая его на действие. Даже с небольшой и скромной анимацией дизайн футера преобразится.
Выбирайте читабельные шрифты
Избегайте мелких шрифтов, даже если информации слишком много. Лучше исключите некоторые ссылки, которые являются более ненужными. Не заставляйте своего пользователя присматриваться к словам, чтобы их прочитать. И обязательно выбирайте контрастные с фоном цвета, чтобы небольшого размера буквы хорошо выделялись, предоставляя удобство для чтения.
Используйте больше пространства
Чем больше свободного пространства в области футера, тем выше концентрация на информации, которая в нем изложена. Повысить удобство пользования подвалом и поиска информации в нем помогут тематические заголовки и подзаголовки с логичными блоками.
Этот закон веб-дизайна актуален для всего сайта. Свободное пространство станет жирным плюсом с точки зрения юзабилити — пользователю удобнее воспринимать информацию.
Организованное, правильное и аккуратное размещение полезных ссылок поможет вам правильно передать информацию вашему клиенту. А клиенту быстро найти то, что его интересует, не копаясь среди множества бесполезных для него ссылок. И не забывайте про своих мобильных пользователей. Обязательно оптимизируйте футер, чтобы он правильно отображался на любом мобильном устройстве.
Разместите призыв к действию
Футер — это финальный аккорд сайта, цель которого удержать пользователя на сайте как можно дольше. Размещение призыва к действию станет еще одним шансом повысить конверсию сайта. Он не только удержит посетителя на странице еще какое-то время, но и сделает из него клиента. СТА в футере — это классика, к которой прибегает большинство популярных и успешных сайтов.
Чем отличается футер интернет-магазина от подвала других видов сайтов?
Наполнение и объем информации в подвале сайта зависит от деятельности компании, объема ее услуг, структуры меню и потребностей целевой аудитории. Поэтому футеры лендинг пейдж или сайтов-визиток могут содержать небольшое количество информации и ссылок: контакты, призыв к действию и не более. Но для интернет-магазина этого недостаточно.
В основном меню интернет-магазина размещаются ссылки на категории и подкатегории с целью продажи товаров. Остальную информацию об услугах компании размещать в главное меню не логично. Поэтому ее выносят в футер. Рекомендуем просмотреть примеры дизайнов интернет-магазинов, чтобы научиться правильно оформлять подвал сайта.
Здесь может размещаться специфическая информация: информация для партнеров и постоянных клиентов, о дополнительных услугах компании (например, информация об условиях кредита, рассрочки, доставки), ссылки на страницу корпоративного отдела для решения индивидуальных вопросов (в частности, финансовых вопросов, вопросов по возврату товара, улаживание спорных ситуаций и т.д.). Сюда же можно добавить ссылки на страницы о:
- Вакансиях компании;
- Контакты менеджеров-консультантов относительно специфического оборудования, которое продает интернет-магазин;
- Информация о скидках для постоянных клиентов, программе лояльности;
- Сведения о вариантах оплаты для юридических и физических лиц;
- Адреса сервисных центров;
- Информация о сотрудничестве для партнеров и поставщиков;
- Ссылка на FAQ;
- Информация о покупке подарочных сертификатах;
- Сведения о компании, режиме работы оффлайн- и онлайн-магазина и многое другое.
Если подытожить, то подвал интернет-магазина отличается лишь своим наполнением и количеством полезных ссылок. В остальном, требования к структуре и дизайну идентичны тем, которые выставляются к футерам любых видов сайтов. Главное, чтобы подвал был заметен посетителем и удобен для его пользования.
Потрясающие примеры оформления подвала сайта
Давайте рассмотрим примеры подвалов сайтов различных видов деятельности, дизайнов и наполнения. Черпайте идеи для разработки привлекательного и правильного футера для своего сайта 🙂
Пример подвала сайта № 1
Пример футера, который показывает насколько минимализм в этом блоке помогает сконцентрировать внимание на основном: логотипе (бренде) компании и иконках социальных сетей. Нет ничего лишнего, смотрится стильно и красиво. Сочетание черного и белого цвета — классика. А классика никогда не выйдет из тренда.
Пример № 2
Большое количество полезных ссылок + большое отрицательное пространство делают свое дело: и предоставляют объемную информацию по услугам компании, и помогают пользователю быстро найти то, что ему интересно. Футер разбит на два блока: важная информация, где заголовки к столбцам с ссылками выделены красным цветом, и дополнительная информация. Простое, но эффективное решение, когда необходимо в конце страницы разместить большое количество ссылок.
Пример № 3
Футер выступает в качестве блока с формой обратной связи. Небольшой призыв к действию, аккуратная форма и оригинальный дизайн привлекают внимание и мотивируют к действию.
Пример № 4
6 основных ссылок на дополнительную информацию, иконки для входа в сообщества социальных сетей — ничего нового. Но в этом случае изюминкой футера является информация о способах оплаты. Компания делает очень мощный шаг, вызывая у клиента доверие и повышая его лояльность к ней. Логотипы банковских систем в футере повышают удобство пользования сайтом и оплаты. А удобные способы оплаты для клиента — это еще один плюс к повышению конверсии сайта.
Пример № 5
В этом примере футер является завершающим этапом для клиента — его действием. Для этого разработаны необходимые маркетинговые и технические элементы: есть призыв к действию, кнопка для заполнения личных данных, а также функция перехода для просмотра презентации компании. В качестве дополнительной информации представлены активные ссылки на соцсети и контактные данные компании, если клиенту удобнее связаться с ней самостоятельно или посетить офис лично.
Пример № 6
В этом примере футера акцент идет на контакты с компанией. Дополнительным инструментом для удержания посетителя на сайте является активная кнопка для скачивания брифа. Оригинальный дизайн и много свободного фона удерживают и концентрируют внимание на главном.
Пример № 7
Пример типичного футера для интернет-магазина, где расположено большое количество ссылок на разные страницы сайта. Здесь пользователь сможет найти дополнительную информацию о компании, магазинах и услугах. Благодаря правильной структуре подвала большое количество ссылок смотрится органично — здесь легко найти то, что нужно. Подобные идеи должны заранее прорабатываться СЕОшником и вноситься в ТЗ на создание сайта. Это делается для того, чтобы не пропустить часть важной информации, предоставив ее конечным потребителям.
А вы уже знаете каким будет ваш футер сайта?
Рассмотрев все преимущества и ценности подвала сайта, его сложно назвать бесполезным. И хоть этот блок завершает страницу и находится в самом низу, он редко остается незамеченным. Поэтому каждый владелец сайта должен уделить особое внимание для разработки футера. Подумайте, какие ссылки вам необходимо разместить в этом блоке, какую структуру и дизайн лучше подобрать, чтобы в комплексе нижний колонтитул смотрелся не только эргономично и стильно, но и приносил пользу — задерживал посетителя сайта на нем. Мы показали вам большое количество примеров популярных сайтов, привели несколько важных рекомендаций. Вам лишь остается, ориентируясь на бизнес и ЦА, разработать свой эффективный подвал для сайта. А если ваш проект только в разработке, рекомендуем прочитать статью каким должен быть эффективный бизнес сайт.
Понравилась статья? Жмите палец вверх и подписывайтесь на наш блог!
Следующий проект:ТОП 5 примеров лучших медицинских сайтовПредыдущий проект:SEO аудит сайта при создании или делаем техническое задание на разработку сайта правильно11 идей оформления футера для сайта eCommerce
Если обувь это итоговая составляющая любого наряда, то футер для сайта e-Commerce — завершающий элемент его продающего дизайна. Уделяя внимание самому нижнему элементу «подвалу», современные веб-сайты готовы продемонстрировать свою индивидуальность всеми способами. В конкурентной e-commerce среде достаточно оригинальных идей, креатива и оформительских тенденций. Перед тем как разнообразить футер Е-коммерческого сайта, стоит учесть немаловажные моменты. Что разместить первую очередь и как это лучше сделать? В обзоре вдохновляющих дизайнов футеров есть интересные варианты.
Любопытна статистика от компании Chartbeat. Исследование поведения 25 млн. пользователей показало, насколько глубоко они просматривают страницы. Оказывается, пользовательское внимание обращено на пространство ниже линии сгиба. Получая больше практически полезной информации, посетители дольше всего задерживаются в области 1200px от верха страницы (при средних 700px по вертикали экрана в браузере), либо за вторым экраном.
Время просмотра (сек.) / Расстояние от верха страницы (пиксели)
Большой разрыв по продолжительности просмотра первого и второго экранов. Самый ТОП – 4 сек, длительность достигает максимума (16 сек.) на 1200 пикселях от верха и при дальнейшей прокрутке, медленно снижается.
Доля посетителей (%) / Расстояние от верха страницы (пиксели)
Значительная часть посетителей (более 25%) даже не ждут загрузки контента и начинают скроллить страницу. Значит, только 75% сперва увидят самый верх. Наиболее просматриваемая область страницы, это 550px (сразу над линией сгиба).
Исследование развеивает миф о том, что пользователи не прокручивают страницу до самого низа и не смотрят весь контент. Футер также важен для современного eCommerce сайта, даже имеет свои преимущества.
Идеи как оформить «подвал» (футер), примеры продающих дизайнов
Эти 10 советов подскажут, как красиво оформить футер для сайта – по правилам композиции в веб-дизайне и с разрешением приоритетных задач. Примените наиболее подходящие тактики для улучшения юзабилити, UX (пользовательского опыта) и даже повышения продаж.
1. Необходимая информацияТрадиционно, в футере сайта освещаются требуемые организационно-правовые вопросы. Уведомления оформляются менее заметным текстом, что освобождает другие области страниц для более значимых элементов. Вот примерный список для рассмотрения:
- Отметки о копирайте
- Правовые оговорки
- Биллинговая информация
- Уведомление об использовании файлов cookie
Веб-сайту реализующему товар, нужно удовлетворять правовым требованиям и предоставлять информацию о порядке, сроках возврата. Расположение ее в футере, удобно как продающему ресурсу, так и посетителям.
Пример footer’a: Ив Роше
Интернет-магазин торговой марки Ив Роше: футер во весь экран с приятным дизайном из чередующихся слоев. Информирует о компании, инфраструктуре продающего сайта – от отслеживания заказа, до политики персональных данных. Тут же советы по использованию продукта, бонусы, акции
Пример footer’a: Lumity
На торговцев пищевыми добавками возлагается повышенная юр. ответственность. Есть немало вещей о которых они должны/не должны сказать на своем продающем сайте. Ссылки на правовую информацию выделены жирным для лучшей заметности.
Футер с красивым бэкграунд изображением очень органично вписывается в общий дизайн сайта. Нет четкой границы, скорее разделителем служит сам контент
Пример footer’a: Saddleback Leather Co
Продающий сайт с красивым ретро-дизайном шапки и футера. 100-летняя гарантия на отсутствие дефектов материала и отделки. Условия возврата сопровождаются интересными историями… не все так грустно с необходимой e-Commerce-информацией бывает, оказывается
2. Негативное пространство – достаточность визуальной дистанции
Ограничивая число футерных линков не поскупитесь на отрицательное пространство – это окажет потрясающий эффект на визуальное восприятие и улучшит читаемость. Общее правило: при соблюдении визуальной иерархии, центральные элементы замечаются быстрее (можно использовать с выгодой!).
Пример footer’a: QUAY AUSTRALIA
С минималистичным стилем и фиксированным выпадающем меню, интернет-магазин может себе позволить просторный футер
Пример footer’a: Incase
О большом количестве микро-негативного пространства (между мелкими элементами) можно сказать так: пока вся необходимая информация присутствует, она разборчива и быстро воспринимаема – все нормально
Пример footer’a: Stumptown Coffee Roasters
Просторный футер кофейного сайта — отличное завершение композиции чистого дизайна, в котором много макро-негативного пространства («воздуха» между разделами/секциями)
3. Завершающий призыв к действию
Стильное оформление футера красноречиво говорит о самом ресурсе. Важно заметить: покупатель задерживается здесь чуть дольше, чем в остальных частях страницы. Удобным случай для еще одного, завершающего призыва к действию. Часто это подписка/рассылка, но можно связать СТА-призыв и с регистрацией аккаунта.
Пример footer’a: Greetabl
У Greetabl скромно оформленная нижняя часть страниц, включает призыв к подписке. При минимуме элементов призыв становится заметным, а гармонируя с бирюзовым фоном превращается в украшение сайта
Пример footer’a: Ecwid
Приятное оформление с призывами к действию в нижней части страниц. Структура конструктора продающих сайтов универсальна. Для миллиона своих клиентов он переведен на 35 языков
4. Плавающая корзина – повышение доступности продающего функционала
Доступ к корзине из нижней части сайта – отличный способ улучшить юзабилити и продающие качества сайта.
Пример footer’a: Lemonadela
Продающий сайт кейтеринговой компании приятен на вид и удобен для покупателя
5. Навигация в футере
Нижняя часть сайта идеально подходит для не часто просматриваемой информации: о компании, условиях предоставления услуг и политики конфиденциальности. В этом случае функция футера – всех спасти. Чувствуя себя потерянным в eCommerce среде, кто-то начинает интересоваться инфраструктурой электронного магазина, инстинктивно прокручивая дальше…
Негативное пространство необходимо для читабельности контента. Вообще, «подвал» не для навигационных целей, в отличии от меню или карты сайта. Лишь в редких случаях, сайты электронной коммерции размещают в футере отдельные категории товаров (пример1, пример2). Дополнительные линки вносят беспорядок, уменьшают силу фокуса внимания. Общепринято группировать контент футера по типу в столбцы, чтобы не жертвовать согласованностью, итак достаточно разобщенных данных.
Пример footer’a: Мini + Мe
При минимуме разделов, можно добавлять интересные опции, например «Подарочный сертификат». Футер не загроможден, а упорядоченный контент легко сканируется взглядом. Основатель интернет-магазина отмечает: «Этот редизайн решил первоначальную задачу — увеличение продаж и конверсии»
Пример footer’a: Amuse Society
Минималистичное оформление со столбцами из 4-5 ссылок. Липкое меню в хедере избавляет от необходимости что-либо дублировать. Центр отведен под призыв, совмещенный с формой регистрации
6. Иконки соцсетей
Подобно завершающему страницу СТА-призыву, ссылки на соцсети в подвале веб-сайта дают последний шанс обратиться к своему потребителю и заполучить больше фолловеров. Мода на социальные иконки внизу страницы так укоренилась, что ищущие их посетители сразу направляются к футеру. Также, красивые соц.значки разбавляют унылость монотонных текстов.
Пример footer’a: Vissla
Визуальная выраженность футера на сайте подчеркнута логотипом. Добавление ссылок на важные страницы совмещено с еще большим акцентом на минимализме. Ряд значков соцсетей гармонично вписан в этот стиль
Пример footer’a: Shadeonme.com
Под социальные иконки и призыв с выгодой их использовать выделен отдельный слой. Оранжевый для значков взят из палитры сайта (дополняющий цвет), зеленый как побуждающий к дальнейшим действиям (используется для поиска, корзины, кнопок с призывом). Это сочетание освежающих цветов
7. SEO-ссылки только из футера главной страницы
В былое время SEO-эффекта добывались сбором сквозных бэклинков из футера сайтов (так выглядело http://www.andyrutledge.com/dog-and-pony-show-design.php ). Но сегодня, любая футерная ссылка хороша лишь с главной страницы. Гугл иногда сбивает с толку, напоминая о своем отношении к ссылкам в принципе. Официально признано, что в хедере и футере ссылки менее значимы, чем размещенные по тексту. Также, предлагается использовать для внешних (исходящих) ссылок тег «nofollow».
Исследование маркетинговой фирмы показывает, что ссылки с футеров способны улучшать ранжирование страниц, хотя нужны они лишь с главной страницы.
Пример фиксированного футера: Mandco.comСворачивая футер в панель, интернет бутик UK-ритейлера минимизировал подвал на всех страницах кроме главной
8. Создайте визуальную иерархиюНе нужно считать футер самой нижней ступенью в визуальной линейке страницы. Лучше представьте его отдельной структурой со своей иерархией.
Для начала ваш футер должен быть разделен на отдельные секции с рассмотренными элементами: навигационными ссылками, правовыми оговорками, Сall-to-Аction призывами, социальными иконками и т.д. Поскольку данные эти всегда будут различаться, их лучше разнести по секциям с применением правил визуальной иерархии.
Актуальные варианты визуального оформления «подвала» сайта:
- Слои (под-уровни) — Наиболее фундаментальный способ создания визуальной иерархии – разделить на горизонтальные уровни. Слоями можно видоизменять футер, используя указанные тут методы
- Выделение цветом (различные коды) — Цвето-различие текста или бэкграунда предполагает родственную взаимосвязь тонов. Например, отличаете цветом навигационые ссылки от правовой информации. Аналогичный способ – создать слои с др. фоном
Пример footer’a: Thepixel.com
Пример footer’a: Worldseasonings.com
Пример футера: Julia JanusЭтот футер произведение искусства: задействованы все рассмотренные методы. Контрастный слой определяя верхнюю границу, включает иконки соцсетей и призыв к регистрации. Контрастная типографика (по размеру, начертанию, стилю и цвету шрифта) разграничивает ссылки и визуально минимизирует менее значимое. Чередуя ряды и колонки, дизайнер добавляет лого бренда и усиливает визуальный эффект
9. Красивые эффекты, графика и занимательная анимацияКрутая графика и анимация привлекают многих. Это не означает: «Перетягиваем внимание на нижнюю часть сайта». Манящее и стильное оформление подвала сайта, должно повысить общую привлекательность. Дизайну в светлых тонах придаст особый шик.
Пример footer’a: Jenier World of Teas
Логотип и анимированная графика верхнего края футера оживляют продающий дизайн
Здесь нижняя часть сайта заточена под продажи: смелый цветовой контраст для конверсионных элементов, карусель категорий (листаем курсором) и фиксированное выпадающее меню.
10. Идеальный футер – просторный и функциональныйВендор Hypergrand сосредотачивает внимание на главном, оформление достаточно функционального футера не перетягивает на себя внимание.
Пример footer’a: HypergrandЭлементам футера позволено дышать. Между ссылками, соц.значками, копирайтом и красивым призывом к подписке достаточно «воздуха». При центральном расположении иконок, негативное пространство добавляет им визуального веса (См. после редизайна: стратегия продающего оформления та же)
P.S.
Не смотря на свое нижнее расположение, подвал выполняет важную роль связывающего звена для всего сайта. Может не каждому он интересен в данный момент, но рано или поздно пользователь обращает внимание на нижнюю часть сайта. Грамотно оформленный футер, оказавшись комфортным для потребителя, может спасти E-commerce ресурс от отказа.
Разработка футера: советы и примеры дизайна подвала сайта
«Василий приземлился на странице, почитал, но не увидел нужной информации. Он пролистал дальше — тот же результат. Пролистав еще, Вася начал терять терпение и хотел было выйти обратно в поиск. Но вот оно — в самом низу веб-страницы расположился подвал с нужной ссылкой! И кучей другой полезной инфы» — такое происходит 1000 раз в день.
Разработка футера сайта — это история о том, как помочь пользователю и достичь целей бизнеса.
Зачем нужен подвал сайта?Вы снова удивитесь, но видимость футеров считается очень высокой.
На основании данных 25 миллионов веб-просмотров эксперты Chartbeat составили диаграмму удаленности пользователя от заголовка веб-страницы. Оказалось, не бывает слишком длинных страниц и слишком удаленных колонтитулов!
Если интересно, как далеко продвигаются посетители на вашем сайте, воспользуйтесь платными программами для определения «глубины прокрутки» страниц. Например, Lucky Orange или ClickTale.
Каким должен быть нижний колонтитул сайта? Найдите парочку интересных идей для своего проекта:
1. Знак авторского права
Если вы намерены сделать очень скромный колонтитул, то это может быть именно копирайт и год.
Это слабая защита против плагиата, но внушает определенное доверие.
Кстати, крошечный программный код позволит автоматически обновлять годы.
2. Карта сайта
Это наиболее распространенный элемент, который используют в подвале многие крупные веб-сайты.
Ссылку на карту сайта можно найти внизу домашней страницы у Intel, Apple и других уважаемых компаний.
Рядовые посетители редко ее кликают, но, как и XML sitemap, ссылка может помочь поисковикам.
3. Политика конфиденциальности
Это второй по популярности элемент футеров. Обычно «Политика конфиденциальности» ссылается на страницы, которая объясняет аспекты сбора информации сайтом, хранения и использования данных пользователя.
4. Пользовательское соглашение
Правила использования Сайта несколько отличаются от предыдущего пункта. Они объясняют посетителю, с чем он соглашается при работе с материалами данного ресурса. Подобные ссылки — крайне желательный элемент нижнего колонтитула веб-сайтов, относящихся к строго регулируемой индустрии (например, финансы).
5. Контактные данные компании
Посетители ожидают найти контактную информацию в правом верхнем углу шапки сайта. Это стандарт веб-дизайна.
Второй популярный вариант — размещать ссылку «Контакты» в нижнем правом углу (или в центре) футера.
Это должна быть ссылка на страницу с подробными контактными данными, а не просто адрес электронной почты.
Есть множество причин публиковать контактную форму:
• Подача формы соответствующим образом отслеживается в аналитике
• Посетитель может не находиться на компьютере, где его электронная почта недоступна
• Формы могут вести на страницы благодарности, где есть дополнительный призыв к действию
• Формы могут задавать вопросы и направлять заявки конкретным сотрудникам
• Формы отправляют посетителям автоматические ответы, больше СТА и информации
• Формы могут сохранять сообщения в базу данных для дальнейшей обработки
• Формы могут подключаться к системам автоматизации маркетинга
• Ссылки на электронную почту — это спам-магниты
Поэтому настоятельно рекомендуем вам убрать ссылку на email из нижнего колонтитула!
По правде говоря, мы не советуем размещать электронную почту вообще где-либо на видном месте сайта.
6. Физический адрес и ссылка на карту
Информация о местонахождении — это то, что посетители ожидают увидеть в подвале сайта.
Мы неоднократно говорили, что важно вызывать доверие людей, демонстрируя им реальные контактные данные.
Если ваш бизнес ориентирован на местных покупателей (ресторан, автосервис, offline магазин), ссылка на карту впишется в дизайн нижнего колонтитула. Это также указывает Google, куда стоит направлять пользователей при локальном поиске.
Правильно разработанная ссылка на карту превращается в удобную кнопку размером с отпечаток пальца, и будет легко приводить мобильных пользователей прямо к дверям вашего магазина или ресторана.
7. Номер телефона и факса
Подобно физическому адресу, номер телефона и код города помогает Google оптимизировать результаты выдачи для локального поиска. Как и кнопка карты, кликабельный телефонный номер сделает подвал сайта удобным для благодарных мобильных пользователей. Звоните прямо сейчас!
8. Навигация по сайту
Подсказки по навигации — та самая спасительная соломка, которую вы должны подстелить посетителю в подвале сайта. Пользователь, который пролистал так далеко, наверняка не обнаружил нужные элементы выше.
Время предложить дополнительные опции. В последние годы на Западе распространился юзабилити-тренд под названием «жирный футер» (fat footer). Это подразумевает существенное расширение опций в колонтитуле.
Внизу страницы может содержаться те же ссылки, что и в выпадающем «мега-меню» под хедером сайта. Но это вовсе не обязательно спасет потерявшегося пользователя. Вспомните — ведь он не нашел нужную инфу в шапке.
9. Кнопки социальных сетей
Анализ топ-50 маркетинговых сайтов Буржунета показывает, что 72% футеров содержат кнопки социальных сетей.
Мы ведь любим трафик из социальных медиа? Но мы не любим, когда посетители уходят от нас на Facebook, Twitter или YouTube. Когда они уходят, то больше не возвращаются. Вот почему веб-дизайнеры не размещают кнопки в хедере.
Нижний колонтитул — идеальное место, где соблюдаются интересы сторон.
10. Подписка по электронной почте
Вернемся к анализу лучших маркетинговых сайтов западного мира.
Исследования показывают, что 24% из них размещают кнопку подписки по email внизу домашней страницы.
Действительно, подписка наиболее вероятна тогда, когда посетитель перечитал контент и нашел его интересным.
Поэтому в футере данный элемент будет срабатывать гораздо лучше, чем в хедере сайта.
Но не надейтесь на магическую силу контента. Подкрепляйте призыв социальными доказательствами (сколько довольных подписчиков на сайте?) и очевидными выгодами (что получит подписчик в обмен на электронную почту?).
Одинокий скучный email address box не сулит вам высоких конверсий…
11. Форма авторизации
Не все посетители — просто читатели. Среди них могут быть сотрудники фирмы, партнеры, поставщики и покупатели.
Ссылка на форму авторизации может стать уместным элементом в дизайне футера. Эти посетители часто возвращаются на сайт, однако нам незачем тратить драгоценную маркетинговую площадь хедера ради очередной формы входа.
12. Кнопка для прессы
Еще один специализированный элемент для страниц крупных сайтов — это кнопка для прессы. На самом деле, менее 1% пользователей являются журналистами или редакторами, поэтому тратить ли место на данный элемент, решать вашему отделу маркетинга и PR. Если вы доросли до кнопки Press, у компании наверняка есть такой отдел.
13. Строка поиска по сайту
Если они не нашли строку поиска в хедере или боковой панели, используйте ее при оформлении нижнего колонтитула. Поисковые инструменты — это спасательный круг для утопающих посетителей, который должен быть хорошо заметным на фоне остальных кнопок вашего жирного футера.
14. Фотографии
При желании красиво оформить подвал сайта, разместите там фотографии сотрудников, офиса или клиентов.
Это замечательная возможность сделать имидж компании более «человечным».
15. Галерея фотографий
Почему не сделать полный педикюр? Вместо одного изображения разместите целую галерею довольных лиц!
16. Брендинг
Визуальные образы при оформлении футера — еще один шанс укрепить бренд.
Это подходящее место для использования логотипа, социальных доказательств, сертификатов и т. д.
17. Миссия и ценности компании
Логотипы — это хорошо, но почему не рассказать посетителям о миссии и ценностях вашего бизнеса? Если в шапке эта информация не всегда уместна, то нижний колонтитул отлично подойдет. Такой подход использует американский сайт BGA (Better Government Association), подробно излагая свою миссию в нижней правой части главной страницы.
18. Ключевые слова для SEO оптимизации
Текст в нижнем колонтитуле – это ключи на каждой странице. Таким образом, это отличное место, чтобы указать вашу релевантность Google. Если вы включили свою миссию, ценности или общие сведения о компании, используйте это как дополнительную возможность ранжирования. Особенно в локальном поиске.
Внимание: футер сайта был объектом злоупотребления нерадивых SEO оптимизаторов в течение многих лет. Вероятно, поэтому нынешние поисковые алгоритмы Google не добавляют большого веса за ключи в нижних колонтитулах.
Так что не переусердствуйте. Просто используйте фразу один раз (как текст, а не ссылку), и двигайтесь дальше.
19. Награды, дипломы и сертификаты
Некоторые сферы бизнеса, такие как медицина и финансы, основываются целиком на доверии клиентов.
Если вы готовите дизайн подвала сайта для сайта частной клиники, юридической консультации, страховой компании или подобного бизнеса, не забудьте разместить внизу страницы многочисленные награды и регалии!
Это одна из самых эффективных форм социального доказательства. Престижные награды максимально усиливают впечатление от бренда, именуемое в маркетинге гало-эффектом (эффект нимба).
Совет маркетологов: комбинируйте все символы доверия в так называемый «блок доверия».
20. Членство в ассоциациях
Возвращаясь к разработке сайта частной клиники или юридической конторы. В этих сферах бизнеса гало-эффект усиливает членство компании в различных престижных обществах, союзах или ассоциациях. Например, если на сайте клиники есть знак JCI – это знак соответствия строгим стандартам и безопасности для иностранных пациентов.
21. Отзывы счастливых клиентов
Позвольте клиентам сказать несколько лестных слов о компании. Тратить для этого драгоценные пиксели в шапке не всегда рационально, но в подвале сайта они будут смотреться отлично. Да еще и с фотографиями!
Важно: при добавлении отзывов помните, что они подкрепляют конкретный призыв, поэтому должны добавляться избирательно, на определенные страницы (не по всему сайту). И еще: худшее место для отзывов — это страница отзывов, которую мало кто просматривает. Не верите? Просмотрите аналитику!
22. Ссылки на свежий контент
Если вы активно занимаетесь контент-маркетингом, попробуйте использовать оформление футера для публикации свежих статей из блога, новостей компании и т. д. Или размещайте там ссылки на избранные статьи или ответы на часто задаваемые вопросы пользователей, которые помогут вашим конверсиям.
23. Предстоящие события
Вы наверняка проводите встречи, акции, раздачи сэмплов. Чтобы привлечь внимание ЦА к предстоящим события, нужно использовать корпоративный веб-сайт на всю катушку. Объявления целесообразно помещать и в нижнем колонтитуле.
Но делайте это только в том случае, если компания ВСЕГДА проводит те или иные мероприятия.
24. Видео контент
Изображения превосходят по силе текст, а видео контент превосходит изображения.
Считается общепризнанным, что видео — это самый эффективный формат контента для электронной коммерции.
Чтобы выжать максимум из дизайна подвала сайта — добавляйте качественные видеоролики.
25. Персональный Jingle Bells
В редких случаях веб-разработчики прибегают к использованию аудио в нижнем колонтитуле.
Милая техника UX: переделать популярную мелодию для оживления страницы!
26. Финальный призыв к действию
Каждая веб-страница в мире электронной коммерции должна содержать призыв к действию.
Нет, СТА не следует оставлять для оформления подвала сайта! Начинать следует гораздо выше.
Но добавить финальный призыв к действию после вышесказанного — отличная идея.
Под конец приведем несколько вдохновляющий идей для разработки.
Цветовая схема футера
Обратите внимание, как многие из приведенных выше примеров демонстрируют светлый текст на темном фоне.
Реверсирование цветов — хороший способ сообщить посетителям, что они достигли конца прокрутки.
Совет разработчиков: реверсирование цветов в области контента требует осторожности. Это может создать «ложное дно», заставляя посетителей думать, что они достигли подвала и пропустили остальную часть страницы.
Липкий футер
Подобно тому, как элементы навигации могут «прилипать» к верхней части веб-страницы (независимо от прокрутки), нижние колонтитулы могут всегда отображаться внизу экрана. Отличный вариант, если в подвале хранятся важные ссылки. Использование липкого футера оценили такие прогрессивные сайты, как Conversion Sciences (США).
Бесконечная страница… Без нижнего колонтитула!
На каждом веб-сайте есть нижний колонтитул, не так ли?
На самом деле некоторые медиа-сайты не используют их, поскольку их страницы бесконечны. Вечный скроллинг позволяет посетителю переходить от одной статьи к другой — зайдите на РБК или другие популярные информационные агентства.
Резюме
Подытоживая все сказанное, какой должна быть разработка футера?
Ответ прост: ориентированной на пользователя.
Вы должны понять, почему люди добираются до конца прокрутки:
• Не находят нужных ссылок на странице
• Ищут онлайн-консультанта или какую-то подсказку
• Не могут сориентироваться в разделах сайта и др.
Поместите в подвал то, что ищет пользователь, и позитивный опыт гарантирован.
делаем эффектный «подвал». Читайте на Cossa.ru
Современные сайты различных тематик и предназначений во время жесткой конкуренции в интернете постоянно находятся в поисках способов быть самыми узнаваемыми и уникальными. Многочисленные веб-мастера создают разнообразные сайты, только бы привередливые пользователи обратили внимание именно на их творение. Для этого необходимо тщательно прорабатывать каждую деталь сайта, чтобы посетители хотели возвращаться к нему еще и еще.
Чтобы веб-сайт был эффективным, необходимо добавить в него удобство пользования и читабельность, начиная от заголовка, и заканчивая футером («подвалом» сайта). Если футер расположен в самом низу сайта, то это не значит, что туда мало кто «доходит», и вы не должны придумывать для него какого-то особого дизайнерского оформления. Это не так. Многие разработчики не отдают должного внимания такому элементу, как «подвал» сайта. Попробуем разобраться, что именно необходимо сделать, чтобы футер стал эффектным как в плане информативности, так и в плане дизайна.
Также необходимо разобраться в том, что именно можно и нужно размещать в футере, насколько важна карта сайта, и удобство его использования. Также необходимо рассмотреть одни из самых стильных идей и тенденций.
Что размещать в футере
Прежде чем приступать к разработке футера, рассмотрим общие элементы для него и разберемся в важности каждого из них. Не обязательно включать все нижеперечисленные элементы, каждый должен подобрать для своего сайта персональный набор того, что ему необходимо разместить. Итак, начнем.
Карта сайта
Удобство пользования сайта является первоочередным в веб-дизайне . Какова бы ни была мало карта сайта, ее размещение в футере улучшает удобство использования. Это один из тех маленьких элементов, которые остаются незамеченными, но могут быть полезными для кого-то из посетителей. Карта сайта это просто подробный список страниц на веб-сайте, разделенных по категориям. Она рассказывает пользователю о том, какую информацию можно найти на сайте и дает доступ к этим страницам.
При большом количестве страниц или категорий, желательно сделать выпадающее меню, которое поможет улучшить поиск в соответствующем разделе. Если в раскрывающееся меню не подходит, вы должны выбрать наиболее полезные страницы для вашей аудитории и показывать только их.
На большинстве блогов, карта сайта представлена в виде подраздела со списком категорий, списком новых и наиболее интересные статей, списком последних комментариев и т. д. Основная задача всех этих ссылок, чтобы оставить посетителя на сайте, что делает поиск информации быстрее и проще.
Контактная информация
Это хорошая идея для портфолио фрилансера, бизнес-сайтов и других подобных веб-сайтов. Как правило, при поиске информации о веб-сайте , посетитель обращается к футеру. Размещение такой информации, как «О сайте» и «Контакты», является хорошим способом обеспечить легкодоступной контактной информацией о сайте на каждой его странице. Размещение этих данных на каждой странице позволяет пользователю найти телефон компании быстрее, и сразу перейти к покупке или заказу продукции.
В дизайне, как правило, элементы разделены на следующие моменты: адрес магазина или организации, телефоны, адреса электронной почты, схема проезда (или ссылку с иконой, или полная карта, с возможностью обозрения зрения без перехода на другой сайт) или форму обратной связи. Кстати, контактная форма, это отличная идея, потому что она позволяет пользователям связываться с вами без перехода к странице контактов. Многие пользователи не будут реально использовать его, но он обеспечивает дополнительное удобство для небольшого количества посетителей.
Кроме того, часто можно увидеть комбинированный вариант, когда «подвале» содержатся ссылки на важные страницы ресурса и краткая информация контактов (без карты или контактной формы).
Ссылка «Наверх»
Еще одним полезным элементом, который обычно встречаются в футере, является ссылка «Наверх». При прокрутке вниз, чтобы найти информацию в нижней части сайта, посетители не хотят прокручивать обратно, чтобы вернуться назад, к верхней части страницы. Да, они могут использовать кнопку «Home» на клавиатуре (но она не включена во все клавиатуры), да и большинство пользователей не знают об этой функции. Ссылка «Наверх» является одним из тех мелких деталей, которые действительно помогут в удобстве использования веб-сайта.
Социальные сети
Если ваш сайт имеет отношение к социальным сетям, или вы активно общаетесь через них с аудиторией ресурса, вы должны предусмотреть размещение ссылок на соответствующие сайты. Так же, как и в контактной информации, Вы должны давать только ссылки на самые популярные сети, если вы зарегистрированы на более чем 5 сайтах.
Социальные сети являются популярными инструментами для получения информации, поэтому очень важно, чтобы посетитель мог узнать, что сети имеют определенный ресурс. Поддержка связи с помощью иконок, добавит каналы из последних твитов или ответов. Если у вас есть блог, не забудьте установить такие кнопки, как «Like» и «Tweet».
В настоящее время, размещение социальных сетей очень важна для любого ресурса, и вы не должны пропустить эту группу при проектировании футера или всего сайта в целом.
Теги
Облако тегов как дополнительный блок навигации отлично подходит для всех видов сайтов, особенно для тех, где большое и разнообразное содержимое сайта. Оно дает еще одну возможность для пользователей, чтобы легко найти информацию, которую они ищут. Но облака тегов могут занять много места. Некоторые размещают теги в боковой панели, но боковые панели обычно не имеют достаточно места для размещения такого количества текста, особенно текста с большим размером шрифта. Облака тегов, размещенных в футере, будут работать лучше. Они могут быть доступны на каждой странице, в отличие от того, если они будут в боковой панели, и не будут теряться среди других элементов на сайте.
MacTalk использует список тегов, а облако тегов отображает самые популярные теги на сайте.
Стилизация футера
Хороший стиль имеет важное значение для любого веб-дизайна. Это улучшает не только внешний вид, но и визуализацию содержания сайта. Вот несколько советов по разработке стиля, которые необходимо иметь в виду при работе над футером для повышения его эффективности.
Определяем иерархию
Не забывайте о важности хорошей типографии. Пользователь должен иметь возможность быстро взглянуть на информацию, не путаясь в ней. Колонки улучшают обзор данных, но хорошая типография и большие шрифты тоже помогают сделать эффективный футер.
Самое главное, показать иерархию содержания. Посмотрите на скриншот ниже. Обратите внимание, что каждый столбец начинается с четкого и неповторимого титула. Немного места отведено титулу, а затем идет и само содержание. Титул является очень важным элементом, потому что он обращает внимание пользователя и говорит ему, что находится в этом столбце. Это одна маленькая деталь делает поиск информации проще и ее не следует упускать из виду.
Футер данного сайта включает в себя информацию об авторских правах (стандартный элемент), а также ссылки на другие полезные информации. Каждая часть информации отделяется в как индивидуальный элемент.
Моделирование хорошего списка
Как и качественная типография, хорошее моделирование списка важна для карты сайта. Надлежащие интервалы списка важны в веб-дизайне, поскольку они улучшают четкость и фокус. То же самое справедливо для карты сайта и других списков в футере. Кроме того, убедитесь, что для заголовков столбцов отведено больше пустого пространства, чем для элементов списка, чтобы лучше передать иерархию.
Границы могут быть использованы для разделения элементов списка. Взгляните на следующий пример, в котором курсивы используются для отдельных элементов списка. Курсивы выглядят красиво и более точно определяют элементы списка.
Пустое пространство (пробел) является ключевым
Зачем использовать пробелы? В футере с колонками, пробел обращает внимание глаз читателя к каждому блоку содержания, улучшая внимание и четкость. Имейте в виду, что пробел не должен быть белым, он просто означает пустое пространство без информации или содержания.
Колонки, это не единственные вещи, которые должны быть разделены пробелами. Верхняя часть футера и его содержание должны иметь много отступов. Пространство между содержанием футера и нижней частью страницы, также должно иметь достаточный отступ. На следующем рисунке показан футер Media Temple. Каждая область помечена, чтобы было понятно, сколько необходимо отступать, и показано, где соблюдать интервалы.
Отличие футера от общего контента
Одна из первых вещей, которые вы заметите при просмотре скриншотов в этой статье, является то, что каждый футер отчетливо отделяется от сайта, на котором он расположен. Футеры зачастую другого цвета, чем площадь над ним. Возьмите скриншот чуть выше, например. Цвет фона футера, отличается от цвета фона основной области содержимого всего на тон, но это заметно.
Футеры обычно делаются на более темных фонах. Некоторые из них имеют графические или иллюстрированные фоны. Крис Колвин (смотрите изображение ниже) убежден, что содержание сайта четко отделено от футера. «Оторванный» кусочек обоев выглядит красиво и прекрасно вписывается в атмосферу сайта.
Мы рассмотрели, что можно размещать в футере, как его сделать привлекательным и эффективным в использовании. Теперь, для вдохновения, посмотрим, какими бывают футеры на различных сайтах.
Блестящая векторная графика и цветовая палитра, посетитель чувствует умиротворение, смотря на этот футер.
Matt Mullenweg
Приятный дизайн сайта, элементы листьев и фортепиано с правой стороны создают хорошую обстановку.
Ресторан Nuevo Aurich
Здесь собрана вся необходимая информация о ресторане. Очень удачный футер, потому что он отражает суть этого заведения.
Blog.SpoonGraphics
Немного векторной графики, несколько текстур, немного информации – вот три ингредиента, которые могут хорошо работать футере.
Carol Rivello
Carol удалось расположить в футере всю основную информацию, и в то же время пример своей работы.
Vimeo
В Vimeo вы найдете классный футер. На нем показано не так много информации, но главное присутствует хороший стиль иллюстрации.
Gisele Jaquenod
Стиль дизайна Gisele может быть воспринято через весь веб-сайт, милая графика и хорошая идея для футера.
flicka.cz
Подвал выполнен в ретро стиле,прекрасное решение и оригинальный дизайн.
TNT Pixel
Простой футер, который выражает огромную благодарность автору за выбор шрифта и с элементом в виде динамита в центре.
CooperLive
Прекрасный дизайн футера. Предоставляет необходимую информацию, и завершает его с замечательным комплектом инструментов наверху.
Белый дом
Люди в Белом доме сделали хорошую работу по использованию футера, чтобы показать всю информацию, пользователи этого сайта нуждаются в очень четкой и организованной подаче материала.
SprintBio
На этой странице вы не можете точно сказать, где начинается футер и заканчивается основной сайт, хорошее использование зеленой палитры для шрифтов и фонов.
Готовые проекты
Последние сообщения, последние твиты и полезные ссылки, вот три вещи, которые делают этот подвал неотъемлемой частью веб-сайта.
Josh Mackey
Ценностью этого подвала является использование иконок. Тут размещаются ссылки на некоторые из основных веб-ресурсов.
David Hellman
Этот футер сождержит комбинированные элементы. Помимо основного футера, вы можете увидеть в то же время крошечный небольшой бар, который показывает некоторые web 2.0, кнопки прокрутки и основную информацию. Тогда вы можете попасть в реальный футер, где найдете некоторую дополнительную информацию, выполненную схематично в очень чувствительном стиле.
Iseeq
Футер сайта www.iseeq.com выполнен в классическом стиле и строгих тонах, содержит всю необходимую информацию о фирме и ее деятельности.
Как мы видим из вышесказанного, дизайн футера веб-сайта резко изменился за последние несколько лет. Прошли те времена, когда футеры были лишь местом для повторения верхней панели навигации и для информации об авторском праве. Веб-дизайнеры поняли, что «подвалы» могут быть использованы для различных целей маркетинга не только, как освещение ссылок, но и привлечения внимания зрителя к определенным областям.
Автор: Краснова Анастасия — директор помаркетингу компании Iseeq.com
10 ЛУЧШИХ ИДЕЙ ФУТЕРОВ ДЛЯ САЙТА
Часто на футер не обращают внимания, но он является одним из ключевых элементов сайта. Это важный раздел для посетителей сайта, которые хотят получить больше информации о вашей компании. При создании дизайна футера для компании, вы сталкиваетесь с проблемой выбора элементов, которые нужно включить — ведь хорошо оптимизированный футер облегчит навигацию и поможет достичь поставленных бизнес-целей. Хотите узнать, что ваши клиенты ожидают увидеть, когда скроллят сайт до самого конца? В нашем новом посте мы собрали лучшие идеи для дизайна футера сайта и их наиболее удачные примеры.
Почему футер важен для вашего сайта?
1. Он делает акцент на определенном контенте
Если сделать футер более заметным, он привлечет большее количество пользователей. Вы удивитесь, как долго читатели могут прокручивать вашу страницу – до бесконечности! Запомните: футер не бывает “слишком далеко”, он обязательно найдет свою аудиторию.
2. Он поможет привести лидов
Покажите посетителям сайта, что конец страницы – это не конец сайта. На этом этапе самое время покинуть сайт, но не забыть о компании. Выберите лучший вариант: контактная форма, электронная почта или адрес, помещенные в футер, помогут вашим клиентам сделать следующий шаг.
3. Он предоставляет пользователям полезную информацию
У вас есть еще информация, которая помещается на одной странице? Разместите ее в футере! Это касается любых ссылок на сторонние ресурсы, партнеров, спонсоров. Возможно, размещение юридической информации на самом сайте может быть резонным, но условия предоставления услуг или копирайт оставьте внизу.
4. Он ориентирует ваших читателей
Если ваш клиент ушел слишком далеко от “шапки” сайта, это очевидный знак, что он все еще не нашел то, зачем пришел. Помогите ему с навигацией, разместив ссылки на основные разделы вашего сайта в футере.
5. Он удерживает внимание пользователя
Если вы хотите удержать внимание посетителей “финальным аккордом”, сделайте дизайн вашего футера креативным или даже развлекательным, добавив видео, изображение или другие интерактивные элементы.
10 удачных футеров по версии Agente
Команда Agente проанализировала основные тренды дизайна футеров и выбрала лучшие идеи, которые помогут вашему сайту выделиться среди остальных.
1. Минимализм
Источник: awwwards.com
“Простота – это крайняя степень изощренности”, сказал Леонардо да Винчи. Перегруженный футер не всегда информативен. Постарайтесь сосредоточиться на одном-трех элементах и придерживаться минимализма в дизайне. Предлагаем такое сочетание: значок копирайта, логотип и кнопки социальных сетей. Так вы защитите себя от плагиата, привлечете внимание и направите читателей в нужное русло. Все просто.
2. Карта сайта
Источник: furrion.com
Карты сайта недооценены, ведь очень немногие читатели кликают на них. В противовес минимализму, объемный футер выполняет совсем другие функции. Если пользователи не найдут, что искали, за них это найдут поисковые системы! Объемные футеры позволяют Google лучше проиндексировать страницы, что станет маленьким шагом к более высокой позиции в поисковике.
3. Контактная форма / новостная рассылка
Источник: valaire.mu
Что касается контактной формы, Agente придерживается трех позиций: сверху справа, снизу справа и снизу в центре. Убедитесь, что ссылка ведет на контактную форму, а не на всплывающее окно для отправки почты. В целом, старайтесь избегать ссылок на электронную почту – они привлекают спам.
Другой секрет привлечения пользователей с помощью футера – модуль с регистрацией на новостную рассылку. Мы рекомендуем эту функцию как элемент дизайна футера для интернет-магазинов. Укажите, что будет включено в рассылки, как часто вы планируете их делать, а также укажите количество людей, которые уже читают вас.
4. Навигация
Источник: traveling.by
Здесь футер может помочь пользователям, которые “заблудились”. Если они ушли так далеко вниз, то, скорее всего, не нашли, что искали. Хорошо организованные ссылки на разделы сайта помогут посетителям сориентироваться.
Вы можете расположить ссылки футера в виде вкладок, выпадающего списка или стандартного меню из трех -четырех столбцов. Заранее определите наиболее посещаемые страницы вашего сайта и позаботьтесь о том, чтобы они были отображены в футере.
5. Социальные сети
Источник: awwwards.com
Как правило, компании ценят, что посетители приходят на сайт из социальных сетей. И наоборот, некоторые не хотят интегрировать иконки соцсетей в футер, опасаясь потерять часть своей аудитории. Если социальные сети занимают стратегическое место в вашей маркетинговой политике, убедитесь, что футер на вашем сайте содержит иконки, ссылающиеся на них.
В приведенном примере иконки социальных сетей расположены в центре футера. Кроме того, футер содержит краткое меню, контактные данные, условия предоставления услуг и знак авторского права.
6. Призыв к действию
Источник: behance.net
Напишите нам! Приглашаем к сотрудничеству! Оставьте свой телефон и мы свяжемся в течение часа!Простое, но броское обращение к читателям в футере в сочетании с новостной рассылкой или контактной формой может помочь вам увеличить коэффициент конверсии. Убедитесь, что ваш призыв к действию понятный и исчерпывающий. Помните, что читатели не хотят долго думать, как им выполнить то или иное действие.
7. Контакты, телефон, адрес
Источник: behance.net
Контактная информация – вот что ожидает увидеть любой пользователь в футере. Номер телефона с кодом страны помогает поисковым системам определить, где вы находитесь. Сделайте каждую ссылку кликабельной, чтобы посетители вашего сайта могла набирать номер или отправлять письма одним кликом со своего смартфона.
Этот футер, разработанный Agente, содержит только кликабельную контактную информацию и не отвлекает внимание пользователей на ненужные мелочи.
8. Карта
Источник: cantilever-chippy.co.uk
Интеграция карты повышает доверие к образу вашей компании, показывая, где расположен ваш офис. Кроме того, это отличный способ помочь пользователям Google Maps найти вас.
Cantilever-Chippy знает, что интеграция карт безумно проста, но эффективна, особенно если сочетать ее с прекрасным дизайном таблички с часами открытия.
9. Уникальный футер
Источник: thespruce.com
Если вы хотите сделать свой сайт уникальным, то изображения, анимация или фотографии вашей команды в футере способствуют персонализации. Для более эффектного и запоминающегося посыла, включите видео в футер вашего сайта.
10. Без футера
Источник: justdiggit.org
Иногда стоит отказаться от шаблона header-sidebar-footer, чтобы выделиться из толпы. Попробуйте убрать футер с целевой страницы, сохраняя стандартные футеры с необходимой информацией на других страницах вашего сайта.
В этом примере показана домашняя страница без футера, которая позволяет сосредоточить внимание на главном.
Как создать хороший футер:
Вы нашли отличную идею для футера вашего сайта? Чтобы предотвратить проблемы на пути реализации этой идеи, разработайте план с описанием того, что вы хотите увидеть внизу страниц сайта.
1. Определите основные элементы
- Пересмотрите структуру вашего сайта и решите, где должен располагаться футер, подберите шаблон.
- Сделайте футер отзывчивым для мобильной версии или приложения.
- Сделайте уникальные футеры для разных страниц, например, добавьте карту на страницу “Контакты”.
2. Спроектируйте пространство футера
- Определите размер футера и количество разделов и столбцов, расположите их согласно приоритетам или стандартам. Например, контактная информация обычно размещают в центре или правом углу футера.
- Оставьте футер внизу страницы или привяжите его при помощи шаблонов HTML и CSS, чтобы “зафиксировать” его при скроллинге.
3. Добавьте уникальные элементы
- Вставьте ссылки на соцсети, виджеты Твиттера или кнопку “подписаться” в Фейсбуке.
- Добавьте рекламный плагин.
- Интегрируйте Google Maps или другие карты на ваш выбор.
- Поддержите единый стиль: выберите шаблон футера в Bootstrap или WordPress или создайте уникальный, учитывая корпоративные цвета и стили.
Таков наш обзор лучших идей и образцов дизайна футера. Однако, не спешите применять все советы для своего сайта. Подумайте о целевой аудитории и действуйте соответственно их нуждам, ведь дизайн футера, как и процесс его создания, может различаться в зависимости от специфики бизнеса. Напишите нам, и команда AGENTE поможет вам создать идеальный футер.
Футер сайта — что это, как его оформить, примеры
Футер сайта – это полезная для посетителей информация, расположенная отдельным блоком в самом низу страницы. Обычно подвал оформляется в другой цветовой гамме для того, чтобы отделить его от основных материалов.
Если хедер (шапка) и первая страница ресурса являются основными элементами сайта, это не означает, что футер бесполезен. Маркетологи утверждают, что грамотно оформленный подвал не только выполнит многие функции, но и существенно повысит конверсию сайта.
В статье рассмотрены секреты создания стильного и многофункционального футера и примеры удачного оформления.
Понятие, задачи, преимущества и недостатки футера
Футер или подвал сайта – это сквозной элемент структуры веб-ресурса, расположенный внизу страницы. Он используется в качестве блока с дополнительной информацией или как инструмент, позволяющий собирать лиды.
Как правило, для всех веб-страниц создается один футер, поэтому в нем размещается общая информация о компании, товарах или услугах. Основные задачи подвала:
- Привлечь внимание. Красивый и правильно оформленный подвал поможет акцентировать внимание пользователей на определенном контенте.
- Выделить важную информацию. В футере размещаются сведения о компании, специалистах и партнерах, о которых посетитель теоретически может захотеть узнать.
- Помочь в навигации. Пользователь, пролиставший главную страницу до подвала, вероятно, так и не смог найти то, что ему нужно. Размещение в футере ссылок на главные разделы ресурса помогут посетителю решить его проблему.
- Привести лидов. В футере можно разместить контактную форму обратной связи, адрес фирмы, электронную почту и номера телефонов – все то, что подтолкнет пользователя к обращению в компанию.
К основным преимуществам качественно оформленного футера относится:
- Возможность удерживать внимание пользователя дольше. Подвал – это то место, после просмотра которого, человек либо уйдет с сайта, либо перейдет дальше по размещенным в футере разделам или ссылкам.
- Повышение узнаваемости бренда. Подвал является идеальным местом для публикации новостей фирмы и ссылок на материалы, которые не вписались в содержание страниц сайта.
- Формирование социальной активности. Размещение ссылок на группы в соцсетях позволит поддержать контакт с пользователями за пределами сайта.
- Акцент на главном. Информация, размещенная в подвале доступна и в других разделах сайта, однако, именно здесь она представлена кратко, логично и наглядно. Это упрощает поиск для многих пользователей, не желающих собирать данные по всем разделам.
К недостаткам футера относится:
- Снижение скорости загрузки страниц. Чрезмерное нагромождение элементов приведет к тому, что веб-ресурс будет работать медленнее. Поэтому необходимо регулярно проверять и контролировать скорость загрузки.
- Обилие комментариев, из-за которых футер останется незамеченным. Специфика размещения подвала связана с тем, что при наличии большого количества комментариев на странице, пользователь не дойдет до самого низа и все усилия, вложенные в оформление элемента, окажутся тщетными.
Каждая деталь имеет свое значение и может привести как к повышению конверсии, так и к ее снижению. Поэтому при создании футера важно применять не только креативные и стильные решения, но и учитывать все нюансы оформления.
Полезные ссылки: Курсы по созданию и продвижению сайтов, Хлебные крошки на сайте что это, Лучшие конструкторы сайтов для интернет-магазинов.
Варианты навигации
Существует 2 способа, с помощью которых посетитель может попасть на нижнюю часть сайта:
- Дочитка. Используется на лендингах или тех ресурсах, где главная страница представлена в качестве статичного элемента без каких-либо обновлений и ленты новостей. Читатель проходит от начала и до конца текста и попадает в самый низ к футеру. В этом случае подвал должен быть идейным продолжением информации на странице, ее кульминацией.
- Быстрый скролл. Используется на сайтах, где главная страница представлена в виде навигационной, а не информационной зоны. Посетители такого ресурса стремятся быстрее пролистнуть текст и попасть в раздел навигации, которая находится внизу. В таком случае будет уместна установка кнопки быстрого доступа.
19 лучших элементов для футера
В подвале следует размещать полезную для посетителей информацию. К основным элементам футера относятся:
- Политика конфиденциальности – ссылка на страницу с объяснениями о том, как будут использованы полученные от пользователей данные.
- Авторское право – информация о том, что копирование контента с сайта будет плагиатом.
- Контакты – телефон, адрес компании, электронная почта. Размещение этих данных уместно не только в хедере сайта, но и в футере. Многие пользователи специально пролистывают страницу до конца, чтобы найти контакты организации.
- Условия использования – общие правила и рекомендации, которые регулируют использование ресурса.
- Карта – может быть указана в дополнение к контактам. Этот элемент позволит задержать посетителя на сайте и не перенаправлять его на сторонние ресурсы.
- Кнопки и лид-формы, побуждающие совершить действие: подписаться на почтовую рассылку, войти в личный кабинет или оставить свои контакты для оформления заказа или записи на прием.
- Перелинковка – возможность перехода на важные разделы меню веб-ресурса. Например, для интернет-магазина будет уместно размещение ссылок на разделы: оплата, доставка, акции, гарантии и т.д.
- Кнопки для перехода в социальные сети компании с указанием количества подписчиков.
- Преимущества – размещение небольших графических баннеров, демонстрирующих достижения и возможности организации.
- Логотип и ссылка на главную страницу сайта.
- Возраст домена для повышения уровня доверия посетителей. Важно не забывать обновлять актуальный год, иначе сайт будет выглядеть заброшенным.
- Текст – актуальный элемент для размещения на сайтах некоторых тематик. Например, на ресурсы, посвященные медицине, стоит добавить фразу об отказе от ответственности, а на сайтах коммерческих сфер указать график работы организации.
- Способы оплаты стоит разместить в футере интернет-магазина.
- Облако тегов – дает возможность пользователям легко отыскать необходимые данные.
- Возрастные ограничения следует указать на тех ресурсах, контент которых недопустимо распространять среди лиц младше определенного возраста.
- Счетчики следует размещать только в некоторых случаях, поскольку демонстрация количества посетителей и отчетности по ним нужна не для всех ресурсов. Счетчики уместны на информационных форумах, в тематических сообществах и т.д.
- Карта сайта раньше размещалась практически на всех веб-ресурсах. Считалось, что поисковые роботы лучше понимают структуру сайта, оснащенного картой. Сейчас это устаревшее средство, в котором нет особой необходимости.
- Поисковая строка обычно находится в шапке сайта, но для удобства пользователей ее можно продублировать и в нижний колонтитул.
- Популярные посты и публикации в футере подогреют интерес читателя к информации, размещенной на сайте.
Таким образом, существует широкий перечень элементов, которые можно размещать в подвале. Это не значит, что нужно добавить на сайт сразу все пункты из списка. Разделы, которые будут гармонично смотреться в футере, следует подбирать в зависимости от цели и тематики веб-ресурса.
Как убрать все лишнее?
Несмотря на то, что футер – это не главная часть сайта, нельзя делать из него «помойку». Не стоит размещать в подвале ненужные и не несущие ценность ссылки.
Определить бесполезность размещенной информации достаточно просто: если она не вписывается по логике к категориям то, скорее всего, ее можно с легкостью удалить.
Не стоит перебарщивать и с СЕО-оптимизацией. Поисковая система мгновенно вычислит черные методы продвижения и накажет за них. Не нужно бояться свободного места. Переизбыток ссылок и текста может испортить впечатление пользователей от ресурса и усложнить процесс поиска нужной информации.
7 секретов создания стильного футера
Качественное стильное оформление футера не только привлечет новых потенциальных клиентов и поможет в SEO-оптимизации, но и улучшит внешний вид сайта, упорядочив его содержимое.
Начиная работу над созданием футера, необходимо:
- Определить размер подвала и количество основных элементов. Размещение каждого пункта необходимо осуществлять в соответствии с важностью для читателя. Например, блок с контактами организации обычно находится в правом углу или в центре футера.
- Определить иерархию. Посетитель должен иметь возможность быстро увидеть необходимую информацию и не путаться в ней. Колонки, большие шрифты и хорошая типография позволят сделать футер эффективным.
- Смоделировать списки. Для обеспечения лучшего восприятия информации все ссылки следует сгруппировать по отдельным столбцам и колонкам. Большие отступы и грамотное расположение интервалов позволят улучшить четкость и фокус. Для заголовков в каждом столбце рекомендуется выделить больше свободного пространства, чем для элементов в списке.
- Отделить футер от остального контента. Подвал должен кардинально отличаться от основной части страницы. Для этого лучше использовать фон, гораздо темнее чем тот, что использовался выше. Контраст привлечет внимание читателей и позволит сделать акцент на важную информацию. Можно использовать необычное оформление с добавлением графических элементов.
- Использовать пробелы. Наличие пустого пространства позволяет обратить внимание на каждый блок футера. Пробелами следует отделять верхнюю часть подвала от его содержания.
- Выбирать шрифты, сочетающиеся с остальным дизайном сайта.
- Добавить яркости основным элементам, а остальные приглушить. Это позволит правильно расставить акценты и сфокусировать внимание читателя на чем-то конкретном.
При создании эффектного футера, не стоит забывать о едином стиле оформления. Главной задачей веб-мастера является оформление подвала таким образом, чтобы он гармонично сочетался с дизайном всего сайта в целом.
Типичные ошибки веб-дизайнера, которые сделают футер бесполезным
Наиболее распространенные ошибки начинающих веб-дизайнеров и опытных специалистов:
- Смазанные названия переходов и отсутствие четкой тематической привязки. Пользователь не видит нужной информации среди перечня представленной. Следует поменять наименования блоков.
- Мелкий нечитабельный шрифт. Стараясь «воткнуть» в футер как можно больше информации, некоторые забывают о том, что посетители не будут всматриваться и пытаться прочитать то, что написано маленьким шрифтом.
- Многоуровневая карта сайта. Развернутая навигация – полезное решение, однако размещение масштабной карты сайта, имеющей более двух уровней – это ошибка. В футере следует размещать только самую главную информацию первого и второго уровней, а не всю структуру веб-ресурса.
- Избыток креатива. Оригинальные решения в оформлении подвала не должны применяться в ущерб удобству. В первую очередь футер – это та зона, в которой пользователь может решить основные задачи, поэтому важно соблюдать баланс между креативом и функциональностью.
Полезные лайфхаки: Как включить турбо в Яндексе, Как сделать перелинковку на сайте, Как составить ТЗ копирайтеру.
ТОП-10 лучших идей для оформления
- Футер выполнен в строгом классическом стиле и содержит всю необходимую информацию о компании и ее деятельности.
- Подвал выполнен с использованием иконок и ссылок на основные ресурсы.
- Красивый и оригинальный дизайн, содержащий всю необходимую информацию.
- Футер в ретро-стиле с оригинальным и стильным дизайном.
- Футер интернет-магазина выполнен во весь экран и имеет интересный дизайн из чередующихся слоев. Содержит много полезной для покупателя информации.
- Красивый ретро-дизайн и самые необходимые пункты.
- Пример футера с большим количеством «воздуха» между пунктами и приятным дизайном.
- Основные пункты и призыв к действию в нижней части страницы.
- Минималистическое оформление, состоящее из 3 столбцов и нескольких ссылок. В центре размещается форма регистрации.
- Отдельный слой выделен для размещения значков соцсетей. Ниже столбцы и ссылки на основные разделы.
Футер – это важный элемент веб-ресурса. Сделать его максимально эффективным достаточно просто. Самое главное не пренебрегать качественным оформлением этого раздела, поскольку каждая деталь сайта способствует формированию лояльного отношения у посетителей и может стать залогом конверсионного успеха.
С уважением, Ксения Стрюкова
специально для проекта proudalenku.ru
Оцените статью:
Загрузка…Эффективный дизайн футера сайта — как сделать, примеры, советы
Разработчики часто упускают из виду, что footer для сайта (перевод с англ. футер/подвал) является одним из базовых его элементов. Он может дать более полную информацию о компании, а также выполняет разные полезные функции: облегчает навигацию, помогает сориентироваться посетителям веб-проекта и пригодится в некоторых коммерческих целях.Ранее в блоге мы рассматривали разработку шапки сайта а сегодня поговорим о подвале. Тут нужно грамотно подойти к выбору управляющих компонентов, которые будут включены в него, дабы получить эффективное и оптимальное решение.
Предлагаем вашему вниманию перевод статьи от Agentestudio с актуальными наработками по дизайну элемента footer на веб-странице. Также советуем посмотреть нашу подборку где собраны 40+ красивых футеров сайта для вдохновения.
Пост состоит из трех частей:
Зачем вообще нужен подвал?
1. Он зрительно завершает блок контента
Создание броского футера привлечет к вам ещё больше посетителей. Сложно предположить, как долго потенциальные читатели будут просматривать вебсайт — может, и до бесконечности! Поэтому при его оформлении следует помнить: элемент располагается «на подхвате», он всегда найдет свою аудиторию.
2. Помогает владельцу площадки совершать «лиды» (продажи, действия)
Пусть все увидят, что после контента веб-проект не заканчивается. Размещайте там любой подходящий вариант для обратного контакта: Email-почту, форму связи или просто ваш адрес. Эти дополнительные детали помогут читателям сделать «следующий шаг» и позвонить/написать вам.
3. Footer содержит полезные сведения
Имеете больший объём информации, что не получается поместить на странице? — в таком случае она легко добавляется в «подвале». Это могут быть любые внешние линки на полезные ресурсы, ваших партнеров или коллег. Также логично включить сюда некоторые юридические данные по типу ссылки на условия/правила обслуживания, отказ от ответственности и т.п. (обычно их размещают где-то в самом конце).
4. Он направляет посетителей веб-сайта
Необходимо учитывать один важный нюанс: если человек при просмотре/прокрутке веб-странички оказывается слишком далеко от ее заголовка, значит он не нашел то, за чем к вам зашел. «Перенаправляйте» его с помощью навигации в самом низу экрана на главные разделы веб-ресурса.
5. Для привлечения внимание
Если весь контент выглядит скудновато, то можно попытаться привлечь внимание за счет оформление футера сайта в максимально ярком, креативном стиле и даже сделать его в какой-то степени «развлекательным» (как в рисованных дизайнах и макетах с мультяшной графикой).
Десять вариантов веб-дизайна футера
Учитывая имеющиеся дизайнерские тренды и просмотрев десятки примеров, авторы оригинальной заметки выделили наиболее популярные и эффективные направления для данной задачи.
1. Лаконичность
«Простота — это крайняя степень изощренности», — сказал Леонардо да Винчи. Чрезмерная «заполненность» футера не всегда свидетельствует о его информативности. Лучше сосредоточиться на нескольких (не более трёх) элементах и сохранить его минималистичным и простым. Логично использовать следующую комбинацию: авторское право + логотип + кнопки социальных сетей. В наше время нельзя забывать о риске плагиата, поэтому привлечение внимания к копирайту всегда полезно.
2. Карта сайта
Этот элемент часто недооцениваются, так как мало кто им пользуется. Однако в отличие от упомянутого выше минималистского решения, здесь объемный футер с обширным числом рубрик/директорий служит несколько иным целям. Даже если читатели не найдут то, что им надо, — поисковики точно смогут: большой footer позволяет Google лучше индексировать страницы веб-сайта, что может положительно сказаться на его позициях в поисковой выдаче.
3. Форма обратной связи или рассылка
По размещению контактной формы веб-дизайнеры выбирают следующие позиции: сверху справа, снизу справа или по центру. Если вы добавляете ссылку, то она должна перенаправлять на вебстраницу с формой, а не отображать ее во всплывающем окне. Также не рекомендуется публиковать почтовые адреса, поскольку они зачастую привлекают спамеров и автоматически попадают в их базы.
Второй прием привлечения доп.аудитории — подписка на рассылку новостей, что располагается в подвале сайта. Эта функция особенно рекомендуется интернет-магазинам: расскажите, что и как часто пользователь будет получать в данной рассылке + упоминайте количество уже имеющихся активных подписчиков.
4. Дополнительная навигация
Это решение поможет сориентировать тех, кто «потерялся» в вашем онлайн проекте. Если люди уже находятся на странице в самом низу, то скорее всего, так и не нашли то, что искали. В таком случае правильно подобранный набор полезных ссылок в футере будет грамотно направлять их через основные разделы веб-ресурса.
Вы можете оформить меню в виде табов, выпадающих списков или обычного перечня в несколько столбиков. Здесь необходимо предварительно определить самые важные или просто наиболее посещаемые разделы/страницы и сделать их достаточно видимыми.
5. Социальные сети
Обычно компании положительно относятся к аудитории, которая приходит к ним из соцсетей. Однако при этом некоторые разработчики не спешат встраивать подобную функциональность у себя, опасаясь потерять часть посетителей. Поскольку сейчас Facebook, Инстаграм и другие уже давно являются частью маркетинговой воронки бизнеса, следует позаботиться о том, что footer сайта содержит соответствующие иконки и линки на ваши группы в соц.сетях.
В приведенном выше фото соц.кнопки размещены по центру, и помимо них здесь также добавлены: краткое меню, контактные данные, условия использования и инфа об авторском праве. Весьма приятный и функциональный пример.
6. Призыв к действию (CTA)
«Давайте переговорим!», «Наймите нас!», «Введите телефон, и мы свяжемся с вами, как можно быстрее!» — простой, но броский призыв к потенциальным читателям/клиентам совместно с формой для контакта/подписки способны улучшить конверсию веб-страницы. Нужно удостовериться, чтобы ваше обращение было предельно четким и не содержало никаких непонятных деталей — это важно, т.к. современная аудитория не любит слишком много думать о том, как именно следует действовать.
7. Контактная информация, телефон, адрес
Чаще всего пользователи ожидают найти в подвале блок с контактами. Напишите там свой телефонный номер с кодом страны — это даст возможность поисковым системам понять, где конкретно работает бизнес/веб-ресурс. Желательно делать каждый линк кликабельным дабы любой человек смог быстро набрать указанный номер или отправить электронную почту прямо со смартфона (читайте как сделать ссылку на номер телефона в HTML в другом блоге).
Приведенный выше пример содержит только необходимую инфу, что в свою очередь не рассеивает внимание и не отвлекает на ненужные мелочи.
8. Использование карт
Размещение карты вселяет дополнительное доверие к бизнесу и заодно наглядно показывает, где находится офис компании. Это хороший способ поклонникам Google Maps быстрее найти ваш адрес. Эту фишку можно красиво встроить в шаблон, плюс она весьма эффективна для восприятия.
9. Пользовательские решения
При создании дизайна футера сайта приветствуется наличие различных рисунков, анимации, фото команды и т.п. — это способствует большей «персонализации» вашего бизнеса/проекта. В некоторых макетах допускается добавление видео, что является еще более запоминающимся способом донесения нужной информации для потенциального клиента.
10. Без футера
Иногда можно отойти от классической структуры «шапка-контент-футер» и выделиться из «толпы» конкурентов, убрав данный элемент вовсе. Этот подход допускается для некоторых landing page или главной, сохраняя при этом стандартный шаблон в других веб-страницах. Так в скриншоте выше нет никакого нижнего блока с целью выделения ключевых акцентов.
Как сделать подвал сайта максимально эффективным
Дабы избежать излишних препятствий при реализации своей начально задумки, надо иметь четкое понимание того, что вы и ваши посетители ожидаете увидеть внизу веб-сайта.
1. Определите основные компоненты
- Просмотрите общий дизайн ресурса и определите какой именно формат футера вам необходим (либо выберите один из вариантов выше).
- Не забывайте о мобильных устройствах — подумайте об адаптивной, мобильной версии или о специальном приложении.
- При необходимости создайте несколько вариаций макета для отдельных страниц: к примеру, вставьте географическую карту на страничку контактов и т.п.
2. Определитесь с дизайном
- Выберите размер и количество разделов/столбцов. Оформляйте их с точки зрения важности (либо стандартов): контактная инфа, как правило, помещается в центре или в правом углу блока.
- При необходимости по аналогии с фиксированным меню с помощью HTML/CSS можно прикрепить footer к нижней части экрана браузера и «зафиксировать» его при прокрутке. Такая реализация встречается крайне редко, обычно он просто добавляется после контента.
3. Использование дополнительных элементов
- Вставьте социальные функции: виджет твиттера с последними постами, кнопки подписки на FB-страницу и др.
- Добавьте карты Google или любые другие сервисы.
- Соблюдайте общий стиль: посмотрите варианты шаблона в Bootstrap или WordPress, придумайте свое решение с нуля или вдохновляйтесь работами других дизайнеров.
Итого. В статье мы поделились с вами разными примерами и советами как сделать footer для сайта эффективным и полезным. Однако не спешите применять их все сразу, подумайте о вашей потенциальной ЦА, ее ожиданиях и предпочтениях — обязательно учитывайте все это в работе. Если будут какие-то вопросы/дополнения по теме, пишите ниже.
Рекомендации по дизайну нижнего колонтитула веб-сайта: 27 вещей, которые нужно поставить в конец
Вот интернет-история, которая происходит миллион раз в день.
Вивиан заходит на веб-сайт … но она не видит то, что ищет … она прокручивает немного вниз … но все равно не находит … прокручивает еще немного … все еще не там … затем она полностью спускается до внизу страницы … и вот он, в нижнем колонтитуле веб-сайта. Ссылка, которую она искала!
По всему Интернету нижние колонтитулы веб-сайтов спасают положение, улавливая посетителей как страховочную сетку, прежде чем они сильно попадут в нижнюю часть страницы.
Дизайн нижнего колонтитула веб-сайтаНазначение нижнего колонтитула веб-сайта — помочь посетителям, добавляя информацию и параметры навигации внизу веб-страниц.
— это выбор того, что включать, чтобы помочь посетителям и достичь бизнес-целей.
Насколько важны на самом деле нижние колонтитулы?
Это важный выбор, потому что нижних колонтитулов хорошо заметны . Их видят многие посетители. Исследование Chartbeat изучило 25 миллионов посещений веб-сайтов и обнаружило, что посетители прокручивают вниз тысячи пикселей.Ни одна страница не является слишком высокой, ни один нижний колонтитул не слишком далеко.
Если вам интересно, как далеко вниз пользователи прокручивают ваш сайт, есть платные инструменты, которые покажут вам «глубину прокрутки» на вашем сайте. Lucky Orange, Crazy Egg и ClickTale — вот несколько примеров.
27 вещей, которые можно поместить в нижние колонтитулы
Как создать нижний колонтитул вашего сайта? Вот 27 идей и примеров, начиная с наиболее распространенного контента и функций. Прокрутите список вниз, чтобы увидеть наши собственные рекомендации и передовые методы, которые нужно включить в дизайн нижнего колонтитула.
1. Авторское право
Если бы в нижнем колонтитуле был только один элемент, возможно, это был он. Год и символ авторского права. Это слабая, но простая защита от плагиата веб-сайтов.
Pro Совет. Небольшой фрагмент кода позволит автоматически обновлять год.
2.
Карта сайтаЭто самая распространенная ссылка в нижних колонтитулах, которая ведет на HTML-версию карты сайта. Посетители редко нажимают на эти ссылки, но, как и XML-карта сайта, они могут помочь поисковым системам находить нужные объекты.
3. Политика конфиденциальности
Это второй по частоте элемент в дизайне нижнего колонтитула. Обычно он ссылается на страницу, объясняющую, какую информацию собирает веб-сайт, как она хранится и как ее можно использовать. Для большинства веб-сайтов речь идет об отслеживании (аналитика и ремаркетинг), отправке форм и подписке по электронной почте.
Нужна политика конфиденциальности? Мы использовали TermsFeed для создания нашего или этого удобного бесплатного генератора политик конфиденциальности.
«Условия использования» немного отличаются от конфиденциальности.Они объясняют, на что соглашается посетитель, посещая сайт. Как отказ от ответственности, они заявляют, что, используя сайт, посетитель соглашается с определенными вещами.
Для веб-сайтов в строго регулируемых отраслях вы можете разместить текст прямо в нижнем колонтитуле.
Если юридический текст имеет решающее значение, добавление его в нижний колонтитул обеспечит максимальное покрытие. На каждой странице написано мелким шрифтом.
5.
КонтактПосетители ожидают найти контактную информацию в правом верхнем углу заголовка.Это стандарт веб-дизайна. Также стандартно найти ссылку «контакт» в правом нижнем (или в центре) нижнего колонтитула.
Это должна быть ссылка на страницу контактов с формой обратной связи, а не ссылка на электронную почту. Есть много причин использовать контактную форму, а не ссылку по электронной почте.
- Отправку формы легко отслеживать как выполнение цели в Analytics.
- Посетитель не может находиться на компьютере, который он использует для электронной почты. Формы
- отправляют посетителей на страницы с благодарностью, которые могут предоставить больше сообщений и призывов к действию.
- Forms отправляют посетителям электронные письма с автоматическим ответом, опять же, больше сообщений и CTA.
- Forms может сохранять отправленные материалы в базу данных на случай, если электронная почта не пришла.
- Forms может подключаться к автоматизации маркетинга и другим системам. В формах
- можно задавать конкретные вопросы и направлять представления конкретным людям в зависимости от ответов.
- Ссылки электронной почты являются магнитом для спама.
Так что не указывайте ссылку на электронную почту в нижнем колонтитуле! На самом деле, я не рекомендую размещать ссылку по электронной почте где-либо на вашем веб-сайте.
У этого веб-сайта отличный копирайтинг, но контакт был бы лучше, чем ссылка по электронной почте.
6. Адрес и ссылка на карту / направления
Информация о местах — это то, что посетители ожидают найти в нижних колонтитулах. Это также способ сообщить Google, где вы находитесь, что важно для компаний с местными клиентами. Ссылка на карту — удобный способ помочь посетителям найти вас.
При правильном программировании эта ссылка на карту превращается в большую кнопку размером с кончик пальца для мобильных посетителей, вызывающих приложение карты на своем телефоне или планшете.
7.
Номера телефонов и факсовКак и адрес, номер телефона с кодом города является для Google доказательством того, что вы являетесь местной компанией. Как и кнопка на карте, номер телефона должен автоматически превращаться в кнопку, на которую можно нажимать, при просмотре на мобильном устройстве. Нажмите, чтобы набрать номер!
8.
НавигацияВот где нижний колонтитул может спасти падающих посетителей. Если они зашли так далеко, они, должно быть, не нашли то, что искали.Пора предложить еще несколько вариантов.
В последние несколько лет наблюдается тенденция удобства использования под названием «толстый нижний колонтитул», что означает добавление большего, чем просто перечисленные выше стандартные элементы, начиная с навигации.
Нижние колонтитулы теперь часто содержат те же ссылки, которые вы найдете в раскрывающемся списке «мегаменю» в навигации по заголовку. Но это не обязательно спасает посетителя от падения с вашей страницы. Помните, что это посетители, которые не нашли то, что искали выше.
Вот несколько источников идей для навигации по нижнему колонтитулу:
Вам не нужно просто повторять основную навигацию.Вам также не следует просто добавлять карту сайта целиком. Это заставляет посетителей копаться в куче ссылок. Насколько это полезно?
9.
Социальные иконкиМы любим посетителей из социальных сетей. Но нам не нравится, когда наши посетители уходят и переходят на Facebook, Twitter или YouTube. Если они это сделают … они больше не вернутся. Вот почему наши дизайнеры почти никогда не помещают значки социальных сетей в заголовки веб-сайтов.
Нижний колонтитул — лучшее место для добавления значков, которые привлекают посетителей в социальные сети.Когда мы проанализировали 50 лучших маркетинговых веб-сайтов, мы обнаружили, что 72% содержали значки социальных сетей в нижнем колонтитуле.
Вот хороший пример от Рафаля Томала.
10. Виджеты социальных сетей
Некоторые нижние колонтитулы выходят за рамки значка и используют настоящий виджет социальных сетей. Они показывают последнюю публикацию из социальной сети, встроенную прямо в нижний колонтитул.
Это имеет смысл только в том случае, если вы активны в этой сети и имеете твердые редакционные стандарты в отношении того, чем вы делитесь.
Внимание! Если вы используете такой виджет в нижнем колонтитуле, сообщения в социальных сетях будут отображаться на каждой странице вашего веб-сайта. Особенно рискованно, если у вас есть стажер, ведущий социальные сети. Известно, что Applebee усвоила этот урок на собственном горьком опыте .
11. Регистрация по электронной почте
Нижний колонтитул веб-сайта стал очень распространенным местом, где посетители могут подписаться. Наше исследование стандартов веб-сайтов показало, что 24% ведущих маркетинговых сайтов имеют поле регистрации в нижнем колонтитуле.
Действительно, подписка по электронной почте с большей вероятностью произойдет на странице, где посетитель получил ценность, например, полезный пост в блоге, все же неплохо позволить посетителям подписываться из нижнего колонтитула.
Поля подпискив нижнем колонтитуле должны по-прежнему соответствовать лучшим практикам подписки по электронной почте, предлагая социальное подтверждение (сколько подписчиков ранее?) И устанавливая ожидания (что получает подписчик? Как часто?).
Одинокий маленький ящик с адресом электронной почты с кнопкой отправки, скорее всего, не очень хорошо конвертируется, как этот парень…
12.Логин
Не все посетители перспективные. Некоторые посетители могут быть сотрудниками, партнерами, аффилированными лицами или торговыми посредниками. Если для этих людей есть область входа в систему, то нижний колонтитул — лучшее место для этого.
Эти люди часто возвращаются и знают, где найти вещи. Для них не нужно использовать ценную маркетинговую недвижимость в заголовке. Небольшая ссылка для входа в нижний колонтитул — это нормально, как здесь делает ATI.
13. Нажмите
Другой тип неперспективов — это пресса. На самом деле только часть 1% ваших посетителей — журналисты и редакторы.Так что не тратьте драгоценное место в основной навигации на ссылку для прессы.
Если кто-то из СМИ все же зайдет к вам, они прокрутят вниз и найдут его.
14. Инструмент поиска по сайту
Если они не нашли его в заголовке, в области содержания или в какой-либо из ссылок нижнего колонтитула, инструмент поиска по сайту — лучшая подстраховка.
Инструменты поискане так распространены в нижних колонтитулах веб-сайтов, как формы подписки по электронной почте, поэтому, если вы их используете, убедитесь, что они четко помечены.
На веб-сайте Smalley Steel Ring есть инструмент быстрого поиска продуктов, помогающий посетителям сразу перейти в каталог с любой страницы.
15. Изображения
Если вы действительно хотите украсить нижний колонтитул, добавьте к нему изображение. Это шанс добавить сайту индивидуальности.
В нижнем колонтитуле Mason-Dixon Knitting есть изображение Кей и Энн, двух основателей.
16. Мини-галерея
Почему бы не пойти на полный педикюр? Вместо одного изображения добавьте целую галерею.
В нижнем колонтитулеExperimental Sound Studio есть галерея фотографий. Щелчок по фотографии вызывает изображение в лайтбоксе.
17. Брендинг
Изображения — еще один шанс укрепить бренд. Это хорошее место для использования альтернативной версии вашего знака или использования вашего логотипа по-другому.
Веб-сайт Центра человека и природы использует исходную версию своего логотипа в нижнем колонтитуле, где заголовок содержит простой, разборчивый текстовый трактат их имени.
18. Ваша миссия. Ваши ценности
Логотипы хороши. Но почему бы не рассказать посетителям, почему вы занимаетесь бизнесом? Нижний колонтитул — отличное место, чтобы поставить свой флаг и рассказать им, что вы отстаиваете.
Нижний колонтитул веб-сайтаThe Better Government Association не только повторяет их миссию, но и показывает влияние, которое они оказали, используя цифры справа. Невозможно упустить из виду, почему и как они делают то, что делают.
19. Ключевые слова для поисковой оптимизации
Текст в нижнем колонтитуле — это текст на каждой странице. Так что это отличное место, чтобы показать, что вы относитесь к Google. Если вы все же включаете свою миссию, свое ценностное заявление или рекламное объявление «о нас», используйте это как возможность включить свою основную ключевую фразу.
Внимание! Оптимизаторы поиска злоупотребляли текстом нижнего колонтитула для SEO в течение многих лет. Вероятно, поэтому Google не придает большое значение ключевым словам SEO в нижних колонтитулах. Так что не переусердствуйте. Просто используйте фразу один раз в качестве текста, а не ссылки, и двигайтесь дальше.
Нижний колонтитул веб-сайта Комиссии по сертификации консультантов по реабилитации включает их этический кодекс, который включает две из их самых важных ключевых фраз.
20. Награды и сертификаты
Эти маленькие логотипы вызывают у посетителей доверие.Они являются формой социального доказательства и мощным способом использования «эффекта ореола». Если вы когда-либо получали награду, добавление логотипа этой награды в нижний колонтитул — быстрый способ повысить авторитет каждой страницы вашего сайта.
ProTip: объедините все свои награды, сертификаты и логотипы членства в «ящик доверия».
Nitel завоевал множество наград за эти годы. Сбор этих логотипов и размещение их в нижнем колонтитуле веб-сайта помогает укрепить доверие в очень конкурентной отрасли.
Сертификатытакже сопровождаются логотипами. Вот некоторые из них, которые часто встречаются в дизайне нижних колонтитулов.
- Сертификаты безопасности для интернет-магазинов
- Сертификат BBB для предприятий с местной аудиторией
- сертификатов Adwords для компаний цифрового маркетинга.
- сертификатов GSA для компаний, работающих с государством
- Сертификация MWBE для предприятий, принадлежащих меньшинствам и женщинам
- Сертификат B-Corp для социально-ответственного бизнеса
21.Членство в ассоциациях
Членство имеет привилегии. Одним из них может быть логотип, который можно использовать в нижнем колонтитуле. Торговые палаты, отраслевые ассоциации и даже онлайн-каталоги могут предоставить логотипы, которые хорошо смотрятся в нижнем колонтитуле.
СвязиCookies By Design отображаются в правом нижнем углу нижнего колонтитула.
22. Отзывы
Никогда не бывает плохим временем, чтобы позволить вашим довольным клиентам сказать несколько слов. Включение отзывов в нижние колонтитулы — хороший способ добавить социальное доказательство по всему сайту.Вот несколько рекомендаций по использованию отзывов:
- Лучшие отзывы подтверждают конкретные маркетинговые утверждения страницы, на которой они находятся, поэтому они не добавляются в общий колонтитул на каждой странице.
- Худшее место для размещения отзывов — это страница отзывов. Проверьте свою аналитику, посетители просто не заходят на эту страницу.
Веб-сайт Джоди Майкл Коучинг включает отзыв внизу каждой страницы. Он находится прямо над нижним колонтитулом, что позволяет размещать разные характеристики на каждой странице.
23. Последние статьи
Если вы активно занимаетесь контент-маркетингом, вы можете дать своему сайту «импульс», но разместив последний контент прямо в нижнем колонтитуле.
Институт солнечного топливаделает это на своем веб-сайте вместе с социальным виджетом.
Или вы можете контролировать, какие статьи будут отображаться в нижнем колонтитуле. Затем вы можете выбрать те, которые отвечают на общие вопросы посетителей, или те, которые конвертируют посетителей в подписчиков на рассылку новостей с наибольшей скоростью.
24. Предстоящие события
Если вы проводите много мероприятий, нижний колонтитул — хорошее место для их продвижения, поскольку все, что находится в нижнем колонтитуле, скорее всего, будет видно. Но не добавляйте этот , если только у вас не всегда есть предстоящее событие , иначе у вас будет дыра в вашей системе безопасности.
25. Видео: Ваше приветственное сообщение
Текст перегружен изображениями. Изображения преобладают над видео. Как правило, видео является наиболее привлекательным форматом для контента. Так что, если вы действительно хотите выложиться на полную в нижнем колонтитуле, добавьте видео.
Веб-сайт Marie Forleo в полной мере использует возможности видео, включая нижний колонтитул с улучшенным видео.
26. Аудио: Your Jingle
Добавить аудиофайл в нижний колонтитул редко, но возможно. Во всяком случае, это скорее всего будет клип, который вы перепрофилируете откуда-то еще, например, из радиоролика.
Сайт Food For Life встраивает в футер небольшой аудиоплеер с их джинглом. Очаровательный!
27. Один… последний… Призыв к действию
На каждой маркетинговой странице должен быть призыв к действию.Так что добавление одного в нижний колонтитул — это способ убедиться, что он появляется повсюду. Вы никогда не должны оставлять посетителей в недоумении, как выполнить желаемое действие.
Веб-сайт Writers Theater следует передовым методикам для некоммерческих организаций, добавляя заметную кнопку «Пожертвовать» в нижний колонтитул.
Другие идеи дизайна нижнего колонтитула
Вот еще немного идей для создания нижнего колонтитула вашего следующего веб-сайта.
Цветовые схемы нижнего колонтитула
Обратите внимание, во многих приведенных выше примерах светлый текст отображается на темном фоне.Поменять местами цвета — хороший способ показать посетителям, что они внизу, и это начало конца страницы.
ProTip: Будьте осторожны при изменении цветовой схемы (с темного текста на светлом фоне на светлый текст на темном) в области содержимого страницы. Это может привести к появлению «ложного дна», заставляя посетителей думать, что они попали в нижний колонтитул, и, возможно, пропустили остальную часть страницы.
Липкий нижний колонтитул
Точно так же, как навигация может «прилипать» к верхней части страницы, независимо от того, насколько далеко прокручивается посетитель, нижние колонтитулы могут оставаться внизу.Он всегда под рукой, независимо от глубины прокрутки.
Наши друзья из Conversion Sciences используют липкий нижний колонтитул, который всегда виден на каждой странице.
Хотите собственный липкий нижний колонтитул? Используете WordPress? Вот плагин для создания липких нижних колонтитулов.
Бесконечная страница… Без нижнего колонтитула!
У каждого веб-сайта есть нижний колонтитул, верно? На самом деле, на некоторых новостных и медийных сайтах нет нижних колонтитулов, потому что на странице нет нижних колонтитулов! Страницы продолжаются вечно.
Подход к веб-дизайну «бесконечной страницы» просто загружает следующий фрагмент контента по мере того, как посетитель прокручивает страницу вниз. Посмотрите примеры на сайте Quartz или ESPN. Эти сайты никогда не заканчиваются.
Что нужно включить в дизайн нижнего колонтитула? Наши рекомендации о том, что включать в нижний колонтитул
Все зависит от целей вашего сайта и потребностей ваших посетителей. Вы большой сайт электронной коммерции? Может быть полезно много ссылок. Служба поддержки занята? Добавьте эту информацию туда.
Задайте себе вопрос: есть ли у посетителей важный вопрос, на который нет ответа в заголовке? Если да, добавьте его в нижний колонтитул.
| Взгляд эксперта: Курт Круз «Практически все сводится к использованию этой ценной недвижимости для достижения целей вашего сайта. Будьте целеустремленными. Оказаться полезным. Будьте внимательны. Поставьте себя на место пользователя, а затем убедитесь, что все хорошо организовано. Дайте им то, что им нужно, но не подавляйте их.” |
Итак, есть ваши идеи дизайна 27 нижних колонтитулов. Но, пожалуйста, не используйте их все, иначе у вас будет самый толстый нижний колонтитул всех времен. Подумайте о своем посетителе и о том, что может его зацепить, прежде чем он попадет в конец страницы!
Особая благодарность Курту и Бену за их помощь в исследовании этой статьи! Если вы вспомните что-то, что мы упустили, дайте нам знать в комментариях ниже.
10 дизайнов нижних колонтитулов веб-сайтов, которые вы захотите скопировать
Дизайн нижних колонтитулов веб-сайтов часто задумывается позже, но знаете ли вы, что нижние колонтитулы могут быть решающим фактором для некоторых пользователей? Читайте 10 отличных примеров дизайна нижнего колонтитула.
Нижние колонтитулы веб-страницы — часто игнорируемые или рассматриваемые в последнюю минуту — могут быть важным разделом веб-страницы, если они разработаны с учетом правильных бизнес-целей. Может быть, вы хотите привлечь пользователей к другим разделам вашего веб-сайта, побудить их вступить в контакт или сделать последнюю отчаянную попытку подписать их на вашу новостную рассылку.
Нижние колонтитулы, расположенные внизу страницы каждого веб-сайта, обычно содержат дополнительную информацию в формате списка. Эти разделы по умолчанию не являются основным коммерческим аргументом веб-страницы.Возможно, именно поэтому они обычно не более чем запоздалые мысли, с добавлением нескольких полуполезных панировочных сухарей.
Однако хорошо продуманный дизайн нижнего колонтитула веб-сайта может выступать в качестве подстраховки для пользователей, которые могут собираться покинуть ваш веб-сайт и никогда не вернуться. Создать отличный нижний колонтитул — значит знать, что ищут пользователи вашего сайта, когда они его посещают.
Чтобы узнать больше о том, как создать успешный дизайн нижнего колонтитула веб-сайта, прочтите несколько полезных советов и 10 отличных примеров, которые вы, вероятно, захотите скопировать! Держите свой любимый инструмент для создания прототипов веб-сайтов наготове, потому что мы собираемся вдохновить вас.
Почему вы должны вкладывать время в нижний колонтитул
Хотя это правда, что дизайнер может тратить большую часть своего времени на разработку заголовка веб-сайта, среди других разделов, нижний колонтитул по-прежнему остается одним из наиболее важных аспектов вашего веб-сайта по многим причинам .
В зависимости от типа создаваемого вами веб-сайта у нижнего колонтитула будут разные цели. Следовательно, всегда важно проанализировать, каковы эти цели, прежде чем вы откажетесь от дизайна нижнего колонтитула веб-сайта, который никому не нужен.
Вот несколько причин, по которым вам следует потратить время на разработку нижнего колонтитула вашего веб-сайта и почему это действительно может окупиться:
Для большинства веб-сайтов желаемый эффект нижнего колонтитула:
- Как можно дольше удерживать аудиторию
- Повысьте вероятность того, что пользователи вернутся
- Сделайте компанию более запоминающейся
- Оценка дополнительных лидов
В зависимости от структуры нижнего колонтитула вашего веб-сайта вы сможете дольше удерживать пользователей на странице, помогая им находить то, что они еще не нашли, или предлагая им подписаться на вашу еженедельную новостную рассылку.
Дизайн нижнего колонтитула вашего веб-сайта может быть прекрасным шансом привлечь внимание пользователей, расширяя любую информацию, содержащуюся в основном разделе главной страницы вашего веб-сайта, или даже включая информацию, которой там нет.
Отличный дизайн нижнего колонтитула также может помочь людям найти важные лакомые кусочки, которые имеют решающее значение для построения доверия, такие как награды, сертификаты и членство в определенных ассоциациях. Это придает вашему сайту так называемый эффект «ореола», тем самым заставляя пользователей больше доверять вашему сайту, заставляя их задерживаться на нем немного дольше, возможно, даже превращая их в лида или подписчика.
В этом разделе вы также можете похвастаться всем, чего еще могла достичь ваша компания, сколько у вас подписчиков в социальных сетях, сколько у вас подписчиков на электронную рассылку новостей или сколько новых клиентов у вас было за определенный период времени.
Хороший дизайн нижнего колонтитула веб-сайта может даже служить для повторного выделения содержимого веб-сайта, если все остальное не помогает и внимание пользователя ослабевает.
Что еще более важно, это может помочь пользователям найти то, чего они раньше не могли найти. По этой причине наличие видимого нижнего колонтитула с понятными навигационными крошками может помочь вашим пользователям найти именно тот контент, который они искали.Дизайн нижнего колонтитула вашего веб-сайта — прекрасная возможность объединить все разделы вашего сайта в одну лаконичную область, что упростит навигацию для пользователя.
Кроме того, это может быть возможность перейти к сути и продемонстрировать конкретный обзор контента, предлагаемого на протяжении всего прототипа веб-сайта.
Или, может быть, они были настолько поглощены содержанием вашей домашней страницы, что, естественно, продолжали прокручивать, пока не достигли дна. В этом случае у вас есть возможность предоставить полезную кнопку «вернуться к началу», которая отправляет их обратно в заголовок, чтобы они могли затем посещать другие разделы вашего веб-сайта.
Короче говоря, хороший дизайн нижнего колонтитула может помочь вашему контенту выделиться, добавив веса и силы вашему общему веб-дизайну.
Многие веб-сайты содержат большое количество контента и информации, некоторые из которых могут быть второстепенными по отношению к вашей основной цели, которая состоит в том, чтобы развлечь ваших пользователей или превратить их в подписчиков или клиентов. Часто нижний колонтитул является идеальным местом для размещения второстепенных, но важных моментов, таких как юридическая информация, политика конфиденциальности, положения и условия или информация о партнерах и спонсорах.
Лучшие практики дизайна нижнего колонтитула веб-сайта
Когда дело доходит до лучших практик дизайна нижнего колонтитула веб-сайта, существует несколько проверенных и проверенных выигрышных комбинаций. Вы можете использовать эти комбинации, которые почти наверняка повысят успех любого веб-сайта.
Помните — нижний колонтитул вашего сайта будет доступен на каждой странице. Это означает, что вы захотите включить в дизайн нижнего колонтитула только самую лучшую информацию, которая поможет наилучшим образом достичь бизнес-целей вашего сайта.
Вы не хотите ошеломлять своих пользователей переполненным дизайном нижнего колонтитула веб-сайта. Вы хотите иметь необходимое количество информации и — это невозможно переоценить — актуальную информацию!
Каждый веб-сайт индивидуален, и, в зависимости от его структуры, рынка и целевой аудитории, вы захотите включить дизайн нижнего колонтитула веб-сайта, который обеспечивает хотя бы некоторые базовые функции, а также приятен для глаз. И последнее, но не менее важное, это отзывчивость: хороший дизайн нижнего колонтитула подходит для пользователей любого устройства и должен быть частью общего адаптивного дизайна веб-сайта.
Создание отличного дизайна нижнего колонтитула сайта поможет и вашим пользователям, и вашей компании. Это также может способствовать повышению престижа вашего веб-сайта и повышению его ценности и индивидуальности. Вот несколько советов о том, как вы можете добиться всего этого в дизайне нижнего колонтитула вашего следующего веб-сайта.
Следуйте взгляду пользователей
Прежде всего, примите во внимание языки, на которых будет доступен ваш веб-сайт. Почему это важно для дизайна нижнего колонтитула веб-сайта?
Допустим, среди ваших пользователей английский, французский и испанский языки.Эти пользователи, естественно, читают слева направо, поэтому вам нужно будет убедиться, что вся ваша самая важная информация (информация, которую, по вашему мнению, они должны увидеть в первую очередь), хранится в самой левой части дизайна нижнего колонтитула вашего веб-сайта.
В случае англоговорящих людей исследование горизонтального внимания, проведенное Nielsen Norman Group, показывает, что средний пользователь тратит около 80% своего времени на просмотр контента в левой половине экрана. В этом исследовании подчеркивается важность учета языка при прогнозировании того, на какую часть экрана пользователи будут смотреть в первую очередь.
Когда дело доходит до навигации в дизайне нижнего колонтитула веб-сайта, наличие базового плана всех разделов и подразделов на вашем веб-сайте может быть полезным для пользователей, которые чувствуют себя немного потерянными или даже незаинтересованными.
Можно использовать карту сайта в дизайне нижнего колонтитула вашего веб-сайта, если только макет вашего веб-сайта не является достаточно сложным и на нем много контента, разделенного на разные категории. В этом случае лучше подойдут основные разделы с простыми раскрывающимися списками.
Включение панели поиска в дизайн нижнего колонтитула вашего веб-сайта может помочь успокоить разочарование пользователей, позволяя им напрямую управлять контентом, который они хотят видеть.Это особенно полезно, если ваш веб-сайт насыщен контентом и содержит обширный список разделов, подразделов и категорий. В конце концов, не хотите ли вы попробовать поместить что-то вроде реестра вашего компьютера в нижний колонтитул?
Дизайн нижнего колонтитула вашего веб-сайта — отличный способ подчеркнуть индивидуальность вашего веб-сайта и бренда. Если остальная часть веб-сайта или домашней страницы предназначена исключительно для бизнеса, дизайн нижнего колонтитула веб-сайта может быть пространством для демонстрации других причуд и интересных моментов о вашем сайте и компании.
Включение фотографий или даже мини-галереи в дизайн нижнего колонтитула вашего веб-сайта может добавить немного индивидуальности вашему веб-сайту в конце и произвести неизгладимое впечатление на ваших пользователей. Это особенно полезно для пользователей с более короткой задержкой внимания или тех, кто с большей вероятностью будет быстро пролистывать веб-сайт, если на нем нет действительно привлекательного контента.
Вы также можете использовать нижний колонтитул своего веб-сайта для создания запоминающегося логотипа, который будет отображаться в конце каждой страницы, которую пользователь прокручивает вниз.Зачем вставлять логотип в нижний колонтитул? Потому что, если ваш нижний колонтитул — это последнее, что видят пользователи, ваш бренд будет более запоминающимся, даже если ваш веб-сайт не был таковым.
Включение кнопок со значками социальных сетей в дизайн нижнего колонтитула вашего веб-сайта означает их размещение под всей веб-страницей. Это означает, что у пользователей не возникнет соблазна преждевременно покинуть вашу главную страницу. Их включение внизу означает, что люди по-прежнему могут делиться вашей страницей или комментировать ее, но только после того, как предварительно просмотрят все содержимое страницы.
Теперь мы знаем, о чем вы, возможно, думаете: разве не хорошо позволить им продвигать веб-сайт, даже если это произойдет до того, как у них появится возможность просмотреть все его содержание? Да, но похоже, что большинство пользователей привыкли с помощью ментальных моделей находить значки социальных сетей рядом с нижним колонтитулом или на нижнем колонтитуле.
По данным Orbit media, 72% ведущих маркетинговых веб-сайтов включают свои значки социальных сетей в дизайн нижнего колонтитула веб-сайтов.
Наличие отличительной кнопки CTA — не проблема, и вот почему.Когда ваши пользователи прокручивают страницу вниз, прочитав большую часть содержимого на странице, они могут убедиться, что хотят использовать ваши услуги.
Вместо того, чтобы заставлять их прокручивать назад вверх или переходить в другой раздел вашего веб-сайта для регистрации, создания учетной записи или подписки на услугу, почему бы просто не включить видимую кнопку CTA в дизайн нижнего колонтитула вашего веб-сайта ?
Кроме того, наличие призыва к действию в дизайне нижнего колонтитула веб-сайта по-прежнему является отличной идеей для тех пользователей, которые, возможно, слышали о вашем веб-сайте из уст в уста и у которых нет времени читать какой-либо контент на сайте.
Поисковая оптимизация
Вы знаете, как дизайн нижнего колонтитула вашего сайта будет виден на всем протяжении вашего сайта? Что ж, это дает прекрасную возможность улучшить поисковую оптимизацию вашего ключевого слова.
Однако не стоит переусердствовать — известно, что Google наказывает веб-сайты, которые используют чрезмерное количество ключевых слов в дизайне нижних колонтитулов своих веб-сайтов. Одного из двух основных ключевых слов для вашего веб-сайта должно быть более чем достаточно.
Наполнение ключевыми словами означает перегрузку контента сайта популярными словами. Вы, вероятно, имели несчастье столкнуться с этим в какой-то момент — Google считает это спамом и наказывает сайты, которые это делают!
Наличие символа авторского права рядом с годом является абсолютной необходимостью, если вы не хотите, чтобы кому-либо сошло с рук плагиат какой-либо части вашего веб-сайта, и дизайн нижнего колонтитула вашего веб-сайта — идеальное место для его включения.
Почему? Потому что он будет виден на каждой странице, и вам нужно только один раз добавить его в дизайн нижнего колонтитула вашего сайта!
Если вы работаете над дизайном нижнего колонтитула для обычного коммерческого веб-сайта, такого как ресторан, фаст-фуд, парикмахерская, салон красоты или автомобильный магазин, то имеет смысл указать адрес заведения.
Но на самом деле вы можете пойти еще дальше — некоторые компании в дизайне нижнего колонтитула своего веб-сайта даже включают карту города, локализованную для области пользователя. Эти карты показывают местоположение пользователя относительно местоположения компании.
Это полезно не только для людей в дороге, но и для тех, кто ищет близкий бизнес. Так что, если ваша компания соответствует описанию выше, вы можете включить эту функцию в дизайн нижнего колонтитула вашего веб-сайта!
Также удобен номер контактного телефона, а еще лучше — кнопка CTA, чтобы сразу набрать номер!
И во многих случаях, когда дело доходит до предоставления адреса электронной почты, часто лучше не указывать его, а вместо этого иметь текстовое поле запроса, где пользователь может оставить свои контактные данные и задать вопросы.
Это лучше для предоставления аналитики Google аналитики и данных отслеживания, но также потому, что эти запросы можно автоматически сортировать и направлять в соответствующий канал, вместо того, чтобы заполнять один адрес электронной почты.
Наконец, мы бы сказали, что нажимать кнопки необходимо в случае, если кто-то из СМИ захочет связаться с вашей компанией.
Однако, по данным Orbit Media Studios, менее 1% трафика веб-сайта — это пресса, желающая связаться с ними, поэтому вам не следует тратить для этого ресурсы своего основного веб-сайта на кнопку.Угадайте, где прекрасное место — дизайн нижнего колонтитула вашего сайта!
Примеры дизайнов нижних колонтитулов, которые вы хотите скопировать
Теперь давайте взглянем на некоторые из лучших дизайнов нижних колонтитулов веб-сайтов, которые вы наверняка захотите скопировать для своего собственного дизайна. В этом списке вы найдете множество идей для нижних колонтитулов веб-сайтов, которые вы можете скопировать напрямую или смешать и сопоставить в своем собственном дизайне.
УElectronic group Valaire отличный дизайн нижнего колонтитула и отличный веб-сайт.Как и на обычных веб-сайтах музыкальных групп, они предлагают такой контент, как видео, музыку, даты турне и товары группы.
Нам нравится уникальный дизайн нижнего колонтитула веб-сайта Valaire с призывом к действию. Вы попадаете в нижний колонтитул только после того, как прокрутите все предлагаемые товары. Затем вам предоставляется мини-галерея, в которой представлены фотографии из их аккаунта в Instagram, а также предлагается подписаться на них на платформе.
В самом низу, в левой части экрана, они приглашают вас подписаться, чтобы узнавать об их последних предложениях и содержимом веб-сайта, таком как туры, музыка и товары.Нам особенно нравятся поля имени и адреса электронной почты с их движущимися зигзагообразными линиями и призыв к действию «Я хочу оставаться в курсе».
Также стоит упомянуть степень отзывчивости всего веб-сайта, что особенно заметно в нижнем колонтитуле. Тот факт, что они заставляют всю эту графику реагировать на любое разрешение, жертвуя при этом минимумом контента, — вот что такое современный веб-дизайн.
Furrion предлагает электрические предметы роскоши для домов, офисов, лодок и наземных транспортных средств.Их веб-сайт может похвастаться серией ярких изображений, шрифтов и движений. Напротив, их нижний колонтитул делает вещи красивыми и простыми.
Логотип их бренда находится в крайнем левом углу вместе с социальными сетями, сразу за ним следует поддержка, ответы на часто задаваемые вопросы, загрузки и указания дилеров, а затем — биография компании. Это показывает, что они знали, как расставить приоритеты в макете информации нижнего колонтитула с точки зрения как того, что они показывают покупателю, так и того, что покупатель или пользователь будут искать.
The New York Times не может быть лучшим примером веб-сайта с большим количеством контента, но при этом не вызывающим проблем с нижним колонтитулом.Им удалось организовать большое количество категорий в лаконичную и легко читаемую карту сайта в дизайне нижнего колонтитула своего веб-сайта.
Карта сайта означает, что пользователь может быстро и легко перейти к наиболее важной для него статье, интервью или статье с мнением. В первой категории, в разделе «Новости», у них даже есть раздел «Исправления», чтобы соответствующие стороны, которые могут их запросить, могли легко их найти.
Справа у них есть кнопка подписки, а также другие кнопки вроде кроссвордов или опции доставки на дом.В самом низу некоторые серые хлебные крошки позволяют вам связаться с ними, подать заявку на работу или просмотреть их положение об авторских правах.
Этот макет показывает, что они четко думали о том, кто их основные пользователи, чего они хотят и как помочь им найти их как можно быстрее. Давайте возьмем листок из их книги!
Косметическая компания Guerlain была создана в Париже в 1829 году, но дизайн нижнего колонтитула их веб-сайтов остается таким же свежим, как и прежде. Почему? Потому что им удалось сохранить простой и функциональный нижний колонтитул, в котором есть все, что нужно, и при этом он приятен для глаз.
Его минималистичный эстетичный дизайн, а также тонкий шрифт без засечек и со вкусом оформленные черно-белые значки социальных сетей слева. Это означает, что вам не нужно щуриться на варианты нижнего колонтитула, как, к сожалению, бывает со многими дизайнами нижних колонтитулов веб-сайтов. Фактически, первое, что находится слева, — это призыв «подписаться на #Guerlain» с иконками социальных сетей прямо под ним и кнопкой подписки на рассылку новостей справа.
Также интересным был выбор предоставить карту сайта в виде простой навигационной цепочки на другую страницу вместо того, чтобы помещать все это в нижний колонтитул.«Кнопка возврата к началу» — приятный штрих, поскольку для прокрутки вниз требуется время.
Stylenovels — это компания, занимающаяся дизайном мебели и интерьеров, чей веб-сайт завораживает и завораживает. Прокручивая главную страницу этого веб-сайта, вы увидите множество их продуктов в их естественной среде обитания.
Дизайн нижнего колонтитула их веб-сайта также впечатляет. Прокрутите вниз до самого низа, и вас встретит жирный, но со вкусом оформленный шрифт, предлагающий загрузить их каталоги и подписаться с помощью своей электронной почты.
Используемые в данном случае изображения и сочетание цветов создают интересный контраст с обычным упрощенным нижним колонтитулом.
Шантелл Мартин — художник с необычным веб-сайтом. Он состоит из человека дизайнера, лежащего на фоне нарисованных каракулей, держащего перманентный маркер и мечтающего о дизайне (возможно). Наведите курсор на любой из множества каракулей, и они начнут быстро подпрыгивать и покачиваться.
С инновационным веб-сайтом можно только ожидать, что дизайн нижнего колонтитула тоже будет довольно уникальным — и это так.Фактически, нижний колонтитул на самом деле является главным меню на главной странице, за исключением невидимого гамбургер-меню, спрятанного рядом с заголовком.
Прокрутив вниз до нижнего колонтитула, вас встретят три панели с жирным брутальным текстом, которые трансформируются в ссылки на изображения, ведущие к трем различным каналам Instagram. Ниже следует несколько больших, жирных и упрощенных вариантов навигации, которые перенесут вас на все разные страницы сайта, а также кнопки социальных сетей, написанные словами.
Tux позиционирует себя как передовая компания, предоставляющая бизнес-услуги, которая обеспечивает стратегию, выражение бренда, собственное производство и дизайн торговых помещений. Его веб-сайт полон откровенных отголосков брутализма, как с точки зрения изображений, так и с точки зрения содержания.
Тем не менее, дизайн нижнего колонтитула их веб-сайта прямо противоположен внешнему виду, но при этом он предоставляет вам всю важную информацию, которая вам нужна. Адрес находится слева, вместе с кнопкой подписки на рассылку новостей и их авторскими правами.В центре находится контактный номер, адрес электронной почты и кнопки социальных сетей.
Еще одна вещь, которая привлекает наше внимание, — это не только контрастный чистый и минималистичный дизайн нижнего колонтитула, но и их выбор, когда кнопка подписки на информационный бюллетень представляет собой просто текст и даже значки социальных сетей в виде текстовых инициалов, таких как «FB» и «TW». .
Envoy — это консультант по дизайну и инновациям с яркими, но минималистичными визуальными эффектами. Как только вы попадаете на главную страницу, вас встречает жирный белый шрифт без засечек на черном фоне с нулевым изображением и большим количеством отрицательного пространства.
Их веб-сайт может показаться сомнительным дизайном для одних и глотком свежего воздуха для других, но дизайн нижнего колонтитула их сайта бесспорно прост. Ваш взгляд сразу же привлекает логотип и заявление о миссии в нижнем левом нижнем колонтитуле, в котором говорится, что они создают возможности для объединенного мира, и приглашает вас «Будь смелым».
Что нам действительно нравится, так это расположение их вариантов навигации по горизонтали, слева направо, первый столбец — это карта сайта, за которой следуют указания компании и контактные данные, социальные сети и юридические страницы.
Henning Larsen — дизайн-студия, основанная в Копенгагене. Дизайн их веб-сайтов довольно минималистичен и в основном основан на изображениях, с гигантским шрифтом и здоровым сочетанием белого пространства.
Что нам особенно нравится, так это их инновационный дизайн нижнего колонтитула веб-сайта, состоящий из жирного черного шрифта без засечек на сером фоне. В этом простом дизайне есть что-то, что успокаивает глаза, но также вызывает чувство интереса и волнения.
Но глазурь на торте? Кнопки, которые перенесут вас на страницу их офисов по всему миру.Что в них особенного? Тот факт, что каждая кнопка на самом деле имеет текущее время каждого офиса, добавляет уникальный деловой штрих их нижнему колонтитулу.
Чобани продает продукты из греческого йогурта, и их веб-сайт может похвастаться забавным и аппетитным дизайном. Если соблазнительные копии и изображения не вызывают у вас чувства голода, скорее всего, вы можете стать роботом.
Но на что особенно обращено наше внимание? Ты угадал! Дизайн нижнего колонтитула их веб-сайта выделяется среди всего остального на странице, но каким-то парадоксальным образом сочетается с ним.
В отличие от остальной части страницы, дизайн нижнего колонтитула веб-сайта намеренно прост, но при этом вся самая важная информация собрана в двух словах слева, с кнопкой подписки по электронной почте справа.
Это тот же оттенок зеленого, что и копия и логотип верхнего колонтитула, благодаря чему нижний колонтитул органично сочетается с остальным содержанием страницы.
Когда дело доходит до дизайна нижнего колонтитула веб-сайта, не существует универсального подхода. Все зависит от типа веб-сайта, на котором он будет размещен.Однако можно сказать, что есть общий рецепт успеха.
Создание отличного дизайна нижнего колонтитула веб-сайта включает анализ следующих аспектов вашего веб-сайта:
- Какой тип контента доступен на вашем сайте?
- Как организована информационная архитектура вашего сайта?
- Кто целевые пользователи вашего сайта?
- Какую информацию они с большей вероятностью будут искать при посещении?
Подводя итог, вы должны задать себе следующие вопросы: «Как я могу сделать информацию в дизайне нижнего колонтитула моего веб-сайта как можно более актуальной?» и «сколько информации — это слишком много?» Ответьте на них, и вы уже определитесь с победителем!
20 лучших дизайнов нижних колонтитулов веб-сайтов для вдохновения в 2020 году
Помимо основного содержимого веб-сайт включает в себя верхний и нижний колонтитулы, которые служат определенной цели для помощи посетителям.Ранее мы поделились 20 лучшими бесплатными шаблонами дизайна заголовков и примерами для вашего вдохновения. Поскольку мы считаем, что дизайн нижнего колонтитула не менее важен, мы также составили список из 20 лучших бесплатных дизайнов нижнего колонтитула, на который вы можете посмотреть.
Прежде чем мы углубимся в наш список дизайнов нижних колонтитулов, давайте ответим на два жизненно важных вопроса:
- Что такое нижний колонтитул веб-сайта?
- Что должно быть в нижнем колонтитуле сайта?
Часть 1. Что такое нижний колонтитул веб-сайта?
Нижний колонтитул веб-сайта — это часть содержимого в самом низу вашей веб-страницы.В отличие от заголовка веб-сайта, который отображается в самом верху вашей страницы, нижний колонтитул может быть последним, что видят ваши посетители, особенно для тех, кто быстро прокручивает вниз.В этом случае нижний колонтитул может быть более важным, чем вы думаете .
В целом нижний колонтитул дает два преимущества, которые улучшают ваш веб-сайт:
Предоставляет ключевую информацию, которую ваши посетители должны видеть снова.
В теле вашего веб-сайта содержится важное сообщение, которое вы хотите передать, но нижний колонтитул может помочь выделить основную информацию.Кроме того, если у вас есть больше контента, который не может быть правильно отображен на странице, нижний колонтитул обеспечивает пространство на экране. Например, ссылки на внешние ресурсы, ссылки на дополнительные страницы, ваших спонсоров, политику конфиденциальности и условия.
Предлагайте рекомендации вашим посетителям без необходимости прокручивать назад к началу страницы.
Ваши посетители могут не знать, какова длина вашей страницы, и это неудобно, если им приходится прокручивать страницу до заголовка, если им нужно что-то искать.Нижний колонтитул веб-сайта позволит вашим посетителям легко перемещаться по вашему сайту, даже когда они находятся ближе к концу страницы (особенно если у вас нет кнопки «вернуться к началу»). Убедитесь, что нижний колонтитул вашего сайта содержит все разделы вашего сайта как можно более полно. Тогда вы увеличите коэффициент удержания посетителей.
Если вы хотите использовать нижний колонтитул для успешного привлечения внимания посетителей, он должен быть функциональным и эстетичным. Ниже приведены некоторые принципы, которые вы должны помнить:
Сделайте его простым и понятным: Вы должны сохранить все контент организован и приятен для глаз.
Сделайте это профессиональным и заслуживающим доверия: Если вы хотите, чтобы посетители действовали, вы должны заслужить их доверие.
Сделайте это эстетично: Вы должны тщательно выбирать цветовые контрасты, размер шрифта и структуру. Также убедитесь, что нижний колонтитул хорошо сочетается с общим дизайном вашего сайта.
Часть 2: Рекомендации по дизайну нижнего колонтитула веб-сайта
Создание функционального и красивого нижнего колонтитула на самом деле требует много работы. Прежде чем начать, вам нужно подумать над некоторыми вещами: что должно быть в вашем нижнем колонтитуле? Чего НЕ ДОЛЖНО быть в нижнем колонтитуле? .
Итак, что должно быть в нижнем колонтитуле веб-сайта?
1. Три обязательных элемента: авторское право, политика конфиденциальности и условия использованияЭти три раздела содержания необходимы для любого веб-сайта. Они необходимы для правовой защиты.
Авторские права : Год и символ авторского права защитят ваш сайт от плагиата.
Политика конфиденциальности : объясняет, как вы будете использовать и защищать личные данные и другую информацию посетителей.
Условия использования: Предлагает общие правила и рекомендации, регулирующие использование сайта и / или продуктов.
2. КонтактХотите, чтобы посетители могли связаться и стать вашими клиентами? Тогда обязательно предложите им простые способы связи с вами. Наиболее распространенные способы связи:
Номер телефона: Лучше иметь кнопку CTA, чтобы посетители могли звонить напрямую.
Адрес электронной почты: Электронная почта по-прежнему остается одним из популярных способов развития бизнеса и общения.
Адрес: Покажите своим посетителям, что вы являетесь реальным лицом, предоставив физический адрес. Это также поможет заслужить их доверие.
Социальные иконки: Сделайте так, чтобы посетители могли легко делиться вашей страницей, а также находить и подписываться на вас в другом месте в Интернете.
3. Карта сайтаКарта сайта позволяет посетителям легко перемещаться по вашему сайту. Кроме того, это помогает Google лучше индексировать ваши страницы.
4. Личность и брендВыделение вашей личности и бренда делает ваш веб-сайт более надежным и способствует успеху вашего бизнеса.Используйте фотографии, видео и галереи, чтобы рассказать о себе.
5. CTACTA в нижнем колонтитуле позволяют вашим посетителям использовать ваш продукт или связываться с вами более удобно, потому что им не нужно прокручивать назад.
Подпишитесь: Где ваши посетители могут зарегистрироваться с помощью электронной почты
Войти: Где ваши посетители могут войти с помощью электронной почты
Подписка: Где ваши посетители могут подписаться на информационные бюллетени
6.Поисковая оптимизацияЕсли вы хотите выглядеть лучше в глазах Google, вы можете использовать некоторые ключевые слова для поисковой оптимизации. Однако не переусердствуйте, Google не любит чрезмерной оптимизации.
7. Личность и брендРасскажите своим посетителям, кто вы, чем занимаетесь и где находитесь. Выйдите из скучной деловой коробки и вместо этого проявите немного индивидуальности.
События: Поделитесь вехами и важными событиями прошлого, а также предстоящими.
Логотип: Разместите свой логотип в нижнем колонтитуле для брендинга.
Галерея: Вставьте мини-галерею ваших участников.
Награды: Продемонстрируйте свои награды.
Часть 3–20 Лучшие примеры дизайна нижнего колонтитула веб-сайта
1. Griflan Design Inc.
Griflan предлагает услуги веб-дизайна, печати, бренд-маркетинга, иллюстраций и анимации. На всей его веб-странице преобладают темно-синий и белый цвета, а нижний колонтитул использует ту же цветовую схему.Это делает нижний колонтитул согласованным с основной частью веб-страницы.
Дизайн очень простой и понятный и содержит только контактные данные, такие как адрес электронной почты, номер телефона и социальные сети. Лучшая часть дизайна — это большое изображение прямо над нижним колонтитулом, которое отличается сильным эффектом наложения и эффектом подчеркивания анимированного текста. А еще лучше, это кликабельно!
2. Chron
Chron — одна из крупнейших газет в США. В его уникальном дизайне нижнего колонтитула веб-сайта отсутствуют столбцы по вертикали, но вместо этого используется горизонтальная структура и макет для отображения содержимого.Как и большинство газетных веб-сайтов, Chron предлагает несколько вариантов подписки, предоставляя пользователям свободу выбора.
3. Awwwards
Awwwards — это веб-сайт, целью которого является признание и продвижение талантов и усилий лучших разработчиков, дизайнеров и веб-агентств в мире. Его нижний колонтитул отличается минималистичным, простым и эстетичным дизайном с использованием тонкого шрифта без засечек и большого количества белого пространства.
Нижний колонтитул демонстрирует его индивидуальность и бренд с максимальным эффектом, особенно за счет линии «Награды за дизайн, творчество и инновации в Интернете».В самом низу находится панель навигации, которая побуждает посетителей исследовать сайт дальше.
4. Bluestag
Bluestag — очень креативная дизайнерская студия, и дизайн их нижнего колонтитула является свидетельством этого творчества. Анимация просто фантастическая. Внимание привлекает бегущий синий олень (который принимает форму логотипа) и серые горы на заднем плане. Такое сочетание делает бренд липким, оставляя у посетителей незабываемое впечатление. Кроме того, дизайн работает в тандеме с фиксированным логотипом в верхнем левом углу страницы.Безусловно, гениальный способ преумножить бренд.
5. WPBeginner
WPB — это ресурсный сайт для начинающих WordPress. Их нижний колонтитул очень прост и немного украшен. Тем не менее, он хорошо спроектирован и содержит три раздела для передачи дополнительной информации. Первый — это членство в ассоциациях, которое показано вверху нижнего колонтитула. Основная часть состоит из их миссии и ценностей. В самом низу показаны авторские права.
6. Orbitmedia
Orbit — это дизайн-студия, которая делает Интернет более полезным и информативным, от одного проекта к другому.В его нижнем колонтитуле есть почти все, что мы обсуждали в Части 2. Вариант контакта находится вверху справа. Orbitmedia предлагает только адрес электронной почты, номер телефона и значки социальных сетей, но копия контакта также является интерактивной, перенаправляя на форму. Кроме того, нижний колонтитул ориентирован на призыв к действию и ориентирован на информацию о компании. Вы можете подписаться, начать проект или изучить их работу.
7. Random ize
Random утверждает, что это самый случайный сайт в сети. Он специализируется на рандомизации разных вещей.Дизайн нижнего колонтитула сильно отличается от стандартного и почти достигает размера полного экрана. Он подчеркивает мощь социальных сетей, таких как Facebook и Twitter.
8. Lifehacker
Сайт охватывает широкий спектр контента — от еды и здоровья до сплетен и политики, и всего остального под солнцем. Их дизайн нижнего колонтитула выделяет две большие группы вариантов подписки на социальные сети и информационные бюллетени. Вы можете нажать на значок «Еще из нашей сети», чтобы изучить остальную часть сайта.
9. Фэндом
Фэндом имеет четко очерченный и яркий дизайн нижнего колонтитула. Яркая цветовая схема привлекает внимание пользователей, а копия имеет эффект наведения. Варианты загрузки служат стимулом для пользователей, увеличивая базу пользователей Фэндома.
10. Wix
Wix четко группирует все функциональные страницы веб-сайта, все с черным текстом на белом фоне — чистые, простые и лаконичные. Его нижний колонтитул ориентирован на призыв к действию и ориентирован на информацию о компании, и вы можете легко перейти в любое место на сайте.
11. Mozilla
Хотя цветовая схема нижнего колонтитула тяжелая, она не ошеломляет пользователя. Напротив, он излучает чувство спокойствия. Он выделяет вариант загрузки с убедительным контекстом и большим изображением. Существует также выбор языка для посетителей, которые не говорят / не читают по-английски.
12. Isitwp
Интернет-сообщество isitwp на тему WordPress имеет очень функциональный нижний колонтитул. Он отображает личность бренда с хорошо написанным текстом: «Бесплатный онлайн-ресурс, который предлагает учебные пособия, инструменты, обзоры продуктов и другие ресурсы WordPress, которые помогут вам создать лучший веб-сайт WordPress.”Ссылки на сайты содержат раскрывающееся меню, чтобы указать, куда вы хотите перейти. Кроме того, в нижнем колонтитуле добавлена юридическая информация, такая как авторские права, РЕДАКЦИОННОЕ ПРИМЕЧАНИЕ и ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ.
13. Arduino
Призыв этого сообщества с открытым исходным кодом к подписке на информационный бюллетень нельзя игнорировать. Дизайн нижнего колонтитула довольно прост, он предоставляет всю необходимую информацию без лишних хлопот.
14. Roblox
Roblox — это игровая платформа, и ее нижний колонтитул подчеркивает различные магазины приложений, где пользователи могут загрузить приложение.
15. Hook
Hook предлагает такие услуги, как веб-дизайн, поисковая оптимизация и анализ данных. Самое приятное — это большое фоновое изображение членов их команды, добавляющее элемент персонализации и доверия. Кроме того, он подчеркивает идентичность компании, карту сайта и CTA для регистрации.
16. Stacksocial
Stacksocial — это веб-сайт, который помогает клиентам по всему миру находить удивительные продукты. В нижнем колонтитуле указано их специальное предложение для новых клиентов — скидка 10% для новых подписок.Это делает его привлекательным для тех, кто впервые зашел на сайт и решил совершить покупку.
17. Doogee
Doogee выводит на мировой рынок высокопроизводительные продукты с красивым дизайном и функциями. Веб-сайт оформлен в темном стиле, а нижний колонтитул помогает упорядочить вещи. Благодаря упорядоченному отображению социальных иконок и социальных ссылок, Doogee показывает, что они действительно хотят, чтобы пользователи связались с ними. Справа — хорошо заметный призыв к действию для подписки на информационный бюллетень.
18. Lorealparisusa
L’Oréal Paris — ведущая компания по оказанию комплексной косметической помощи со штаб-квартирой в Париже, Франция. При прокрутке вниз вы увидите доступные предметы роскоши с подробной информацией. Дизайн нижнего колонтитула его веб-сайта также впечатляет, отражая его миссию превосходства в красоте. Справа находится большая область, которая побуждает пользователей подписаться на последние новости о красоте, образцы продуктов и купоны. В нижних колонтитулах содержится дополнительная полезная информация.
19.Sephora
Sephora — известный бренд косметики. Его нижний колонтитул чрезвычайно прост, в нем используется только белый шрифт без засечек на черном фоне. Есть большое поле ввода белого цвета, где вы можете ввести свой адрес электронной почты для регистрации.
20. Макияж
Макияж — это веб-сайт, на котором вы можете разделить взгляды на сферу красоты. Его нижний колонтитул полностью противоположен Sephora. Тонкий черный шрифт без засечек на белом фоне придает ему более женственный вид.
Часть 4: Дополнительные советы по дизайну нижнего колонтитула веб-сайта
Чтобы дать вам больше идей по созданию отличного дизайна нижнего колонтитула веб-сайта, мы постарались изо всех сил ответить на некоторые вопросы, которые, как мы думали, вы могли бы задать.
Вопрос 1. Как шаг за шагом создать хороший нижний колонтитул?
Если вы хотите начать с самого начала, следуйте этим советам:
Примите решение на основе исследования и вашего бизнеса: определите, какой тип контента и информации вы хотите разместить на своем веб-сайте.Затем нарисуйте свою информационную архитектуру, как дорожную карту.
Каркас и прототипирование: используйте инструмент для создания прототипов , чтобы превратить свои идеи в прототипы и тестировать, пока они не будут полностью соответствовать вашим потребностям.
Используйте инструменты дизайна экрана для разработки дизайна: вам нужно настроить каждый элемент.
Передача разработчикам и разработчикам: превратите свои визуальные эффекты в настоящие веб-страницы.
Если вам нужен старт, то бесплатные шаблоны нижнего колонтитула могут вам помочь. Вы можете просто загрузить шаблон нижнего колонтитула и настроить его в соответствии с вашими потребностями с помощью перетаскивания.Вот несколько бесплатных шаблонов нижних колонтитулов веб-сайтов:
Мы также настоятельно рекомендуем это видео YouTube: Как создать полностью настраиваемый нижний колонтитул веб-сайта с помощью elementor.
Вопрос 2: Чего не должно быть в нижнем колонтитуле веб-сайта?
1. Чрезмерная оптимизация для SEO: Google будет знать, что вы используете методы черной шляпы SEO.
2. Слишком много ссылок. Дизайн будет загроможден, а важная информация не будет отображаться.
3. Абсолютно не все: в некоторых статьях может быть перечислено более 20 практик создания нижнего колонтитула веб-сайта, но не все размещается на вашей веб-странице.Все зависит от потребностей вашего бизнеса, поэтому выбирайте с умом.
Вопрос 3. Нужен ли нижний колонтитул веб-сайту?
На самом деле, не на каждом сайте есть нижний колонтитул. Некоторые компании выбирают дизайн с бесконечной прокруткой. Это означает, что нет «дна страницы». Это обеспечивает посетителей бесконечным содержанием, но затрудняет поиск по содержанию веб-сайта. Тем не менее, он подходит для определенных типов веб-сайтов.
Сайты, которые могут использовать бесконечную страницу: Сайты новостей и СМИ.
Веб-сайты, которые лучше подходят для нижнего колонтитула: сайты электронной коммерции.
Вопрос 4: Что такое нижний колонтитул?
Практически то же самое, что и нижний колонтитул. Нижний колонтитул помогает вашим посетителям переходить к другому контенту на вашем сайте, нажимая на ссылки.
В заключение
Мы надеемся, что эти 20 лучших примеров дизайна нижних колонтитулов веб-сайтов пробудят ваше воображение и облегчат вашу работу. Если у вас есть другие потрясающие дизайны нижних колонтитулов, поделитесь ими с нами!
29+ примеров нижних колонтитулов веб-сайтов и почему они так хорошо работают
Часто игнорируемые веб-дизайнерами нижние колонтитулы веб-сайтов являются не чем иным, как точкой остановки, где пользователи могут решить, является ли ваш веб-сайт ценным для них или нет.Здесь не нужно слишком много прокрутки: когда дело доходит до нижней части веб-страницы, пользователи найдут ее и извлекут большую часть.
Что интегрировать в нижний колонтитул веб-сайта?
Во-первых, давайте посмотрим, какие элементы следует интегрировать в нижний колонтитул веб-сайта. Рассмотрите один или несколько пунктов из перечисленных ниже и тщательно решите, что включить в нижний колонтитул вашего веб-сайта. Исследования показали, что улучшение нижнего колонтитула веб-сайта может привести к увеличению конверсии на 23,77%.
Возьмем эти элементы по очереди:
Уведомление об авторских правах, хотя и не является обязательным, все же необходимо для любого веб-сайта. Это уведомление, которое помогает предотвратить нарушение авторских прав. Если кто-то копирует элементы вашего веб-сайта, эти люди не могут заявить о своем незнании. Нижние колонтитулы, содержащие только уведомление об авторских правах, имеют простое, но элегантное представление.
Уведомление об авторских правах обычно включает символ © (символ авторского права), год публикации и имя правообладателя.
В качестве уведомления об авторских правах условия обслуживания не являются обязательными, но они должны быть включены в нижний колонтитул веб-сайта. Они относятся к общим правилам и рекомендациям, которым люди должны следовать при использовании вашего веб-сайта. Они могут называться так («Условия использования»), «Условия использования» или «Условия использования», как в примере Amazon:
.
Условия использования могут быть реализованы с помощью методов обзора и переноса по клику. Метод browsewrap означает включение Условий обслуживания по ссылке в нижнем колонтитуле веб-сайта.Однако метод clickwrap относится к размещению условий обслуживания в формах, то есть когда пользователи пытаются создать учетную запись. Когда они нажимают «Отправить», они также должны согласиться с условиями обслуживания этого сайта.
- Контакты, адрес и время работы
Один из важнейших элементов нижнего колонтитула веб-сайта — это контактная информация. Если людям нравится то, что они видят на странице, они захотят связаться с вами. Им очень поможет оставить номер телефона, адрес электронной почты и физический адрес в нижнем колонтитуле.
Иногда также рекомендуется включить карту для простой геолокации, а также часы работы компании.
Все, что вам нужно сделать, это передать информацию о том, что вас можно найти через несколько точек связи, и их легко идентифицировать в нижнем колонтитуле веб-сайта.
Нижний колонтитул ниже был создан с использованием темы Mesmerize для демонстрации пиццы.
Нижний колонтитул темы «Загипнотизированный»
Рекомендуется размещать значки социальных сетей в нижнем колонтитуле веб-страниц.Вы хотите, чтобы ваши посетители оставались на сайте как можно дольше. И вы захотите направить их в другие места / группы только после того, как они учтут всю информацию, представленную на сайте.
Вот почему не рекомендуется размещать значки социальных сетей в заголовке или теле страницы. Однако, размещенные в нижнем колонтитуле веб-сайта, они заставляют посетителей дольше задерживаться на вашем бизнесе (даже если они находятся где-то в другом месте в Интернете).
Виджеты — это небольшие приложения, с помощью которых можно вставлять различные фрагменты контента в нижний колонтитул веб-сайта.Некоторые примеры включают Календарь, Архивы, Категории, Недавние сообщения, Недавние комментарии… и этот список продолжается.
Ниже приведен пример нижнего колонтитула с включенными виджетами:
Некоторые могут захотеть включить описание в нижний колонтитул своего веб-сайта. Или несколько ссылок с короткими презентациями того, что характеризует бизнес. Приведенный выше пример представляет собой презентацию веб-сайта, размещенную в нижнем колонтитуле. Другой пример — со ссылками на короткие презентации бизнеса:
Может быть полезно включить окно поиска в нижний колонтитул веб-сайта.Пользователи могли не найти то, что искали, в теле страницы; когда они попадают в нижнюю часть страницы, вы предлагаете им возможность выполнить определенный поиск элемента, который они ищут. Это признак того, что, хотя они достигли конца страницы, они еще не достигли конца веб-сайта. Они могут зайти дальше на сайт и просмотреть необходимую информацию.
Обычно форму подписки по электронной почте помещают в нижний колонтитул веб-сайта.Пользователи, которым полезна информация на веб-сайте, будут склонны подписаться на информационный бюллетень, когда найдут эту опцию в нижнем колонтитуле.
Нижний колонтитул, созданный с помощью темы «Загипнотизация»
Рекомендуется включать четкий CTA в нижний колонтитул вашего сайта. Пришло время действовать. Не упустите этот момент и пригласите пользователей к дальнейшим исследованиям, как в примере ниже. Призывы к действию могут повысить коэффициент конверсии, помогая еще не определившимся пользователям принять решение в пользу продукта / информации / услуги и т. Д.
Что вдохновляет нижний колонтитул вашего сайта?
С помощью перечисленных выше элементов вы можете создать сочетание визуального и письменного, которое оставит у пользователей определенные впечатления о вашем веб-сайте.
Итак, что вдохновляет читателей нижний колонтитул веб-сайта?
Быстрый взгляд на веб-сайт может вызвать более сильную связь пользователей с этим веб-сайтом. Обзор наиболее важных страниц / информации в виде короткого списка ссылок может иметь большое значение для дальнейшего вовлечения пользователей.
Источник: https://www.awwwards.com/
- Продолжить навигацию по сайту
Иногда нижний колонтитул может быть настолько интригующим, что не отпускает пользователя. Он предлагает ему / ей продолжить навигацию по сайту и найти ответ на ключевой вопрос: нравится ли мне этот сайт? Что вы думаете об этом:
Источник: https://www.awwwards.com/
Поощрение к действию (прямо или косвенно) может найти свое отражение в нижнем колонтитуле веб-сайта.Shell предлагает пользователям выполнить определенное действие в соответствии с их профилем и очень элегантно:
В центральной колонке кратко спрашивается: «Мы можем помочь?» и дает список возможностей действовать в ситуации, которая лучше всего описывает конкретного пользователя.
- Чувство принадлежности к сообществу
Есть разные способы, которыми владелец веб-сайта может оформить нижний колонтитул, чтобы выразить это чувство. В приведенном ниже примере дизайнер делает это визуально, выражая в нескольких красочных графических элементах атмосферу определенного географического местоположения в данный момент времени.
Источник: https://www.awwwards.com/
При соблюдении определенной иерархии информации и соответствующей группировки ссылок нижний колонтитул веб-сайта может производить впечатление организованного, аккуратного и чистого и готового к изучению. Это то, что демонстрирует приведенный ниже пример при сканировании пользователями, уже достигшими нижнего колонтитула веб-сайта:
Нижний колонтитул, созданный с помощью темы «Загипнотизация»
Красивый нижний колонтитул имеет все шансы выглядеть профессионально и передавать, что в выделенном пространстве нет лишних элементов.Нет лишних элементов, и все хорошо подготовлено для передачи ценностей, присущих организации.
Ниже вы можете найти самые популярные типы нижних колонтитулов веб-сайтов, узнать, когда их использовать и что они делают для вашего веб-сайта.
В веб-дизайне существует общая тенденция, поощряющая создание нижних колонтитулов с большим количеством элементов и информации. Почему это?
Исследование показало, что, хотя наиболее просматриваемое пространство страницы находится в верхней части страницы, наиболее заинтересованными пользователями являются те, которые проводят больше времени и больше взаимодействуют с веб-сайтом в нижней части веб-сайта.Таким образом, пространство под складкой выглядит почти в 3 раза длиннее, чем пространство над складкой.
Joulefinancial.com предлагает много информации в нижнем колонтитуле, что позволяет посетителям легко найти контактные данные и погрузиться в дополнительную образовательную информацию, предоставленную сайтом.
Нижний колонтитул позволяет владельцам веб-сайтов добавлять дополнительный уровень к нижнему колонтитулу веб-страницы. Информация, которая необходима, но которую владельцы веб-сайтов не хотят демонстрировать определенным образом, может быть помещена в нижний колонтитул.
Авторские права, значки социальных сетей или кнопки подписки могут быть расположены под некоторыми полезными ссылками на сайт и любой другой ценной информацией.
Demicreative.com имеет простой призыв к действию, когда приглашает пользователей «Скажите нам крик». За приглашением следуют адрес электронной почты и номер телефона, что позволяет людям «рассказать о своем бренде». Синий фон обнадеживает и профессионален, сглаживая то, как эти люди могут начать сотрудничество с Demicreative.
Bluestag.co.uk также содержит четкий призыв к действию «Наймите нас», за которым следуют контактные данные. Номер телефона и адрес электронной почты кликабельны и упрощают процесс связи для всех, кто склонен «нанимать» Bluestag.co.uk.
Socialtriggers.com содержит более очевидный призыв к действию. Традиционная кнопка CTA выделяется — в нижнем колонтитуле веб-сайта своим расположением и ярким цветом.
Дизайн электронной почты.beefree.io — еще один пример нижнего колонтитула с призывом к действию. После просмотра веб-страницы люди более склонны выбирать услуги, которые предоставляет компания. Вот почему кнопка с надписью «Перейти к редактору Bee Mail» предлагает людям попробовать услуги компании, даже если они находятся в нижнем колонтитуле веб-сайта.
Social Fresh имеет только ссылку в меню на страницу «О нас». Остальная часть домашней страницы заполнена статьями, которые объединяют их компетенции, поэтому необходимость узнать больше о компании может возникнуть, когда вы дойдете до конца страницы.В результате они включили краткое описание компании в левой части нижнего колонтитула для людей, которые больше заинтересованы в их деятельности.
Wpbeginner.com имеет аналогичный нижний колонтитул с некоторым пространством, посвященным описанию компании. Он адресован людям, которые интересовались одной статьей, а затем хотели бы узнать больше о Wpbeginner.com. Основываясь на том, насколько убедительно описание, люди решают, помечают ли они веб-сайт как точку отсчета для будущих поисковых запросов.
Карта сайта и ссылки в центре нижнего колонтитула
Этот пример нижнего колонтитула для демонстрации нашего веб-сайта Mesmerize Fashion был разработан так, чтобы содержать множество ссылок, представляющих организацию и последние сообщения, опубликованные в блоге. Они структурированы в соответствии с простой иерархией, чтобы соответствовать стандартам чистоты и избегать беспорядка.
Нижний колонтитул, созданный с помощью темы «Загипнотизация»
Nytimes.com имеет нижний колонтитул, в котором перечислены все категории и подкатегории журнала.Большая его часть заполнена ссылками на эти категории. После того, как люди проконсультировались с некоторыми статьями прямо с домашней страницы, они могут легко переключиться с нижнего колонтитула в другой раздел и просмотреть статьи, соответствующие ему.
На сайтеWebflow.com/ecommerce представлен широкий спектр продуктов / услуг, предназначенных для создания интернет-магазинов. Вам нужно только выбрать один из различных сегментов предложений, и вы попадете на страницу с подробным описанием этих предложений.
Нижний колонтитул, ориентированный на авторские права и использование
Может быть и простой нижний колонтитул. Он включает только уведомление об авторских правах, без добавления другой информации.
Chobani.com содержит ссылки на Условия и положения, а также на Политику конфиденциальности, действующую для данного веб-сайта. Итак, в данном случае нижний колонтитул — это место, куда нужно заполнить нужную, но не столь интересную информацию.
На сайте Architecturaldigest.com есть более подробный абзац о пользовательском соглашении и политике конфиденциальности.Размещение информации составляет двухуровневый нижний колонтитул, поскольку правила веб-сайта представлены в виде своего рода нижнего колонтитула.
Bluefountainmedia.com есть нижний колонтитул, который богат контактной информацией: включены карты для геолокации, адреса офисов и штаб-квартиры. На заднем плане наводящее на размышления изображение, кажется, приглашает людей связаться с командой компании.
Такие же очевидные, как место для подписки на информационные бюллетени, значки социальных сетей приглашают пользователей подписаться на «Guerlain» в социальных сетях и внести свой вклад в сообщество компании.
Нижний колонтитул, который заставляет людей блуждать по страницам веб-сайта
Нижний колонтитул веб-сайта Ebay предлагает ссылки, которые побуждают людей оставаться на сайте и бродить по нему в поисках большего.
Идея несуществующего нижнего колонтитула соотносится с бесконечной прокруткой. Он подходит для некоторых веб-сайтов с большим количеством пользовательского контента или газет, где новые статьи представлены одна группа за другой, бесконечно.
Хорошим примером этого является Mashable.com:
Собрать все вместе
Нижний колонтитул веб-сайта нельзя игнорировать. Согласно исследованиям и различным исследованиям, это благоприятное место для увеличения конверсии. В зависимости от типа веб-сайта и целей каждой страницы нижний колонтитул может включать различные элементы, используемые посетителями. Единственное, что вам нужно сделать, это выбрать ПРАВИЛЬНЫЕ элементы для размещения в нижнем колонтитуле веб-сайта и организовать их в соответствии с четкой структурой, удобной для просмотра и извлечения выгоды.
Лучшие практики и примеры дизайна
Вы когда-нибудь не могли найти то, что ищете, в основной навигации веб-сайта? Вы когда-нибудь рассматривали товар на сайте электронной коммерции, но не могли найти правила возврата? Разочарование, которое это вызывает, побуждает некоторых пользователей уходить и искать более прозрачный или интуитивно понятный сайт.
Именно из-за этого поведения пользователя вашему сайту нужен хорошо продуманный нижний колонтитул.Думайте о нижнем колонтитуле как о страховочной сетке для пользователей, которые не смогли найти информацию, которую они ищут, в других разделах вашего сайта. Например, предоставив ссылку на свою политику возврата или контактную форму, вы можете запретить некоторым посетителям покинуть ваш сайт электронной торговли и никогда не вернуться.
В этом посте мы объясним, что такое нижний колонтитул и почему он важен для взаимодействия с пользователем. Затем мы рассмотрим, что добавить в нижний колонтитул, и в заключение приведем несколько наиболее креативных примеров, которые могут вас вдохновить.
Что такое нижний колонтитул веб-сайта?
Нижний колонтитул веб-сайта — это раздел содержимого в самом низу веб-страницы. Обычно он содержит уведомление об авторских правах, ссылку на политику конфиденциальности, карту сайта, логотип, контактную информацию, значки социальных сетей и форму подписки по электронной почте. Короче говоря, нижний колонтитул содержит информацию, которая улучшает общее удобство использования веб-сайта.
Вы могли подумать, что нет смысла тратить много времени и усилий на нижний колонтитул, потому что люди не обращают внимания на содержимое ниже сгиба.Этот тип мышления определенно подтверждается большинством исследований поведения прокрутки, включая исследование, проведенное Neilsen Norman Group в 2018 году. Они обнаружили, что 57% времени просмотра страниц было проведено в верхней части страницы.
Однако, согласно исследованию, время, проведенное над сгибом, со временем уменьшается, поскольку экраны становятся больше, дизайнеры отдают предпочтение минимализму, а прокрутка в целом нормализуется. В резюме этого исследования говорится, что «люди будут прокручивать, если у них есть причина для этого».
Имея это в виду, поскольку нижние колонтитулы служат для навигационных и информационных целей для вашей аудитории, имеет смысл только оптимизировать это пространство для них, несмотря на то, что они находятся так далеко вниз по странице.Вы даже заметите, что, несмотря на то, что Neilsen Norman Group обнаружила, что время, потраченное на просмотр, уменьшается по мере продвижения вниз по странице, в самом конце наблюдается всплеск.
Источник изображения
Это показатель того, что пользователи знают, что нижний колонтитул ценная информация, и они могут воспользоваться им, особенно когда они ищут что-то конкретное.
Теперь, когда мы понимаем важность нижнего колонтитула веб-сайта, давайте подробнее рассмотрим, какая информация принадлежит этому разделу веб-страницы.
Что помещать в нижний колонтитул веб-сайта
- Уведомление об авторских правах
- Ссылка на политику конфиденциальности
- Карта сайта
- Логотип
- Контактная информация
- Иконки социальных сетей
- Форма регистрации по электронной почте
Важно понимать, что единственное требование для создания отличного нижнего колонтитула веб-сайта — это знать, что ищут ваши посетители.Вот почему нет точного рецепта для нижнего колонтитула веб-сайта. Есть стандартные ингредиенты, но что именно вы кладете, количество, порядок — решать только вам.
Давайте взглянем на некоторые ингредиенты, которые вы можете использовать при создании нижнего колонтитула.
Уведомление об авторских правах
Пожалуй, наиболее важным элементом нижнего колонтитула веб-сайта является уведомление об авторских правах. Согласно Стивену Фишману, JD, в юридической статье о Nolo, уведомление об авторских правах — это «письменное уведомление, в котором говорится, что конкретная работа защищена авторским правом, и что вы владеете этим авторским правом.Цель проста: удержать кого-либо от копирования изображения, анимации, абзаца или иным образом попыток украсть контент с вашего веб-сайта.
Все, что требуется, — это символ авторского права © (или слова «Copyright» или «Copr.»), Год публикации веб-сайта или самого последнего существенного обновления и имя владельца авторских прав. Уведомление об авторских правах должно только появиться один раз на главной странице вашего веб-сайта, но он может отображаться на любом количестве страниц. Его можно разместить в любом месте на главной странице, но чаще всего он находится в нижнем колонтитуле.
Вот пример с домашней страницы блога HubSpot.
Ссылка на политику конфиденциальности
Если вы собираете личные данные пользователей, например их адреса электронной почты или платежную информацию, соглашения о Политике конфиденциальности являются обязательными по закону. По этой причине важно разработать юридически совместимую Политику конфиденциальности и обеспечить простоту поиска и доступа к этой политике на вашем веб-сайте.
Лучше всего разместить ссылку на вашу Политику конфиденциальности в нижнем колонтитуле вашего веб-сайта.Это не только удовлетворит требования закона, но и удовлетворит ожидания большинства потребителей, поскольку они ожидают найти эту информацию в нижнем колонтитуле. Некоторые компании, такие как Conde Nast, захотят включить отрывок из своей Политики конфиденциальности в дополнение к ссылке. Вот пример из The New Yorker .
Карта сайта
Вы можете добавить карту сайта в нижний колонтитул двумя способами. Вы можете предоставить несколько ссылок на разделы своего веб-сайта или предоставить одну ссылку на карту сайта XML.
Первый подход известен как создание «нижнего колонтитула карты сайта». Эти нижние колонтитулы содержат точки навигации, которые не могут аккуратно вписаться в верхние или глобальные панели навигации более крупных сайтов, или точки навигации, которые побуждают посетителей просматривать сайт. Нижний колонтитул карты сайта на Grace Eleyae, например, включает в себя навигационные ссылки, которые посетители могли не учитывать при первом входе на сайт, но хотели бы изучить.
Второй подход к включению карты сайта разработан с учетом ботов поисковых систем.Одна из самых важных вещей, которую будет искать бот поисковой системы, — это ссылка на ваш XML-файл Sitemap. Карта сайта — это файл, содержащий URL-адреса и информацию о страницах и мультимедийных файлах, которые вы считаете наиболее важными на своем сайте. По данным Google, поисковые системы используют этот файл для лучшего сканирования веб-сайтов, особенно крупных и содержательных. Вот почему размещение ссылки на этот файл в нижнем колонтитуле считается лучшим методом SEO.
Логотип
Нижние колонтитулы — отличное место, чтобы усилить индивидуальность вашего бренда.Есть несколько подходов, которые вы можете использовать. Вы можете включить свой логотип, но представить его иначе, чем в заголовке. Может, вы увеличите размер шрифта. Может быть, вы добавите изображение. Возможно, вы включите заявление о миссии или ценности вашего бренда под логотипом. Это всего лишь несколько способов напомнить посетителям, что представляет собой ваша компания, и произвести незабываемое последнее впечатление.
Например,Envoy добавляет товарный знак прямо под своим логотипом в нижнем колонтитуле. Он гласит: «Мы создаем возможности для объединенного мира.Быть смелым.» Таким образом, читатель будет иметь представление о том, чем занимается компания, даже если он не читал страницу «О компании».
Контактная информация
Вы хотите, чтобы потенциальные клиенты могли связываться с вами как можно проще. По этой причине нижние колонтитулы веб-сайтов часто содержат контактные данные, такие как рабочий адрес электронной почты, номер телефона или почтовый адрес. Или он может просто включать ссылку, которая приведет вас к контактной форме.
Роскошный бутик-отель Bellevue Syrene посвящает одну часть нижнего колонтитула своего веб-сайта своей контактной информации.Чтобы потенциальные гости могли связаться с отелем так, как они хотят, в нижнем колонтитуле указан адрес, номер телефона, номер факса и адрес электронной почты.
Иконки социальных сетей
Социальные сети — это еще один способ, с помощью которого потенциальные клиенты могут связаться с вами. По этой причине рекомендуется включать ссылки на профили в социальных сетях. Это также простой способ увеличить количество подписчиков на всех ваших платформах. Понимая эти преимущества, вполне логично, что 72% веб-сайтов включают в нижний колонтитул значки своих социальных сетей.
Вот изображение анимированных значков социальных сетей в приложении Rewind от Flatstudio.
Форма регистрации по электронной почте
В идеале вы хотите представить форму подписки по электронной почте посетителю, который понимает ценность вашего контента и хочет большего. Вероятный кандидат — это посетитель, который прокрутил страницу до конца. Вот почему многие веб-сайты используют нижний колонтитул как возможность увеличить число подписчиков.
Например, Chobani включает в нижний колонтитул простую форму подписки по электронной почте.Слоган выше — «Получайте самые свежие новости о Чобани» — помогает определить ожидания подписчика относительно того, на что именно он подписывается.
Теперь, когда мы знаем, какой возможный контент и элементы мы можем поместить в нижний колонтитул веб-сайта, давайте рассмотрим несколько реальных примеров, которые могут вас вдохновить.
Примеры нижнего колонтитула веб-сайта
Как обсуждалось выше, не существует «правильного» способа создания нижнего колонтитула веб-сайта, если он отражает вашу уникальную идентичность бренда и ориентирован на вашу аудиторию.Давайте рассмотрим несколько примеров, которые делают именно это.
1. Лорелей Лондрес
Lorelei Londres — это роскошный отель в Италии, который стремится обеспечить гостеприимство и очарование. Его нижний колонтитул успешен в обоих аспектах.
В ожидании любого вопроса от посетителя или гостя сайта слева есть контактная информация, в центре — ссылки для навигации, а справа — форма для подписки на информационный бюллетень. Справа находится ссылка на политику конфиденциальности, а также форма отправки прямо в нижнем колонтитуле.Ниже приведена еще одна ссылка на политику конфиденциальности, политику в отношении файлов cookie и агентство, создавшее веб-сайт, а также уведомление об авторских правах. Все это размещено на фоне изображения, изображающего кого-то в бассейне на балконе с видом на пляж. В результате получается стандартный нижний колонтитул, который идеально соответствует бренду.
2. Сверхтекучая
Superfluid — это веганский косметический бренд, созданный для всех. Как и миссия Superfluid, ее нижний колонтитул является базовым, но также переопределяет основные значения.Нижний колонтитул Superfluid содержит информацию, которую вы ожидаете — хорошо организованное меню со справочными статьями, юридической информацией и учетными записями в социальных сетях, форма подписки по электронной почте, логотип и информация об авторских правах — но не так, как вы могли бы ожидать.
Логотип огромен по сравнению с другим текстом в нижнем колонтитуле. Под нижним колонтитулом вы видите значки, представляющие его ценностные предложения — без жестокости, веганский, простой в использовании, без минеральных масел. Ниже приводится традиционное уведомление об авторских правах, а также допустимые способы оплаты.Короче говоря, этот нижний колонтитул содержит важную информацию, чтобы ответить на любые вопросы, которые могут возникнуть у потенциальных или существующих клиентов, жирным, но ясным образом.
3. Группа сплайнов
Spline Group — это машиностроительная и электротехническая компания, которая ценит эффективное общение и простоту.
Это ясно из его нижнего колонтитула. Нижний колонтитул выполнен в минималистском стиле с черным текстом на белом фоне. Есть адрес и ссылки на его страницу в Instagram, LinkedIn и Карьере.Ниже находится текст гораздо большего размера. Но в отличие от Superfluid, это не логотип или торговая марка Spline. Вместо этого это контактная ссылка с простым, но привлекательным призывом к действию: «Давай поговорим».
4. Art4web
Art4web — это креативная студия цифрового и брендинга, которая занимается созданием уникальных веб-сайтов, мобильных приложений и дизайна брендов. Собственный нижний колонтитул — образец уникального дизайна. Вместо того, чтобы предлагать одну точку взаимодействия для потенциальных клиентов, таких как Spline Group, Art4web предлагает три. Потенциальные клиенты могут написать им по электронной почте, заполнить форму, чтобы узнать расценки на свой проект, или позвонить им.Или они могут выбрать подключение к любой из социальных сетей, представленных значками ниже.
5. ГОООдерс
gOOOders — это онлайн-платформа и серия гостиничных бутиков, которые продают этичные и экологически безопасные продукты. Его миссия — помочь людям сделать лучший выбор в отношении продуктов, которые они покупают, и того, как они путешествуют.
Поскольку gOOOders — это бренд, ориентированный на действие, логично, что нижний колонтитул ориентирован на действия. Большая часть нижнего колонтитула посвящена форме подписки по электронной почте.Фон формы красочный и анимированный, поэтому ваш взгляд будет притягиваться к этому разделу. Ниже представлена простая белая строка, содержащая уведомление об авторских правах, контактную ссылку, ссылки на политику и условия использования файлов cookie gOOOders, а также значки социальных сетей. Это отличная модель для веб-сайтов, которые хотят оптимизировать нижний колонтитул для конверсий.
6. Аджиб
Пранджал Кайла, также известный как Аджиб, является независимым междисциплинарным дизайнером. Согласно его биографии, одна из его специальностей — «создание интерактивных пространственных и сенсорных ощущений».”Это ясно во всех частях его веб-сайта, включая его нижний колонтитул.
Его нижний колонтитул содержит основную информацию — ссылки на его альбом и работы, контактную информацию, значки социальных сетей, уведомление об авторских правах и ссылку на его политику конфиденциальности — но их представление уникально. На черном фоне белая типография выглядит как созвездие. Курсор действует как прожектор. При наведении курсора на любую ссылку шрифт становится жирным и синим.
Создание нижнего колонтитула вашего веб-сайта
Создание нижнего колонтитула вашего веб-сайта требует тщательного планирования.Это раздел, в котором люди и роботы поисковых систем ищут важную информацию, которую они нигде не нашли. Убедитесь, что вы предоставляете им необходимый контент и элементы, чтобы они продолжали изучать ваш сайт, а не уходили в разочаровании.
Примечание редактора: этот пост был первоначально опубликован в сентябре 2020 года и был обновлен для полноты.
шаблонов проектирования и когда использовать каждый
Как профессионалы в области UX, мы склонны посвящать свое время и энергию всему, что лежит в основе.Это связано с тем, что глобальная навигация, поиск и высокоприоритетный контент располагаются в верхней части страницы, и пользователи, как правило, проводят непропорционально много времени в верхней части любой страницы. Следовательно, нижние колонтитулы, которые появляются внизу веб-страниц, сокращают время UX и бюджет ресурсов. Тем не менее, вы все равно должны обращать внимание на нижние колонтитулы, потому что они могут значительно улучшить взаимодействие с пользователем.
Определение: Нижний колонтитул веб-сайта — это область, расположенная внизу каждой страницы веб-сайта под основным содержанием.
Термин «нижний колонтитул» пришел из мира печати, в котором «нижний колонтитул» — это единообразный элемент дизайна, который можно увидеть на всех страницах документа. Однако, как мы объясняли 20 лет назад, разница между полиграфическим дизайном и веб-дизайном означает, что элементы дизайна, такие как нижние колонтитулы, меняют свое значение (в данном случае, становясь действенными), когда они переносятся из печати в Интернет.
Нижние колонтитулы веб-сайтов в прошлом были либо небольшими полезными областями с небольшим количеством информации, либо большими площадками для разного рода ссылок.Визуально они часто содержали крошечный текст, который было трудно разобрать. Сегодня нижние колонтитулы повзрослели и теперь служат важным ориентиром для людей, выполняющих различные задачи на веб-сайтах.
Хотя нижним колонтитулам уделяется меньше внимания, чем верхнему краю страницы, они по-прежнему используются довольно часто. Это два наиболее распространенных варианта использования нижних колонтитулов:
- Пользователи сканируют или читают страницу и либо не находят того, что им нужно, либо нуждаются в дополнительной информации. Они прокручивают страницу вниз и используют нижний колонтитул как:
- Второй шанс убедиться в этом
Например, может быть, пользователь после прочтения всех деталей решил, что не хочет регистрировать банковский счет, но он все равно был впечатлен банковским учреждением и хочет стать клиентом.Нижний колонтитул — это хорошая возможность напомнить или научить потенциальных клиентов о других предложениях компании. - Последний вариант для труднодоступного контента
Иногда пользователи обращаются к нижнему колонтитулу за дополнительными параметрами, которые могут отсутствовать в глобальной навигации. Например, те, кто хочет устроиться на работу в компанию электронной коммерции — задача, отличная от задач типичного покупателя электронной коммерции, — могут обратиться к нижнему колонтитулу за соответствующей информацией.
- Второй шанс убедиться в этом
- Пользователи намеренно прокручивают до нижнего колонтитула, чтобы найти информацию, которую они ожидают там разместить, например контактную информацию, сведения о компании, сообщения в социальных сетях или ссылки, или даже для обнаружения нового или связанного контента на сайте. Некоторые пользователи даже используют нижний колонтитул для навигации: когда они уже прокручиваются до конца страницы, потому что нижний колонтитул находится в непосредственной близости, они используют его вместо прокрутки вверх для глобальной навигации.
В обоих случаях, независимо от того, какое содержимое попадает в нижний колонтитул, этот нижний колонтитул должен быть последовательным, предсказуемым и легко обнаруживаемым.Рассмотрите эти варианты использования, цель вашего веб-сайта и цель нижнего колонтитула при определении того, какой тип нижнего колонтитула предлагать и какой контент предлагать в нижнем колонтитуле.
Хотя удовлетворение этих пользовательских сценариев не может быть абсолютно приоритетной целью для веб-сайта, создание хорошего нижнего колонтитула по-прежнему является достойным делом, потому что нижние колонтитулы обладают особенно замечательной характеристикой удобства использования: они никогда не будут мешать пользователям, которые получают свои потребности удовлетворяются выше на странице. Таким образом, за исключением чрезмерно раздутых нижних колонтитулов, которые могут задерживать загрузку или рендеринг страницы, нижний колонтитул является бесплатным дополнением к пользовательскому опыту.Это может помочь, но не повредит.
Дизайнеры сайтов выбирают для нижних колонтитулов множество различных типов контента по разным причинам. Элементы нижнего колонтитула можно комбинировать в зависимости от бизнес-целей и целей пользователя. Вот некоторые из наиболее распространенных компонентов нижнего колонтитула, примеры и рекомендуемые ситуации, в которых их можно использовать:
- Ссылки на утилиты
- Навигационный коврик
- Ссылки на второстепенные задачи
- Карта сайта
- Отзывы или награды
- Бренды внутри организации
- Взаимодействие с клиентами (информационные бюллетени по электронной почте и социальные сети)
Полезные ссылки
Большинство сайтов, как минимум, имеют тенденцию включать служебную навигацию в нижний колонтитул, указывая на:
В то время как многие сайты имеют служебную навигацию, расположенную в самых верхних областях сайта, нижний колонтитул — это то место, куда пользователи смотрят, когда ищут эти конкретные элементы. Пользователи часто переходят непосредственно к нижнему колонтитулу, чтобы найти контактную информацию или найти способы получить поддержку клиентов.Независимо от того, есть ли у вас ссылки на эти служебные элементы вверху страницы или нет, всегда включайте их также и в нижний колонтитул. (Служебная область в верхней части страницы должна по-прежнему использоваться для служебных программ, подобных инструментам, таких как поиск, информация для входа / учетной записи и выбор языка.)
Использовать для: всех сайтов
Нижний колонтитул Clarity Money упрощает работу, включая ссылки на Условия использования и Политику конфиденциальности , а также ссылки на учетные записи социальных сетей (дополнительную информацию см. Ниже). J. Crew предоставляет контактную информацию в виде ссылок на специальную учетную запись службы поддержки клиентов в Twitter, номер телефона и адрес электронной почты службы поддержки.Навигация по коврику
Подобно физическому коврику в домах людей, навигационный коврик — это первое, что вы видите, когда приходите, и последнее, что вы видите, когда уходите, то есть он включен как вверху, так и внизу страницы. Таким образом, нижний колонтитул может включать в себя глобальную навигацию. Этот компонент полезен, когда страницы длинные (как в случае со многими современными мобильными дизайнами), поскольку он позволяет пользователям быстро переходить в другой раздел сайта, не прокручивая назад, чтобы перейти к основной навигации.
Используется для: сайтов с длинными страницами, особенно если глобальная навигация недоступна, а внизу страницы
United Healthcare использует навигацию по коврику: основные категории отображаются как на верхней панели навигации (вверху), так и в нижнем колонтитуле (внизу).Дополнительные задачи
Нижний колонтитул может содержать ссылки на второстепенные задачи, интересующие пользователя. Вот некоторые примеры второстепенных задач:
- прием на работу в компанию
- задач для создателей контента
- доступ к информации об инвесторе
- поиск документации или спецификаций продукта или услуги
- доступ к медиа-комплектам и другой PR-информации
- поиск аффилированных лиц компании
Эти второстепенные задачи обычно не присутствуют в глобальной навигации или служебной навигации.Этот тип содержимого нижнего колонтитула распространен на сайтах с несколькими группами пользователей с разными пользовательскими маршрутами.
Используется для: помощи пользователям в поиске вторичного контента, который может не иметь прямого отношения к основной цели сайта
Например, на веб-сайте журнала Dwell Magazine представлены категории, не относящиеся к темам журнала, в том числе About, Dwell Magazine, Professionals, и Merchants , которые могут заинтересовать вторичные группы пользователей: профессионалов в области СМИ и дизайна, продавцов, инвесторов и рекламодателей (и перспективные сотрудники).
Нижний колонтитул Dwell Magazine содержит ссылки на второстепенные задачи (кроме чтения статей)Карта сайта
Компонент нижнего колонтитула в стиле карты сайта демонстрирует комбинацию глобальной навигации и других важных страниц, отсутствующих в глобальной навигации. В отличие от навигации по коврику, он предоставляет подкатегории нижнего уровня основных категорий. Это полезно для:
- , раскрывающие основные темы, которые не очевидны на уровне глобальной навигации
- Повышение осведомленности об основном содержании сайта
- напоминает пользователям о предложениях компании
Компонент нижнего колонтитула карты сайта не включает полную карту сайта, если только у сайта мало страниц (около 25 или меньше).Если больше, то нижний колонтитул может стать громоздким и трудным в использовании. (В качестве альтернативы вы можете разместить полнофункциональную карту сайта на отдельной странице и разместить ссылку на нее в нижнем колонтитуле, где пользователи ожидают найти такую ссылку.)
Использование для: крупных сайтов с несколькими уровнями информации или поддоменов
Нижний колонтитул CNN содержит ссылки на навигацию верхнего уровня и на категории нижнего уровня.Отзывы или награды
Многие участники нашего исследования рассказали, что их мотивация к выбору сайта была обусловлена наградами и отзывами, полученными этим сайтом.Выделение похвал в нижнем колонтитуле может быть хорошей тактикой для повышения авторитета и доверия. Однако показ слишком большого количества отзывов и наград может также поднять красный флаг для клиентов, создавая впечатление, что компании необходимо показывать отзывы, потому что она не является зрелой или стабильной. Решение — добавить это содержимое в нижний колонтитул.
Проведите юзабилити-тесты и A / B-тесты со своей аудиторией, чтобы определить, подходит ли эта стратегия для вашего нижнего колонтитула и какое количество отзывов необходимо.
Используйте для: стартапов или компаний с меньшей известностью бренда
В нижнем колонтитуле Reykjavik Excursions успешно включены награды и советы, от которых он получил признание, чтобы укрепить доверие и авторитет.Бренды внутри организации
Некоторые компании настолько огромны, что владеют десятками других компаний или руководят ими. Некоторые используют универсальную навигацию для связи этих дочерних компаний с родительской.Также может быть полезно включить список дочерних компаний и брендов в нижний колонтитул, чтобы повысить осведомленность о других брендах или компаниях, входящих в портфель организации, а также помочь пользователям сориентироваться.
Используется для: крупных международных организаций с множеством дочерних компаний или торговых марок-партнеров
Нижний колонтитул Walmart ссылается на другие бренды, принадлежащие компании, такие как Hayneedle, Jet и Modcloth.Взаимодействие с клиентами
Пользователи часто переходят непосредственно к нижнему колонтитулу, чтобы найти информацию, такую как купоны и рекламные акции, или просто оставаться в курсе продаж компании и выпусков продукции.Таким образом, нижний колонтитул может включать информацию, которая позволяет клиентам оставаться в контакте с компанией — ссылки на социальные сети (или, как минимум, ссылки на учетные записи компании в социальных сетях) и подсказки для подписки в списках рассылки.
Прежде чем включать встроенный виджет ленты социальных сетей в нижний колонтитул, подумайте, как часто компания публикует сообщения на каждом сайте социальной сети. Менее активная учетная запись в социальных сетях может не требовать наличия встроенной ленты социальных сетей, но все же может выиграть от привязки к учетным записям социальных сетей.
Используется для: всех типов сайтов при использовании ссылок на социальные сети; сайты с большим упором на визуальные эффекты или эстетику (искусство, красота, бренды стиля жизни или творческие пространства) при использовании встроенного виджета ленты социальных сетей
Все страницы TheGoodTrade.com имеют большой многокомпонентный нижний колонтитул, который включает: (1) приглашение для подписки на список рассылки, (2) виджет с его лентой Instagram, (3) ссылки на учетные записи в социальных сетях, (4) ссылки второстепенным задачам и (5) отказ от ответственности с информацией об авторских правах.Бесконечная прокрутка и мини-нижний колонтитул
Многие сайты электронной коммерции, развлекательные и другие сайты, поощряющие просмотр, выбирают бесконечную прокрутку, чтобы удерживать пользователей на странице. Контент загружается постоянно, поэтому на каждой странице нет согласованного низа и, следовательно, нет раздела нижнего колонтитула. Однако контент, который был бы в нижнем колонтитуле (как правило, ссылки на служебную навигацию), отображается как «мини-нижний колонтитул» на правом краю или в более крупной расширенной глобальной навигации.
Чтобы нижний колонтитул был полезным, он должен присутствовать на всех страницах сайта.Некоторые сайты пытаются использовать один и тот же нижний колонтитул для страниц как статической, так и динамической длины. Однако, когда пользователи пытаются использовать эти нижние колонтитулы на сайтах с бесконечной прокруткой, это часто превращается в разочаровывающую игру в «ударь крота», когда пользователи пытаются нажимать на ссылки как можно быстрее, прежде чем они снова исчезнут в нижней части страницы. Вместо этого, если вы планируете использовать бесконечную прокрутку, подумайте о том, чтобы разместить мини-нижний колонтитул в правом рельсе и убедиться, что он прикрепляется к основному контенту при прокрутке пользователем.
Используется для: страниц с бесконечной прокруткой
сайтов с бесконечной прокруткой, например LinkedIn.com, часто содержат содержание нижнего колонтитула в других местах, например, в нижней части правой панели. BarstoolSports.com содержит большую часть того, что традиционно отображается в нижнем колонтитуле глобальной навигации. Ваш браузер не поддерживает теги видео. Barstool.com также имеет нижний колонтитул, который смещается при загрузке нового контента.(В большинстве браузеров наведите указатель мыши на видео, чтобы отобразить элементы управления, если они еще не видны.)
Контекстные нижние колонтитулы
Хотя нижние колонтитулы традиционно остаются единообразными на многих страницах, иногда бывает полезно настроить нижний колонтитул на основе информации, представленной на странице.В частности, для сайта с несколькими аудиториями контекстный нижний колонтитул может отображать контент, который, возможно, не попал в глобальную навигацию, но все же может иметь решающее значение для некоторых пользователей.
Например, на главной странице Medium.com нет нижнего колонтитула; на странице отображается список статей с бесконечной прокруткой. (На странице есть мини-нижний колонтитул с правой стороны, как рекомендовано выше.) Однако на странице конкретной истории Medium показывает нижний колонтитул на основе задач, который варьируется в зависимости от того, является ли зритель подписчиком или нет.
Использование для: сайтов с разными ролями пользователей (например, «создатель контента» против «потребителя контента» или «участник» против «не член»)
Нижний колонтитул Medium включает несколько ссылок на связанные сообщения и подчеркивает преимущества членства в Medium для людей, которые не вошли в аккаунт Medium.Нижние колонтитулы прошли долгий путь с 1990-х годов, но по сей день они все еще подвержены распространенным дизайнерским ошибкам:
- Более двух уровней иерархии информации
Специально для больших сайтов, включая всю карту сайта, не является ответом на ваш нижний колонтитул.Нижний колонтитул — это выделенный объем недвижимости, который должен быть посвящен только важной информации, которая должна быть обнаружена. Как однажды метко сказала моя мама: «Если все важно, ничего не важно».- РЕШЕНИЕ: Рассмотрите возможность изменения приоритетов контента и отображения ссылок только на категории первого и второго уровня в вашем IA, а не на весь сайт. Если одна страница нижнего уровня достаточно важна, разместите эту конкретную ссылку в нижнем колонтитуле, но вам не обязательно отображать все уровни информационной иерархии, чтобы ее можно было найти.
- Нечеткие названия ссылок в нижнем колонтитуле (например, Информация о компании или Справка по сравнению с Свяжитесь с нами )
Пресловутая ссылка Ресурсы на многих нижних колонтитулах — один из прискорбных остатков нижних колонтитулов прошлого.- РЕШЕНИЕ: Команды должны стараться придерживаться общепринятых, четких условий. Если команда не уверена, какой термин будет более подходящим, сортировка карточек или проверка удобства использования могут помочь пролить свет на термины, которые могут запутать пользователей.
- Нечеткая структура или информационная иерархия
Нижний колонтитул иногда может быть «свалкой» для потерянных ссылок, то есть ссылок, которые, кажется, не имеют никакого отношения к глобальной навигации или второстепенным задачам. Если нижний колонтитул не имеет схемы организации, пользователи либо проведут исчерпывающий обзор, либо потратят очень мало времени на просмотр нижнего колонтитула. Нижний колонтитул GM не имеет четкой структуры из-за отсутствия информационной иерархии. Такая настройка затрудняет сканирование или поиск содержимого.- РЕШЕНИЕ: Четко передайте информационную иерархию элементов в нижнем колонтитуле с помощью группировки или других шаблонов визуального дизайна, которые указывают визуальную иерархию (например, выделенные жирным шрифтом ссылки на страницы высокого уровня и ссылки на страницы нижнего уровня с нормальным весом).
- Скрытые или неразборчивые нижние колонтитулы
Иногда компании предпочитают использовать крошечный размер шрифта для нижних колонтитулов, чтобы разместить все ссылки или сделать ссылки менее отвлекающими. Хуже того, некоторые сайты могут использовать функцию анимации или аккордеона, чтобы полностью скрыть нижний колонтитул в эстетических целях.Хотя нижний колонтитул не является основной навигацией, люди по-прежнему используют его и полагаются на него, поэтому не пытайтесь его скрыть. В более ранней версии нижнего колонтитула Reserved.com использовалась функция аккордеона, которая была свернута по умолчанию, что затрудняло поиск ее содержимого. В более ранней итерации нижнего колонтитула Reserved.com использовалась функция аккордеона, которая по умолчанию была свернута, что затрудняло поиск ее содержимого.- РЕШЕНИЕ: Используйте четкий размер шрифта и цвет шрифта (с приличной контрастностью) и избегайте использования декоративных шрифтов.Самое главное, не скрывайте и не сворачивайте нижний колонтитул — люди ожидают, что он будет там.
Нижний колонтитул — это место, куда уходят пользователи, когда они теряются. Если мы хотим произвести неизгладимое хорошее впечатление, очень важно не упускать из виду нижнюю часть страницы. В конце концов, даже самые обыденные, утилитарные разделы интерфейса могут оказать самое большое влияние на пользовательский опыт.
Получите больше советов по повышению эффективности веб-страниц в нашем дневном курсе «Дизайн пользовательского интерфейса веб-страниц».
ресурсов
Jakob Nielsen & Kara Pernice, 2010, Eyetracking Web Usability, The New Riders
12 примеров плюс советы по созданию собственного
Иногда самые мелкие детали имеют самое большое значение. Когда дело доходит до создания веб-сайта, разработка нижнего колонтитула вашего сайта, вероятно, не будет в верхней части вашего списка дел. Хотя вам может быть над чем подумать, имейте в виду, что этот часто упускаемый из виду фрагмент контента может быть решающим для определенных посетителей.
Хорошо продуманный нижний колонтитул поможет вам в достижении ваших бизнес-целей при условии продуманного и стратегического планирования.
Это руководство расскажет обо всем, от того, что добавить в нижний колонтитул вашего веб-сайта до того, как создать свой собственный. Кроме того, вы найдете подборку из 12 примеров нижних колонтитулов веб-сайтов для вашего вдохновения:
Что такое нижний колонтитул веб-сайта?
Нижний колонтитул веб-сайта — это полоса содержимого, расположенная в самом низу веб-страницы и часто повторяющаяся на каждой странице веб-сайта.С другой стороны, заголовок вашего веб-сайта — это раздел, который отображается в верхней части веб-сайта.
Хотя дизайн вашей домашней страницы часто дает посетителям первое впечатление о вашем сайте, ваш нижний колонтитул, вероятно, будет последним, что люди видят. При правильном содержании и дизайне он может произвести положительное и неизгладимое впечатление, помогая вам в достижении основных целей вашего веб-сайта.
Это стратегическое место — идеальное место для добавления последнего CTA (призыва к действию), побуждающего посетителей сайта связаться или подписаться на ваш список рассылки.Нижний колонтитул может служить второстепенным меню веб-сайта, чтобы посетители не пропустили важную информацию и направлять их на различные страницы с помощью четкой навигации. Кроме того, вы можете выделить определенные элементы, такие как выигранные вами награды, отзывы или ваши аккаунты в социальных сетях.
Наконец, нижний колонтитул предоставляет вам организованное место для включения основной информации, такой как условия и положения, политика конфиденциальности и другие юридические вопросы. Разместив все эти формы в одном месте, вы сможете посвятить остальную часть своего сайта созданию привлекательного взаимодействия с пользователем и привлечению новых клиентов.
Рекомендации по дизайну нижнего колонтитула веб-сайта
Как вы увидите в приведенных ниже примерах нижнего колонтитула, нижние колонтитулы действительно различаются по размеру. Однако большинство из них довольно малы и содержат только самую важную информацию.
Любой, кто раньше создавал мобильный веб-сайт, скажет вам, что небольшой участок недвижимости не обязательно означает более простой процесс проектирования. Ограниченное пространство означает, что вы должны тщательно учитывать важность каждого элемента, который вы включаете, чтобы использовать пространство наилучшим образом.
Вот самые важные моменты, которые следует учитывать при разработке нижнего колонтитула вашего веб-сайта:
Включите самое необходимое
Есть несколько основных элементов информации, которые посетители ожидают увидеть в нижнем колонтитуле вашего веб-сайта. И поскольку это повторяется на каждой странице вашего веб-сайта, эти сведения всегда будут в пределах досягаемости для посетителей вашего сайта, и вам придется иметь дело с этим только один раз.
Придерживайтесь соглашений о дизайне и включите свою политику конфиденциальности и условия использования. Это также поможет вам выглядеть профессионально и достойно доверия.
Кроме этого, обычно добавляют меню навигации и контактные данные, такие как рабочий адрес электронной почты, номер телефона, адрес и каналы социальных сетей. Вы также можете создать короткую онлайн-форму для связи.
И последнее, но не менее важное: не забудьте добавить год и символ авторского права. Это поможет защитить вас от любых попыток плагиата на вашем сайте.
Обеспечьте четкую навигацию
Даже если посетители вашего сайта достигли конца страницы, это не значит, что им пора уходить.Напротив, независимо от того, чувствуют ли они себя потерянными, незаинтересованными или жаждущими большего, вы можете побудить их продолжать просмотр, добавив понятное меню навигации по веб-сайту в нижний колонтитул.
Перечислите различные разделы вашего сайта и сделайте ссылки на них, чтобы посетители могли получить общее представление о предлагаемом вами содержании. Кроме того, добавление панели поиска поможет разочарованным посетителям быстро найти нужную информацию.
Выразите свою индивидуальность
Каждый элемент контента на вашем веб-сайте — это шанс отразить вашу уникальную индивидуальность и идентичность бренда.То же самое и с нижним колонтитулом. Он должен быть согласован с остальной частью вашего веб-дизайна, чтобы обеспечить удобство просмотра.
Придерживайтесь цвета и голоса вашего бренда. Это также отличное место, чтобы добавить причудливую микрокопию, которая привлечет внимание ваших посетителей. Приглашаете ли вы их зарегистрироваться в своем блоге или проверять свои социальные каналы, постарайтесь отразить свой тон и индивидуальность в выборе слов. В конце концов, фразы «давай дружить» или «мы будем рады услышать от тебя» могут быть гораздо более заманчивыми, чем простая «подпишись здесь».”
Сделайте его эстетичным
Тот факт, что он находится в самом низу вашего веб-сайта, не означает, что ваш нижний колонтитул должен быть менее привлекательным, чем остальная часть вашего сайта. Фактически, это может быть последнее, что увидят ваши посетители. Убедитесь, что вы уделяете столько же внимания дизайну, сколько и остальному контенту. Держите свой дизайн чистым и простым, чтобы посетители могли легко усвоить эту последнюю важную информацию.
Учитывать основные принципы проектирования, учитывая иерархию и расположение.Решите, на какой информации вы хотите сделать акцент, исходя из своих бизнес-целей. Вы хотите, чтобы посетители направлялись в ваш интернет-магазин, подписывались на предстоящий веб-семинар или связывались с вами? Что бы это ни было, выделите этот элемент с помощью размера, цвета или пробелов. Нужно еще немного вдохновения? Ознакомьтесь с последними тенденциями веб-дизайна и узнайте, как используются нижние колонтитулы веб-сайтов.
12 выдающихся примеров нижних колонтитулов веб-сайтов
Теперь, когда вы ознакомились с основами, пришло время погрузиться в некоторые идеи веб-дизайна.Независимо от того, создаете ли вы свой веб-сайт с нуля или пользуетесь шаблоном веб-сайта, эти примеры нижних колонтитулов, созданные пользователями Wix, предоставят вам множество идей для создания собственного.
01. Номер дома 3
На сайте этого ресторана вся необходимая информация размещена в нижнем колонтитуле. С ними легко связаться с помощью Google Maps и виджета живого чата. Эти небольшие детали указывают на то, что они учли потребности своих клиентов и готовы связаться с ними.
Хотя в нижнем колонтитуле нет карты сайта, главное меню веб-сайта закреплено в верхней части экрана, что означает, что посетители могут легко перемещаться по своим страницам.
Наконец, есть отличная цветовая схема веб-сайта, которая продолжается в нижнем колонтитуле, помогая ей легко вписаться в дизайн.
02. Lola Pate
Будучи брендом стиля жизни с сильным акцентом на визуальные эффекты, Lola Pate решила добавить свой канал Instagram в нижний колонтитул. Это не только укрепляет идентичность их бренда, но и побуждает посетителей сайта щелкать и просматривать изображения своих продуктов в более крупном формате.
Бренд также использовал это место, чтобы разместить последний призыв к действию, приглашая посетителей «присоединиться к нашему племени.«Этот стратегический шаг в сочетании с забавной микрокопией обязательно заставит людей подписаться на их списки рассылки.
И на тот случай, если их клиенты пропустили это, здесь есть ссылка на страницу доставки и возврата, что является хорошей практикой при запуске интернет-магазина.
03. Willowbrook Farm
Этот пример нижнего колонтитула веб-сайта включает всю информацию, которую посетитель ожидает увидеть. Есть организованное меню, ведущее ко всем страницам веб-сайта, заманчивое предложение о подписке и способ связаться.Благодаря использованию цветового контраста кнопка «Подписаться» выделяется, делая ее еще более привлекательной.
Дизайн соответствует остальной части веб-сайта малого бизнеса фермы, что создает гармоничный общий вид. Цветовая палитра вызывает ощущение природы, как и иллюстрация — приятный штрих, который помогает придать нижнему колонтитулу более дружелюбный вид.
04. Letsone
Этот шикарный нижний колонтитул веб-сайта от Let’sone идеально отражает суть их бренда, предоставляя посетителям всю необходимую информацию.Используя тот же узнаваемый фон, что и в заголовке, они создали целостный вид. Они также поместили свой логотип в нижний колонтитул, что еще раз усилило их усилия по брендингу.
Все элементы организованы высокоорганизованным образом со списками и заголовками. Иерархия очень четкая, призыв к действию размещен в верхней части нижнего колонтитула и написан крупным шрифтом. Чтобы посетители не упустили возможность чата в реальном времени, они выделили его ярким контрастным оттенком розового.
05. Jérome Studio
Этот экологичный бренд аксессуаров демонстрирует, что хороший дизайн не обязательно должен быть сложным. Имея всего два нейтральных цвета, нижний колонтитул их веб-сайта отлично передает всю нужную информацию и поддерживает привлекательный дизайн.
Jérome Studio создала организованный макет с четкой иерархией. Нижний колонтитул дополняет остальной дизайн, прекрасно сливаясь с остальной четкой эстетикой и создавая элегантный вид.
Использование шрифтов с засечками и без засечек добавляет тонкий штрих дизайна, который помогает различать заголовки и остальной текст.На всем веб-сайте используется одна и та же пара шрифтов, что обеспечивает единый дизайн.
06. Бесполезные сокровища
Нижний колонтитул веб-сайта этого интернет-магазина произведений искусства сочетает в себе современный вид с ностальгическим шрифтом, напоминающим пишущую машинку. В сочетании с нетрадиционным текстом, приглашающим посетителей «поговорить с нами с цветами», становится ясно, что у Useless Treasures хорошо продуманный и уникальный фирменный стиль. Это также видно через гифку, которую они включили в нижний колонтитул, добавив насмешливую атмосферу, которая заставит вас взглянуть еще раз.
Компания Useless Treasures, занимающаяся продажей произведений искусства в Интернете, постаралась включить в нижний колонтитул наиболее важные детали: информацию о доставке, правила возврата и логотипы, представляющие способы оплаты. Также есть ссылка на их аккаунт дизайнера в Instagram и их веб-сайт, который является одним из лучших веб-сайтов-портфолио в этой области.
07. Seven Grams Caffe
Ничто так не говорит о кофе, как земляные тона и дымящаяся кофеварка. Seven Grams Caffe пробуждает кофейную атмосферу на своем веб-сайте благодаря теплой цветовой гамме и аппетитным крупным планам выпечки.Нижний колонтитул их веб-сайта — идеальное завершение этого путешествия, устанавливая сцену с атмосферной размытой фотографией кафе.
Кроме того, им удалось передать все необходимые детали в небольшом пространстве нижнего колонтитула, включая время работы и номера телефонов. Они также позаботились о том, чтобы выделить три своих местоположения в Нью-Йорке, связав их с Google Maps, чтобы их клиентам было очень легко их найти.
08. Avec Clyde
Бренд этичной одежды Avec Clyde выбрал простой нижний колонтитул веб-сайта, который дополняет чистый дизайн их интернет-магазина.Он тонкий и ненавязчивый, позволяет посетителям сосредоточиться на остальной части веб-сайта, но при этом служит полезным источником информации.
В то время как фиксированное меню в верхней части экрана служит основным методом навигации по веб-сайту, нижний колонтитул позволяет клиентам просматривать другие важные детали, которые они, вероятно, будут искать. Например, у них есть ссылка на их страницу размеров — приятный штрих для модного бренда, плюс ссылка на их страницу часто задаваемых вопросов.
Микрокопия с надписью «Давай дружить» особенно привлекательна, помогая подчеркнуть их легкий подход.
09. Harasat
Поставщик высококачественных продуктов питания, Harasat, создал профессиональный нижний колонтитул веб-сайта без излишеств. Все идеально выровнено, образуя эстетичный макет в виде сетки. Используя всего три цвета — темно-серый для фона, светло-серый и белый — Харасат включил всю необходимую информацию. Четко изложив содержание веб-сайта, посетители могут легко понять, чем занимается этот бренд, и продолжить просматривать его.
Каждая деталь была хорошо продумана, от эффекта наведения на текст, который меняет цвет при наведении на него курсора, до трех разных мест в списке.Вместо того, чтобы показывать адрес и номер телефона каждого местоположения сразу, посетителям предлагается щелкнуть по местоположению, чтобы увидеть контактные данные каждого из них. Это тонкое прикосновение помогает создать чистый, профессиональный вид и не дает загромождать нижний колонтитул.
10. Becca Slack
Этот личный веб-сайт создателя контента, писателя и комика Бекки Slack имеет элегантный и просторный нижний колонтитул. Размещенный в нижней части ее одностраничного веб-сайта, он является идеальным завершением ее демонстрации работ и видео.
Подчеркивая свои контактные данные и предоставляя контактную форму, Бекка поощряет потенциальных сотрудников или работодателей обращаться к ней. Помимо традиционных способов связи, Бекка также включила функцию живого чата и значки социальных сетей, ведущие к ее предпочтительным каналам в социальных сетях.
Все это упаковано в аккуратный дизайн, в котором используются всего три цвета и тонкое сочетание шрифтов, которое перекликается с дизайном на остальной части ее веб-сайта. Бело-синяя кнопка отправки выделяется, приглашая посетителей связаться с вами.
11. Triptyc London
Этот модный бренд делает его чистым и простым, с двухцветным нижним колонтитулом веб-сайта, в котором собрано все самое необходимое. Общий дизайн шикарный, идеально сочетается с дизайном их веб-сайтов, а также с их продуктом — высококачественными рубашками для женщин.
Они включили специальное меню в нижний колонтитул, чтобы ответить на все вопросы, которые могут возникнуть у их клиентов, будь то условия, использование ими файлов cookie или способы оплаты, которые они принимают.
Вдобавок ко всему, Triptyc использовал этот последний шанс, чтобы пригласить посетителей подписаться на их список рассылки. Конкретная кнопка «Подписаться сейчас» выделяется на темном фоне, побуждая посетителей к действию.
12. Holly Oddly
Этот самопровозглашенный бренд «своеобразной бумаги и странных товаров» включил приятное дополнение к нижнему колонтитулу. В отличие от других примеров нижнего колонтитула веб-сайта, Холли Оддли решила включить в этот раздел краткое описание себя и бренда.Чтобы узнать больше, вы можете легко перейти на страницу «О нас». Этот фрагмент контента помогает привнести индивидуальный подход, заставляя посетителей сайта чувствовать себя как дома и укрепляя ее личный бренд.