Что значит респонсив дизайн, чем трекинг отличается от кёрнига и почему «гамбургер» в шапке сайта — не всегда хорошая идея. Объясняем слова, которыми пользуются создатели сайтов.
1
CSS, или каскадные таблицы стилей
Язык описания внешнего вида сайта. CSS задаёт нужные свойства элементам страницы: указывает размер колонок и полей, шрифты для заголовков и цвет фона. Отличие каскадных таблиц от HTML заключается в том, что второе структурирует информацию на сайте, а первые её оформляют.
2
Гайдлайн
Правила, которые определяют, как должна выглядеть страница или макет. Гайдлайн фиксирует, какие цвета, шрифты и отступы нужно использовать в дизайне, а также определяет базовые элементы интерфейса и их свойства. В идеале такие правила помогают придерживаться айдентики вашего бренда.
3
Респонсив дизайн
Один из способов оптимизировать внешний вид сайта для разных устройств, например, планшетов и смартфонов. Его придумал американский дизайнер Итан Маркотт. Респонсив дизайн использует «резиновый макет», который автоматически подстраивается под изменение параметров экрана. Это происходит, поскольку элементам не задают конкретные размеры в пикселях или дюймах, а указывают относительные в процентах.
4
Адаптивный дизайн
Ещё один способ подстроить внешний вид сайта под различные устройства. В отличие от респонсив дизайна, адаптивный дизайн использует несколько готовых макетов с заданными размерами и свойствами. Когда человек заходит на сайт, сервер определяет, какой шаблон нужно отобразить пользователю.
5
RGB
Цветовая модель, используемая в дизайне, который будет отображаться на цифровых устройствах. В основе RGB лежит смешение красного, зелёного и синего (red, green, blue). Лучи этих цветов накладываются друг на друга, окрашивая изначально черный экран, в результате чего появляются новые оттенки. Модель позволяет создать почти 17 млн цветов.
6
SVG
Формат файлов с векторной графикой — рисунками на основе опорных точек и кривых. Изображения, сохранённые как SVG, мало весят и масштабируются без потери качества, так как их размер и разрешение не зависят от количества пикселей. Обычно для сайтов в формате SVG сохраняют иконки и логотипы.
7
Кернинг
Изменение расстояния между соседними символами в словах. Стандартные интервалы между шрифтовыми знаками могут придавать тексту неряшливый вид, поскольку они не учитывают особенности начертания каждой буквы и цифры. Кёрнинг применяют, чтобы пробелы между знаками визуально выглядели одинаково, даже если фактически это не так.
8
Трекинг
Изменение интервала между группой знаков: в слове, предложении или абзаце. С помощью трекинга можно сделать текст визуально плотнее или легче, увеличив межбуквенный пробел. Его часто используют в печатных изданиях, чтобы избавиться от «висячей строки» — пары слов в конце абзаца, которые во время вёрстки оказались в следующей колонке или на следующей полосе. В веб-дизайне трекинг может быть полезен при создании заголовков.
9
Интерлиньяж
Межстрочное расстояние, которое можно менять, чтобы увеличить читаемость текста или акцентировать внимание на его фрагменте. Обычно интерлиньяж должен быть на 20-30 % больше основного текста: если вы набираете свои статьи 14-м размером шрифта, то расстояние между строками должно составлять 16,8 или 18,2 пункта. Пункт — единица измерения шрифта. Один пункт равен 0,352 мм.
10
Выключка
Выравнивание текста относительно вертикальной границы блока. Существует несколько видов выключки: по левому краю, когда текст выравнивается по левой границе и обрывается справа (как, например, на сайте «Мастеров»), по правому краю, по центру и «по формату» — то есть по всей ширине блока, как в курсовых и дипломных работах.
11
Хедер, или шапка
Верхняя часть и «визитная карточка» площадки, которая не меняется при переходе на другую страницу. Поскольку интернет-пользователи до сих пор проводят большую часть времени в верхней части сайта, хедер считают одной из важнейших зон интернет-ресурса. Обычно шапка включает логотип, контактную информацию и меню с кнопками call-to-action. Последнее помогает человеку ориентироваться на площадке, направляя его в нужные разделы.
12
Футер, или подвал
Нижняя часть ресурса, которая тоже видная на всех его страницах. Футер содержит полезную, но не первостепенную информацию: карту сайта, контакты, ссылку на политику конфиденциальности и раздел с вакансиями. Основные задачи подвала — показать пользователю, что контент закончился и ему бесполезно скроллить дальше, и ещё раз подтолкнуть его к совершению целевого действия. Иногда в футере дублируют пункты меню из шапки — так человек, просмотревший страницу до конца, сможет перейти в нужный ему раздел, не прокручивая сайт ещё раз.
13
Гамбургер
Иконка раскрывающегося меню в виде трёх полосок. «Гамбургер» позволяет не перегружать хедер большим количеством информации. Хотя три полоски можно встретить практически на любом сайте, исследования показывают, что пользователи до сих пор не до конца понимают, зачем они нужны, и на десктопе таким меню пользуются лишь 27 % людей.
14
Ховер
Изменение дизайн-элемента при наведении на него курсора. К ховер-эффектам относят и всплывающие подсказки, и затемнение фотографии, и масштабирование изображений. Такой приём делает площадку более интерактивной и увеличивает время, проведённое пользователем на ресурсе. Кроме того, ховер помогает ориентироваться на сайте: нередко с его помощью создают всплывающее меню подразделов.
15
Параллакс
Рассинхрон фона и элементов переднего плана во время скроллинга. Придаёт сайту глубины и трёхмерности. Параллакс появляется, когда несколько изображений накладывают друг на друга, задавая им разную скорость прокрутки. Такой эффект может быть как вертикальным, так и горизонтальным.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
