Красивая шапка для сайта – Дизайн шапки сайта (хедера) — назначение и проектирование элемента

Красивая шапка для сайта — ее структура, создание и мода

Шапка или Header – это верхняя часть сайта, обычно общая для всех его страниц. При загрузке страницы первой появляется именно она.

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

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

Чем она лучше будет у вас сделана, тем больше положительных эмоций вызовет ваш сайт у посетителей.

Что и как должно находиться на шапке

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

С целью привлечь посетителей в шапку помещают:

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

• слоган компании, сайта – он должен описать суть всей информации на станицах;

• контактные данные для коммерческих лиц, организаций;

• контекстное меню или карта;

• блоки рекламы.

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

Должен прослеживаться единый стиль и цветовая гамма со всем сайтом. Достаточно сложно определить ее высоту.

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

Как получить красивую шапку

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

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

• заказать у фрилансеров. За небольшие деньги мастера готовы создать любую шапку, насколько она красивая и удобная будет зависеть от профессионализма;

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

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

Мода на шапки для сайтов

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

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

• по размеру на всю страницу

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

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

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

• минималистичность все еще в моде;

• объем. Уделяется большое внимание приданию странице глубины и объема, для этого в шапке пользуются приемами создания 3D эффекта.

Яркая или однотонная, с большим объемом информации или только с самым необходимым, большая или маленькая, динамичная или статичная – шапки для сайтов бывают самыми разными.

Все зависит от целей ее создания, от желания владельцев сайтов и от фантазии дизайнеров.

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

seoslim.ru

Разработка шапки сайта: как создать красивый хедер

Что такое хедер сайта?

Хедер (header) — это элемент веб-страницы, лежащий выше области контента.

Если описать веб-страницу «архитектурными» терминами, то футер — это подвал сайта, область контента — стены и окна, а хедер — крыша.

Или, как его имеют в нашей среде — шапка сайта.

Как ни назови, header – стратегическая область, которую придирчиво оценивает каждый пользователь прежде, чем начать скроллинг и изучение страницы.

Шапка сайта показывается в первые секунды взаимодействия, поэтому она стала настоящим испытательным полигоном для психологов и маркетологов.

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

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

Почему хедер важен для бизнеса?

Начнем с того, зачем создаются все коммерческие сайты. Бизнесу нужно привлечение внимания, удержание посетителей, высокие конверсии и продажи.

Веб-дизайнеры называют ряд причин, почему красивый хедер — жизненно важный элемент коммерческих сайтов (кстати, бывают и без хедера — о них позже).

Основная причина в том, что при первом зрительном контакте со страницей глаза человека совершают характерный зигзаг (как на рисунке). Первые впечатления мозг формирует на основании элементов 1 и 2 — в верхней части экрана.

Эта схема была подтверждена экспериментами компании Nielsen Norman Group, и широко используется в повседневной работе дизайнеров и специалистов UX.

Когда посетитель впервые приземлился на домашней странице компании, он быстро просматривает шапку — сканирует ее в надежде зацепиться взглядом за интересный объект. Вы должны предоставить такой объект.

Исследования в области ай-трекинга показывают, что взгляд пользователя «сканирует» страницу по трем основным паттернам. Помимо упомянутого выше Z-паттерна, это может быть F-паттерн и так называемая диаграмма Гутенберга.

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

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

«Люди судят о качестве веб-сайта за пару секунд, а «второго впечатления» в Интернете не существует. Сайт, который сразу не приковывает взгляд, будет провалом бизнеса», — считает известный продакт-менеджер Богдан Санду.

Не забывайте и о функциональной стороне шапки — она содержит меню.

Несмотря на это, далеко не каждый сайт имеет header.

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

Что включить в шапку сайта?

Header может содержать обширный набор элементов:

• Символы идентичности бренда: логотип, название, слоган компании, фотографии представителей и офиса, корпоративные цвета

• Блок контента, презентующий продукты или услуги компании

• Ссылки на основные разделы веб-сайта (навигация)

• Ссылки на самые популярные социальные сети

• Контактная информация (телефонный номер, email)

• Переключатель языковых версий сайта

• Кнопка подписки по электронной почте

• Поле для поисковых запросов

