Дизайна термины: Блог о продажах и маркетинге

Термины дизайна — Словарь для начинающих дизайнеров.

Словарь дизайн терминов создан для ознакомления новичков с лексикой дизайнера. Здесь собраны основные дизайн понятия, которые часто используются практикующими дизайнерам.

Alignment (выравнивание) – расположение объектов относительно других объектов. Например слева, справа, по центру и т.п.

Back End (бэкэнд) – в вебе, это часть сайта, которая спрятана от глаз обычного пользователя и выполняется на стороне сервера. Применимо к CMS (смотрите ниже), бэкэндом является административная часть системы.

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

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

Bezier Curve (кривые Безье) – параметрические кривые, которые представляют векторный путь в компьютерной графике. Зачастую они создаются с помощь Pen Tool, путем соединения точек, которые позволяют изменять форму и направление кривых.

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

CMYK (смук, смюк, цмик, цмук, смик) – субтрактивная схема формирования цвета, которая используется в основном в полиграфии. В CMYK используются четыре цвета – Cyan (голубой), Magenta (пурпурный), Yellow (желтый) и blacK (черный) для формирования цвета. Каждое из чисел, используемых для обозначения цвета в CMYK, представляет собой процент краски данного цвета, составляющей цветовую комбинацию.

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

DPI, PPI – количество точек (пикселей для PPI), которые помещаются на один дюйм экрана.

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

Font Weight – определяет насыщенность (толщину) символов в тексте.

Front End (фронтэнд) – часть сайта, исполняемая на стороне пользователя. В вебе в качестве фронтэнда выступают HTML-вёрстка, стили CSS и JavaScript. Применимо к CMS, фронтэнд является лицевой частью сайта, которую видит пользователь.

Grid (сетка) – набор вертикальных и горизонтальных линий, которые формируют систему для расположения объектов.

HSB – трёхканальная схема формирования цвета. Название происходит от первых букв английских слов: Hue (цветовой тон), Saturation (насыщенность), Brightness (яркость).

Kerning (кернинг) – расстояние между определенными парами символов: LA, Tr, Ta, Ty, Wa, WA, Wo, Ya и другими.

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

Layers (слои) – используются в Photoshop для компоновки изображения. Слои напоминают стопку прозрачных листов, через прозрачные области вышележащих слоев можно видеть содержимое нижних слоев.

Margin (внешний отступ) – внешний отступ от элемента.

Mockups

(мокапы) – готовый дизайн страницы.

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

Navigation (навигация, меню) – это система ссылок, которая позволяет пользователю перемещаться по сайту либо приложению.

Negative Space (белое пространство, пустое пространство, молоко) – часть страницы, которая не содержит текст или изображения.

Padding (пэдинг, отступ) – внутренний отступ элемента.

Pen Tool (пен тул) – инструмент, который используется для создания кривых Безье в векторной графике.

Photoshop – графический редактор компании Adobe доступный на Windows и Mac OS X. Содержит в себе широкий функционал для работы с растровой графикой и базовый функционал для работы с векторной графики. За неимением конкуренции, ранее широко использовалась дизайнерами для создайна дизайна интерфейсов.

Pixel (пиксель) – самый маленький элемент изображения (как утом в молекуле). Имеет квадратную форму.

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

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

Resolution (разрешение, резолюшин) – обозначает количество пикселей отображаемых на экране (например 1280х1024).

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

RGB – аддитивная схема формирования цвета. Нужный цвет получается путем смешения световых излучений трёх первичных цветов – красного, зелёного и синего (Red, Green, Blue). Смешение 100% первичных цветов даёт белый цвет.

Sketch (приложение) – приложение компании Bohemian Coding для создания векторной графики. Было создано как альтернатива Photoshop для дизайнеров интерфейсов. Доступно только на Mac OS X. Поддерживает множество сторонних плагинов, которые значительно упрощают жизнь дизайнера. Очень тепло принято в кругу дизайнеров, так как не содержит в себе ничего лишнего и нацелено именно на создание дизайна интерфейса (в отличии от Photoshop).

Sketches (скетчи) – быстрые, лишенные деталей зарисовки будущего дизайна.

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

Specification

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

Tracking (трекинг) – равномерно изменение расстояния между буквами (всеми, в отличии от кернинга).

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

Usability (юзабилити) – это то, насколько просто пользователям использовать ваш сайт (приложение) для достижения определённых целей.

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

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

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

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

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

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

Начинающим дизайнерам, невероятно рекомендую ознакомиться с справочником по дизайну для iOS и справочником по дизайну для Apple Watch (на русском).

Термины графического дизайна — Графический дизайн Ana’s Design

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

Айдентика

Айдентика — это русская производная от английского слова identity (идентичность). Необходимость введения такого понятия вызвана ростом конкуренции на рынке. Компаниям нужна узнаваемость в социуме

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

Айдентика направлена на формирование отношения к компании, впечатления от нее, ее образа в глазах потребителей. Она, как правило, не меняется на протяжении истории компании.

Фирменный стиль

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

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

Логотип

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

Логотип выражает индивидуальность компании. Успешная разработка логотипа определяет эффективность всего фирменного стиля.

Брендбук

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

Как правило, брендбук включает в себя три обязательных раздела.

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

В разделе о фирменном стиле дается подробное описание элементов фирменного стиля, логотипа, фирменных шрифтов, цветов, слоганов и других объектов стиля компании.

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

Иными словами, брендбук — это книга, в которой приведено подробное описание айдентики.

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

Гайдлайн

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

Он используется при разработке печатной, рекламной продукции, деловой документации, сайтов.

Мокап

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

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

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

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

Паттерн

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

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

Фирменный узор еще одна возможность сделать компанию более узнаваемой. Он используется как фоновый рисунок и дополняет основной дизайн.

Для разнообразия в оформлении фирменного стиля патерн может быть использован в нескольких цветовых гаммах.

Фавикон

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

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

Фирменный шрифт

Фирменный шрифт важная деталь фирменного стиля. Ниже описан термин графического дизайна.

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

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

Гарнитура — это набор шрифтов объединенных одинаковыми стилистическими особенностями. В фирменном стиле могут быть рекомендованы к использованию несколько шрифтов из одной гарнитуры.

Леттеринг — это рисование букв, или рисунок из букв. Своего рода ручная работа. И иногда в фирменном стиле используются рисунки из букв.

Каллиграфия — это искусство письма, способ красиво написать букву.

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

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

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

Интерлиньяж — это расстояние между строками текста. Расстояние необходимо учитывать, что бы достичь оптимального баланса в тексте.

Форматы и цвета в терминах графического дизайна

Фирменные цвета

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

Дизайнеры выбирают цвета исходя из специфики работы компании и выпускаемых товаров по согласованию с заказчиком. Цветовая палитра должна выбираться с условием применения ее в компьютерной технике, а также с учетом возможности печати элементов стиля в типографии. В связи с этим рассматриваются цветовые модели RGB, CMYK, Pantone.

Модель RGB — эта аббревиатура расшифровывается как Red, Green, Blue (красный, зеленый, синий). Из этой тройки составляются все оттенки цветов на экранах компьютера.

Цветовая модель CMYK используется в типографии. В этой модели формирование палитры цветов осуществляется смешиванием четырех красок: голубого (Cyan), пурпурного (Magenta), желтого (Yellow) и черного (ключевого цвета, Key color).

Многие цвета модели RGB не могут сформироваться в модели CMYK — при печати они изменяются, и цвет может отличаться от выводимого на экран компьютера.

Для исключения этих изменений при печати разработана цветовая модель Pantone. Бумажные каталоги Pantone имеются в каждой типографии. Эти каталоги служат для визуализации получаемого при печати цвета. Для каждого оттенка цвета в каталоге Pantone указывается точное содержание цветов из модели CMYK. Остается только выбрать необходимый цвет в каталоге Pantone для получения требуемых цветов при печати.

Форматы изображений

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

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

Растровое изображение

Растровое изображение состоит из множества маленьких ячеек – пикселей, которые содержат информацию о цвете. Наиболее знакомые растровые форматы — это JPEG, PNG.

Использование растрового формата позволяет создать изображение любой сложности с множеством деталей и большой палитрой цвета.

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

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

Векторное изображение

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

Популярные векторные форматы SVG, AI.

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

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

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

---

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

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

41 термин в дизайне, полезный для UX-исследователя / Хабр

Работа с UX-дизайнерами и знакомство с их словарным запасом — это почти изучение нового языка. Давайте посмотрим на 41 часто используемый дизайнерский термин. Для лучшего взаимопонимания в команде.

Flat Design (Плоский дизайн)

Flat Design — это минималистский стиль дизайна пользовательского интерфейса. Он характеризуется фокусированием на использовании простых двухмерных элементов с яркими цветами.

Ник Бабич (Nick Babich) из UX Planet называет flat design «более сложным кузеном минимализма», поскольку все элементы пользовательского интерфейса основаны на простоте.

Отличным примером плоского дизайна является целевая страница Dropbox Basic. Как видите, элементы пользовательского интерфейса настолько минимальны, что освещают содержание страницы.

Interaction Design (Интерактивный дизайн)

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

Material Design (Материальный дизайн)

Material Design, часто называемый просто материалом, — это язык дизайна, разработанный Google и используемый на устройствах Android.

Вот краткое вводное видео об этом от Google:

Iterative Design (Итеративный дизайн)

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

Design sprints (Дизайн-спринты)

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

Brand Identity (Фирменный стиль)

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

Mood board (Доска настроения)

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

Доска настроения используется всеми дизайнерами, в том числе теми, кто занимается дизайном UX, графики, моды и т.д.

Storyboard (Раскадровка)

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

User Journey Maps / UX Flow / Flowchart

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

Есть ли различия между картами пути пользователя и потоками UX? — Да.

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

В то время как UX-потоки имеют более формальные правила (вероятно, из-за их происхождения в виде блок-схем).

Wireframe (Каркас)

Думайте о каркасах как о проекте экрана. Они представляют собой низкокачественное представление макета и содержания веб-сайта.

Wireflow

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

Чуть больше про Wireflow

Wireflow — это не скетч. Wireframe-ы специально никак не связаны с дизайном, чтобы демонстрировать как сайт/приложение будет работать, а не выглядеть. В wireframe все выглядит схематично, но за этими чертежами стоят многие часы раздумий. Каждый небольшой блок должен быть спланирован и расположен в нужном месте. Каждая ссылка должна куда-то вести. Каждая страница должна быть доступна по ссылке с другой страницы. Каждая кнопка должна быть там, где она нужна пользователю, и не быть там, где от нее нет толку. Лишь 10% создания wireframe-ов приходится на рисование; 90% занимает процесс продумывания.

Mockup (Макет)

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

MVP

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

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

Low and High-fidelity protos

Прототипы с низкой и высокой точностью

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

Adaptive design (Адаптивный дизайн)

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

Responsive design (Отзывчивый веб-дизайн)

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

Про разницу Адаптивного и Отзывчивого

Affordance (Ухватистость или провоцировательность)

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

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

Picker (Сборщик)

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

Bar (Панель навигации)

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

Панель вкладок (Tab bar) — в различных приложениях устройства она отображается в нижней части экрана приложения и дает возможность быстро переключаться между различными разделами приложения.

UI Element

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

UI Pattern

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

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

Widget (Виджет)

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

Pixel (Пиксель)

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

Hierarchy (Иерархия)

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

Breadcrumbs (Хлебные крошки)

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

API

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

Onboarding (Адаптация)

Создавайте благоприятные условия для новых пользователей, облегчая им это. Дизайн процесса адаптации для вашего сайта обычно ограничивается сценарием первого использования.

Lorem Ipsum (Текст рыба)

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

Legibility (Разборчивость)

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

Microcopy (Микрофотокопия)

Это небольшие фрагменты текста, которые вы видите в приложениях или на веб-сайтах, которые помогают вам перемещаться по нему. Подумайте о ярлыках на кнопках, сообщениях об ошибках, тексте-заполнителе в полях ввода и тексте во всплывающих подсказках. Небольшие фрагменты текста — большое влияние на UX вашего продукта.

Grid System (Сетка)

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

Scale (Масштаб)

Масштаб характеризует изменение размера объекта при сохранении его формы и пропорций. Большой масштаб может создать драму, а маленький может создать мелкие детали.

Color Theory (Теория цвета)

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

Cool Colors (Холодные цвета)

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

Warm Colors (Теплые цвета)

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

Gradient (Градиент)

Как видно на двух картинках выше, это постепенное изменение цвета от одного тона к другому.

Opacity (Прозрачность)

Степень прозрачности элемента. Чем ниже непрозрачность, тем прозрачнее элемент.

Resolution (Разрешение)

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

Contrast (Контраст)

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

Saturation (Насыщенность)

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

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

Словарь терминов по фронтенду

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

A

adaptive design

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

anchor

ссылка, гиперссылка между двумя документами.

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

animation

анимация, плавное изменение визуальных параметров объекта.

asset

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

assert

проверка, условие, которое проверяется, употр. в тестировании, напр. проверка поля не прошла — field assert has failed.

B

browser

бра́узер

back-end

бэке́нд

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

фон, напр. фоновое изображение — background image.

baseline

базовая линия, воображаемая линия в основании букв в строке.

blockquote

блочная цитата, HTML-элемент для выделения цитируемой нестрочной области документа. Может содержать атрибут cite со ссылкой на первоисточник.

border

рамка, внешняя видимая часть блока, напр. рамка слева — border-left.

border-radius

скругление рамки, напр., скругление рамки на 3 пикселя — border-radius:3px, скругление верхнего левого угла — border-top-left-radius, см. также скруглённые углы.

box model

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

box-shadow

тень (блока), напр. тень блока красная — box-shadow is red.

breadcrumbs

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

button

кнопка

элемент интерфейса, при нажатии отправляющий форму или производящий иное действие
элемент формы button или input type=»button» (также submit и image).

C

callback

обратный вызов, исполнение кода по завершению работы функции, напр. передай значение в обратном вызове — pass value in a callback.

cell

ячейка

структурная единица таблицы.
элемент таблицы td или th
cellpadding

отступ в ячейках таблицы.

cellspacing

расстояние между ячейками таблицы.

checkbox

чекбо́кс

элемент интерфейса для выбора одного или нескольких вариантов, напр. чекбокс неактивен — checkbox is disabled.
элемент формы input type=»checkbox»
clear

очистка (потока)

clear:left — очистка слева
clear:right — очистка справа
clear:both — полная очистка
client-side

клиентсайд, область технологий, работающих в браузере, часто синоним фронтенда.

closure

замыкание, функция, содержащая в теле ссылки на переменные, объявленные в окружающем коде.

code

сущ. код, неисчисл. (как сахар), напр. ошибка в коде — error in code но не ошибка в кодах (неправильно).
гл. писать код, верстать, программировать, напр. верстать сайт — to code a site.
colspan

объединение столбцов, HTML-атрибут для объединения нескольких ячеек таблицы в одной строке.

column

столбец, колонка, вертикальная область в таблице, раскладке или тексте.

content

содержимое

cross-browser

кроссбра́узерный, работающий во всех браузерах, слитно.

cross-platform

кроссплатфо́рменный, работающий во на всех платформах, слитно.

CSS Working Group (CSSWG)

Рабочая группа CSS

D

design

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

неактивный, состояние элемента формы, в котором его изменение запрещено, напр. неактивная кнопка — disabled button.

display

вид

display:none — скрытый вид
display:block — блочный вид
display:inline — строчный вид
display:inline-block — вид строчного блока

DOM

объектная модель документа, дом

doctype

докта́йп, конструкция вида DOCTYPE html в начале документа, которая обозначает используемую версию HTML.

dropdown

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

E

easing

плавность, функция плавности, описывает изменение скорости анимации с помощью ключевых слов или кривых Безье, напр. плавность перехода линейная — transition easing is linear.

em

ем, единица измерения в CSS, которая зависит от размера шрифта родителя, напр. размер шрифта 3 ема — font-size:3em.

enabled

активный, состояние элемента формы, в котором его изменение разрешено, напр. активная кнопка — enabled button.

engine

движок, напр. Сафари работает на движке Вебкит — Safari is based on WebKit engine.

F

fallback

TODO

favicon

фавикон, значок сайта, обычно 16×16 пикселей в формате ICO.

fieldset

группа полей, элемент, объединяющий несколько полей формы, напр. зелёная рамка на группе полей — green border on a fieldset.

figure

фигура, элемент из HTML5, содержащий изображение, видео, таблицу, график или фрагмент кода.

figcaption

заголовок фигуры, заглавие или подпись к фигуре.

float

прил. плавающий, свойство блока, заставляющее последующие блоки обтекать его, напр. раскладка на плавающих блоках — float layout.
гл. обтекать, следовать вплотную к плавающему блоку, напр. текст обтекает справа — text is floating to the right.
гл. прижимать, упираться вправо или влево, обычно из-за плавающих свойств, напр. прижмите блок влево — float block to the left.

font

шрифт

font-weight — насыщенность
font-weight:normal — нормальная
font-weight:bold — полужирная, (не «жирный»)
font-weight:bolder — жирнее
font-weight:lighter — светлее
font-style — стиль шрифта
font-style:normal — прямой
font-style:italic — курси́в
font-style:oblique — наклонный
font-size — размер шрифта, кегль
font-family — семейство шрифта, гарнитура
font-family:serif — с засечками
font-family:sans-serif — без засечек
font-family:monospace — моноширинный

footer

подвал

характерная визуальная область в конце страницы.
элемент footer — смысловая часть с метаинформацией.

framework

фреймво́рк, набор готовых решений для упрощения разработки.

front-end

фронте́нд

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

full screen

полноэкранный режим, поведение программы или её части, в котором она занимает весь экран целиком.

G

graceful degradation

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

gradient

градие́нт, плавный переход от одного цвета к другому.

linear gradient — линейный градиент
radial gradient — радиальный градиент
conical gradient — конический градиент
grid

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

H

header

шапка

характерная визуальная область в начале страницы.
элемент header — смысловая озаглавливающая часть.
height

высота

I

implement

внедрять, реализовывать напр. Firefox внедрил поддержку всего — Firefox has implemented support of everything.

inline

строчный

inline block — строчный блок
inline box — элемент строки в строчном форматировани: часть наполнения контейнера строки, к которой непосредственно применяются CSS-правила, напр. анонимный элемент строки — anonymous inline box.
inline element — строчный элемент
inline styles — локальные стили
input

поле (ввода), элемент формы. TODO.

K

kerning

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

keyframe

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

keyframe animation

покадровая анимация, способ задания анимации в CSS с помощью ключевых кадров.

L

layout

раскладка, расположение основных блоков на странице, напр. раскладка в 3 столбца — 3 columns layout.

letter-spacing

межбуквенное расстояние, тре́кинг, общее расстояние между буквами в тексте, отличается от кернинга.

line-box

контейнер строки в строчном форматировании: виртуальный контейнер, содержащий в себе все элементы одной строки.

line-height

высота строки, интерлинья́ж, расстояние между базовыми линиями текста.

list

список, последовательное перечисление группы элементов.

ordered list — упорядоченный список, отсортированный по какому-либо принципу.
unordered list — неупорядоченный список, в котором порядок следования не имеет значения.

list-style

стиль списка

M

margin

внешний отступ, напр. нижний отрицательный отступ 10 пикселей — margin-bottom:-10px.

matrix

ма́трица (трансформации), описание трансформации объекта с помощью матрицы.

media queries

медиавыраже́ния, слитно.

mixin

при́месь, набор свойств, расширяющий поведение другой сущности, встречается в CSS-препроцессорах и подходах к JavaScript, напр. примесь очищает поток — mixin is clearing.

mock-up

макет, внешний вид или дизайн сайта различной степени детализации, напр. дизайнер прислал макет страницы — designer sent a page mock-up.

modal

прил. мода́льный, блокирующий интерфейс для выполнения какого-либо действия, напр. модальный диалог — modal dialog.
сущ. модальное окно (диалог), элемент интерфейса, см. модальный.
multiple

множественный, повторённый два и более раз, напр. множественные фоны — multiple backgrounds.

multiple columns

мультиколо́нки, механизм из CSS, позволяющий выстроить текст в несколько колонок, напр. поддержка мультиколонок в IE — multiple columns support in IE. Предпочтительнее, чем громоздкие «множественные колонки».
многоколо́ночный, состоящий из нескольких колонок, напр. многоколоночная раскладка — multiple columns layout.

N

nested

вложенный, находящийся внутри чего-либо, напр. двойная вложенность — double nesting.

node

узел, элемент структуры, напр. дочерний узел — child node.

O

opacity

прозрачность, степень прозрачности, напр. прозрачность 10% — opacity:0.1.

opaque

непрозрачный, степень непрозрачности, напр. непрозрачен на 75% — opaque by 75%, значит прозрачность 25%.

outline

обводка, внешний равномерный контур элемента, не участвующий в блочной модели.

P

package manager

TODO

padding

внутренний отступ, напр. верхний внутренний отступ 10 пикселей — padding-top:10px.

pagination

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

па́ттерн, формализованный подход к написанию кода, напр. паттерны JavaScript — JavaScript patterns.

performance

быстродействие, характеристика скорости загрузки, отрисовки и т.п., напр. быстродействие CSS.

pixel

пи́ксель, единица измерения для экранного дизайна, в мн.ч. пиксели, сокр. пк.

polyfill

полифи́л, скрипт, воссоздающий недостающую функциональность, напр. новый полифил для IE6 — new polyfill for IE6.

popup

всплывающее окно, попа́п, отдельное окно или элемент интерфейса, появляющийся поверх текущего, напр. назойливый попап — annoying popup.

position

позиционирование

position:static — статичное
position:absolute — абсолютное
position:relative — относительное
position:fixed — фиксированное
position:sticky — закреплённое

preprocessor

препроце́ссор, инструмент, преобразующий код из одного синтаксиса в другой, напр. CSS-препроцессор Sass — Sass CSS preprocessor.

promises

про́мисы, способ асинхронного выполнения скриптов, противопоставляется использованию обратных вызовов.

progress bar

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

progressive enhancement

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

R

radio button

радиокно́пка, элемент формы input type=»radio» для выбора одного варианта из нескольких, напр. радиокнопка выбрана — radio button is checked.

rem

рем, единица измерения в CSS, которая зависит от размера шрифта корневого элемента html, напр. размер шрифта 3 рема — font-size:3rem.

reset

сброс, обычно сброс стилей по умолчанию в CSS, напр. файл сброса стилей — style reset file.

responsive design

TODO

Responsive Images Community Group (RICG)

Общественная группа по адаптивным изображениям

rounder corners

скруглённые углы, напр. скруглённые углы вышли из моды — rounded corners are out of fasion, см. также скругление рамки.

row

строка, ряд

горизонтальная область в таблице или раскладке.
элемент таблицы tr

rowspan

объединение строк, HTML-атрибут для объединения нескольких ячеек таблицы в одном столбце.

S

scaffolding

скафо́лдинг, автоматическая генерация кода по описанию, метод метапрограммирования.

scale

сущ. масштаб
гл. масштабировать

script

скрипт, инструкции, описывающие поведение страниц, напр. скрипты пока не подгрузились — scripts are not loaded yet.

semantics

семантика, смысловая нагрузка HTML-элементов, напр. семантическая вёрстка — semantic coding.

server-side

серверсайд, область технологий, работающих на сервере, часто синоним бэкенда.

shadow DOM

теневой DOM, теневая модель документа

shim

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

sidebar

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

skew

сущ. наклон
гл. наклонять
source maps

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

style

сущ. стили, напр. применить стили к элементу — apply styles to an element, мн.ч. предпочтительнее: стили элемента, а не стиль элемента (неправильно).
гл. оформлять, напр. как оформить селекты — how to style selects. Предпочтительнее, чем двусмысленное «стилизовать».

T

tab

вкладка, один из слоёв интерфейса сайта или программы, который активируется выбором его заголовка, напр. открыть в новой вкладке — open in new tab.
таб, клавиша табуляции, вставляет символ табуляции, переключает фокус на следующий элемент интерфейса, либо дополняет частично набранное слово, напр. нажмите контрол-таб — press Ctrl Tab.
таб, символ табуляции, имеет настраиваемую ширину и используется для отступов в коде, напр. табы лучше пробелов — tabs are better than spaces.

textarea

текстовая область, элемент формы для ввода многострочного текста.

text-align

выравнивание, вы́ключка, ориентация строк текста в определённом направлении, либо равномерно по ширине блока.

text-align:left — влево
text-align:right — вправо
text-align:justify — по ширине

text-shadow

тень (текста), напр. тень текста красная — text-shadow is red.

thumbnail

миниатюра, уменьшенная копия изображения.

title

заголовок, если речь идёт об элементе title, либо о заглавии элемента.
подсказка, если речь идёт об атрибуте title=»».

toggle

переключать, переводить из одного состояния в другое, переключить классы — toggle classes.

tooltip

всплывающая подсказка, вспомогательная информация, появляющаяся при наведении на элемент или при его активации, в частности title=»».

touch

TODO

transform

трансформация, напр. трансформация масштабированием в 2 раза — transform:scale(2).

transition

переход, напр. линейный переход длительностью 2 секунды — transition:all 2s linear.

translate

перемещать, перемещение объекта с помощью CSS-трансформации, напр. перемещение на X и Y — translate(x, y).

typography

типографика, оформление текста с помощью выбора гарнитуры, параметров строки и других.

U

unit

единица изменения, напр. единица измерения «рем» — rem unit.

utility

утили́та, программа с узким назначением.

V

valid

TODO

validator

TODO

vendor prefix

бра́узерный пре́фикс, приставка к CSS-свойству -webkit- или -moz-, напр. добавьте браузерные префиксы — add vendor prefixes.

vertical-align

вертикальное выравнивание, расположение элементов по вертикали в пределах строки текста или таблицы.

viewport

вьюпо́рт

видимая область документа в рамках экрана.
элемент meta name=»viewport», управляющий адаптацией страниц на мобильных устройствах.

W

website, web site

сайт, объединённые под одним адресом страницы, перевод «веб-сайт» избыточен.

World Wide Web Consortium (W3C)

Консорциум всемирной сети, организация, разрабатывающая веб-стандарты. Переводить «web» как «паутину» в XXI веке уже смешно.

web standards

веб-стандарты

width

ширина

word-spacing

межсловный пробел

workaround

обходное решение (приём), способ решения задачи в ограниченных условиях, напр. придумать обходной приём — to figure out workaround.

04-04-2016

Дизайн и его история. Основные понятия и определения дизайна

Дизайн и его история. Основные понятия и определения дизайна

Проблемные вопросы:

• 1. Дизайн и его история.
• 2. Основные понятия и определения дизайна
• 3. Условия зарождения дизайна

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

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

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

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

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

Изобразительные средства дизайна являются общими для пластических искусств: точка, линия, фактура, текстура, цвет, форма, объем, пропорция, масса и пространство. Эти составляющие комбинируются на основе принципов композиции: симметрии, асимметрии, равновесия, ритма, движения и т.д. В дизайне имеет широкое применение и такие средства как пропорция золотого сечения. Гармония и контрастность как универсальные средства искусства являются системообразующими и в дизайне. Особенно важно для художественного проектирования учитывать зависимость формы объекта от используемых материалов, конструкций и технологии производства. В современном промышленном производстве используются материалы, которые можно объединить в следующие группы: древесина,металл, стекло, текстиль, пластические материалы и новейшие синтетические материалы.

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

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

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

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

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

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

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

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

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

На этапе замысла эти знания не только взаимодействуют и переплетаются, но и трансформируются в интуицию, дающую возможность подняться на более высокую ступень понимания стоящей проблемы и позволяющий совершить открытие или изобретение. Дизайнерская деятельность проходит на стыке материальной и духовной сфер. Всё это говорит о практически безграничном разнообразии интересов и возможностей дизайна. А. Розенблюм отмечает: «Быть «возбудителем беспокойства» в обществе — значит для дизайнера постоянно выходить за границы сложившихся стереотипов, ломать их, творить новые оригинальные формы, предощущать в будничной прозе сегодняшнего дня тенденции завтрашнего. Как «возбудитель беспокойства» дизайнер призван избавлять человека от давления закостеневающей и потому давящей предметной среды, опираясь на просыпающуюся жажду раскрепощения».

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

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

В начале века в Германии был основан производственный союз «Verkbund», объединявший промышленников, архитекторов, художников и коммерсантов. К созданию этого союза привело то, что без увязки экономических и эстетических требований промышленного производства победить на международном рынке не возможно. Основатель архитектор Герман Мутезиус был до 1914 года президентом этого общества. Цели создания этого союза : реорганизация ремесленного производства на промышленной основе,создание идеальных образцов для промышленного производства и борьба с украшениями и орнаментацией.

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

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

Постановлением Совнаркома, опубликованным 25 декабря 1920 года были созданы Московские государственные высший художественно-технические мастерские. Это должен быть специальный вуз, имеющее целью подготовку «художников-мастеров высшей квалификации для промышленности». Создался «ВХУТЕМАС» первоначально в резуль­тате слияния бывшего Строгановского училища и бывшего Училища живописи, ваяния и зодчества. В 1926 году «ВХУТЕМАС» был преоб­разован в институт «ВХУТЕИН», который просуществовал до 1930гога. При этих институтах работали научно-исследовательские лаборатории, которые ставили своей целью создание действительного научного обоснованного преподавания и исследования природных художествен­ных дисциплин.

Многие архитекторы считали, что старую культуру надо полностью разрушить и на её развалинах построить новую, кол­лективистскую культуру коммуны.

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

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

Первые дизайнеры в России появились из среды архитекторов, художников-декораторов, графиков и инженеров.

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

Методология, методика, методисты. Что стоит за популярными терминами и как это относится к VR-технологиям?

03.06.2020

Термин «методология» в современной образовательной среде становится очень распространенным. Особенно это касается сферы Edtech. Если обратиться к тем, кто называет себя методологами, и спросить, почему они, например, не методисты или не педагогические дизайнеры, то ответы будут сильно разниться. Центр НТИ ДВФУ по VR/AR решил расставить термины по местам.

Иллюстрация к статье: Центр НТИ ДВФУ по VR/AR

Термин «методология» в современной образовательной среде становится очень распространенным. Особенно это касается сферы Edtech. Если обратиться к тем, кто называет себя методологами, и спросить, почему они, например, не методисты или не педагогические дизайнеры, то ответы будут сильно разниться. Центр НТИ ДВФУ по VR/AR решил расставить термины по местам.

Терминология

Методология — это учение об организации деятельности. В узком смысле термин «методология» относится только к научным исследованиям, в то время как в широком понимании она охватывает любую продуктивную деятельность, т.к. всегда нацелена на получение объективно нового или субъективно нового результата [Новиков, Новиков, 2008].

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

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

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

Методика в общем смысле — это совокупность методов и приемов практического выполнения чего-либо.

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

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

Педагогический дизайн — это реализация принципов обучения и преподавания в виде планов для учебных материалов, мероприятий, информационных ресурсов и системы оценивания [Smith & Ragan, 2004].

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

Как это применимо к VR-технологиям

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

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

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

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

Автор: Вера Юшина, специалист Центра НТИ ДВФУ по VR/AR.

Источник: VC.ru

99 важных дизайнерских слов, которые вы должны знать

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

Ознакомьтесь с этими условиями проектирования. Изучите их. Запомните их. Э … Слишком много работы. Просто добавьте эту страницу в закладки и используйте ее как шпаргалку по дизайну. Вот самые важные слова для описания дизайна, которые вам следует знать:

• Дизайн: композиция, баланс, близость, выравнивание, повторение, контраст, белое пространство, иерархия
• Фотографии и иллюстрации: разрешение , DPI, PPI, обрезка, обрезка, пиксели, кадрирование, исходное фото
• Типографика: с засечками, без засечек, скрипт, восходящий, базовый, нисходящий, кернинг, интерлиньяж, трекинг, толщина
• Цвет: оттенок, оттенок, тон, оттенок, насыщенность, монохроматический, аналогичный, дополнительный, триадный, непрозрачность, CMYK, RGB
• Элементы веб-сайта: заголовок, панель навигации, навигационная цепочка, целевая страница, HTML, пользовательский интерфейс, каркас
• Форматы файлов: AI, EPS, PDF, GIF, JPEG, PNG, PSD, TIFF
• Типы логотипов: абстрактный знак, эмблема, буквенный знак, графический знак, талисман, словесный знак

Конструкция

— Разработано robbyprada

Состав и расположение

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

Весы

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

Асимметрично сбалансированный логотип от artsigma

Симметричный

Симметрия достигается, когда все элементы дизайна равны по обе стороны от центральной линии

Асимметричный

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

Радиальный

Радиальная конструкция — это конструкция, в которой элементы исходят из центральной точки, создавая баланс.

Близость

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

Выравнивание

Выравнивание — это положение текста или графики по левому, правому краю, по центру или по ширине.

Повторение

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

Контраст

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

Белое пространство

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

Правило третей

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

Сетка

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

Иерархия

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

Масштаб

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

Эскиз эскиза

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

Макет

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

Фотография и произведения искусства

—

Разрешение

Детализация изображения, основанная на количестве пикселей, называется разрешением. Изображение выглядит четче, когда оно имеет более высокое разрешение.

точек на дюйм

DPI означает «точек на дюйм», который является мерой качества принтера. Для высококачественной печати рекомендуется 300 точек на дюйм.Например, изображение с разрешением 300 точек на дюйм и размером 1200 × 1800 пикселей станет отпечатком размером 4 × 6 дюймов.

пикселей на дюйм

PPI означает «пикселей на дюйм», который является мерой плотности пикселей, используемой устройствами электронного изображения. Вероятно, вы увидите, что это используется со сканерами, камерами, телевизорами или мониторами. Узнайте больше о разнице между DPI и PPI.

Прокачка

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

Накладка

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

пикселей

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

Урожай

Дизайнер может вырезать или обрезать ненужные части изображения, чтобы улучшить кадрирование, выделить конкретный объект или изменить соотношение сторон изображения.

Стоковое фото / art

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

Типографика

—

Типы шрифтов

Большинство шрифтов относятся к одному из четырех различных типов шрифтов.

Serif

Засечки — это маленькие линии и крючки в конце штрихов некоторых букв.

Без засечек

Sans означает «без». Шрифт без засечек не имеет засечек.

Скрипт

В шрифтах

Script используется плавный курсив.

Slab serif

Slab serif отличается толстыми, блочными засечками.

Детали типа

Все шрифты состоят из одних и тех же основных компонентов.

Восходящее устройство

Верхний элемент — это часть строчной буквы, которая возвышается над основной частью буквы.Думайте «б» или «з».

Исходный

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

Устройство для спуска

Нисходящий элемент — это часть строчной буквы, которая спускается ниже основной части буквы. Думайте «г» или «р».

Среднее значение / высота по x

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

Расстояние между шрифтами

Вертикальный и горизонтальный интервалы шрифта часто изменяются, чтобы изменить его внешний вид.

Кернинг

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

Ведущий

Произносится «ledding», интерлиньяж (также известный как высота строки) — это расстояние между двумя строками текста.

Отслеживание

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

Корпус шрифта

Обычно символы доступны в двух формах.

Прописные

Большие заглавные буквы шрифта — прописные. Мама также использовала их, чтобы случайно НАКРИЧАТЬ, КОГДА ОНА СЕТИТ ВАМ.

Строчные

Строчные буквы относятся к строчным буквам гарнитуры.

Капители

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

Стиль шрифта

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

Размер точки

Размер шрифта — это размер текста. В одном дюйме примерно 72 (72,272) точки.

Толщина шрифта

Толщина шрифта определяет жирность шрифта.

Курсив

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

Вдовы и сироты

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

Lorem ipsum

Lorem ipsum (также известный как фиктивный текст) используется в качестве заполнителя, который позже будет заменен фактической копией.Текст Lorem ipsum взят из книги «Крайности добра и зла», написанной Цицероном в 45 г. до н. Э.

Цвет

—

Теория цвета

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

Оттенок, оттенок, тон и оттенок

Оттенок — чистый цвет. Оттенок — это оттенок с добавлением белого. Тон — это оттенок с добавлением серого. Тень — это оттенок с добавлением черного.

Насыщенность

Насыщенность определяется интенсивностью цвета.

Поддон

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

Теплые и холодные тона

Теплые цвета можно найти на одной половине цветового круга (красный, оранжевый, желтый и розовый). Вторую половину занимают холодные цвета (синий, зеленый и пурпурный).

Монохромный

В монохромной цветовой палитре используется один единственный цвет.

Оттенки серого

Монохромная цветовая палитра, основанная на сером, называется оттенками серого.

Аналог

Цвета, которые соседствуют друг с другом на цветовом круге (т.е. красный фиолетовый, красный и красно-оранжевый) аналогичны.

Дополнительный

Дополнительные цвета — это противоположности на цветовом круге. Эти отношения вызовут визуальное напряжение и «шок».

Triadic

Триадные цвета — это три цвета, равномерно распределенные на цветовом круге. Один цвет доминирует, второй поддерживает, а третий акцентирует внимание.

Градиент

Градиент — это постепенное изменение одного цвета на другой. (Например, синий постепенно переходит в зеленый).

Непрозрачность

Непрозрачность — синоним непрозрачности. Чем прозрачнее изображение, тем меньше его непрозрачность.

CMYK

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

RGB

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

Pantone

Разработанная Pantone Corporation, профессиональной цветовой компанией, Pantone представляет собой наиболее широко используемую запатентованную цветовую систему для смешивания цветов. Система включает цвета, которые нельзя смешивать в CMYK.

Интернет и цифровой

—

Элементы веб-страницы

Большинство дизайнов веб-страниц включают комбинацию этих элементов.

Заголовок

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

Навигация и панель навигации

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

Тропа из хлебных крошек

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

Основной текст

Основной текст — это основное письменное содержание страницы.

Ссылки

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

Боковая панель

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

Баннер

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

Нижний колонтитул

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

HTML

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

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

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

Пользовательский интерфейс (UI)

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

Каркас

Базовые изображения, отображающие основные функции веб-сайта, известны как каркасы. Дизайнеры используют каркасы, чтобы показать, как работает страница или сайт.

Форматы файлов изображений

—

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

Векторная графика

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

AI

AI означает документ Adobe Illustrator. Это формат файла, разработанный Adobe Systems для представления одностраничных векторных изображений.

EPS

EPS расшифровывается как Encapsulated Post Script. Это формат файла с изменяемым размером, который обычно используется для векторных дизайнов. Благодаря высокому качеству он часто используется для печати таких элементов, как логотипы, визитки или брошюры.

PDF

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

Растровая графика

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

GIF

GIF или Graphics Interchange Format — это формат растрового файла, поддерживающий анимацию и прозрачность.GIF-файлы могут отображать не более 256 цветов, что позволяет создавать файлы очень небольшого размера. (PS: это произносится как «JIF» в отличие от широко распространенного произношения «GIF», по словам создателя GIF, Стива Уилхайта.)

JPEG

Joint Photographic Experts Group также известен как JPEG, наиболее широко используемый тип растрового файла для веб-дизайна. JPEG — это сжатые файлы, которые загружаются быстро. Обычно они используются в электронных письмах, рекламных баннерах, фотографиях в Интернете и почти во всем остальном в Интернете.В отличие от GIF, у них не может быть прозрачного фона (белый фон будет добавлен автоматически).

PNG

PNG означает Portable Network Graphics, веб-формат, не теряющий качества при сжатии. Файлы PNG были созданы для улучшения качества файлов GIF.

PSD

PSD или Photoshop Document — это несжатый файл рабочего растрового изображения, созданный дизайнерами в Adobe Photoshop.

TIFF

TIFF расшифровывается как Tagged Image File Format, общий формат для обмена растровыми изображениями между приложениями.TIFF обеспечивает более высокое качество изображения, чем JPEG или PNG, и широко используется в издательской сфере и фотографами. Не путайте это с «размолвками» или «разногласиями», которые случаются, когда вы отправляете своему дизайнеру восемь раундов исправлений.

Типы логотипов

—

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

Дизайн логотипа Emblem от Neatlines для Palouse PintLettermark Дизайн логотипа arkum

Абстрактный знак

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

Эмблема

В логотипах

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

Lettermark

Логотипы

Lettermark содержат одну или несколько стилизованных букв (например, инициалов компании) для идентификации бренда.Известные логотипы буквенных знаков включают в себя логотипы IBM, CNN, HP и HBO.

Дизайн логотипа Wordmark от nnorth

Изображение или символ

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

Талисман

Логотипы талисмана

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

Wordmark

Словесный знак основан на индивидуальной типографской обработке текста для иллюстрации бренда. Подумайте о VISA, Google или Coca-Cola.

Нужна работа с графическим дизайном?

Наши дизайнеры могут создать что угодно!

—

Эта статья была первоначально написана Алексом Бигманом и опубликована в 2014 году. Текущая версия была дополнена новой информацией и примерами.

52 Термины и определения в графическом дизайне для не дизайнеров

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

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

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

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

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

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

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

—

52 терминов дизайна, объясненных для маркетологов

1. Золотое сечение

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

(через)

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

Ниже приведен еще один пример, когда все ключевые элементы дизайна вписываются в другой раздел золотого сечения:

2. Правило третей

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

(через)

После того, как ваша сетка будет на месте, точки, где линии пересекаются друг с другом, указывают на основные ключевые области вашего дизайна:

Типографика, текст и термины шрифта

3. Типографика

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

4. Serif

Serif — это небольшой дополнительный штрих или изгибы на концах букв.

5. Без засечек

«Без засечек» буквально означает «без», а шрифт без засечек не включает лишних штрихов на концах букв.

Хотя не существует установленных правил относительно того, когда использовать шрифт с засечками или без засечек, рекомендуется использовать шрифты без засечек для основного текста в Интернете и шрифты с засечками для заголовков и печати.

6. Script

Гарнитуры Script — это шрифты или шрифты, основанные на исторических или современных стилях почерка и более гибкие, чем традиционные гарнитуры.

Вот несколько примеров скриптовых шрифтов:

Alex Brush;

And, Grand Hotel:

7. Шрифты Slab serif

Шрифты Slab serif имеют геометрическое ощущение, чем традиционные шрифты с засечками, и имеют квадратные и более крупные и жирные засеки.

Отличным примером плоского шрифта с засечками является Museo Slab:

8. Моноширинный

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

9. Иерархия

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

tuts + объяснение:

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

Вот пример, иллюстрирующий важность иерархии:

10. Кернинг

Кернинг — это промежуток между двумя конкретными буквами (или другими символами: числа, пунктуация и т. Д.), И процесс корректировки этого промежутка улучшает читаемость.

11. Интерлиньяж

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

12. Отслеживание

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

13. Высота по оси X

Высота по оси x означает расстояние между базовой линией и средней линией строчных букв шрифта.

14. Верхний / нижний элемент

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

15. Сироты / вдовы

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

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

16. Lorum Ipsum

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

Цвета

17. RGB

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

18. Hex

Шестнадцатеричное число — это шестизначное число, используемое в HTML, CSS и приложениях для дизайна для представления цветов.

19. Палитра

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

20. Монохромный

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

21. Аналогичные

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

22. Дополнительные

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

23. Triadic

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

24. CMYK

CMYK — это цветовая модель, которая используется для печати. Цвета CMYK начинаются с белого, а затем становятся темнее по мере объединения большего количества цветов.

(через)

25. Pantone

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

26. Теплые цвета

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

27. Холодные цвета

Холодные цвета, такие как синий, зеленый и светло-фиолетовый, успокаивают и успокаивают.

28. Теория цвета

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

Хотите узнать больше о теории цвета? Проверьте: Почему Facebook синий? Наука цвета в маркетинге.

29. Градиент

Градиент — это постепенное изменение цветов (например, постепенное превращение зеленого в синий) или переход цвета в прозрачность. Есть два распространенных типа градиентов: радиальный и линейный.

30. Непрозрачность

Непрозрачность позволяет сделать элемент дизайна прозрачным. Чем ниже непрозрачность, тем прозрачнее элемент. Например, непрозрачность 100% означает, что объект твердый.

31. Оттенок

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

32. Оттенок

Оттенок — это разновидность цвета. Крафтси объясняет, что оттенков создаются, когда вы добавляете белого к любому оттенку на цветовом круге.Это осветляет, а обесцвечивает оттенка, делая его менее интенсивным.

Брендинг и логотипы

33. Логотип

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

34. Логотип / торговая марка

Знак логотипа обычно не содержит названия компании и вместо этого представляет эту компанию более абстрактно с помощью символа или знака.

35. Значок

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

36. Руководство по стилю

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

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

37. Сетка

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

Используя сетку дизайна Buffer, страницу можно разделить на пятые, четвертые, трети и половины — и любую их комбинацию. Каждая строка сетки должна содержать части, которые в сумме составляют одно целое. Например, одна четверть + половина + одна четверть.

Термины и методы проектирования

38. Масштаб

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

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

39. Соотношение сторон

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

• ширина: высота
• Это означает, что 4 дюйма в ширину и 3 дюйма в высоту будут иметь соотношение 4: 3

40.Текстура

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

41. Наклонение

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

(через)

42. Пробел

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

Отличным примером белого пространства является домашняя страница Google. Он почти заполнен пробелами, чтобы побудить пользователей сосредоточиться на строке поиска:

43. Разрешение

Разрешение изображения определяет качество.Как показывает практика, чем выше разрешение, тем выше качество. Изображение с высоким разрешением будет четким и четким, тогда как изображение с низким разрешением будет немного неровным и размытым.

44. Контраст

Контраст возникает, когда два элемента на странице различны. Например, это могут быть разные цвета текста и цвета фона или темные и светлые цвета.

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

45. Насыщенность

Насыщенность означает интенсивность или чистоту цвета. Чем насыщеннее цвет, тем ярче он выглядит. В то время как ненасыщенные цвета кажутся более тусклыми.

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

46. Размытие

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

47. Обрезка

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

48. Пиксель

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

49. Скеоморфизм

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

50. Плоский

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

(через)

51. Растровые

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

52.Vector

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

Обращаюсь к вам

Надеюсь, это погружение в термины и определения дизайна было для вас полезным. Удивительно, как быстро маркетологи могут использовать такие инструменты, как Canva и Pablo, для создания красивых изображений.

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

Дополнительная литература:

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

Начни бесплатно прямо сейчас

50 слов дизайна, которые необходимо знать

50 слов дизайна, которые необходимо знать | Canva

Ваш браузер не поддерживается и может работать хуже.

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

Кернинг, трекинг, теплые цвета, холодные цвета, CMYK, RGB, OMG. Используется множество технических терминов, и в лучшем случае это может сбивать с толку. Но если вы запутались, не бойтесь — мы здесь, чтобы помочь.

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

01. Типографика

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

Better2Web

02. Основной текст

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

Два очка.Net

03. Тип дисплея

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

TBA + D

04. Иерархия

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

Почему каждому дизайну нужны три уровня типографской иерархии

05.Кернинг

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

06. Интерлиньяж

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

07. Отслеживание

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

08. X-Height

Средняя высота строчных букв. X-height получил свое название, поскольку это значение обычно иллюстрируется высотой буквы x в любом заданном шрифте.

09. Ascender

Часть строчной буквы, выходящая за высоту x. Некоторые распространенные примеры — «b», «d», «f» и т. Д.

10. Descenders

Часть строчной буквы, которая выходит за пределы x-высоты. Типичными примерами этого являются «g», «j», «p» и т. Д.

11. Сироты и вдовы

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

20 типографских ошибок, которые делает каждый новичок — и как их избежать

12. Шрифт с засечками

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

Авраам Линкольн Фрэнсис МакЛауд

13.Шрифт без засечек

Шрифт без мелких декоративных штрихов с засечками. Гротески выглядят современнее, стильнее и чище, чем их аналоги.

Maven Pro, автор: Джо Принс

14. Script Typeface

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

Сценарий миссии Джеймса Т. Эдмондсона

15.Slab Serif Typeface

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

Картонная коробка от Ника МакКоскера

16. Разборчивость

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

17. Выравнивание

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

18. Цитата по запросу

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

Mikael Fløysand

19. Палитра

Выбор цветов, которые вы выбираете для своего дизайна.

Canva

20. Монохромный

Цветовая схема, состоящая только из одного цвета, включая более светлые и темные тона этого цвета.

21. Аналогичный

Цветовая схема, построенная из трех цветов, расположенных рядом друг с другом на цветовом круге.

22. Дополняющий

Цветовая схема, состоящая из двух цветов, расположенных напротив друг друга на цветовом круге.

23. Triadic

Цветовая схема, построенная из трех цветов, равномерно распределенных по цветовому кругу.

24. CMYK

CMYK или «Голубой, пурпурный, желтый, ключ» — это цветовая модель, которая используется для печати. CMYK — это субтрактивный цвет, это означает, что мы начинаем с белого и заканчиваем черным. Итак, чем больше мы добавляем цвета, тем темнее становится результат.

LCI Paper

25. RGB

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

LCI Paper

26. Pantone (PMS)

«Система соответствия Pantone» — это стандартизированная система цветов для печати. Каждый оттенок Pantone пронумерован, что упрощает поиск и определение точных оттенков цвета.

Neverland Studio

27. Теплые цвета

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

28. Холодные цвета

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

29.Теория цвета

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

Руководство маркетолога по созданию запоминающегося бренда, привлекающего внимание

30. Градиент

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

31. Непрозрачность

Степень прозрачности элемента. Чем ниже непрозрачность, тем прозрачнее элемент.

32. Разрешение

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

33. Контраст

Степень различия между двумя соседними элементами.Некоторые другие распространенные типы контраста: темный против светлого, толстый против тонкого, грубый против гладкого и т. Д.

34. Насыщенность

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

35. Стоковое Фото

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

Unsplash — Оленька Котик

36. Правило третей

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

Безумная фотография

37. Торговая марка

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

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

38. Идентичность бренда

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

39. Логотип

Тип логотипа, в котором название компании разработано визуально. Подумайте о таких брендах, как Google, Ikea, Disney.

Creative Bloq

40. Торговая марка

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

Creative Bloq

41. Набросок эскиза

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

Adham Dannaway

42. Сетка

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

20 правил проектирования, которые нельзя нарушать

43. Масштаб

Изменение размера объекта при сохранении его формы и пропорций. Крупный масштаб может создать драму, а меньший масштаб может создать мелкие детали.

Эрин Факлер

44.Текстура

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

Беспорядок

45. Белое пространство

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

Крис Балласиотес

46. Поля

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

Жоау Оливейра

47. Высечка

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

Atipo

48. Тиснение фольгой

Нанесение фольги методом прессования фольгой на определенные части дизайна для придания им блестящего металлического покрытия.

Congostudio

49. Высококачественная печать

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

Эли Клеппе

50. Lorem Ipsum

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

LRB Blog

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

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

Воплотите свои идеи в жизнь за считанные минуты.

Выразите себя с помощью самой простой в мире программы дизайна.

Навигация по нижнему колонтитулу

---

© 2021. Все права защищены. Canva®

Глоссарий по дизайну пользовательского интерфейса: 84 ключевых термина, которые помогут вам начать работу

User Experience Design или UX Design — одна из многих дизайнерских специальностей в современной индустрии дизайна.

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

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

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

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

Affordance: форма кнопки сама по себе дает пользователю представление о том, как ее можно использовать.

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

Agile / Agile UX: «Agile» описывает методологию разработки программного обеспечения, которая также может быть применена к другим дисциплинам, таким как дизайн.Он выражает идею о том, что работа по проектированию не должна быть отдельным отдельным шагом в более длительном процессе. Вместо этого он должен вовлекать другие отделы и заинтересованные стороны на протяжении всего процесса, чтобы итеративно улучшать дизайн посредством сотрудничества и анализа с разных точек зрения.

Android: t Операционная система, разработанная Google, которая работает на 88% смартфонов в мире.

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

Back-end разработка: инженерная роль, которая сосредоточена на том, как продукт программируется «под капотом». Это гораздо больше ориентировано на вычисления и функциональность базы данных — интерфейсный разработчик обычно занимается визуальной стороной.

Backlog: очередь работ, которые необходимо выполнить над продуктом. Отставание — это не плохо, потому что всегда будет больше работы, чем есть время или ресурсы.Кроме того, поскольку многие современные продукты изначально выпускаются как «минимально жизнеспособные продукты», с самого начала эффективно спроектирован «долг» проектирования и разработки. (См. Также минимальный жизнеспособный продукт , долг .)

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

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

Кнопка: элемент интерфейса, который при нажатии или нажатии запускает определенное действие (например, отправку формы).

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

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

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

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

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

Коэффициент конверсии: скорость, с которой посетители определенного сайта, страницы или экрана выполняют запланированный поток или действие. Например, целевая страница, на которой было 4000 посетителей и 2000 подписок, имеет коэффициент конверсии 50%.

Оптимизация коэффициента конверсии (CRO): практика внесения изменений в дизайн для увеличения скорости, с которой посетители определенного сайта, страницы или экрана выполняют запланированный поток или действие.

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

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

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

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

Дизайн-спринт: пять этапов.

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

Design System: библиотека элементов пользовательского интерфейса, компонентов и рекомендаций, которые используются в качестве основы для любых новых и обновленных функций продукта. Цели дизайн-системы включают: поддержание единообразия продукта при добавлении новых функций; упрощение обновления компонентов для всего продукта; и сокращение времени разработки любого проекта. Атомный дизайн Брэда Фроста в последние годы стал очень влиятельной основой для размышлений о дизайн-системах.

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

Конечный пользователь: любой пользователь приложения или веб-сайта. Обратите внимание, что не все конечные пользователи являются покупателями: почти у каждого продукта есть конечные пользователи внутри компании. (Рассмотрение самого широкого определения «пользователей» — одна из особенностей дизайна услуг.)

Eye Tracking: — расширенный метод оценки визуальной иерархии информации на экране.Айтрекеры записывают, куда и как долго пользователь смотрит на экран. Результаты часто отображаются в формате «тепловой карты»; затем эту информацию можно использовать для оптимизации конструкции.

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

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

Плавающая кнопка действия (FAB): элемент пользовательского интерфейса (UI), который находится в верхней части экрана, часто в правом нижнем углу, и не перемещается, когда пользователь прокручивает.Примером FAB является плавающая кнопка «плюс» в интерфейсе Gmail. Узнайте, как создать прототип FAB в Figma!

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

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

Рамка (в программном обеспечении для проектирования): в пакетах для проектирования, включая Figma, «рамка» — это другое название монтажной области. Узнайте больше в Figma 101.

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

Front-End Development: роль разработчика, направленная на проектирование внешнего вида и взаимодействия с сайтом или приложением.Навыки фронтенд-разработки обычно включают HTML, CSS и Javascript.

Full Stack: обычно используется в контексте «разработчика полного стека». Этот термин относится к человеку или роли и означает, что этот человек обладает навыками разработки как внешнего, так и внутреннего интерфейса. Все чаще можно услышать термин «дизайнер полного цикла» — обычно это означает, что человек обладает сочетанием навыков UX, визуального / пользовательского интерфейса и графического дизайна / иллюстрации.

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

Github: платформа для размещения кода и управления версиями, часто используемая разработчиками.

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

Графический интерфейс пользователя: Xerox Star (1981) имел один из первых массовых графических интерфейсов пользователя.

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

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

Формат обмена графикой (GIF): устаревший формат веб-графики.Он снова стал популярным, поскольку позволяет создавать покадровую анимацию. Сейчас он используется почти исключительно для анимации, но будьте осторожны! Анимированные GIF-файлы позволяют создавать файлы большого размера.

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

Взлом: в разработке программного обеспечения, взлом — это быстрое решение конкретной проблемы или ошибки, но, вероятно, не будет долгосрочным решением.

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

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

Язык разметки гипертекста (HTML): стандарт разметки, используемый для кодирования веб-страниц. HTML прошел через множество итераций, последняя из которых — HTML5. Веб-стандарты неформально координируются организацией W3C, и вы можете начать изучать HTML в W3schools.

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

iOS: Операционная система, на которой работают iPhone и iPad от Apple.

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

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

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

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

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

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

[Вам нравится этот глоссарий? Ознакомьтесь с нашими короткими курсами «Дизайн 101» и «Дизайн пользовательского интерфейса» и продолжите обучение с наставником. Узнать больше!]

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

Near Field Communication (NFC): технология, позволяющая двум физическим устройствам, находящимся в непосредственной близости, обмениваться информацией. Это технология, которая позволяет вам использовать свой смартфон для оплаты на кассах.

Net Promoter Score (NPS): инструмент управления, который измеряет удовлетворенность и лояльность клиентов продукта. Оценка NPS варьируется от -100 (худшее) до +100 (лучшее).

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

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

Paper Prototyping: создание прототипа продукта с использованием грубых набросков интерфейсов на листах бумаги. Бумажное прототипирование часто используется в дизайнерских спринтах и ​​в любых других условиях, где требуется быстрое прототипирование. Ознакомьтесь с нашим постом о быстром прототипировании в дизайнерских спринтах.

Персона: снимок архетипа целевого пользователя.

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

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

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

Progressive Enhancement: практика добавления функциональности или визуальной отделки по мере устранения технических ограничений. Например, браузер, поддерживающий передовые веб-стандарты, может допускать дополнительные штрихи, когда дело доходит до взаимодействия и анимации.Узнайте больше о прогрессивных улучшениях в журнале Smashing Magazine.

Progressive Web App (PWA): приложение, которое запускается в веб-браузере, но имеет уровень функциональности, больше похожий на традиционное автономное программное обеспечение. Примеры PWA включают платформы управления проектами, такие как Asana, и сайты социальных сетей, такие как Twitter и Facebook.

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

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

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

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

Scrum: набор практик управления проектами, делающий упор на ежедневное общение, гибкое планирование и короткие, целенаправленные фазы работы.

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

Slack: широко используется удаленными командами.

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

Программное обеспечение как услуга (SaaS): практика предоставления программного обеспечения по онлайн-подписке, а не как отдельный продукт, приобретаемый разово.Подписка на Office 365 — это SaaS; Office 97 на компакт-диске поставляется в виде одноразовой лицензии.

Switch or Toggle: элемент пользовательского интерфейса, который позволяет пользователю включать или выключать настройку.

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

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

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

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

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

User Journey: описание шагов, которые пользователь должен пройти при использовании продукта. Обычно это представляет собой какую-то диаграмму, но форматы сильно различаются. Составление карты путешествий также используется в сервис-дизайне.Узнайте больше о разнице между UX-дизайном и сервис-дизайном в нашем блоге. (См. Также карту пути клиента .)

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

UX Analytics: использование данных, таких как подробная статистика использования приложений, для информирования дизайнерских решений UX.

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

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

Мы надеемся, что этот глоссарий оказался для вас полезным! Мы вернемся со второй частью этого глоссария UX / UI через несколько недель. Зарегистрируйтесь ниже, если хотите получить уведомление, когда мы его опубликуем!

Заголовок: Хосе Алехандро Каффиа через Unsplash

Ключевые термины, которые должен знать каждый графический дизайнер

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

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

Типы изображений

Растровые изображения

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

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

Векторные изображения

Векторные изображения (например, созданные в Illustrator CC) состоят из точек, каждая из которых имеет определенные координаты X и Y.Эти точки соединяют контуры, образуя фигуры, и внутри этих фигур можно добавлять цветные заливки. Поскольку все, что вы создаете, основано на этом, векторы можно увеличивать до любого размера без потери качества.

Векторные изображения (подобные этому) состоят из точек

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

Подробнее см. Как создать векторную графику: популярные уроки.

Цветовые режимы

При работе в Photoshop или Illustrator у вас есть возможность установить цветовой режим документа CMYK или RGB. Есть и другие цветовые режимы, но CMYK и RGB — это два, о которых вам действительно нужно знать.

CMYK

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

CMYK означает голубой, пурпурный, желтый, а ключ

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

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

RGB

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

Подробнее о цветовых системах читайте в этой статье.

Разрешение изображения

Разрешение — еще один ключевой термин, который часто путают. Когда речь идет о разрешении, используются два основных акронима: DPI и PPI.

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

DPI

DPI имеет значение только при создании работы для вывода на печать. Это расшифровывается как «точек на дюйм» и относится к количеству точек на дюйм на печатной странице. Как правило, чем больше точек на дюйм, тем лучше качество изображения. 300 точек на дюйм — это стандарт для печати изображений.

PPI

PPI означает «пикселей на дюйм» и, как и следовало ожидать, относится к количеству пикселей на дюйм в вашем изображении.Если вы увеличите изображение в Photoshop, вы увеличите количество пикселей на дюйм (с Photoshop, составляющим данные), и вы потеряете качество. Здесь есть отличное объяснение.

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

Следующая страница: Типографские термины, которые вы должны знать

63 Термины веб-дизайна, которые должен знать каждый маркетолог

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

Звучит знакомо?

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

Глоссарий окончательных терминов веб-дизайна

A / B / C / D / E / F / G / H / J / K / L / M / N / O / P / R / S / T / V / W / X / Z

A

1) Выравнивание

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

Источник: Pixabay

2) Аналогичные цвета

Цвета, которые появляются рядом друг с другом на цветовом круге.

Источник: nopira

3) Восходящее устройство

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

Источник: Макс Нейлор

B

4) Исходный

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

Источник: Макс Нейлор

С

5) Высота крышки

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

Источник: Макс Нейлор

6) Цветовая модель CMYK

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

Источник: Capsoul

7) Цветовое колесо

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

Источник: nopira

8) Цветовые схемы

Комбинация двух или более цветов из цветового круга — также известная как цветовая гармония.

9) Дополнительные цвета

Цвета, прямо противоположные друг другу на цветовом круге.

Источник: nopira

10) Сжатие

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

11) Контрастность

Подчеркивание различий между цветами, формами, интервалом или любым другим элементом дизайна.

Источник: Pixabay

12) Урожай

Когда внешние части изображения удаляются для изменения кадра объекта или для изменения соотношения сторон изображения.

13) CSS

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

D

14) Спусковое устройство

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

Источник: Макс Нейлор

15) Точек на дюйм (DPI)

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

16) Падающая тень

Визуальный эффект, который отображает графику так, как если бы за ней была тень.

Источник: Tizio

E

17) EPS

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

18) Удлинитель

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

F

19) Растушевка

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

20) Шрифт

Шрифт одного определенного стиля и размера. Например, шрифт Times New Roman полужирный размер 14.

G

21) GIF

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

Источник: Мануэль Альмагро Ривас

22) Градиент

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

Источник: Public Domain Pictures

23) Сетка

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

H

24) ШЕСТИГРАННЫЙ код

Код, используемый в HTML и CSS для обозначения определенного цвета, часто появляется после знака решетки (#).Ниже представлена ​​таблица цветовых кодов HEX:

Источник: bmdavll

25) HTML

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

26) Оттенок

То, что большинство людей называют «цветом» — красный, оранжевый, желтый и т. Д.

Дж

27) JPEG

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

К

28) Кернинг

Расстояние между отдельными буквами.

Источник: Шербайт

L

29) Ведущая

Расстояние между строками шрифта.

30) С потерей

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

31) Без потерь

В отличие от сжатия с потерями, этот формат позволяет восстанавливать детали изображения.

M

32) Средняя линия

Расстояние от базовой линии до верха большинства строчных букв, включая «e», «g» и кривую «h». Также известно как «медиана», как показано ниже. См. Восходящий элемент, высоту заглавной буквы и спусковое устройство.

Источник: Макс Нейлор

N

33) Негативное пространство

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

Источник: Public Domain Pictures

O

34) Шрифты открытого типа

Текущий стандарт форматов шрифтов.Он содержит версии экрана и принтера в одном файле и совместим как с Windows, так и с Mac. Расширение файла — .otf.

35) Сирота

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

Источник: Маат

P

36) Пантон

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

Источник: Pixabay

37) PDF

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

38) Пиксель

Самый маленький элемент изображения на компьютере.

39) пикселей на дюйм (PPI)

Еще одна мера разрешения изображения, в зависимости от того, сколько пикселей присутствует в данном разделе изображения.

40) PNG

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

R

41) Прямоугольные (или тетрадные) цвета

Четыре цвета, представляющие собой две пары дополнительных цветов.

Источник: nopira

42) Разрешение

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

43) Модель цвета RGB

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

Источник: Майк Хорват

S

44) Насыщенность

Насколько яркий или насыщенный цвет.

Источник: SharkD

45) С засечками

Маленькая линия, прикрепленная к концу штриха в некоторых шрифтах. «Без засечек» относится к шрифтам, у которых нет этой строки.

Источник: GJo

46) Оттенок

Сколько черного смешано с оттенком.

47) Разделение дополнительных цветов

Цвета, состоящие из основного цвета и двух цветов, лежащих рядом с его дополнительным цветом.

Источник: nopira

48) Квадратные цвета

На цветовом круге четыре цвета равномерно разнесены друг от друга.

Источник: nopira

49) Шток

Первичный вертикальный штрих в письме. Он используется в букве «B» и диагональной линии «V».

50) Штрихи

Строки, составляющие букву гарнитуры.

т

51) Хвост

Нисходящий штрих в букве, которая часто бывает декоративной, например в букве «Q».

52) Терминал

Конец обводки без засечек.

53) Оттенок

Сколько белого смешано с оттенком.

54) Триадные цвета

Цветовая схема, в которой сочетаются три цвета, расположенные под углом 120 градусов друг от друга на цветовом круге. Часто считается лучшей цветовой схемой.

Источник: nopira

55) Гарнитура

Дизайн-набор символов, включая буквы, цифры и знаки препинания. Примеры включают Times New Roman, Helvetica и Arial.

В

56) Векторное изображение

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

57) Визуальная иерархия

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

Вт

58) Водяной знак

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

59) Масса

В шрифтах — толщина обводки. Некоторые примеры включают полужирный, светлый и полужирный.

60) Белое пространство

Пустое пространство вокруг объекта в дизайне — также видим негативное пространство.

Источник: Pexels

61) Вдова

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

Источник: Маат

х

62) Высота X

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

Источник: Макс Нейлор

Z

63) ZIP файл

Формат файла, в котором несколько файлов сжимаются и объединяются в одну папку. Сжатые файлы не теряют никаких данных при уменьшении и легко восстанавливаются путем распаковки ZIP-файла.

Какие еще термины веб-дизайна вы бы добавили в список? Дайте нам знать об этом в комментариях.

Примечание редактора: этот пост был первоначально опубликован в июле 2013 года и был обновлен для обеспечения точности и полноты.

Визуализация терминов графического дизайна

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

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

Не растягивая вступление, давайте запустим двигатель и двинемся дальше.

Дизайн логотипа и брендинг

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

Макет

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

Проектирование канцелярских товаров

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

Логотип

Технически логотипы словесных знаков и логотипы буквенных знаков подпадают под эту категорию. В отличие от логотипа, логотип основан на слове (алфавитах или знаках для произношения).

Графический дизайн

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

Золотое сечение

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

Знаки урожая

Технологический гигант

Microsoft описывает метки обрезки как «линии, напечатанные в углах листа публикации или листов бумаги, чтобы показать принтеру , как обрезать бумагу ». Например, если вы сделали визитную карточку на листе формата А4, то метки обрезки появятся у принтера при обрезании ненужных битов.

Штриховая графика

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

Муаровый узор

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

Пейзаж

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

Вес хода

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

Радиальный

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

Печатные СМИ

В современном цифровом мире печатные СМИ считаются традиционными, но есть несколько терминов, на которые следует обратить внимание на тот случай, если вам нужно что-то напечатать.

Нокаут

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

Разворот страницы

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

Типографика

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

Плита с засечками

Шрифты

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

Семейство типов

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

Исследование: выбор шрифта для графического дизайна

Подстрочный индекс

Вы помните маленький номер, прикрепленный к h3O? Ну, эта маленькая двойка называется нижним индексом, то есть символом, написанным под базовой линией.

Центровка типа

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

Рука

В анатомии шрифта рука — это восходящая или горизонтальная наклонная линия (штрих), которая не связана с каким-либо другим персонажем. Примеры рукава указаны заглавными буквами «V», «E» и «T». Оружие тоже маленькими буквами.

Керн

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

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

Двусторонние засечки

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

Ухо

Это не часть тела человека, а буква.Буквы «g» и «r» в заглавных буквах имеют ухо.

Скрипт

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

Вес

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

Расчетное предложение

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

Линия роста волос

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

Нога

Ножки шрифта, также известные как хвосты, представляют собой штрихи под углом, которые вы можете увидеть заглавными буквами, такими как «Q», «R» и «K» — они могут быть прямыми или плавными в зависимости от стиля шрифта.

Цвета

Мир без цветов определенно будет скучным! Цвета везде: в природе и в рукотворных вещах. У цветов есть типы, настроение, значения и индивидуальности. Дизайнерам необходимо понять целую психологию цвета.

CMYK

Это аббревиатура от Cyan, Magenta, Yellow и Black. Эти четыре цвета используются для печати чего угодно, от буклетов до профессиональных визитных карточек. Цвета CMYK субтрактивны, поэтому их внешний вид блеклый или приглушенный — цвета становятся темнее, когда вы начинаете их смешивать.

Также изучите: Стандарты цвета в графическом дизайне

Теплые тона

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

RGB

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

Оттенки серого

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

шестигранник

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

Непрозрачность

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

Поддон

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

Фотография

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

Размытие

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

Ноллинг

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

Изображение с низким разрешением

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

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

.