Составные части сайта
Большинство сайтов состоят из нескольких частей. В зависимости от стиля страницы и её задач, этих частей может быть больше или меньше, но обычно они включают в себя следующее:
- шапка — верхняя часть страницы
- главная часть — место, где расположена информация по теме страницы
- подвал — нижняя часть сайта
- навигация — инструмент дизайна, который позволяет пользователям переходить из одного раздела сайта к другим
Шапка
Шапка — это верхняя часть страницы. Зачастую шапка визуально отделена от прочих составляющих дизайна. В основном, в шапке находится информация, которую пользователь должен заметить прежде всего, которая привлекает внимание и подталкивает к дальнейшему чтению сайта. Кроме того, там располагаются основные инструмента успешного пользования сайтом, такие как навигация, панель выбора языков, форма авторизации и т.п.
Главная часть
Главная часть страницы — это главная информация сайта, то, ради чего и разрабатывался конкретный портал. Главная часть может включать в себя и дополнительную информацию, например рекламные баннеры. Главная часть может быть разделена на основную и дополнительную информацию. В данном случае используют приёмы веб дизайна, которые позволяют показать это различие, например колонки разной ширины.
Подвал
Подвал — это нижняя часть сайта. В нём обычно размещают информацию, которая не нужна пользователю сразу, но которая может быть полезна после просмотра главной части. Это может быть дополнительное меню, элемент call to action, который побуждает клиента приобрести описанный продукт, или новые записи в блоге, которые дают пользователю повод задержаться на сайте.
Навигация
Навигация — это инструмент веб-дизайна, который позволяет пользователю легко и эффективно перемещаться по разделам сайта. Навигация избавляет пользователя от необходимости знать URL-адрес каждого раздела — именно поэтому сайтов без навигации почти не существует, так как такие порталы невозможно использовать хоть сколько-нибудь продуктивно. Навигация может быть реализована и как отдельное меню, и как гиперссылки.
Меню
Меню — это сгруппированные гиперссылки, которые, как правило, отождествляют отдельные разделы сайта. Каждая ссылка — название такого раздела. Меню могут включать в себя дополнительные меню, которые также указывают на взаимоотношению разделов — иерархию сайта. Обычно для меню разрабатывается отдельный дизайн.
Навигация гиперссылок
Навигация гиперссылок — это тип навигации, который использует рассеянные, несгруппированные ссылки для того, чтобы обеспечить переход из одних разделов сайта в другие. В данном случае ссылкой может стать слово из главной части сайта, иконка или изображение, которое тематически связано с другим разделом сайта. Для гиперссылок также разрабатывается отдельный дизайн, однако он, как правило, несложен, иначе текст, в который вставлена ссылка, будет выглядеть негармонично.
Свяжитесь с нами
улица Лачплеша, д. 87,
город Рига, LV-1011, Латвия
+371 2893 6776
Отправить нам письмо
Элементы интерфейса сайта
Элементы интерфейса, их еще называют элементы управления, которые используются при разработке сайта и при его использовании. Рассказываем, что есть что на самом деле.
Кнопка — элемент, при нажатии на который происходит какое-то действие на сайте.
Radiobutton — позволяет пользователю выбрать одну опцию.
Checkbox — позволяет выбрать несколько опций.
Select — позволяет пользователю выбрать одну опцию из выпадающего списка.
Accordeon — элемент интерфейса состоящий из заголовков и скрываемого и открываемого контента.
Слайдер — переключатель изображений (или другого контента) работающий автоматически или вручную.
Контент — текст, изображения, видео, то есть наполнение сайта.
Popup — небольшое всплывающее окно в углу экрана.
Модальное окно — разновидность всплывающего окна. Оно появляется на большую часть экрана и блокирует работу с остальным сайтом. Это может быть форма обратной связи, или просмотр фотографий в вк и фейсбуке.
Блок (Экран) — смысловой элемент включающий в себ я информацию только об одной сущности. Обычно блок начинается с заголовка и отделен от следующего каким-либо визуальным решением, цветом, линией, тенью.
Раздел — страница сайта. Тут все просто.
Шапка (хеддер / header) — самая верхняя часть сайта. Обычно в ней расположены логотип, меню и контактная информация. Шапка чаще всего бывает закрепленной, т.е. она перемещается вместе с перемещением пользователя по странице.
Подвал (футер / footer) — самая нижняя часть сайта. Чаще всего в ней расположена карта сайта, контактные данные, быстрые ссылки на популярные разделы, копирайт, политика конфиденциальности и ссылка на разработчика сайта.
Галерея — набор из нескольких изображений.
Превью (preview) — изображение или часть другого контента, уменьшенная в размере. При нажатии на превью открывается исходный размер контента, отображаемого в превью.
Бордер — обводка элемента. Бывает solid (цельной), dashed (линиями) и dotted (точками).
Тултип (tooltip) — подсказка, всплывающая при наведении на элемент.
Курсор Поинтер (Pointer) — тип курсора в виде руки с вытянутым указательным пальцем. Обычно появляется при наведении на ссылку.
Курсор Текст (Text) — тип курсора, стандартный для редактирования текста.
Навигация — любой вид элементов позволяющий перенаправлять пользователя на похожий элемент будь то страница, другая картинка, следующий текст и так далее.
П агинация — нумерация страниц, обычно отображенная как навигация в конце страницы.
Списки — в веб интерфейсах присутствуют нумерованные списки (цифрами), маркированные списки (точки, квадратики, кружки, черточки) и списки определений.
Стрелочки — вид навигации.
Поисковая строка — строка для ввода поискового запроса.
Плеер — элемент воспроизводящий аудио и видеофайлы.
Ползунок — предназначен для ввода чисел в указанном диапазоне.
Текстовое поле — поле для ввода текстовых значений.
Поле пароля — поле для ввода пароля. Автоматически скрывает символы, заменяя их на точки.
Маска — это значения, указывающие формат допустимых значений входных данных в поле.
Ссылка — элемент интерфейса перенаправляющий вас по адресу, указанному в нем.
Состояние ссылок и кнопок: Hover (Ховер) — состояние выбранного элемента при наведении на него курсора мыши (важно знать — в мобильных устройствах нет этого состояния)
Состояние ссылок и кнопок: Focus (Фокус) — состояние выбранного элемента при переключении между элементами клавишей tab (чаще всего это синяя обводка вокруг элемента)
Состояние ссылок и кнопок: Active (Эктив) — состояние выбранного элемента в момент нажатия на него.
Якорь — элемент интерфейса перенаправляющий вас по адресу и к конкретному элементу, указанному в нем.
Вкладки (табы) — элемент интерфейса, так же как и аккордеон, состоит из заголовка и скрытого контента, на который можно попасть при обращении к заголовку.
Строка загрузки — элемент, показывающий степень загрузки контента или исполняемой функции.
Переключател ь (switch) — элемент интерфейса, который позволяет выбрать одно из состояний, чаще всего вкл/выкл.
Алерт окно — всплывающее окно, блокирующее взаимодействие пользователя не только с элементами на данной страницы, но и в целом со всем браузером.
П релоадер (Preloader) — анимированный элемент, воспроизводящийся в процессе загрузки сайта, видео, изображений и другого контента.
Рейтинг (Rating bar) — элемент интерфейса показывающий среднюю оценку.
Теги — элемент чаще всего располагающийся под контентом. Показывает принадлежность статьи, товара и пр. к конкретной категории. Зачастую при нажатии на тег, вы попадете на страницу со всем контентом, у которого есть такой тэг
Хлебные крошки — навигационная цепочка — элемент интерфейса, показывающий путь от начала до того уровня, где в данный момент находится пользователь.
как называется верхняя часть сайта (шапочка?)
называют header (шапка сайта) — в шапке сайта могут быть название компании, логотип компании, главное меню, телефоны.
шапка сайта — хэдер
подвал сайта — футер
Похожие вопросы
Ваш браузер устарел
Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.
Структура сайта: полное руководство
Хороший сайт похож на собранную мозаику: совершенно разные элементы в нем идеально соединяются друг с другом, образуя цельную и красивую картинку.
Перед тем, как создать собственную страницу , необходимо разобраться, как устроена структура сайта. В этом руководстве вы узнаете, из чего состоит сайт, а также познакомитесь с базовой терминологией веб-дизайна.
Структура сайта: базовые части
Все части в этом разделе необходимы для корректной работы сайта — поэтому убедитесь, что они присутствуют на каждой странице.
1. Хедер и меню Хедер (который еще называют «шапкой» сайта) — располагается в самом верху страницы над контентной частью. Он почти всегда включает в себя логотип и верхнее меню, которое помогает посетителям с навигацией по сайту.
От типа страницы зависит, что именно будет располагаться в хедере. Например, если вы планируете создать интернет магазин , логично поместить в хедер различные категории товаров — так посетитель быстрее найдет то, что ему нужно. Сайт благотворительной организации может поместить в хедер форму для пожертвований или ссылку на релевантную страницу, чтобы наверняка привлечь внимание читателя.
В любом случае, при одном взгляде на хедер посетителю должно быть понятно, куда идти и на что нажимать: так вы удержите внимание читателя и уменьшите показатель отказов.
2. Визуальная часть
Сразу после хедера обычно следует раздел с изображением, серией изображений или видео. Хедер и визуальную часть под ним обычно называют «обложкой» или «первым экраном». Обложка играет решающую роль в создании первого впечатления и зачастую определяет, останется ли посетитель на сайте или закроет страницу после пары секунд.
Помните, что визуальная часть должна быть напрямую связана с контентом сайта. Например, интернет магазин может разместить на обложке изображения продукции, а сайт портфолио — изображение фрилансера или его лучшие работы. Выбирайте изображения и видео в высоком разрешении — это придаст сайту профессиональный облик.
3. Контентная часть
Контентная часть следует сразу после обложки, и содержит более подробную информацию о владельце сайта, бизнесе или организации. Здесь вы можете поместить короткий текст о себе или о бренде, расписать философию компании, поместить небольшую галерею с товарами-бестселлерами или просто оставить кнопку с призывом к действию. Главное, чтобы после прочтения этой части у посетителя не оставалось вопросов, о чем именно ваш сайт.
4. Футер
Футер (еще называемый «подвалом») — это самая нижняя часть сайта. Обычно на ней дублируется меню с ссылками на все важные страницы, включая те ссылки, которые не представлены в хедере.
Кроме этого, в футер помещают адрес, номер мобильного телефона и другую контактную информацию. Эта часть особенно важна для владельцев бизнеса, которые хотят оставаться на связи с клиентами.
И наконец, в футере располагаются ссылки на социальные сети — списком или в виде миниатюрных иконок. Это помогает привлечь новых пользователей, сформировать клиентское сообщество и повысить узнаваемость бренда.