• Ссылка на мобильное приложение

• Ссылки для взаимодействия с продуктом

Мы не говорим, что все эти элементы нужно втиснуть в header.

Некоторые из них вовсе не рекомендуются в современном веб-дизайне.

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

А публикация адреса электронной почты — мишень для спамовых рассылок.

И вообще, избегайте перегруженности хедера любой ценой. Чем больше объектов одновременно борются за внимание пользователя, тем меньше его останется.

Выбирая, что убрать, а что включить в шапку сайта, веб-дизайнерам стоит посоветоваться с маркетологами компании. Это серьезное решение!

Читабельность и визуальная иерархия

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

Цель проста: пользователь должен просканировать ключевую информацию и сформировать как можно лучшее мнение о сайте за как можно меньшее время. Иначе ваш интерфейс можно обозвать non-user-friendly.

Также не забывайте, что header по-разному влияет на скроллинг страницы.

Некоторые веб-сайты используют фиксированный (липкий) хедер, который всегда остается в верхней части экрана и готов помочь пользователю своими ссылками.

Другие предпочитают скрывать шапку в процессе скроллинга. Существуют и такие, где header уменьшается при прокрутке, оставляя только самое важное.

Гамбургер-меню

Самый вкусный элемент верхней части веб-страниц — это гамбургер-меню.

Для новичков поясним, что так называют три горизонтальные полоски, скрывающие меню. Согласитесь, они напоминают «хлеб-мясо-хлеб» в популярном бутерброде!

Гамбургер-меню освобождает много места, позволяя сделать интерфейс минималистичным и стильным, полным негативного пространства. Ранее мы писали, что гамбургер остается актуальной зарубежной тенденцией веб-дизайна в 2018 году.

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

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

Двойное меню в шапке сайта

Двойное меню — это два слоя навигации друг под другом.

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

Целесообразность двойного меню в шапке сайта нельзя назвать бесспорной, поэтому для каждого конкретного проекта нужно проводить А/В тестирование.

Советы по разработке шапки сайта

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

Header для брендинга личности

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

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

Даже если посетитель никогда не встречал вас, неоднократное созерцание вашего лица со временем заставит почувствовать, что вы хорошие знакомые.

При разработке хедера веб-сайта для брендинга личности целесообразно использовать фотографии, логотип, имя.

Действительно красивый хедер на сайте Ани Лорак — глаз не оторвать!

Header для брендинга бизнеса

Если это очередной корпоративный сайт, то нужно понимать: логотип и название компании в шапке не «порвет Интернет», как принято сейчас выражаться.

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

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

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

Header для брендинга товаров и услуг

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

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

Рассмотрите возможность включения фотографий, логотипа товара, краткого описания и лаконичного, информативного подзаголовка.

Отличный пример — веб-сайт агентства по организации праздников в Казахстане Joyday. Огромная шапка с первого взгляда настраивает на выходные!

Веб-сайты без шапки

Header занимает драгоценные пиксели в верхней части экрана, что не всегда оправданно.

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

При разработке веб-сайта подумайте, действительно ли нужна шапка?

Является ли она критичной для навигации? Или для воронки продаж?

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

Вы можете удивиться собственным выводам!

sdvv.ru

43 креативные шапки для сайта|Создание и продвижение сайтов

Хороший дизайн шапки для сайта требует как наличие творческой идеи, так и согласованность с общей темой сайта. Большая и красивая шапка на сайте привлекает и удерживает внимание посетителей и остается в их сознании еще долго после того, как они покинули сайт. В данной подборке собрано более 40 креативных шапок для сайтов, которые могут послужить хорошим творческим примером для вдохновения дизайнерам. Некоторые стимулируют эмоции и активно привлекают внимание, а другие выглядят более просто и элегантно. Различные стили, краски, цвета — надеемся, что Вы найдете для себя именно то, что нужно и получите вдохновение, чтобы попробовать нарисовать что-то новое!

 

1. Cow & Monkey

 

2. Chris Hortsch

 

3. Biola University

 

4. Lisa Moseley

5. Cogitatur

 

6. Dorian Design

 

7. Orpheux Design

 

8. Toucouler

 

9. Mutiny Design

 

