Шапка сайта | Компьюти
0 мин. на прочтение
Каждый элемент сайта должен нести смысловую нагрузку и шапка сайта тому не исключение. В этой статье мы попытаемся разобраться, какой должна быть шапка сайта, чтобы максимально эффективно использовать ее в своих проектах. А также выявим основные ошибки при проектировании шапки в своих веб-сайтах.
Что такое шапка сайта?
«Шапка сайта — это титульная часть дизайн-макета веб-страницы. Основное назначение этого элемента – дать четкое обозначение начала страницы.» sem-online.ru
С точки зрения маркетинга и дизайна.
Шапка — это первый экран сайта. То, что посетитель видит в первую очередь. Поэтому впечатление, которое оказывает первый экран и будет решающим фактором в просмотре дальнейшей информации.
С точки зрения юзабилити.
Сайт по своей структуре отдаленно напоминает книгу. Логотип, содержание — меню, заголовок, основной текст и т.д. есть и в книге, и в сайте. Шапка сайта должна содержать основную (краткую) информацию о своей структуре и о сайте в целом.
Примеры шапок сайта
Ниже я привел 5 примеров шапок. Все они разные, но можно найти у них общее: меню, логотип, название.
Какую шапку выбрать для вашего сайта зависит от целей и тематики.
Правила цепляющей шапки
Логотип.
Логотип — это главный элемент брендирования и узнавания компании. Так же часто он является ссылкой на главную страницу сайта. Поэтому он должен стоять самый первый (вверху или слева). Практика показала, что расположение логотипа в правой части заставляет клиента сильнее напрягать мозг в поиске ссылки на главную страницу.
Контакты.
Очень часто клиент не может найти контакты для связи и просто покидает сайт, ничего не заказав. И уже по традиции можно ничего не придумывать, когда все уже давно придумано. Контактные данные так же должны располагаться в шапке. Чаще всего контакты ищут в правой части шапки (телефон, почта, адрес)
Навигация.
Меню с основной навигацией обязано находится в шапке. Даже в одностраничнике(loading page) дизайнеры вставляют ссылки с якорями. Рекомендуют основное меню сделать горизонтальным. А вертикальные меню обычно делают для каталогов и интернет-магазинов.
Фон шапки.
Если вы зайдете на сайт популярной закусочной, то наверняка в шапке увидите сочный кусок мяса, различный овощи, от которых сразу потекут слюнки. Как показывает практика вид на товар или услугу вызывает желание приобрести ее у посетителя.
Девиз.
Девиз либо текст доверия – так называют краткое описание или призыв к действию в шапке. Данный текст может кратко охарактеризовать вашу деятельность или кредо. Вариантов множество, решать вам или маркетологам).
Ошибки и их решения по шапкам сайтов
Большая шапка.
Надо иметь ввиду, что на сайте есть как минимум два (шапка, подвал) статичных элемента и один динамический (контент). То есть, шапка и подвал (чаще всего добавляются еще и виджеты) остаются неизменными от страницы к странице, а меняется лишь контент. Поэтому шапку старайтесь сделать как можно меньше. Я помню случай, когда шапка превышала высоту экрана монитора и при переключении страницы ничего не менялось! Посетители думали, что они находятся на одной и той же странице. К счастью, эту проблему выявили на этапе тестирования, но было поздно переделывать шапку. Пришлось сделать якорь на заголовок контента и при загрузке странице пользователя перекидывало чуть ниже шапки. Это очень плохая практика, старайтесь ее избегать.
Искажения изображений.
Если изображение в шапке сайта большого размера, то необходимо учитывать, что сайт будут смотреть и мобильные пользователи. Например, если текст выполнен в картинке, то при сжатии в телефоне он будет уменьшен и возможно не читаем. Современные дизайнеры учитывают эту особенность и сразу делают макеты для нескольких размеров экранов (смартфон, планшет, компьютер).
Избыток картинок.
Красивая иллюстрация в шапки притягивает взгляд пользователя. Иногда переизбыток изображений отвлекает от основного содержимого. Старайтесь найти баланс и не захламлять сюжетом вашу шапку.
Плавающая шапка
Все чаще стал популярен прием фиксированной шапки. Эффект скольжения шапки осуществляется когда посетитель прокручивает страницу вниз. Шапка при этом остается в верхней части экрана и не исчезает за границами браузера. Положительные стороны такого эффекта есть. Во-первых, постоянно видимый логотип способствует запоминанию бренда. Во-вторых, навигационное меню позволяет в любой момент перейти на требуемую страницу. Но неумение использовать данный прием может привести к плачевным результатам. Я встречал такие страницы, где фиксированная шапка занимала половину экрана в мобильном телефоне, что просто не давало шанса нормально читать основной текст. Поэтому надо с осторожностью использовать плавающую шапку на своих сайтах.
Реклама в шапке.
Несомненно, пользователь первое что увидит, будет реклама, особенно если она моргает, либо сделана с использование flash. Мало того, что страница будет загружаться дольше, так еще оттолкнет пользователей от вашего сайта. На данный момент реклама ассоциируется с негативом и надо стараться как можно лучше внедрить ее в дизайн сайта, пусть даже в шапке.
Я надеюсь, что я донес до вас основные правила и ошибки при разработке шапки для вашего сайта. С радостью буду участвовать в обсуждении статьи. Спасибо за внимание.
Ошибки создания шапки сайта
Просмотров 6
В верхней части практически каждого ресурса находится шапка сайта. Это своеобразный блок, в который помещается интересное изображение, а также добавляется название ресурса и небольшой слоган.
На биржах фриланса можно найти массу предложений по разработке шапок для сайтов, а значит, многие владельцы сайтов хотят установить их.
Добавление шапки не будет лишним, это помогает брендингу и визуально улучшает площадку, но и здесь новички умудряются допускать ошибки. В большинстве случаев недочеты появляются в том случае, если на разработке шапки решено сэкономить и создать её самостоятельно.
Представляем вам 4 ошибки создания шапки сайта, которые нельзя допускать.
Какой не должна быть шапка сайта?
- Искажение картинки. Неприемлемо использовать для шапки сайта изображения неподходящего размера. Возможно, оно будет больше или меньше, чем нужно и в этом случае автоматически произойдет сжатие. Чтобы это не выглядело плохо, заранее проверьте подходящий размер для вашего ресурса. Сюда же добавим, что для шапки сайта лучше использовать уникальные изображения.
Не поскупитесь выделить деньги хотя бы на покупку картинки. В статье Как зарабатывать на продаже фотографий, мы представляли подборку лучших фотохостингов для покупки оригинальных изображений.
- Стандартный шрифт. Как глупо добиваться оригинального дизайна шапки сайта и при этом использовать шрифт по умолчанию. В интернете можно найти огромное множество шрифтов, которые легко переносятся в графический редактор. Единственное, что можно добавить – это выбор читабельного шрифта, так как некоторые варианты могут не только не подходить под общий дизайн, но и нарушать легкость восприятия текста.
- Неправильные цвета. Не будем говорить о том, что цветовая схема шапки должна идеально подходить под шаблон вашего ресурса, так как это итак понятно. Неправильные цвета могут стать серьезной проблемой, если вы пытаетесь выделить какой-нибудь текст. К примеру, добавляя красные буквы на зеленый фон, у вас вряд ли получится красиво оформить шапку.
- Слишком много картинок. Некоторые вебмастера умудряются вставить в шапку сайта настолько много изображений, что она становится не интересной и привлекательной, а захламленной. К примеру, владельцы корпоративных сайтов, добавляют в шапку фотографии сотрудников, офисов, продукции и многого другого, что превращает верхнюю часть сайта в уродливый коллаж.
Создание шапки сайта – это не мелочь, а если у вас не получается разработать красивое и качественное изображение, лучше вообще отказаться от этой затеи. Утверждение «И так сойдет» здесь неуместно, ведь плохая шапка сайта, может частично являться причиной плохого восприятия вашего ресурса.
Вам также будет интересно:
— Заработок на создании шаблонов для движков
— 18 советов по ведению сайтов на WordPress
— Правильная навигация сайта
Как создать шапку для сайта на wordpress быстро
Лучше всего конечно, заказать шапку дизайнеру если вы сами не умеете рисовать или у вас отсутствует художественное воображение. Но не у всех и не всегда есть такая возможность.
И в этой статье давайте разберем, как мы может сделать шапку для своего сайта самостоятельно и что для этого надо знать.
Шапка сайта (Header) – это верхняя часть ресурса, которая повторяется на всех страницах. Она не только служит украшением, оформлением, но и несет также информационную-маркетинговую составляющую. Что более важно.
Какой должен быть размер хедера?
Сказать, что хедер должен быть каких то четких размеров, нельзя. Все зависит от вашего желания, дизайна и цели. Сейчас все больше и больше появляется ресурсов, где header несет чисто информативный характер. И такую шапку создать, относительно дизайна, гораздо легче.
Какие элементы должны быть на шапке?
- Логотип — это графический знак который будет ваш ресурс отличать от других. Логотип должен быть уникальным, качественным и привлекать внимание. Маркетинговые исследования показали, что стоять он должен в левом верхнем углу. Так как мы сканируем информацию с лева на право и сверху вниз. Такой латинской буквой F.
- Контакт для связи — это может быть телефон, email адрес, физический адрес. И располагаться должен в правом верхнем углу. Хотя и может быть верху посередине строчки. Главное, чтобы его было хорошо и четко видно и не надо было искать.
- Меню — это обязательная составляющая. Без него посетитель не сможет ориентироваться на вашем ресурсе. Так называемая юзабилити сайта. Как создать меню узнать в этой статье.
- Заголовок — должен иметь крупный шрифт. Написан кратко и понятно о чем сайт. Что получит, о чем узнает посетитель на вашем ресурсе.
Это четыре элемента которые считаются обязательными. Также можно добавить фото автора, картинку которая подходит по смыслу или фон.
Если ваш header на весь экран, то можно написать, для кого этот ресурс, чем он уникален и поставить небольшую форму для связи или заказа. Только не делайте такие формы с большим количеством полей. Максимально 3-4 поля имя, город, телефон и email
Адаптивность — очень важно и это влияет на продвижение в поисковиках, чтобы сайты были адаптивными. Это значит, что одинаково красиво, четко и понятно отображались не только на компьютерах, но и планшетах и мобильных телефонах.
Изображения — если вы используете в шапке картинки, фото, фон, то они должны быть уникальны и оптимизированы. Это значит, что желательно делать картинки для своего ресурса самостоятельно и главное уменьшать вес картинки. От этого зависит, как долго будет загружаться ваша шапка в браузере. И поверьте очень плохо реагируют на долгую загрузку и посетители и поисковики.
Шапка для сайта: с чего начать?
Эта статья специально предназначается для тех, кто никогда не сталкивался с веб-дизайном и не знаком с тем, как создается шапка для сайта. В материале подробно расписано, что требуется для создания данного элемента. Чаще всего вопрос о том, как сделать уникальным заголовок, возникает у новичков. Но нередко такое желание появляется и у вебмастеров, которые создают сайты по шаблону, то есть используют фришные темы, лежащие в свободном доступе в социальных сетях и других ресурсах. Как видите, даже профессионалам иногда хочется что-нибудь поменять или как-то выделиться.
Как выглядит шапка
Шапка для сайта обычно располагается в самой верхней части веб-страницы. Выглядеть этот участок может по-разному, однако стандартные формы и очертания можно встретить на многих веб-ресурсах. Зачастую именно красивый элемент заголовка привлекает большое внимание. Он может иметь как тематическое, так и оригинальное изображение или надпись.
Основные преимущества
Итак, красивая шапка для сайта – это существенный элемент в дизайне каждого блога. Такой header имеет несколько преимуществ:
— содержит фирменную символику, логотип и т. п., что способствует узнаванию компании;
— определяет тематику блога;
— красивый фрагмент заголовка делает ресурс уникальным и незабываемым;
— сайт выглядит солидно, видна рука профессионала.
Сделать красивую шапку специалист может в кротчайшие сроки, а вот новичку такое занятие может показаться весьма затруднительным. Однако создание шапки для сайта относится к числу весьма необходимых разделов в веб-дизайне. Если вы решили всерьез заняться веб-строительством, то для того, чтобы сделать контент или создать другие графические элементы, в первую очередь вам необходимо освоить Photoshop. Это сложная программа, однако она просто необходима для создания сайтов. Чтобы в короткие сроки ознакомиться со всеми нюансами, вам необходимо скачать видеоурок в интернет-сети. Но бывает так, что не всегда есть свободное время и желание изучать какую-либо программу, при этом возникает желание получить все и сразу. Именно для таких людей и была создана эта статья.
Что нужно для создания шапки
Чтобы создать уникальный фрагмент для заголовка используйте Xheader. Этот метод покажется наиболее простым и понятным даже новичкам, однако к нему требуется творческий подход. Поработав с этой программой, вы получите шапку с высоким уровнем уникальности. Вам даже не понадобится изучать основы программирования. Обратите внимание: Xheader может быть как платной, так и бесплатной.
Создаем свою шапку
Для создания уникального заголовка вы можете использовать инструменты или уже готовые графические шаблоны, предложенные программой. В бесплатной версии обычно присутствует до 500 разных графических вариантов. Шаблоны сгруппированы по категориям, и вы запросто подберете нужную тематику. Можете подогнать размер шапки сайта под свои собственные параметры. Использование слоев поможет создавать графические элементы в определенном порядке.
Готовый проект сохраняется в формате XHF, что способствует редактированию файла при необходимости. Конечный вариант сохраняют в формате JPG. Вы можете предварительно просматривать header в браузере. Также можно редактировать и добавлять множество графических элементов: круги, овалы, прямоугольники, квадраты и линии, окрашивать их в различный цвет и дополнять эффектом прозрачности. Можете вставлять в шаблон свои портреты, логотипы, изображения и фотографии. Также можно редактировать и добавлять текстовый элемент, придавать прозрачность и цвет тексту, применяя особый эффект, создавать тень у текста и заниматься корректированием вертикального и горизонтального смещения тени. Таким образом, шапка для сайта может получиться оригинальной и интересной.