← НАЧИНАЮЩЕМУ / статья

Из чего состоит сайт

Элементы пользовательского интерфейса

Тексты

• любые слова
• заголовки
• пояснения
• описания
• контекстная справка
• всплывающие подсказки
• надпись на кнопках и баннерах

Графика

• картинки
• флэш-ролики
• видео-ролики
• фон и другие элементы дизайна

Навигация

• меню
• навигационная панель
• ссылки
• “хлебные крошки” — элемент навигации по сайту, представляющий собой путь по сайту от его «корня» до текущей страницы, на которой находится пользователь
• карта сайта и другие элементы навигации

Формы

• поля для текстового ввода
• списки выбора (раскрывающиеся списки, радиогруппы, флажки)
• кнопки и другие элементы управления

Структура сайта

Главная

Главная страница сайта.

Хедер (header), шапка

Узкий блок в верхней части сайта. Обычно там помещаются: логотип, главное меню, кнопки корзины, личного кабинета.

Бывает плавающим, когда во время скролла хедер остаётся вверху экрана и всегда виден пользователю. И обычным, когда во время скролла уползает за пределы видимости.

Футер (footer), подвал

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

Хиро (hero)

Первый экран. То, что пользователь видит на первом экране, после открытия страницы. Хиро ещё называют такие большие баннеры на первом экране.

Карусель

Например, это сменяющиеся баннеры, которые сами листаются или с помощью кнопок. На главной, это такие большие баннеры на первом экране.

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

Каталог

Страница со всеми товарами/услугами, которые предлагает сайт. Обычно, товары там представлены в виде небольших карточек (блоков) с кнопкой купить.

Карточка товара

Отдельная страница сайта, где показано и рассказано о конкретном товаре/услуге.

Корзина

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