10. Octwelve

 

11. Arbutus Photography

 

12. Kitschen Sink

 

13. Cleverful

 

14. eruANNA

 

15. Branded 07

 

16. Kirdan

 

17. Devia

 

18. Pally Giraffe

 

19. Mail Chimp

 

20. Corvus Design Studio

 

21. Hopkins Design

 

22. Carton Blanc

 

23. Web Designer Wall

 

24. Phizz

 

25. Marchand De Trucs

 

26. Beautiful 2.0

 

27. Digimuarai

 

28. The Octonauts

 

29. Art Viper

 

30. Web.Burza

 

31. Enhanced Innovations

 

32. Dr. Martian

 

33. Magouya

 

34. Dizzain

 

35. Dorotheu

 

36. Kimberly Coles

 

37. R0man

 

38. Icon Dock

 

39. Be Studios

 

40. New Era Cap Talk

 

41. HTMLCut

 

42. Enrichmint

 

43. Designwise Studios

Источник

lionstudio.com.ua

Дизайны шапки сайта – красивые примеры готовых оформлений, шаблоны

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

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

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

Что должно быть в шапке сайта, какой она должна быть?

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

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

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

Верстка шапок сайта

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

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

sajt-vizitka-nedorogo.ru

Как оформить шапку сайта: практические советы

Начнем с основных показателей хорошей шапки.

Необходимый минимум — именно по этому принципу нужно выбирать информацию, которая будет шапке. Все способы связи, действующие акции, 2-3 и больше кнопок, адреса — в общем не делайте из шапки смесь страницы «Контакты», карточки товара и страницы «О нас». Оставьте самое главное — телефон, часы работы, логотип, обратный звонок — как вариант. На этот счет изучите сайты своей и смежных сфер — они всегда тестируют варианты, следят за тенденциями и выбирают лучший.

Обязательные элементы

Логотип

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

Не делайте логотип «центровым» элементом главной страницы — вашему клиенту важно решить свою проблему, а не оценить старания дизайнера. Самое важное — это соответствие запросу и ожиданиям; релевантность главной страницы и сайта вообще, если объявление контекстной рекламы ведет сюда.

С первого взгляда на шапку пользователь должен понимать, куда пришел и что может получить здесь.

Создайте свой логотип за минуту:

Краткое описание

Оно всегда расположено рядом с логотипом. Это емкий текст о том, чем именно занимается или почему выгодно сотрудничество с компанией/магазином (уникальное торговое предложение).

Номер телефона

Есть три варианта: указать его в шапке крупным шрифтом, более мелким или вообще прописать только на странице «Контакты». Все зависит от того, откуда именно вы получаете максимум заказов. Эти данные у вас должны быть обязательно.

Не пишите в шапке все имеющиеся номера, особенно, если вы работаете на несколько регионов. В этом случае оправдано будет подключить номер 8-800, единый для всех областей, и обязательно при публикации сделайте акцент шрифтом, что номер бесплатный. По возможности укажите номер текстом, а не в виде изображения, чтобы его можно было скопировать или сразу набрать: +7 (ХХХ) ХХХ-ХХ-ХХ. Не забывайте про мобильных пользователей, которые могут звонить вам прямо из шапки.

Часы работы

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

Второстепенная информация

Адрес

Он обязателен только в том случае, если вы работаете на один регион или многие клиенты забирают покупки самовывозом. Если такой тенденции нет или вы работаете на несколько регионов, указывайте адреса в разделе «Контакты». Клиент найдет их, если возникнет необходимость.

Обратный звонок

Если он работает и посетители пользуются, оставьте кнопку в шапке. Если запрос отсюда — скорее исключение (специфика аудитории), можно смело убирать, и на его месте указать более полезную информацию или функцию.

Корзина, Личный кабинет

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

Кнопка CTA

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

Не для шапки

Акции и специальные предложения

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

Агрессивный CTA

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

Слоганы, красивые фразы, цитаты и пр.

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

Длинные формулировки

Если информацию можно сообщить справочно, выберите именно такую подачу. Например: «Рабочие дни: пн-сб с 10 до 22. Вскр — выходной». Это понятно и доступно, можно без указания выходных.

Рекомендации

• Шапка не должна занимать весь первый экран, даже если это изображение вам очень нравится. Высота, по возможности, до 250 пикселей.
• Не используйте теги h2-H6 для текста шапки, т. к. это может повлиять на оптимизацию.
• Если у вас много текстовых материалов и ассортимент свыше 10-ти товаров, в шапке сайта должен присутствовать поиск.
• Помните, что шапка будет одинаковой на всех страницах сайта. Следите за тем, чтобы она не контрастировала с другими страницами.
• Пункт меню «Главная» сохраните, т. к. не все кликают по логотипу, чтобы вернуться на главную.

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

Выводы

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

fortress-design.com

Красивая шапка для сайта c помощью jQuery

Красивое оформление сайта всегда заставляет пользователя привлечь свой взор к ресурсу. Никому не секрет, что унылые дизайны сайтов отходят на задний план с выходом новых технологий. Поэтому мы рассмотрим как можно красиво оформить часть сайта, создав эффект в стиле «открытие занавесы» с помощью jquery. Идея заключается в том, что вы дергаете за веревочку и занавесы раскрываются в разные стороны. Это довольно интересное применение jQuery и Вам решить, где его употребить. При небольшой доработке и хорошем воображении..

 ..может получиться что-нибудь уникальное. Если вы заметили, то изображения находятся в формате .png, тут следует заметить, что в IE6 (Как свидетельствует статистика, люди еще пользуются таким «браузером»), возможно неправильное отображение демо, а именно прозрачности PNG. Прежде чем приступить к уроку следует заметить, что мы будем использовать фреймворк jQuery и плагин «easing» (для плавного открытия и закрытия).  И так, приступим, для начала мы рассмотрим разметку HTML:

<head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″/> <title>Красивая шапка для сайта c помощью jQuery | Демонстрация для сайта RUDEBOX</title> <script type=»text/javascript» src=»http://jqueryjs.googlecode.com/files/jquery-1.3.2.js»></script> <script src=»jquery.easing.1.3.js» type=»text/javascript»></script>   </head>   <body> <div><img src=»images/frontcurtain.jpg»/></div> <div><img src=»images/frontcurtain.jpg»/></div> <img src=»images/buildinter.png»/> <a href=»#»> <img src=»images/rope.png»/> </a> </body>

Далее рассмотрим стили CSS. Для этого мы создадим два блока «штор» (.leftcurtain и .rightcurtain), которые закреплены по обеим сторонам. Это достигнуто благодаря CSS и атрибутам top и left.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

