32 главных термина веб-дизайна

Хедер, чекбокс, выключка, мокап —  знакомые слова? Если нет, мы подготовили краткий словарь: он пригодится тем, кто планирует делать сайт самостоятельно или  формулировать ТЗ для дизайнера и верстальщиков. Рассмотрим ключевые элементы интерфейса и этапы его создания, чтобы вы могли говорить с дизайнерами на одном языке.

Основные элементы

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

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

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

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

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

Навигация

Почти на любом сайте есть меню — список ссылок для навигации. Существует несколько типов.

Горизонтальное меню. Обычно располагается в хедере и содержит основные разделы сайта.

Вертикальное меню. Находится в сайдбаре или в отдельной колонке.

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

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

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

Формы и интерактивные элементы

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

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

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

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

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

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

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

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

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

СТА-кнопка. Побуждает пользователя что-то сделать: «Купить сейчас», «Зарегистрироваться», «Узнать больше». CTA — это аббревиатура от англ. call to action, т.е. призыв к действию. Такие кнопки должны быть заметными: контрастировать с фоном и располагаться на видном месте.

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

Другие графические элементы

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

Баннер — графическое изображение, которое используется для рекламы или привлечения внимания к определенному элементу на сайте. Могут размещаться как и в сайдбаре, так и на основной части экрана.

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

Источник

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

Галерея — способ отображения нескольких изображений на одном экране. 

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

Карточка товара нужна для отображения информации о товаре на сайте интернет-магазина или маркетплейса.

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

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

Типографика

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

Интерлиньяж — вертикальное расстояние между строками текста. Он измеряется в пунктах (pt) или пикселях (px) и оказывает существенное влияние на удобочитаемость текста. Слишком маленький интерлиньяж затрудняет чтение, так как строки «слипаются» друг с другом. Слишком большой интерлиньяж также ухудшает читабельность, так как нарушает целостность строк и абзацев. 

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

Процесс дизайна

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

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

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

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