Погружение в мир веб-дизайна может стать увлекательным путешествием. Однако, как и на любой незнакомой территории, здесь есть свой собственный уникальный язык и терминология, которые могут заставить вас почувствовать себя потерянным или сбитым с толку. Не бойтесь. Мы здесь, чтобы помочь вам.
Предлагаем глоссарий по веб-дизайну — сокровищницу основных терминов, которая поможет вам уверенно ориентироваться во всех тонкостях. Независимо от того, являетесь ли вы любознательным новичком или просто пытаетесь понять, что говорит ваш разработчик, это руководство развеет мистификацию жаргона веб-дизайна.
Вы найдете краткие и понятные объяснения, которые послужат бесценным справочным материалом, а также улучшат ваше понимание важных терминов и концепций.
77 основных терминов веб-дизайна
A/B тестирование
Метод определения того, какая из двух версий является наиболее эффективной, путем тестирования их на разных группах пользователей (также известный как сплит-тестирование). Например, вы можете запустить A/B-тест, чтобы определить, привлекает ли красная кнопка больше кликов, чем зеленая.
Над сгибом
Часть веб-страницы, которая видна без прокрутки вниз. Веб-дизайнеры часто стараются сделать так, чтобы наиболее важный контент и функции были размещены на первой странице с целью максимизировать вовлеченность.
Доступность
Практика создания веб-сайтов, контента и приложений, доступных для людей с ограниченными возможностями. Это включает в себя элементы дизайна, такие как альтернативный текст для изображений и код, который позволяет программам чтения с экрана обрабатывать содержимое страницы.
Альтернативный текст
Альтернативный или замещающий текст (alt text) — это атрибут, используемый для краткого описания изображения. Это особенно важно для обеспечения доступности, поскольку позволяет программам чтения с экрана понимать содержание изображений. Помните, что все изображения, помимо тех, которые носят чисто декоративный характер, должны содержать альтернативный текст.
Якорный (анкорный) текст
Кликабельный текст в гиперссылке. Кликабельный текст в гиперссылке. Например, «Узнать больше» или «Читать наш блог» являются примерами анкорного текста.
Бэкэнд разработка
Процесс создания серверных приложений, кодирования и программирования логики, которая обеспечивает работу веб-сайта или приложения. Этим типом разработки обычно занимаются специалисты, обладающие глубокими знаниями баз данных, скриптовых языков и фреймворков.
Ниже сгиба
Часть веб-страницы, которая видна только после прокрутки вниз. Этот термин пришел из газетной индустрии, которая традиционно использовала двухстраничные развороты и размещала наиболее важный контент в верхней половине первой страницы (над сгибом).
Тело текста
Основной текст или содержимое веб-страницы. Это могут быть записи в блогах, описания продуктов, пресс-релизы и любая другая форма письменных материалов. В основной части обычно используется шрифт меньшего размера, чем в заголовках. Поскольку важна читабельность, для тела текста чаще всего используются шрифты с простыми засечками и без засечек.
Показатель отказов
Процент посетителей, которые покидают сайт после просмотра всего одной страницы. Высокий показатель отказов может указывать на низкое качество контента, проблемы с удобством использования или другие проблемы, которые не позволяют пользователям оставаться на сайте. Однако высокий показатель отказов — это не всегда плохо. Это также может свидетельствовать о том, что посетители быстро получают то, что им нужно.
Навигация по «хлебным крошкам»
Тип навигации по веб-сайту, который показывает положение пользователя в иерархии веб-сайта. Ссылки в виде «хлебных крошек» обычно отображаются в верхней части веб-страниц и разделяются стрелками, косыми чертами или другими символами. Эти ссылки позволяют пользователям быстро переходить на страницы, расположенные выше по иерархии. Например, навигация по «хлебным крошкам» по постам в блоге может выглядеть как «название блога > название категории > заголовок поста в блоге».
Точка останова
Определенная ширина или размер окна браузера, при котором отзывчивый веб-сайт адаптирует свой макет для корректного отображения на экранах разных размеров. Если ширина экрана ниже определенной точки останова, макет корректируется соответствующим образом, чтобы обеспечить лучший пользовательский интерфейс. Наиболее распространенные точки останова предназначены для мобильных и настольных устройств.
Призыв к действию (CTA)
Ссылка, кнопка или другой элемент, используемый для побуждения посетителя веб-сайта к выполнению определенного действия. Распространенными примерами CTA являются «Подпишитесь сейчас» и «Свяжитесь с нами». CTA следует размещать на видных местах страницы, чтобы посетители могли легко их увидеть.
Каскадные таблицы стилей (CSS)
Язык таблицы стилей управляет представлением веб-страницы (макет, цвета, шрифты и т. д.). CSS позволяет веб-дизайнерам указывать, как должны выглядеть такие элементы страницы, как заголовки и абзацы.
Сжатие
Процесс уменьшения размера файла для улучшения времени загрузки страницы. Сжатие может быть применено к изображениям, аудио, видео и другим типам файлов. Файлы меньшего размера будут быстрее загружаться в веб-браузере, обеспечивая лучший пользовательский опыт
Сеть доставки контента (CDN)
Совокупность серверов, расположенных по всему миру, которые могут доставлять контент пользователю быстрее, чем это сделал бы один сервер. Это достигается путем кэширования статических файлов (таких как изображения, скрипты и таблицы стилей) на нескольких серверах, чтобы они были географически ближе к посетителю веб-сайта.
Система управления контентом (CMS)
Платформа, которая дает возможность пользователям создавать контент в Интернете, управлять им и публиковать его. Популярные CMS, такие как WordPress и Squarespace, упрощают создание и обслуживание веб-сайтов для тех, кто не является программистом. Пользователи могут создавать и редактировать страницы непосредственно с панели управления CMS.
Контраст
Разница между светлыми и темными элементами на веб-странице. Высокая контрастность необходима для разборчивости, так как она помогает тексту выделяться на фоне. Контраст также может различать типы контента, такие как ссылки и заголовки.
Коэффициент конверсии
Процент посетителей, которые совершают желаемое действие, например, подписываются на рассылку новостей или совершают покупку. Низкий коэффициент конверсии может указывать на проблемы с удобством использования веб-сайта или его содержимого. Или это может указывать на проблемы с предложением (например, с ценообразованием).
Cookie (куки)
Небольшие файлы, которые веб-сайт хранит на компьютере пользователя, чтобы запомнить его предпочтения и поведение при просмотре. Файлы cookie могут использоваться для различных целей, таких как отслеживание поведения пользователей или персонализация контента, который они видят.
DNS (Система доменных имен)
DNS — это протокол, который преобразует доменное имя в соответствующий ему IP-адрес. Когда пользователь вводит адрес веб-сайта в браузер (www.example.com), он находит сервер, на котором размещен веб-сайт, путем поиска его числового IP-адреса в базе данных DNS.
Доменное имя
Уникальное имя, идентифицирующее веб-сайт или веб-страницу. Доменные имена используются вместо IP-адресов, так как их легче запомнить и ввести. Например, www.example.com это легче запомнить, чем 123.45.67.89/index.html.
Фавикон
Маленький значок, представляющий веб-сайт или веб-страницу, обычно отображается в адресной строке, закладках и других местах. Фавиконы, как правило, имеют размер 16 ×16 пикселей и должны быть сохранены в виде файла .ico.
Фокусная точка
Основная область композиции, которая привлекает внимание зрителя и направляет его взгляд. Фокусные точки можно использовать для выделения определенных элементов веб-дизайна, таких как заголовки, графика или призывы к действию.
Фронтенд разработка
Процесс кодирования и программирования элементов веб-сайта, с которыми сталкиваются пользователи. Это включает в себя HTML, CSS, JavaScript и другой код, используемый для того, чтобы веб-сайты выглядели и работали правильно в веб-браузерах. Фронтенд-разработчики обычно хорошо разбираются в принципах проектирования.
FTP (Протокол передачи файлов)
FTP — это стандартный протокол, используемый для передачи файлов с одного хоста на другой. Разработчики и дизайнеры часто используют FTP-клиенты, такие как FileZilla, для загрузки файлов на веб-серверы.
Система сеток
Структура столбцов и строк, используемая для упорядочивания элементов страницы. Сеточные системы особенно полезны для разработки адаптивных веб-сайтов, поскольку они создают организованный макет, который хорошо адаптируется к различным размерам экрана. Популярные системы включают Bootstrap и Foundation.
Значок-гамбургер
Значок из трех горизонтальных линий указывает на меню на веб-сайте или в приложении. Этот значок обычно размещается в правом верхнем углу страницы и при нажатии раскрывается в полноценное меню.
Хедер
Верхняя часть веб-страницы, которая обычно содержит логотип веб-сайта, навигацию и другие важные элементы. Хедеры часто размещаются вверху каждой страницы веб-сайта, чтобы обеспечить быстрый доступ к важному контенту или ссылкам.
Тепловая карта
Визуальное представление активности пользователя на веб-сайте. Тепловые карты позволяют веб-дизайнерам быстро анализировать, где пользователи нажимают, прокручивают и наводят курсор, чтобы лучше понять, как посетители взаимодействуют с содержимым страницы.
Hero image
Большой баннер или изображение, которое обычно размещается в верхней части страницы веб-сайта. Hero image привлекают внимание и создают эмоциональную связь с посетителями.
Шестнадцатеричный цветовой код
Шестизначный код, используемый в веб-дизайне для идентификации определенного цвета. Например, шестнадцатеричный код для красного цвета — “FF0000”, а шестнадцатеричный код для синего — “0000FF”.
Иерархия
Расположение различных элементов на странице для создания логичной и визуально приятной структуры. Правильная иерархия помогает в первую очередь привлечь внимание пользователя к наиболее важному контенту.
HTML (Язык разметки гипертекста)
Основной язык, используемый для создания веб-сайтов. HTML — это язык разметки, содержащий теги, которые определяют структуру и содержимое веб-страницы. Современные конструкторы веб-сайтов с функцией перетаскивания, такие как Squarespace, создают HTML для вас автоматически.
Гиперссылка (ссылка)
Интерактивный элемент на веб-странице, который ссылается на другую часть той же страницы, другую страницу на том же веб-сайте или внешний веб-сайт. Гиперссылки по умолчанию оформлены синим цветом и подчеркнуты, но CSS можно использовать для их оформления другими способами.
Иконка
Графический символ, используемый для представления действия, функции или концепции. Иконки часто используются в веб-дизайне для привлечения внимания пользователя и наглядного объяснения функций без использования слов. Например, страница новостей может содержать значок конверта, который позволяет пользователям отправлять ссылку на статью кому-либо по электронной почте.
Фрейм
Тег iframe — это HTML-элемент, который встраивает содержимое с другого сайта или страницы в веб-страницу. Фреймы обычно используются для отображения стороннего контента, такого как видео, карты или посты из социальных сетей.
Бесконечная прокрутка
Метод загрузки контента, который позволяет пользователям бесконечно прокручивать страницу вниз. Этот метод часто используется на сайтах социальных сетей или новостных сайтах, поскольку он помогает посетителям быстрее находить больше контента.
JPG/JPEG
Распространенный формат графического файла, используемый для фотографий или других детализированных изображений. Файлы JPG, как правило, меньше, чем файлы PNG, и могут быть дополнительно оптимизированы для сокращения времени загрузки страницы.
Целевая страница
Веб-страница, разработанная специально для маркетинговой кампании, формы подписки или другого целенаправленного действия. Целевые страницы часто содержат минимум отвлекающих факторов (например, навигационное меню может быть удалено). Эти страницы направлены на достижение одной конкретной цели, такой как сбор информации о пользователях или поощрение посетителей к покупке продукта.
Ленивая загрузка
Метод, используемый для повышения скорости работы страницы за счет загрузки контента только по мере необходимости. Например, изображения под сгибом могут не загружаться до тех пор, пока пользователь не прокрутит страницу вниз. Это помогает сократить время загрузки страницы, так как за один раз требуется загрузить меньше ресурсов.
Меню
Основные навигационные ссылки веб-сайта обычно расположены в хедере или боковой панели. Меню, как правило, организовано по категориям и страницам со списком внутри каждого раздела.
Метаданные
Данные, которые используются для описания содержимого веб-страницы. Мета-теги, такие как заголовок и описание, особенно важны для SEO, поскольку они предоставляют поисковым системам информацию о тематике страницы.
Дизайн Mobile First
Подход к дизайну, при котором мобильным устройствам отдается приоритет при создании макетов веб-сайтов. Это означает, что сначала разрабатывается мобильная версия веб-сайта, а затем масштабируется для настольных устройств, вместо того чтобы создавать дизайн сначала для настольных компьютеров, а затем уменьшать масштаб для мобильных устройств.
Навигация
Система, которая позволяет посетителям ориентироваться на веб-сайте или в приложении. Хорошая навигация должна быть организованной, логичной и простой в использовании. Четкие надписи и интуитивно понятная структура меню очень важны для хорошей навигации.
Открытый источник
Программное обеспечение опубликовано по лицензии с открытым исходным кодом, что означает, что его исходный код находится в свободном доступе и может быть изменен кем угодно. Программное обеспечение с открытым исходным кодом часто имеет большое сообщество разработчиков, работающих над его улучшением и повышением безопасности. Популярные CMS с открытым исходным кодом включают WordPress и Drupal.
Параллаксная прокрутка
Техника, которая создает иллюзию глубины на веб-странице. Когда пользователи прокручивают страницу вниз, фоновые элементы перемещаются медленнее, чем элементы переднего плана, создавая многослойный эффект. Параллаксная прокрутка часто используется в веб-дизайне для визуальной привлекательности, привлечения внимания пользователя к определенному контенту или просто для создания уникального впечатления.
Плагин
Программное обеспечение, расширяющее функциональность существующей программы или веб-сайта (иногда называемое «дополнением» или «расширением»). Плагины часто используются для добавления функций, не включенных в основной продукт.
PNG (Переносимая сетевая графика)
Формат файла растрового изображения, который поддерживает прозрачность и позволяет сохранять изображения в формате без потерь (в отличие от JPG). Файлы PNG, как правило, больше, чем файлы JPG, но могут отображать сложную графику без ухудшения качества.
Прототип
Базовая версия продукта, используемая для тестирования удобства использования и дизайна. Прототипы часто используются для тестирования пользовательского интерфейса веб-сайта перед началом кодирования.
Растровое изображение
Изображение, состоящее из пикселей. В отличие от векторных изображений, которые состоят из контуров и кривых, которые можно масштабировать без потери качества, растровые изображения станут размытыми и пикселизированными при увеличении разрешения. Популярные форматы растровых файлов включают JPG и PNG.
Читабельность
Легкость, с которой текст может быть прочитан. Читабельность необходима для хорошего веб-дизайна, поскольку она помогает посетителям быстро и легко понять контент. Такие факторы, как размер шрифта, длина строки, высота строки и цветовой контраст, влияют на читабельность.
Разрешение
Количество пикселей в изображении или на дисплее. Чем выше разрешение, тем больше деталей можно увидеть. Обычное разрешение веб-изображений составляет 72 точки на дюйм (для дисплеев с низким разрешением) и 300 точек на дюйм (для дисплеев с высоким разрешением).
Отзывчивый дизайн
Подход к дизайну, который позволяет веб-страницам адаптировать свои макеты для корректного отображения на экранах разных размеров. Отзывчивые веб-сайты используют гибкие сетки и медиа-запросы для создания оптимальных условий просмотра независимо от устройства пользователя.
Поисковая оптимизация (SEO)
Практика оптимизации контента, дизайна и кода веб-сайта для улучшения его видимости на страницах результатов поисковой выдачи. SEO обычно включает оптимизацию заголовков страниц, описаний, изображений и других элементов, которые помогают повысить шансы страницы на ранжирование при поиске по релевантным ключевым словам или фразам.
Семантическая разметка
HTML-теги, которые используются для определения значения содержимого страницы. Семантическая разметка позволяет веб-браузерам, поисковым системам и другим машинам понимать структуру и информацию на веб-странице. Заголовки (h1-h6), абзацы (p) и списки (ul/ol ol) — все это примеры семантической разметки.
Карта сайта
Список всех страниц на веб-сайте. Карты сайта часто помогают роботам поисковых систем сканировать веб-сайт и индексировать его содержимое для получения результатов поиска. Они также могут помочь посетителям-людям найти нужный им контент.
Слайдер (карусель)
Элемент, который позволяет пользователям прокручивать несколько изображений или блоков контента (таких как текст, видео и т.д.). Слайдеры/карусели часто используются для демонстрации рекомендуемых товаров или контента и могут быть полезны для выделения нескольких предложений на одной странице.
SSL-сертификат
Тип шифрования, используемый для защиты данных, передаваемых через Интернет. SSL-сертификаты необходимы для всех веб-сайтов, но особенно для тех, которые собирают платежную информацию или другие конфиденциальные данные, поскольку они защищают клиентов от кражи их информации хакерами. Если веб-сайт использует активный сертификат SSL, адрес будет начинаться с «https» вместо «http».
Промежуточный сайт
Дублированная версия веб-сайта, используемая для тестирования и отладки. Промежуточные сайты часто используются для тестирования изменений дизайна или новых функций, прежде чем задействовать их на рабочем (живом) сайте.
SVG (Масштабируемая векторная графика)
Формат файла векторного изображения, который обычно используется на веб-сайте для таких элементов, как логотипы и значки. В отличие от растровых изображений, которые состоят из пикселей, файлы SVG состоят из контуров и кривых, которые можно редактировать с помощью кода или графического редактора.
Шаблон
Готовый дизайн, который обеспечивает базовую структуру веб-сайта. Шаблоны позволяют разработчикам и дизайнерам быстро создавать сайты с нуля.
Тема
Набор файлов, используемых для изменения внешнего вида веб-сайта. Темы WordPress, например, представляют собой наборы шаблонов, которые определяют общий дизайн сайта.
URL
Адрес веб-страницы. URL-адреса обычно содержат протокол (http/https), доменное имя и путь к странице (например, www.example.com/blog ).
Удобство использования
Легкость, с которой можно пользоваться веб-сайтом и перемещаться по нему. Хорошее удобство использования имеет важное значение для обеспечения приятного пользовательского опыта, поскольку оно гарантирует, что посетители смогут быстро найти то, что они ищут, с минимальными отвлекающими факторами.
Пользовательский опыт (UX)
Общий опыт пользователя при взаимодействии с веб-сайтом или приложением. Дизайнеры UX сосредотачиваются на создании интуитивно понятного и приятного опыта, оптимизируя удобство использования и доступность продукта.
Пользовательский поток
Путь или последовательность шагов, которые человек предпринимает при использовании веб-сайта или приложения. Пользовательские потоки обычно планируются до начала кодирования, чтобы обеспечить оптимальное взаимодействие с пользователем.
Пользовательский интерфейс (UI)
Графические элементы продукта, с которыми взаимодействует пользователь, такие как кнопки, меню и другие элементы управления. Дизайн пользовательского интерфейса направлен на создание привлекательного и интуитивно понятного интерфейса, который позволяет пользователям легко взаимодействовать с продуктом.
Векторное изображение
Изображение, состоящее из контуров и кривых. Векторные изображения не зависят от разрешения, что означает, что их можно увеличивать или уменьшать без потери качества. Популярные форматы векторных файлов включают Ai (Adobe Illustrator), EPS и SVG.
Веб-шрифты
Шрифты, размещенные на сервере и загружаемые в веб-браузер пользователя. Веб-шрифты позволяют дизайнерам использовать пользовательские гарнитуры и обеспечивать согласованность их дизайна в разных браузерах.
Веб-хостинг
Веб-хостинг — это услуга по предоставлению серверного пространства и пропускной способности для веб-сайтов, которые должны размещаться на серверах, чтобы быть доступными через Интернет.
Пустое пространство
Область дизайна, которая не содержит никаких элементов. Это помогает разбить содержимое на странице и может привлечь внимание к важным элементам.
Вайрфрейм
Низкокачественный эскиз или чертеж веб-сайта, на котором изображен общий макет и элементы страницы. Вайрфреймы используются дизайнерами в начале проекта, чтобы наметить структуру веб-сайта, прежде чем приступить к более детальной работе по дизайну.
XML (Расширяемый язык разметки)
Язык разметки, используемый для организации данных структурированным способом. XML часто используется для хранения данных, таких как RSS-каналы или карты сайта, созданные веб-сайтами и приложениями.
В заключение
Понимание базовой терминологии веб-сайта важно для всех, кто работает в области разработки и дизайна. Работая в мире веб-дизайна, постоянно продолжайте изучать и расширять свою базу знаний, чтобы создавать более качественные сайты и приложения.
Всем успешной работы и творчества!
0 комментариев