*{ margin:0; padding:0; } body { text-align: center; background: #000 url(‘images/darkcurtain.jpg’) repeat-x; } img{ border: none; } .leftcurtain{ width: 50%; height: 495px; top: 0px; left: 0px; position: absolute; z-index: 2; } .rightcurtain{ width: 51%; height: 495px; right: 0px; top: 0px; position: absolute; z-index: 3; } .rightcurtain img, .leftcurtain img{ width: 100%; height: 100%; } .logo{ margin: 0px auto; margin-top: 150px; } .rope{ position: absolute; top: -40px; left: 70%; z-index: 4; }

Вы можете заметить, что каждой шторе мы назначили ширину, 50% и 51%. Разница в ширине скрывает некоторые неправильные углы при закрытой шторе. В уроке использован z-index для того, чтобы шторы всегда были поверх других элементов.  Класс .logo содержит содержание того, что находится под шторой. Класс .rope помещает графику с веревкой поверх всего и прячет часть над экраном, чтобы достигался эффект «дергания за веревку».

Далее рассмотрим jQuery. И так, когда все готово, мы утверждаем, что шторы закрыты с помощью переменной $curtainopen = false. Эта переменная используется для определения состояния штор, и какую анимацию выполнять.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<script type=»text/javascript»> $(document).ready(function() {   $curtainopen = false;   $(«.rope»).click(function(){ $(this).blur(); if ($curtainopen == false){ $(this).stop().animate({top: ‘0px’ }, {queue:false, duration:350, easing:’easeOutBounce’}); $(«.leftcurtain»).stop().animate({width:’60px’}, 2000 ); $(«.rightcurtain»).stop().animate({width:’60px’},2000 ); $curtainopen = true; }else{ $(this).stop().animate({top: ‘-40px’ }, {queue:false, duration:350, easing:’easeOutBounce’}); $(«.leftcurtain»).stop().animate({width:’50%’}, 2000 ); $(«.rightcurtain»).stop().animate({width:’51%’}, 2000 ); $curtainopen = false; } return false; });   }); </script>

Еще одно события происходит при нажатии .rope. Данное события запускает открытие\закрытие штор. Вот и все. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также:

www.rudebox.org.ua

Протаптываем тропу к успеху: юзабилити для шапки сайта

От автора: привет, друзья! Вы все наверняка знаете такую поговорку: «Встречают по одежке, а провожают по уму». Так вот, не хочется вас, конечно, расстраивать, но это правда, и касается она не только реальной жизни, но и виртуальной. Вспомните сами, сколько раз бывало, что заходишь на веб-страницу, а там такой отвратительный дизайн, что глаза начинали слезиться, да еще и кнопки неудобно расположены. Чтобы ваш интернет-ресурс не раздражал никого своим безвкусием, рекомендую еще при разработке особое внимание уделить юзабилити для шапки сайта. Как оформить «верхушку» ресурса, чтобы она работала на вас, и какие элементы она должна в себя включать, читайте далее.

Шапка интернет-ресурса — что это такое?

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Хочу сразу отметить, что «верхушка» не обязательно должна сливаться с остальными элементами веб-ресурса, она может быть выполнена в совершенно другом стиле. Высоту вы также выбираете сами.

Роль шапки в продвижении сайта

Друзья, если вы думаете, что главную роль в раскрутке сайта играет его контент, то прошу меня простить за разрушенное мировоззрение . Первое впечатление о веб-ресурсе всегда задает его внешний вид, а особенно его «header». Он влияет не только на общую привлекательность интернет-страницы, но и на юзабилити сайта. Поэтому при разработке своего веб-ресурса, отнеситесь со всей серьезностью к вопросу того, как сделать красивую шапку сайта.

Если у вас достаточно средств, чтобы нанять профессионального дизайнера для разработки хэдера для своего ресурса, то сделайте это без промедлений, и высокое качество вам гарантированно. В случае, когда каждая копеечка на счету, не спешите расстраиваться. Вы можете сами научиться делать графические элементы для интернет-проектов, например, пройдите видеокурсы по веб-дизайну или научитесь темизации WordPress. Тут вы конечно потратите намного больше времени, зато обретете полезные навыки, которые 100% пригодятся вам в будущем.

Создаем модный и удобный «головной убор» вместе

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

Логотип.

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

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

Избегайте подобных моментов, ведь вероятность того, что пользователь покинет такой сайт, не купив товары и услуги, в разы увеличивается! Запомните: логотип размещаем в верхнем левом углу!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Контактный номер телефона.

Телефон по правилам юзабилити необходимо размещать в правом верхнем углу шапки сайта. Не заморачивайтесь: «почему?», «зачем?» — просто так сложились традиции веб-дизайна. И нарушать их я не советую. За долгие годы существования Всемирной паутины было немало экспериментаторов, но успех имеет именно это правило.

Если человек зашел на ваш веб-ресурс и решил заказать у вас услугу или купить товар, то он обязательно свяжется с вами по телефону. Его поиск ни в коем случае не должен отнимать у посетителя много времени. Разместить телефон справа сверху — отличное решение при проектировании верхней части сайта.

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

Меню с навигацией.

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

Лаконичный заголовок.

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

Изображение, соответствующее тематике веб-ресурса.

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

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

Удобная форма обратной связи.

Чаще всего, на подсознательном уровне, после просмотра верхней части ресурса, посетитель сразу принимает решение купить тот или иной товар, а страничку пролистывает вниз просто так, по привычке. Поэтому, важную роль в юзабилити вашего сайта будет играть простая и удобная форма заказа. Она должна содержать не более 2-3 полей.

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

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

Я надеюсь, моя статья была полезна. Подписывайтесь на наш блог! До новых встреч!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Верстка-Мастер. От теории до верстки популярных шаблонов

Изучите современную верстку сайтов с нуля

Подробнее

webformyself.com