20 терминов индустрии веб-дизайна для невежественного клиента

В индустрии веб-дизайна мы используем много инсайдерские условия. Это не только затрудняет начало работы для новичков, особенно клиенты, которые не вовлечены в индустрию дизайна, но передать их значение иногда может быть довольно сложной задачей.

В этом глоссарии мы собрали 20 часто используемых терминов веб-дизайна и добавил краткое объяснение каждому, чтобы любой мог быстро взглянуть на них в случае какой-либо неопределенности. Если у вас есть клиент, которому действительно нужен ускоренный курс по жаргоне веб-дизайна, поделитесь с ним этой статьей.

“Анимация”

Техника веб-дизайна, которая добавляет движение на экранные элементы для того, чтобы визуализировать изменения или привлечь внимание пользователей.

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

“хлебный мякиш”

тип навигации который информирует пользователей об их Текущее местоположение на сайте.

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

“беспорядок”

Ошибка веб-дизайна, показатель плохо оформленная страница.

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

“Цветовая схема”

коллекция гармонизирующих цветов используется для создания узнаваемый бренд.

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

“контрастировать”

Техника дизайна для подчеркнуть различия между элементами, которые имеют различную роль или значение.

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

“Пустое состояние”

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

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

“Фиксированный макет”

тип макета в котором сайт и его элементы использовать ту же ширину во всех разрешениях, определяется в статических значениях (обычно пиксели).

Традиционный способ создания сайтов. Редко выбирается для новых веб-сайтов, так как сайты с фиксированными макетами трудно использовать (читать) на экранах мобильных устройств. Чтобы оставаться доступными для мобильных пользователей, многие сайты с фиксированным макетом используют вторичный мобильный сайт.

“Плоский дизайн”

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

Плоский дизайн подвергся критике за проблемы юзабилити, вытекающие из отсутствие трехмерности. Более зрелым Языки дизайна Flat 2.0, такие как Google Material design, появились в качестве ответа и добавили немного глубины к плоскому дизайну.

“Расположение жидкости”

тип макета тот использует относительные единицы определить ширину сайта и его элементов.

Наиболее часто используемые относительные единицы для схем размещения жидкости проценты, но Эмs а также ремs также может быть использован. Расположение жидкости изменяет размеры (растягивается и сжимается) по мере изменения ширины области просмотра. В отличие от адаптивных макетов, гибкий макет не использует медиа-запросы. Также упоминается как макет жидкости.

“складка”

Нижняя сторона видимой части экрана.

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

Рекомендуется разместить элементы брендинга (например, логотип), навигация по сайту, а также заманчивый контент выше сгиба, чтобы пользователи быстро поняли цель сайта и заинтересовались остальным содержанием.

“Изящная деградация”

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

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

“Образ героя”

Негабаритный имиджевый баннер помещенный выше сгиба.

Изображения героев - это высококачественные, обычно полноразмерные изображения, соответствующие содержанию сайта. Поверх них, как правило, есть короткий (одна или две строки) текст который передает сообщение пользователям, и кнопка призыва к действию который призывает их предпринять определенные действия, такие как покупки или регистрация на сайте.

“Целевая страница”

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

Например, если веб-пользователи следят за рекламным баннером, они часто оказываются на целевой странице, призывающей их купить соответствующий продукт. Целевые страницы с один фокус и четкий призыв к действию имеют тенденцию достигать более высоких показателей конверсии.

“Ленивая Загрузка”

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

Если веб-сайт использует отложенную загрузку, сначала загружаются только изображения выше сгиба, остальные загружаются только тогда, когда (если) пользователь прокручивает страницу. Часто используется в адаптивном и мобильном дизайне, так как экономит ресурсы. Например, Google AMP ускоряет мобильные сайты на ленивая загрузка статических ресурсов по умолчанию.

“Медиа-запрос”

Функция CSS, которая делает адаптивный веб-дизайн возможно, позволяя дизайнерам создавать различные конструкции для разных размеров устройства (ширина и / или высота), ориентации (альбомная или книжная) и типы носителей (печать, экран и т. д.).

Как правило, отзывчивые сайты иметь отдельные макеты для настольных, планшетных и мобильных экранов, контрольные точки между ними определяется медиа-запросами добавлено в CSS.

“Прогрессивное улучшение”

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

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

“Адаптивный дизайн”

Подход веб-дизайна для создания сайтов, которые подгонять под размеры различных типов устройств (чаще всего мобильных, планшетных и настольных) путем разработки разные макеты и другие стили (например, типография, размер изображения) для них.

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

“Skeuomorphism”

Язык дизайна пользовательского интерфейса, который использует принцип знакомства, и фокусируется на создании элементов дизайна, которые напоминают их реальный эквивалент.

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

“переход”

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

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

“Пустое пространство”

пустое пространство между соседними элементами дизайна. Также упоминается как отрицательное пространство.

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