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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Читайте также: 30 сокращений, которые должны знать все веб-разработчики

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

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

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

Панировочные сухари содержат путь, по которому текущая страница может быть достигнута с домашней страницы, обычно в формате Home / Category / Page. Каждый элемент пути также активен, чтобы пользователи могли быстро перемещаться по иерархии сайта. Панировочные сухари обычно отображаются в верхней части каждой страницы.
«Беспорядок»
Ошибка веб-дизайна, показатель плохо разработанной страницы.

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

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

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

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

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

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

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

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

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

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

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

Термин «выше сгиба» относится к той части веб-страницы, которую посетители могут видеть без каких-либо действий, а «ниже сгиба» относится к остальной части страницы, на которую пользователи могут попасть только при взаимодействии с сайтом – обычно прокрутка или смахивание (на мобильном телефоне).
свернуть ИЗОБРАЖЕНИЕ: globaldots.comРекомендуется размещать элементы брендинга (например, логотип), навигацию по сайту и соблазнительный контент над сгибом, чтобы пользователи быстро поняли цель сайта и заинтересовались остальным контентом.
«Изящная деградация»
Стратегия веб-дизайна, которая включает все расширенные функции по умолчанию на сайте, а затем удаляет или упрощает вещи, которые не работают в старых браузерах, на менее функциональных устройствах или при более низкой пропускной способности.

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

«Образ героя»
Над складкой размещен баннер с увеличенным изображением.

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

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

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

Если веб-сайт использует отложенную загрузку, сначала загружаются только изображения выше сгиба, остальные загружаются только тогда, когда (если) пользователь прокручивает страницу. Часто используется в адаптивном и мобильном дизайне, так как экономит ресурсы. Например, Google AMP ускоряет мобильные сайты на ленивая загрузка статических ресурсов по умолчанию.
«Медиа-запрос»
Функция CSS, которая делает возможным адаптивный веб-дизайн, позволяя дизайнерам создавать различные дизайны для разных размеров устройства (ширина и / или высота), ориентации (альбомная или книжная) и типов носителей (печать, экран и т. Д.).
медиа-запросыИЗОБРАЖЕНИЕ: gskinner.comКак правило, адаптивные сайты имеют отдельные макеты для настольных компьютеров, планшетов и мобильных экранов, точки останова между ними определяются медиазапросами, добавленными в CSS.
«Прогрессивное улучшение»
Стратегия веб-дизайна, которая сначала добавляет на сайт только основные элементы, которые работают на любом браузере, пропускной способности и устройстве. Более продвинутые функции интерфейса (стили и интерактивность) загружаются в слои впоследствии.

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

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

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

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

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

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

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

«Белое пространство»
Пустое пространство между соседними элементами дизайна. Также упоминается как негативное пространство.

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *