Термины дизайна: 65 терминов дизайна, которые вам следует знать — Оди. О дизайне
65 терминов дизайна, которые вам следует знать — Оди. О дизайне
Дизайнерам бывает непросто описать визуальную часть проекта, поскольку не все разбираются в дизайне. Будучи фрилансером, вам необходимо донести свою идею до потенциальных клиентов и объяснить (или продать) свой дизайн. К тому же умение давать обратную связь и понимание заказчиком того, о чем вы говорите, делает вас дизайнером, которому можно доверять.
В этой статье мы рассмотрим 65 терминов дизайна, которые помогут доносить суть концепций дизайна простыми словами. Язык дизайна очень обширен и может быть сложным для понимания, особенно для тех, кто не является специалистом в этой области. Поэтому, возможно, этот список определений поможет вам разобраться в том, как можно объяснить термины дизайна так, чтобы вас понимали.
10 основных терминов дизайна
Композиция (Composition)
Композиция, также называемая вёрсткой, — это визуальное расположение элементов дизайна, которое создаёт завершенный образ.
Для создания визуально приятной работы в рамках композиции можно использовать различные принципы дизайна и тем самым обеспечить ей функциональность.
Баланс (Balance)
Любой элемент, размещенный на странице, имеет визуальный вес, на который могут оказывать влияние форма, размер, цвет и текстура. Для обеспечения баланса в макете, возможно, потребуется изменить масштаб некоторых элементов.
Выравнивание или Выключка (
Alignment)Под выравниванием понимается расположение элементов в макете в одну линию. Выравнивание может быть по левому краю, по правому краю, по ширине или по центру.
Чтобы получить больше информации на эту тему, рекомендуем ознакомиться с серией статей Игоря Штанга про выключку:
Памятка верстальщика
Выключка по формату
Выключка по левому краю
Выключка по центру
Выключка по знаку
Выключка по правому краю
Повторение (Repetition)
Повторение создает последовательность за счет многократного повтора одного и того же элемента в макете.
Контраст (Contrast)
Контраст — это уровень различия между разными элементами дизайна, который создает визуальную иерархию. Они могут отличаться по форме, цвету, текстуре и размеру.
Свободное пространство (
Negative Space)Свободное пространство — это пустая область вокруг элемента дизайна. Оно используется для того, чтобы выделить определенные части макета и обратить внимание на конкретный элемент.
Иерархия (Hierarchy)
В графическом дизайне вы быстро научитесь располагать элементы по степени важности. Это и есть иерархия. Чтобы ее создать, в дизайне должен присутствовать контраст. Если одно изображение больше другого, разница в размере поможет сделать акцент на более крупном изображении, и читатель посмотрит на него в первую очередь.
Разница между Симметрией и Асимметрией (
Symmetry / Asymmetry)Симметрия означает равное количество элементов, расположенных на странице. Если провести вертикальную линию через центр страницы, то элементы будут либо зеркально отражены по отношению друг к другу, либо визуальный вес каждой половины будет одинаковым.
Противоположностью симметрии является асимметрия. Элементы по обе стороны от центральной линии неравны и могут нарушать баланс в дизайне.
Сетка (Grid)
Сетки — это группы пересекающихся вертикальных и горизонтальных линий, которые могут помочь структурировать содержимое страницы. Есть множество типов сеток для различных целей, но общим является то, что они помогают упорядочить контент и поддерживать аккуратность в макете.
Если вы хотите узнать больше о композиции и терминах дизайна, возможно, вы найдете полезной эту статью: The Principles of Design
11 важных терминов цвета
Разница между схемами CMYK и RGB
Давайте рассмотрим некоторые термины цвета. Аббревиатура CMYK расшифровывается как голубой (Cyan), пурпурный (Magenta), желтый (Yellow) и базовый (черный) (Key (Black)). Это четыре основных цвета, которые используются для печати. Цвета CMYK не такие яркие, как RGB. Дело в том, что схема CMYK является субтрактивной. Это означает, что цвета работают с отражаемым светом.
(Отражаемый свет — это свет, который «отскакивает» от поверхности объекта, отражается от него. Излучаемый свет — это свет, который исходит из какого-либо активного источника: лампочки, экрана монитора, телевизора).
Цвета RGB используются только на экране. Аббревиатура RGB расшифровывается как красный (Red), зеленый (Green) и синий (Blue). Эта цветовая модель является аддитивной, то есть, комбинация этих трех цветов создает большой диапазон различных оттенков.
Цветовая модель Grayscale
В лексике графического дизайна Grayscale — это монохроматическая палитра, в которой используются различные оттенки серого.
Непрозрачность (Opacity)
Это уровень прозрачности элемента. Чем меньше значение непрозрачности, тем прозрачнее элемент. Если значение непрозрачности установлено на 100%, это означает, что объект является полностью непрозрачным.
Насыщенность (Saturation)
Насыщенность — это интенсивность цвета. Можно заметить, что насыщенные изображения выглядят более яркими и красочными.
Ненасыщенные — тусклые и почти бесцветные.
Разница между Тоном (Hue), Тональностью (Tone) Оттенком (Tint) и Тенью (Shade)
Тон (Hue) — это способ описания чистого цвета без оттенка (без добавления белого) или тени (без добавлением черного). Например, любой цвет на цветовом круге является тоном (синий, желтый).
Тональность (Tone) — это тон с добавлением серого. Тональность снижает интенсивность цвета, и он может стать тусклым.
Оттенок (Tint) — это тон с добавлением белого, чтобы осветлить его и сделать более бледным. Оттенок может варьироваться от чуть более светлого цвета до полностью белого, почти бесцветного.
Тень (Shade) означает добавление к цвету черного. Она является противоположностью оттенку — вместо того, чтобы сделать цвет светлее, тень затемняет его.
Цветовая палитра
Цветовая палитра — это группа цветов, которые могут быть использованы в конкретном дизайнерском проекте.
Как правило, она представляет бренд и должна быть подобрана так, чтобы ее цвета гармонировали друг с другом.
Цветовая модель Пантон
Цветовая модель Пантон (PMS или Pantone Matching System) — это наиболее широко применяемая система сочетания цветов, отличная от CMYK. Каждому оттенку присвоен номер, который дизайнерам легко использовать и воспроизводить при печати.
Узнать больше об определениях цвета можно в этой статье: The basic elements of design
8 технических терминов дизайна
Разрешение
Разрешение изображения определяет качество файла. Изображение с высоким разрешением будет четким, где бы ни находился фокус. Чем выше разрешение, тем выше качество. Изображение с низким разрешением будет пикселированным и размытым.
Пиксели
Пиксель — это самая маленькая базовая единица цвета на компьютере, из которой формируются изображения. В зависимости от количества этих крошечных квадратиков можно получить изображение с высоким или низким разрешением.
Разница между PPI и DPI
В терминологии графического дизайна понятие PPI (pixels per inch) означает количество пикселей на дюйм. Это измерение, используемое для определения разрешения экрана, чаще всего мониторов, камер и сканеров.
DPI (dots per inch) аналогично PPI, но используется для печати и означает количество точек на дюйм. Принтеры создают изображения, состоящие из мелких точек, которые влияют на качество печати изображения.
Разница между Кадрированием и Обтравкой элемента
Кадрирование — это удаление ненужных частей изображения. С его помощью можно полностью изменить направление, акценты и даже композицию. Кадрирование улучшает обрамление картинки в соответствии с требованиями проекта.
Обтравка элемента означает вырезание определенного объекта из изображения. Как правило, эта функция применяется для вырезания снимка головы, если необходимо использовать фон другого цвета.
Обрезка
Размер макета должен быть чуть больше размера финального печатного изделия, потому что существует процесс обрезки полей.
Он определяется по меткам, которые находятся на печатном листе.
Правило третей
Эта техника используется для определения фокусных точек изображения или дизайна. Представьте себе сетку 3×3 поверх изображения или дизайна. Четыре точки, в которых пересекаются линии, являются фокусными. Именно в этих областях следует размещать наиболее важные элементы.
Узнать больше о сетках можно в этой статье: How to Create Layout Templates in InDesign (For Magazines, Newsletters, and More!)
18 терминов типографики
Разница между шрифтом с засечками (Serif) и шрифтом без засечек (Sans Serif)
Засечка — это небольшой дополнительный штрих на конце каждого символа. Семейство шрифтов, в которых используются засечки, называется гарнитурой с засечками или антиквой. Такие шрифты, как правило, являются более удобными для чтения, потому что нашим глазам легче следить за символами при наличии дополнительного штриха. Шрифты с засечками часто используются для основного текста, поскольку они считаются элегантными и в зависимости от размера хорошо читаются.
Шрифт без засечек или гротеск — это шрифт, у которого нет маленьких штрихов на конце символа. Шрифты без засечек также применяются для основного текста, но преимущественно в интерфейсах, поскольку мелкие детали могут плохо восприниматься глазом с экрана.
Рукописный шрифт
Рукописные шрифты — это шрифты, выполненные от руки или имитирующие их. Они могут относиться к прошлому или быть современными. Рукописные шрифты обладают большей плавностью по сравнению с другими традиционными шрифтами.
Брусковый шрифт или Брусковая антиква
Это еще один ключевой термин типографики, который необходимо знать. Брусковые шрифты характеризуются более толстыми и мощными засечками по сравнению с обычными шрифтами с засечками. В зависимости от шрифта засечки могут быть квадратными, угловатыми или закругленными.
Моноширинный шрифт
Моноширинные шрифты имеют фиксированную ширину, то есть каждый символ занимает одинаковое количество горизонтального пространства. Такой шрифт можно увидеть на печатных машинках или при написании компьютерных кодов.
Разница между Кернингом и Трекингом
В лексике графического дизайна кернинг — это пространство между двумя определенными символами. Между парой букв может появиться неправильное расстояние. Кернинг позволяет скорректировать пространство между ними. Настройка кернинга позволяет улучшить читаемость текста.
Как и кернинг, трекинг относится к расстоянию между символами. В то время как кернинг относится к паре символов, трекинг применяется ко всей группе букв.
В этой статье можно узнать больше о ключевых терминах типографики: Readability and Typesetting Basics: Kerning, Tracking, Leading, and More!
Межстрочный интервал или Интерлиньяж
Межстрочный интервал определяет расстояние между базовыми линиями шрифта соседних строк. Он обеспечивает достаточное место между строками для комфортного чтения.
Начертание
Начертание характеризуется определенными пропорциями (узкое, нормальное, широкое и др.), насыщенностью (светлое, полужирное, жирное и др.
), наклоном знаков (прямое, курсивное или наклонное). Нередко встречаются шрифты, которые содержат от четырех до двенадцати начертаний.
Размер шрифта (Размер в пунктах)*
Это ещё один ключевой термин типографики: шрифт измеряется в пунктах, которые определяют высоту символа. В 1 дюйме или в 2,54 см содержится 72 пункта.
*Прим.пер. Размер шрифта измеряют и в других единицах, например, в пикселях.
Разница между Верхним и Нижним регистрами
Символы верхнего регистра используются в начале предложений или в качестве первой буквы имен собственных. Их также называют прописными или заглавными. Название «верхний регистр» пришло из старых типографий. Типографы хранили прописные символы в верхнем ящике стола.
Строчные глифы — это не заглавные буквы. Они составляют остальную часть текстового блока. Название «нижний регистр» происходит от старинного способа набора текста на печатных станках. Типографы хранили строчные буквы в нижнем ящике стола.
Малые прописные буквы или Минускул
Малые прописные буквы — это прописные символы, которые короче обычных прописных букв шрифта.
Некоторые шрифты содержат малые прописные буквы, а другие — нет, и их генерирует используемое программное обеспечение. Когда малые прописные буквы являются частью шрифта, они обычно имеют ту же высоту, что и строчные символы, или могут быть чуть выше.
Lorem Ipsum или «Рыба»
Lorem Ipsum — это текст-заменитель, который может помочь показать дизайн при отсутствии текстового контента. В основном он используется в начале процесса проектирования для создания макета, пока не будет готова окончательная версия.
Разница между Удобочитаемостью и Разборчивостью текста
Удобочитаемость определяется расположением блоков текста на странице. Разборчивость характеризуется тем, насколько хорошо можно отличить один символ от другого.
Вдовы и сироты
Вдовы и сироты встречаются при наборе текста, и их следует избегать. Вдова — это одно слово на целой строке в конце абзаца или очень короткая строка в конце текста или страницы. Сирота — это висячая строка, которая попадает на начало новой страницы или колонки.
Если вы интересуетесь типографикой, обязательно загляните сюда: The Ultimate Guide to Basic Typography и The Different Types of Fonts: When to Use Each Font Type and When Not
8 стилей дизайна логотипов
Буквенный логотип или Монограмма
Буквенный логотип — это логотип, который состоит из нескольких букв. Его часто используют, если название компании состоит из двух или более слов. Логотип в виде монограммы сокращает название компании. В нем используются только ее инициалы, что помогает упростить восприятие наименования бренда. Например, слово NASA легче произнести и запомнить по сравнению со словосочетанием National Aeronautics and Space Administration.
Словесный логотип
В словесном логотипе название компании присутствует полностью, а не только ее отдельные символы. Например, Google уже является запоминающимся названием, но если при его написании использовать сильный шрифт и правильные цвета, то получится убедительный словесный логотип.
Графический логотип
В его основе лежит графическая форма.
Как правило, это иконка, которую упростили и стилизовали для представления бренда. Например, иконка Twitter — это птица, и во всем мире ее знают как Twitter.
Абстрактный логотип
Абстрактный логотип отличается от графического тем, что в его основе нет реального объекта. Вместо этого компанию представляет абстрактное геометрическое изображение. Логотип Adidas не содержит в себе ни одного элемента из реального мира. Вместо этого дизайнеры воплотили свои идеи в геометрической форме, которая наилучшим образом представляет бренд.
Эмблема
Эмблема — это логотип, в котором название компании размещается внутри определенной формы. Эмблема необязательно используется в мире бизнеса. Такой логотип часто представляет школы или спортивные команды.
Логотип-маскот (персонаж/талисман)
Логотип-маскот — это иллюстрированный персонаж, который может быть анимированным или статичным. Маскоты являются представителями бренда. Примером может служить знаменитый маскот Cheetos.
Комбинированный логотип
Это сочетание словесного, абстрактного, графического логотипа или маскота. Композиция этого логотипа может варьироваться в зависимости от элементов, которые в нем используются. Вспомните логотип Victoria’s Secret или Puma.
Фавикон
Это иконка быстрого доступа: логотип, основой которого является главный логотип. Фавикон очищен от лишних элементов и используется на веб-сайтах в целях брендинга и в качестве изображений профиля в социальных сетях. Некоторые узнаваемые фавиконы — это «a» для Amazon и «W» для Wikipedia.
10 обязательных форматов файлов изображений
Растровое изображение
Растровые изображения представляют собой сетку пикселей, которые вместе составляют цельную картинку. Если растянуть растровое изображение, оно станет пиксельным и размытым.
GIF
GIF расшифровывается как Graphics Interchange Format (Формат для обмена графикой). Этот формат поддерживает анимацию и прозрачность. Он может отображать до 256 цветов, что позволяет создавать небольшие файлы, идеальные для размещения в сети.
JPEG
JPEG — это наиболее известный растровый формат. Он используется в Интернете повсеместно. JPEG расшифровывается как Joint Photographic Experts Group — Объединенная группа экспертов по фотографии. Это название американской организации, в которой был разработан данный формат. В отличие от PNG, у JPEG отсутствует возможность быть прозрачным. Он подходит как для веба, так и для печати.
PNG
Если необходимо сохранить качество при сжатии изображения, PNG — это то, что нужно. PNG расшифровывается как Portable Network Graphics (Переносимая графика для работы в сети). Он был создан для улучшения качества GIF-изображений.
TIFF
Изображения TIFF используются в основном в верстке и InDesign. Он расшифровывается как Tagged Image File Format (Тегированный формат файла изображения). Он позволяет получить изображение более высокого качества по сравнению с вышеперечисленными форматами.
PSD
PSD — Photoshop Document (Документ программы Adobe Photoshop).
Этот формат представляет собой несжатый файл растрового изображения.
Вектор
Векторная графика состоит из мелких графических элементов, таких как точки, линии и кривые. Фигуры в векторе используют математическое уравнение, которое позволяет менять его размер без ухудшения качества. В отличие от растровых изображений векторы не расплываются.
AI
AI расшифровывается как Adobe Illustrator. Этот формат был разработан компанией Adobe для представления одностраничных векторных изображений внутри форматов EPS и PDF.
EPS
EPS означает Encapsulated PostScript — файл, формат которого описан на языке Postscript. Это изменяемый формат, который содержит векторы. В основном они используются для логотипов, чтобы их можно было масштабировать по мере необходимости в любом проекте.
PDF расшифровывается как Portable Document Format (Формат электронных документов). Он был разработан компанией Adobe и является самым распространенным форматом для загрузки и просмотра на любом компьютере.
Вот и все!
В этой статье собраны 65 терминов дизайна, о которых вам следует знать. Эти определения помогут описывать и обосновывать свои проекты клиентам и проявить себя в качестве эксперта. Объяснение терминов дизайна заказчикам также поможет вам быть с ними на одной волне.
48 терминов из дизайна, которые должен знать каждый маркетолог
Вы когда-нибудь задумывались, что станет для вас возможным в маркетинге даже с небольшим запасом знаний дизайна? Хотите вывести ваши соцсети на новый уровень, увеличить
количество подписчиков, лайков и шеров? Без хорошего визуального контента не обойтись! К счастью, в эру интернета обучение новому стало доступным каждому, кто умеет
пользоваться поисковиком. Чтобы легче было осваиваться в новой области, изучите эти 48 понятий дизайна и область их применения. Для удобства чтения мы разбили термины на
группы.
Оформление | Шрифты и отступы | Цвета | Брендирование | Работа с дизайном
От того, как вы разместите объекты на изображении, будет зависеть восприятие информации читателем.
Важно размещайте в целевых точках дизайна, остальное – не
должно отвлекать на себя много внимания.
Золотым сечением называют соотношение двух величин, когда в результате деления большего на меньшее получается число 1,618. Пользуясь правилом золотого сечения, вы
насыщенной части.
Ниже представлен пример того, как золотое сечение используется для разделения пространства между основной частью сайта и боковой панелью.
Представьте, что на вашем изображении нарисована сетка, которая своими линиями делит изображение на 3 равных части.
Чтобы картинки выглядели визуально лучше, размещайте объекты на линиях и точках их пересечения. Горизонт лучше всего размещать на одной из направляющих.
Точки сетки, в которых пересекаются направляющие, используйте как целевые места вашего дизайна.
Не существует обязательных правил, когда использовать тот или иной вид шрифта. Однако соблюдение ряда экспертных советов сделает текст более читабельным. основной части
Засечки – это как бы маленький «взмах» или завитушка на буквах. Самый известный представитель – Times New Roman. Шрифты с засечками лучше использовать для
заголовков и других выделяющихся элементов. Они цепляют взгляд читателя.
«Sans» означает «без», соответственно, «sans-serif» – шрифт без засечек на буквах. Типичный представитель – Arial.
Шрифты без засечек лучше подойдут для основной части текста. Ничто не будет мешать читателю воспринимать информацию.
Особенность шрифтов с засечками в виде пластин состоит в том, что они ощущаются более геометрическими и большими, чем традиционные шрифты с засечками.
Обычно стили этой категории используются в качестве дисплей-шрифтов.
становится нечитаемым.
Пример такого шрифта – Museo Slab.
Основаны на стиле письма от руки. Они более плавные, чем традиционные типы шрифтов. Хорошо подойдет для дизайна логотипов и общего оформления бренда.
Пример, как может
выглядеть текст шрифта в рукописном стиле.
Моноширинный шрифт (также известный как шрифт фиксированного шага, фиксированной ширины или непропорциональный шрифт) – когда буквы и остальные знаки (числа и значки
обозначений) занимают одинаковое количество горизонтального расстояния. Иными словами: и буква «ж» и буква «т» будут равны по ширине, равно как и цифра «2». Большой массив
моноширинного текста воспринимать сложно. Зато это может быть хорошим дизайнерским решением для заголовках на афишах.
Иерархия в типографике – это система организации, которая устанавливает порядок важности между данными, упрощает навигацию в контенте.
Это помогает направлять взгляд
читателя от начала секции к концу, позволяет выделить необходимую информацию.
Пример, иллюстрирующий важность иерархии объектов в тексте.
Кернинг — избирательное изменение интервала между буквами. Этот элемент определяет пространство между двумя специфическими буквами (или другими знаками: числами,
пунктуацией и тд). Таким образом, происходит регулировка пробелов, которая улучшает читаемость текста.
В английском языке есть понятие traking. Оно означает примерно то же, что и кернинг. Отличие состоит в том, что вместо фокусировки на пробелах между отдельными буквами
уделяется внимание пробелам между группой букв/между словами. Так же, как и кернинг, элемент необходим для улучшения читаемости текста.
Определяет то, какой будет пробел в тексте между строками. Используется, чтобы создать дистанцию между нижней частью одной строки и верхней частью строки следующей для
облегчения чтения.
Большой пробел между строками позволяет разделить текст на блоки, абзацы.
Небольшое разделение делает текст единым.
Это линии текста, которые остаются «в одиночестве» наверху или внизу абзаца. Есть 2 варианта висячих строк:
- Оставленное слово/словосочетание: когда на последней строке абзаца стоит одно слово или очень короткая строчка. Визуально строка выглядит маленькой, не
соответствующей остальным в абзаце. - Оставленная строка: последняя строка абзаца, которая была перенесена на начало следующей страницы. Она отделена от основной части текста.
На этапе верстки стараются убирать висячие строки. Неприязнь к ним объясняется эстетическими (текст лишается единообразия и своей прямоугольной формы) и техническими
причинами (висячие строки снижают читаемость текста).
Lorem Ipsum – это простой текст, классическая панграмма, используемая в дизайнерской индустрии. Обычно представляет собой бессмысленный текст, при написании которого
используются все или почти все буквы алфавита. Lorem Ipsum нужны для заполнения макета страницы.
Заодно помогает рассмотреть текст в заданных параметрах.
Подобранные цвета играют важную роль в восприятии авторского посыла. Одни цвета побуждают к действию, другие расслабляют. Отдельная сложность в подборе цвета – отличие
отображения тонов на дисплеях и бумаге.
RGB – цветовая модель, в которой основными являются красный, зеленый и синий цвета. Они смешиваются разными способами для воспроизведения широкого спектра цветов. В
другой техники, в цветах учитывается подсветка экрана.
Hex – модель, состоящая из 6 цветов, которую используют в HTML, CSS и в дизайне приложений программного обеспечения для репрезентации цветов.
CMYK – цветовая модель, которая используется для печати. Цвета CMYK изначально более светлые, чем получаемые при смешении цвета. Чем больше смешений, тем темнее
получаемый цвет.
Основой являются желтый, пурпурный, голубой и черный, смешение которых приводит к созданию новых цветов. Зачем нужна модель CMYK? Модель RGB создана для цифровых
экранов и при печати теряется яркость. Была необходима модель, которая будет сохранять цвета при печати.
Стандартизированная система подбора цветов. Каждый оттенок имеет свой номер, что упрощает процесс поиска и воспроизводства необходимого цвета.
Теплые цвета, как красный, оранжевый, желтый или вариации из этих цветов несут дружественный, радостный, уютный настрой.
Холодные цвета, такие, как синий, зеленый, фиолетовый, имеют способность успокаивать.
Схемы аналоговых цветов используют цвета, которые стоят рядом друг с другом в цветовом круге. Обычно они хорошо смотрятся вместе и создают спокойный и комфортный
дизайн.
Комплементарными называются цвета, которые находятся друг напротив друга в цветовом круге (например, красный и зеленый). Цвета, расположенные на противоположных точках
круга позволяют «играть» с контрастностью и выделением необходимых объектов.
Такая цветовая схема советует использовать цвета, которые расположены на равномерном расстоянии друг от друга на цветовом круге. Если соединить цвета точками, получится
Есть 3 базовых понятия в цветовой теории:
- Цветовые круги – дают подсказку, какие цвета лучше использовать вместе.
- Цветовая гармония – согласованность цветов в результате найденной их пропорциональности форм и объемов использования.
- Контекст того, как используются цвета, их влияние на человеческое восприятие.
Понимание того, как использовать разные цвета для передачи мнения, – важная часть как дизайна, так и маркетинга. Ниже представлен краткий гайд о том, как цвета
действуют на восприятие мозгом.
Цветовая палетка – набор цветов, которые могут быть использованы для всех иллюстраций или дизайнерских работ, что презентуют ваш бренд.
гармонично соотноситься с каждым другим.
Термин «монохромность» используется для описания дизайна или фотографий, которые сделаны в одном цвете или разных оттенках одного цвета. Прием часто используется для
приданию изображению эффекта старины.
Градиент – это постепенное изменение цвета в другой цвет (например, зеленый плавно переходит в синий) или плавный уход цвета в прозрачность. Есть 2 типа градиента:
линейный и радиальный.
На изображениях градиент может помочь сделать объект более реалистичными. Например, создать эффект подсветки.
Это позволяет сделать некоторые элементы дизайна прозрачными. Чем меньше уровень непрозрачности, тем более прозрачным выходит элемент. Например, 100% непрозрачность
означает объект в обычном виде.
Более прозрачные объекты «весят» меньше. Можно выделять остальные предметы на изображении. С помощью прозрачности «играют» с оттенками цветов.
Тон – способ описания цвета.
Любой цвет в цветовом круге – это тон. Красный, синий и желтый – это тона.
Оттенок – вариант цвета. Оттенки создаются при помощи добавления белого к любому цветовому тону в цветовом круге. Осветление и уменьшение тона делают цвет менее
интенсивным.
Насыщенные тона позволяют выделить главное. Использование оттенков делает объекты визуально мягче и легче.
Название, логотип, брендовый символ для бизнеса – почти как имя для человека. Определенный стиль компании подчеркивает ее уникальность и позволяет отличить от других.
Логотип – имя компании, которое выполнено в уникальном дизайне для использования бизнеса. Любой компании необходимо оформлять имя в виде логотипа, чтобы покупатель мог
легко и быстро идентифицировать продукцию.
Обычно брендовый символ не содержит имени компании. Для репрезентации компания использует символ или значок. Так же, как и логотип, позволяет идентифицировать
продукцию.
Иконки – картинки, которые используются для репрезентации какого-либо объекта или действия.
Например, изображение ручки может представлять процесс написания чего-либо
или просто саму ручку как объект.
Иконки могут быть использованы для создания брендового знака. Они не обязательно должны соотноситься с тем, что делает ваша компания, но должны давать ощущение, которое
вы хотите передать клиенту.
Иконки могут помочь сэкономить место при создании сайта компании. Вместо громоздких слов или текстов достаточно поместить одно изображение. Однако, когда используете
иконические изображения, тщательно продумайте, что именно вы хотите представить и насколько это понятно для вашей аудитории.
Стайл-гайды – набор стандартов для дизайна всего, что связано с вашим брендом, не важно идет ли речь о лэндинге, или визитках, или просто напечатанных документах.
Причина для создания стайл-гайда – обеспечение полного единообразия везде, где появляется имя бренда.
Важно учитывать, как работает каждая деталь дизайна. Яркие сопровождающие детали могут помешать восприятию главной информации.
В мешанине элементов клиент не увидит
вашего суперпредложения, яркий фон отвлечет внимание от полезного текста. Эстетически грамотно оформленное пространство позволит не терять лидов и получить новых клиентов.
Необходима для равномерного разделения столбцов и строк. Точки сетки помогают дизайнерам расположить элементы соответствующим образом. Сетка позволяет равномерно
распределить объекты на верстке.
В дизайне масштаб – это соотношение размера одного объекта с размерами другого. Два элемента одного размера могут выглядеть равнозначными, а вот элементы заметно разных
размеров будут выглядеть по-разному.
Когда помещаете рядом какие-либо элементы дизайна, думайте о том, как можно использовать масштаб для помощи в иллюстрации значений внутри целой картинки. Например,
большой круг будет выглядеть более влиятельно и важно, чем тот, что поменьше.
Имеется в виду отношение ширины к высоте фигуры, чаще всего прямоугольника (поскольку у большинства экранов ширина больше, чем высота).
Записывается через
математическое соотношение с помощью двух чисел, разделенных двоеточием (ширина:высота).
Текстура – это определенный вид «поверхности» изображения. Можно сделать объект на картинке как будто выложенным из кирпича или сделанным из ткани. Текстура придает
изображению объем и реалистичность, делает картинку «вкусной» и продающей.
Это раскладка вещей на картинке так, чтобы они были под углом 90 или 180 градусов друг к другу. Иными словами: предметы лежат параллельно или перпендикулярно друг
другу.
Такой прием часто используют модные издания. Он позволяет автору показать множество объектов разом, не создавая при этом визуальный перегруз. Грамотно и аккуратно
разложенные предметы делают фотографию стильной и своей эстетичностью привлекают внимание аудитории.
Белое пространство, еще известно как negative space, – та область дизайнерского решения, которая остается пустой. Пространство между графическими элементами, образами и
всем остальным на странице.
Не смотря на то, что обычно это называют белым пространством, на самом деле оно может быть любого цвета.
Хороший пример белого пространства – домашняя страница Google. Все практически состоит из белого цвета, чтобы пользователи могли сконцентрироваться на строке поиска.
Разрешение изображения определяет его качество. Как правило, чем выше разрешение, тем выше качество. В высоком разрешении изображение будет ясным и четким. В низком –
картинка будет размытой, нечеткой.
Контраст возникает, когда 2 элемента на странице выглядят по-разному. Это могут быть разные цвета у текста и фона или темные и светлые тона картинок. Одна из главных
причин использования контраста в дизайне – привлечение внимания.
Понятие насыщенности относится к интенсивности и чистоте цвета. Чем более насыщенный цвет, тем более ярким он кажется. Ненасыщенные цвета кажутся бледными.
Высокая насыщенность каких-либо элементов на изображении выделяет их, они могут привлечь больше внимания и визуально иметь больше веса, чем остальные детали.
Если вы
хотите добавить текст на картинку, лучше всего использовать слабо насыщенный фон.
Блюр делает картинку неясной, размытой. Отличная идея – использовать эффект блюра, когда вы собираетесь наложить на изображение текстовый слой. Текст и какие-нибудь
детали картинки могут образовывать между собой конкурентные отношения, блюр избавляет от этой ситуации и сделает текст более читаемым.
Когда вы обрезаете изображение, вы отбрасываете ненужную часть картинки. Кадрирование позволяет изменить акцент или направление изображения.
Когда цифровой элемент выглядит как точная копия физического предмета. Например, книжные полки в приложениях для чтения выглядят и делают то, что должны предметы в
реальной жизни.
Этот вид дизайна был популярен в начале 2010-х годов и до сих пор используется на некоторых ресурсах. Когда может быть полезна реалистичная отрисовка? Например, вы
выставляете на сайте примеры своей продукции. Потенциальный клиент сможет оценить внешний вид, ему будет легче принять решение о покупке.
Использование реалистичной
отрисовки кнопок на сайте облегчит посетителям поиск «кликабельных» элементов.
Минималистический подход, который фокусируется на простоте и практичности. Как правило, такой дизайн характеризуется наличием большого свободного пространства на
картинке, четкими контурами, яркими цветами и двумерными иллюстрациями.
Плоский (или флэт) дизайн достаточно популярен. Он придает изображению ощущение легкости и трендовости. Подходит для привлечения молодой аудитории. Однако есть
существенный минус в использовании плоского дизайна на сайтах – не всегда очевидно, какие объекты являются кликабельными, а какие нет.
Растровые изображения состоят из сетки пикселей. При изменении размера изображения оно может стать размытым. Скорее всего большинство картинок, которые вы когда-либо
видели, были растровыми.
Векторные изображения состоят из пикселей, линий и кривых. Это означает, что изображение может масштабироваться без потери качества.
В отличие от растровых векторные
изображения при масштабировании не размываются.
Лучше всего делать логотипы и различные брендовые знаки в виде векторного изображения. Тогда не придется каждый раз отрисовывать их заново при подготовке макета новой
величины.
Материал подготовлен на основе текста, взятого с сайта blog.bufferapp.com.
52 Термины и определения графического дизайна для недизайнеров
Когда я только начинал заниматься маркетингом, я не совсем предвидел, что тоже буду дизайнером на полставки.
Теперь, в 201 году, визуальный контент более чем в 40 раз чаще используется в социальных сетях, чем другие типы контента, и стало очевидным и даже необходимым для всех нас, маркетологов, иметь хотя бы базовые знания ключевых терминов дизайна.
К счастью, мы живем в прекрасном мире, где каждый может перейти от новичка к среднему и создавать хорошо продуманные изображения для социальных сетей. Существуют такие инструменты, как Pablo и Canva, которые делают этот дизайн достижимым (и красивым).
Однако, помимо инструментов, если вы хотите вывести свои маркетинговые навыки на новый уровень, важно улучшить свое понимание дизайна.
Задумывались ли вы когда-нибудь о том, что может быть возможно, если у вас в заднем кармане всего лишь немного дополнительных знаний о дизайне?
Оказывается, превратить ваши изображения в социальных сетях из хороших в великолепные — это разумный скачок. И все это начинается с хорошей основы и понимания некоторых ключевых терминов и принципов дизайна.
Если вы хотите поднять свои изображения в социальных сетях на новый уровень и стать лучшим маркетологом, ознакомьтесь с этим словарем дизайна, чтобы получить ускоренный курс о том, как лучше понять дизайн.
—
1. Золотое сечение
Золотое сечение встречается с двумя объектами, которые при делении большего на меньшее дают число 1,6180 (или около того). Самым известным золотым сечением является золотой прямоугольник, который можно разделить на идеальный квадрат и прямоугольник с тем же соотношением сторон, что и исходный прямоугольник.
Вы можете увидеть это в композиции изображения или дизайне веб-сайта и макете сетки.
(через)
Используя золотое сечение, вы можете сделать ваши изображения привлекательными и красиво отформатированными. Вот пример золотого сечения, используемого для разделения пространства между основной частью веб-сайта и боковой панелью:
Ниже приведен еще один пример, когда все ключевые элементы дизайна соответствуют разным частям золотого сечения:
2. Правило третей
Вы можете применить правило третей, представив сетку 3×3, лежащую поверх вашего изображения, а затем совместив объект изображения с направляющими линиями и точками их пересечения (например, поместив горизонт в верхней или нижней строке) или позволяя элементам изображения легко перетекать из раздела в раздел.
(через)
После того, как у вас есть сетка, места, где линии пересекаются друг с другом, обозначают основные фокусные области вашего дизайна: «Типографика — это визуальный компонент письменного слова», — прекрасно объясняет Практическая типографика.
Весь визуально отображаемый текст, будь то на бумаге, экране или рекламном щите, включает в себя типографику.
4. Засечка
Засечка — это небольшой дополнительный штрих или кривые на концах букв.
5. Без засечек
«Sans» буквально означает «без засечек», а шрифт без засечек не содержит дополнительных штрихов на концах букв.
Хотя нет установленных правил, когда следует использовать шрифт с засечками или без засечек, рекомендуется использовать шрифты без засечек для основного текста в Интернете, а шрифты с засечками — для заголовков и печати.
6. Script
Шрифты Script — это шрифты или шрифты, основанные на исторических или современных стилях почерка, и они более плавные, чем традиционные шрифты.
Несколько примеров скриптовых шрифтов включают:
Alex Brush;
And, Grand Hotel:
7. Шрифты с засечками
Шрифты с засечками имеют геометрическое ощущение, чем традиционные шрифты с засечками, и имеют более квадратные, крупные и жирные засечки.
Отличным примером шрифта с засечками является Museo Slab:
8. Моноширинный
Моноширинный шрифт, (также известный как шрифт с фиксированным шагом, фиксированной шириной или непропорциональный шрифт). буквы и символы занимают одинаковое пространство по горизонтали.
9. Иерархия
Типографская иерархия является неотъемлемой частью любого дизайна или макета, и даже если вы не знакомы с этим термином, вы наверняка видели иерархию в действии на любом веб-сайте, в газете или журнале.
tuts+объяснение:
Типографская иерархия — это система организации шрифта, которая устанавливает порядок важности в данных, позволяя читателю легко находить то, что он ищет, и перемещаться по содержанию. Это помогает направить взгляд читателя туда, где начинается и заканчивается раздел, и в то же время позволяет пользователю изолировать определенную информацию на основе последовательного использования стиля во всем тексте.
Вот пример, иллюстрирующий важность иерархии:
10.
КернингКернинг относится к пробелу между двумя конкретными буквами (или другими символами: числами, знаками препинания и т. д.), и процесс настройки этого пробела улучшает разборчивость.
11. Интерлиньяж
Интерлиньяж определяет расстояние между строками текста по вертикали. Интерлиньяж используется, когда контент состоит из нескольких строк читаемого текста и обеспечивает расстояние от нижней части слов выше до верхней части слов ниже, имеет соответствующий интервал, чтобы сделать их разборчивыми.
12. Отслеживание
Отслеживание похоже на кернинг в том смысле, что оно касается расстояния между буквами или символами. Однако вместо того, чтобы сосредотачиваться на расстоянии между отдельными буквами (кернинг), отслеживание измеряет расстояние между группами букв.
13. Высота по оси X
Высота по оси X относится к расстоянию между базовой линией и средней линией строчных букв в гарнитуре.
14. Верхний/нисходящий элементы
Надстрочный элемент — это часть строчной буквы, выступающая над средней строкой шрифта (высота x) .
С другой стороны, выносной элемент — это часть буквы, которая простирается ниже базовой линии шрифта.
15. Сироты/Вдовы
Вдовы и Сироты — это строки текста, которые появляются в начале или в конце абзаца, но остаются в одиночестве вверху или внизу строки. Существуют некоторые споры о точных определениях этих терминов, но, как правило:
- Сирота: A — это одно слово или очень короткая строка, которая появляется в конце абзаца или в начале столбца или страница, отделенная от остального текста.
- Widow: Строка конца абзаца, которая находится в начале следующей страницы или столбца, отделяясь таким образом от остального текста. Или начало нового абзаца, который начинается внизу столбца или страницы.
16. Lorum Ipsum
Lorem Ipsum — это просто фиктивный текст, используемый в индустрии дизайна. Он используется в качестве текста-заполнителя и имеет более или менее среднее распределение букв, что делает его похожим на удобочитаемый английский, в отличие от использования «Добавить контент здесь, добавить контент здесь» в дизайнах, когда копия еще не совсем готова.
Цвета
17. RGB
Цвет RGB — это модель, в которой красный, зеленый и синий цвета суммируются различными способами для воспроизведения широкого спектра цветов. RGB, как правило, используется для экранных целей.
18. Шестнадцатеричный
Шестнадцатеричный — это шестизначное число, используемое в HTML, CSS и приложениях для дизайна для представления цветов.
19. Палитра
Цветовая палитра состоит из цветов, которые можно использовать для любых иллюстраций или дизайнерских работ, представляющих ваш бренд. Выбранные цвета должны гармонично сочетаться друг с другом.
20. Монохромный
Монохромный используется для описания дизайна или фотографий в одном цвете или разных оттенках одного цвета.
21. Аналоговый
В аналоговых цветовых схемах используются цвета, расположенные рядом на цветовом круге. Обычно они хорошо сочетаются друг с другом и создают спокойный и удобный дизайн.
22. Дополнительные
Цвета, расположенные напротив друг друга на цветовом круге, считаются дополнительными цветами (например, красный и зеленый).
23. Триадный
В триадной цветовой схеме используются цвета, равномерно распределенные по цветовому кругу.
24. CMYK
CMYK — это цветовая модель, используемая для печати. Цвета CMYK начинаются как белые, а затем становятся темнее по мере комбинирования большего количества цветов.
(через)
25. Pantone
Система соответствия Pantone (PMS) представляет собой стандартизированную систему воспроизведения цвета. Каждому оттенку присваивается номер, что позволяет людям легко ссылаться и воспроизводить одни и те же цвета.
26. Теплые цвета
Теплые цвета получаются из красного, оранжевого, желтого и различных комбинаций этих цветов. Они создают дружелюбную, счастливую, уютную атмосферу.
27. Холодные цвета
Холодные цвета, такие как синий, зеленый и светло-фиолетовый, успокаивают и успокаивают.
28. Теория цвета
Теория цвета создает логическую структуру цвета. Существует три основных категории теории цвета: цветовой круг, цветовая гармония и контекст использования цветов.
Понимание того, как использовать разные цвета для передачи смысла, является важной частью как дизайна, так и маркетинга. Вот краткое руководство о том, как цвета влияют на наш мозг:
Хотите узнать больше о теории цвета? Проверьте: Почему Facebook синий? Наука о цветах в маркетинге.
29. Градиент
Градиент — это постепенное изменение цвета (например, постепенное превращение зеленого в синий) или переход цвета в прозрачность. Существует два распространенных типа градиентов: радиальный и линейный.
30. Непрозрачность
Непрозрачность позволяет сделать элемент дизайна прозрачным. Чем ниже непрозрачность, тем более прозрачным является элемент. Например, непрозрачность 100 % означает, что объект сплошной.
31. Оттенок
По сути, оттенок — это способ описания цвета. И оттенок может быть любым цветом на цветовом круге. Например, красный, синий и желтый — это все оттенки.
32. Оттенок
Оттенок – это разновидность цвета.
Craftsy объясняет, что оттенков создаются, когда вы добавляете белого к любому оттенку на цветовом круге. Это осветляет и обесцвечивает оттенок, делая его менее интенсивным.
Брендинг и логотипы
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. Вектор
Векторные изображения, состоящие из точек, линий и кривых. Все формы в векторе рассчитываются с использованием математического уравнения, что означает, что изображение может масштабироваться без потери качества.
В отличие от растров, векторы не будут размыты при масштабировании. Вы можете найти отличные векторные изображения для использования в своих проектах на таких сайтах, как Vecteezy.
Приветствую вас
Надеюсь, это знакомство с терминами и определениями дизайна было полезным для вас. Удивительно, как быстро маркетологи могут освоить такие инструменты, как Canva и Pablo, для создания красивых изображений.
Мне любопытно узнать, есть ли какие-либо другие термины в области дизайна, которые вы регулярно слышите, и хотели бы получить разъяснения? Не стесняйтесь делиться любыми вопросами или мыслями в комментариях ниже.
Дополнительная литература:
- 50 терминов дизайна, простое объяснение для тех, кто не является дизайнером, из блога Canva
- 10 терминов цифрового дизайна, которые вам нужно знать, из Design Shack
Предоставлено вам
Эта статья была вам полезна? Вам также может понравиться наш набор инструментов для работы с социальными сетями.
Начните бесплатно прямо сейчас
99 Важные слова в дизайне, которые вы должны знать
Логотипы, веб-сайты и многое другое…
Логотипы, веб-сайты, обложки книг и многое другое…
Получить дизайн
У дизайнеров есть собственный словарь. Если вы занимаетесь дизайном, знание правильной терминологии поможет вам общаться друг с другом и получать ожидаемые результаты. (Мы обещаем, что это намного проще, чем французский в средней школе.)
Взгляните на эти термины дизайна. Изучите их. Зафиксируйте их в памяти. Эх… Слишком много работы. Просто добавьте эту страницу в закладки и используйте ее в качестве шпаргалки по дизайнерским словам. Вот самые важные слова для описания дизайна, которые вы должны знать:
- Дизайн: композиция, баланс, близость, выравнивание, повторение, контраст, белое пространство, иерархия
- Фотография и иллюстрации: разрешение , DPI, PPI, обрез, обрезка, пиксели, кадрирование, фото
- Типографика: с засечками, без засечек, шрифт, надстрочный элемент, базовая линия, подстрочный элемент, кернинг, интерлиньяж, отслеживание, вес
- Цвет: оттенок, оттенок, тон, оттенок, насыщенность, монохроматический, аналогичный, дополнительный, триадный, непрозрачность, CMYK, RGB
- Элементы веб-сайта: заголовок, панель навигации, навигационная цепочка, целевая страница, HTML, пользовательский интерфейс, каркас
- Форматы файлов: AI, EPS, PDF, GIF, JPEG, PNG, PSD, TIFF
- Типы логотипов: абстрактный знак, эмблема, литерный знак, изобразительный знак, талисман, словесный знак
Дизайн
— Дизайн robbyprada
Композиция и макет
Композиция — это расположение элементов дизайна, образующих целостное изображение.
Удачная композиция привлекает зрителя и направляет его взгляд по дизайну. В изобразительном искусстве вы можете услышать, что это называется «формой». В графическом дизайне это часто называют макетом. Композиция состоит из ряда различных элементов визуального дизайна, включая баланс, близость, выравнивание, повторение, контраст и пустое пространство.
Баланс
Это не ваша способность идти по прямой после трех бутылок пива. В дизайне баланс подразумевает размещение элементов на странице таким образом, чтобы текстовые и графические элементы были равномерно распределены. Есть три способа достижения баланса: симметрично, асимметрично и радиально.
Симметричный логотип от Mad pepperАсимметрично сбалансированный логотип от artsigmaРадиально-симметричный логотип от stevangaСимметричный
Симметрия достигается, когда все элементы дизайна равны по обе стороны от центральной линии
Асимметричный
Если графика и текст не совпадают по обе стороны от центральной линии, дизайн считается асимметричным.
В приведенном выше примере все еще присутствует баланс, но с одной стороны графика, а с другой текст.
Радиальный
Радиальный дизайн — это дизайн, в котором элементы исходят из центральной точки, создавая баланс.
Близость
Способ, которым элементы дизайна группируются или располагаются на странице, называется близостью. Великолепные дизайнерские группы любят элементы вместе.
Выравнивание
Выравнивание — это положение текста или графики по левому краю, правому краю, по центру или по ширине.
Повторение
Чтобы сохранить единый внешний вид, дизайнеры повторяют элементы в дизайне. (Повторение также определяется как количество раз, когда ваш малыш просит печенье.)
Контраст
Контраст достигается за счет включения в дизайн элементов, которые заметно отличаются друг от друга. Дизайнер может использовать цвет, форму, текстуру, размер или шрифт для создания контраста.
Белое пространство
Белое пространство, иногда называемое негативным пространством, — это часть дизайна, не отмеченная изображениями или текстом.
Это также то, что жители Среднего Запада называют своим депрессивным зимним пейзажем.
Правило третей
Правило третей — это метод, который дизайнеры используют для определения фокуса. Используя сетку из трех рядов и столбцов, указывают фокусные точки, где сходятся линии. Дизайнеры используют это как руководство, чтобы определить, где разместить важные элементы в своем дизайне.
Сетка
Сетка представляет собой ряд пересекающихся вертикальных, горизонтальных, угловых или изогнутых линий, используемых для организации графических элементов на странице, а также по отношению друг к другу.
Иерархия
В дизайне иерархия — это организация элементов по уровню важности. Газеты, журнальные развороты и постеры фильмов — хорошие примеры использования иерархии дизайна. Заголовки (также называемые типом отображения) обычно размещаются вверху, а подзаголовки и основной текст — внизу.
Масштаб
Масштаб — это размер объекта по отношению к другому объекту (не той вещи в вашей ванной, на которую вы ругаетесь каждое утро).
Масштаб можно использовать для создания интереса и привлечения внимания зрителя.
Эскиз-миниатюра
При разработке концепции дизайнер часто создает небольшие черновые рисунки — эскизы-миниатюры — для изучения многих идей.
Макет
Макет — это реальная или цифровая модель, используемая для проверки ранних дизайнерских идей и просмотра того, как они могут выглядеть в реальном мире.
Фотография и произведение искусства
—
Разрешение
Детализация изображения, основанная на количестве пикселей, называется разрешением. Изображение выглядит более четким, когда оно имеет более высокое разрешение.
DPI
DPI означает «точек на дюйм», что является мерой качества принтера. Для качественной печати рекомендуется 300 dpi. Например, изображение с разрешением 300 точек на дюйм и размером 1200×1800 пикселей станет отпечатком 4×6 дюймов.
PPI
PPI означает «пикселей на дюйм», что является мерой плотности пикселей, используемой электронными устройствами обработки изображений.
Вы, вероятно, увидите, что это используется со сканерами, камерами, телевизорами или мониторами. Узнайте больше о разнице между DPI и PPI.
Выпуск за обрез
Звучит довольно отвратительно, но выпуск за обрез — это когда дизайн выходит за пределы напечатанного края, поэтому при обрезке после печати не остается белых краев.
Обрезка
Размер обрезки — это окончательный размер печатного материала после его обрезки со страницы. Обрезка выполняется по меткам обрезки, которые показывают, где нужно обрезать.
Пиксели
Пиксели — это квадратные точки, из которых состоит цифровое растровое изображение (и очень плохой фильм с Адамом Сэндлером в главной роли). Чем больше пикселей в изображении, тем выше его разрешение.
Кадрирование
Дизайнер может вырезать или обрезать ненужные части изображения, чтобы улучшить кадрирование, выделить определенный объект или изменить соотношение сторон изображения.
Стоковые фото/искусства
Стоковые фотографии и произведения искусства являются лицензированными изображениями, созданными третьей стороной.
Использование стоковых изображений позволяет сэкономить на профессиональной фотосессии. Посетите некоторые из наших любимых мест, где можно получить хорошие бесплатные стоковые изображения.
Типографика
—
Типы шрифтов
Большинство шрифтов относятся к одному из четырех различных типов шрифтов.
Засечки
Засечки — это маленькие линии и крючки в конце штрихов в некоторых буквах.
Sans serif
Sans означает «без». Шрифт без засечек не имеет засечек.
Script
Шрифты Script используют плавный курсивный штрих.
Гладкие засечки
Гладкие засечки отличаются толстыми блочными засечками.
Компоненты типа
Все шрифты состоят из одних и тех же основных компонентов.
Надстрочный элемент
Надстрочный элемент — это часть строчной буквы, которая возвышается над основной частью буквы. Думайте «б» или «ч».
Базовая линия
Все символы шрифта располагаются на базовой линии, самой нижней точке всех прописных букв и большинства строчных букв.
Выносной элемент
Выносной элемент — это часть строчной буквы, которая опускается ниже основной части буквы. Думайте «g» или «p».
Медиана/x-высота
Медиана или x-высота — это место, где большинство строчных букв должны достигать максимальной высоты. Он устанавливается с высоты x в шрифте.
Расстояние между шрифтами
Вертикальные и горизонтальные интервалы шрифта часто изменяются для изменения его внешнего вида.
Кернинг
Кернинг — это настройка расстояния между парами букв в одном слове. Некоторые пары букв создают неудобные промежутки, а кернинг добавляет или убирает промежутки между ними, чтобы сделать текст более визуально привлекательным и читаемым.
Интерлиньяж
Интерлиньяж (также известный как высота строки) — это пространство между двумя строками текста.
Отслеживание
Не путать с кернингом. Отслеживание — это настройка пространства для групп букв и целых блоков текста. Отслеживание влияет на каждый символ в выделенном тексте и используется для изменения его общего вида.
Корпус шрифта
Обычно символы доступны в двух формах.
Прописные
Большие заглавные буквы шрифта являются прописными. Их также использует ваша мама, чтобы случайно НАКРАТЬ НА ВАС, КОГДА ОНА ПИШЕТ ВАМ.
Нижний регистр
Нижний регистр относится к строчным буквам шрифта.
Маленькие заглавные
Маленькие заглавные или заглавные — это символы верхнего регистра, высота которых равна высоте строчных букв. Они используются для того, чтобы слова, написанные с заглавной буквы, не выглядели слишком большими на странице. Хотите пример? Откройте практически любую книгу и посмотрите на первые слова главы.
Стиль шрифта
Помимо интервалов и регистра, шрифты также можно изменять по масштабу, толщине и стилю.
Размер в пунктах
Размер в пунктах — это размер текста. В одном дюйме примерно 72 (72,272) точки.
Толщина шрифта
Насыщенность шрифта определяет жирность шрифта.
Курсив
Когда символы наклонены вправо , они выделяются курсивом — визуальный прием, используемый для привлечения внимания к определенным словам или предложениям в абзаце.
Вдовы и сироты
Вдовы и сироты очень огорчают дизайнеров. Это потому, что это плохие, одинокие слова в начале или конце абзаца, оставленные висеть вверху или внизу столбца и отделенные от остальной части абзаца.
Lorem ipsum
Lorem ipsum (также известный как фиктивный текст) используется в качестве заполнителя, который позже будет заменен реальной копией. Текст Lorem ipsum взят из книги «Крайности добра и зла», написанной Цицероном в 45 г. до н. э.
Цвет
—
Теория цвета
Изучение того, как цвета вызывают у людей чувства и их влияние на дизайн, известно как теория цвета. Теория цвета используется для изучения типов цветов, которые лучше всего подходят для различных случаев дизайна — например, выбор пастельной гаммы для веб-сайта, который должен быть мягким, или выбор красного и желтого для рекламы в журнале, которая должна вызывать энергию.
Оттенок, оттенок, тон и оттенок
Оттенок — это чистый цвет.
Тинт – это оттенок с добавлением белого. Тон — это оттенок с добавлением серого. Тень — это оттенок с добавлением черного.
Насыщенность
Насыщенность определяется интенсивностью цвета.
Палитра
Палитра — это набор цветов, используемых в дизайне. Это цвета, которые хорошо сочетаются друг с другом и часто эстетически приятны. Дизайнеры определяют палитру для проекта, чтобы создать последовательность и вызвать определенное чувство.
Теплые и холодные цвета
Теплые цвета находятся в одной половине цветового круга (красный, оранжевый, желтый и розовый). Холодные цвета занимают другую половину (синий, зеленый и фиолетовый).
Монохроматическая
В монохроматической цветовой палитре используется один единственный цвет.
Оттенки серого
Монохроматическая цветовая палитра на основе серого называется оттенками серого.
Аналогичный
Цвета, расположенные рядом друг с другом на цветовом круге (например, красно-фиолетовый, красный и красно-оранжевый), являются аналогичными.
Дополнительные цвета
Дополнительные цвета являются противоположностями цветового круга. Эти отношения вызовут визуальное напряжение и «шок».
Триадный
Триадный цвет – это три цвета, равномерно распределенные по цветовому кругу. Один цвет доминирует, второй поддерживает, а третий расставляет акценты.
Градиент
Градиент — это постепенный переход от одного цвета к другому. (Например, синий постепенно переходит в зеленый).
Непрозрачность
Непрозрачность является синонимом непрозрачности. Чем прозрачнее изображение, тем ниже его непрозрачность.
CMYK
CMYK — это процесс четырехцветной печати, состоящий из голубого, пурпурного, желтого и ключевого (черного) цветов. Цвета CMYK при печати никогда не будут такими же яркими, как цвета RGB на экране, потому что CMYK создает цвет путем сложения цветов (делая изображения темнее), а цвета RGB получаются из света.
RGB
RGB означает красный, зеленый и синий, три цвета света, обычно используемые для отображения изображений на цифровом экране.
Pantone
Разработанная Pantone Corporation, профессиональной компанией по производству красок, Pantone является наиболее широко используемой запатентованной цветовой системой для смешивания цветов. В систему входят цвета, которые нельзя смешивать в CMYK.
Хотите узнать больше о разнице между CMYK и RGB? Посмотрите наше видео ниже.
Интернет и цифровая версия
—
Элементы веб-страницы
Дизайн большинства веб-страниц включает комбинацию этих элементов.
Заголовок
Элементы дизайна, повторяющиеся вверху каждой страницы, называются заголовком.
Навигация и панель навигации
Навигация — это путеводитель по наиболее важным частям веб-сайта, и она должна быть визуально единообразной на всех страницах.
Панель навигации — это набор ссылок, повторяющихся на каждой странице, который часто включает ссылки на такие страницы, как «О нас», «Продукты», «Свяжитесь с нами» и «Отзывы».
Навигационная цепочка
Навигационная цепочка — это элементы навигации, которые обычно появляются в верхней части страницы, чтобы показать пользователям иерархию разделов текущей страницы.
Основной текст
Основной текст — это основное письменное содержимое страницы.
Ссылки
Любое слово или изображение может быть ссылкой, которая может привести пользователей на другую страницу.
Боковая панель
Боковая панель — это левая или правая колонка страницы, обычно используемая либо для вертикальных навигационных ссылок, либо для рекламы. Он также может содержать поиск по сайту, ссылки на подписку (RSS, информационные бюллетени и т. д.) или кнопки социальных сетей.
Баннер
Баннеры обычно размещаются в верхней части страницы или на боковой панели и представляют собой рекламные объявления, ссылающиеся на другие веб-сайты.
Нижний колонтитул
Элементы дизайна, повторяющиеся внизу каждой страницы, называются нижним колонтитулом.
HTML
HTML означает язык гипертекстовой разметки. Это стандартный язык кодирования для веб-сайтов, который создает все шрифты, цвета, графику и ссылки, которые вы видите в Интернете.
Целевая страница
Целевая страница — это отдельная страница, которая появляется в ответ на результаты поиска. Целевые страницы используются для лидогенерации.
Пользовательский интерфейс (UI)
Пользовательский интерфейс — это дизайн приложений для компьютеров, мобильных устройств и других устройств, обеспечивающий максимальное удобство их использования и взаимодействие с пользователем.
Каркас
Основные изображения, отображающие основные функции веб-сайта, называются каркасами. Дизайнеры используют каркасы, чтобы показать, как работает страница или сайт.
Форматы файлов изображений
—
Формат файла изображения представляет собой стандартизированный способ цифрового кодирования произведений искусства, графики и фотографий.
Векторная графика
Векторная графика — это небольшая графика, использующая математические методы для отображения изображений. Их можно увеличивать без потери качества, и они необходимы для кроссплатформенного дизайна (например, рекламных щитов, визитных карточек и т. д.).
AI
AI означает документ Adobe Illustrator. Это формат файла, разработанный Adobe Systems для представления одностраничных векторных проектов.
EPS
EPS расшифровывается как Encapsulated Post Script. Это формат файла с изменяемым размером, который обычно используется для векторных рисунков. Благодаря своему высокому качеству, он обычно используется с печатными элементами, такими как логотипы, визитные карточки или брошюры.
PDF — это переносимый формат документа, разработанный Adobe, который можно повсеместно загружать и просматривать на любом компьютере. PDF-файлы лучше всего подходят для предварительного просмотра работы и общедоступны для просмотра.
Растровая графика
Растровая графика состоит из пикселей на сетке, где каждому пикселю присвоено значение цвета. Они хороши для назначения спецэффектов, цветокоррекции и обработки фотографий. Они зависят от разрешения, что означает, что изображения нельзя увеличивать без ухудшения их качества.
GIF
GIF или Формат обмена графикой — это формат растрового файла, который поддерживает анимацию и прозрачность. GIF-файлы могут отображать только до 256 цветов, что позволяет использовать файлы очень маленького размера. (PS: Это произносится как «JIF», в отличие от общепринятого произношения «GIF», по словам создателя GIF Стива Уилхайта.)
JPEG
Объединенная группа экспертов по фотографии тип растрового файла для веб-дизайна. JPEG — это сжатые файлы, которые быстро загружаются. Обычно вы видите, что они используются для электронных писем, рекламных баннеров, онлайн-фотографий и почти всего остального в Интернете. В отличие от GIF, у них не может быть прозрачного фона (белый фон будет добавлен автоматически).
PNG
PNG означает Portable Network Graphics, веб-формат, который не теряет качество при сжатии. Файлы PNG были созданы для улучшения качества файлов GIF.
PSD
PSD или Photoshop Документ — это несжатый рабочий файл растрового изображения, созданный дизайнерами в Adobe Photoshop.
TIFF
TIFF означает Tagged Image File Format, общий формат для обмена растровыми изображениями между приложениями. TIFF обеспечивает более высокое качество изображения, чем JPEG или PNG, и широко используется в издательской сфере и фотографами. Не путайте это с «размолвкой» или «расколом», что происходит, когда вы отправляете дизайнеру восемь раундов правок.
Типы логотипов
—
Все логотипы состоят из типографики, форм и/или изображений и обычно соответствуют одному из этих стандартных типов логотипов. Каждый из них придаст вашему бренду или бизнесу особое ощущение. Эти шесть типов также можно комбинировать друг с другом для создания еще более уникальных логотипов.
Абстрактный знак
Абстрактный знак — это логотип, который использует эмоциональные качества цвета и формы для передачи вашего бренда. Вместо того, чтобы быть узнаваемым изображением, таким как яблоко или курица, абстрактные знаки используют формы для представления вашего бизнеса.
Эмблема
В логотипах-эмблемах используются рамки и формы для включения названия компании или организации. Подумайте о значках, печатях и гербах.
Lettermark
Логотипы Lettermark содержат одну или несколько стилизованных букв (например, инициалы компании) для идентификации торговой марки. Известные фирменные логотипы включают логотипы IBM, CNN, HP и HBO.
Графический дизайн логотипа SpoonLancerМаскотный дизайн логотипа Нико Страйк Wordmark дизайн логотипа nnorthГрафический знак или символ
Графические знаки и символы — это неабстрактные визуальные значки, представляющие название вашей компании или услуги.