“Хьюстон, ты меня слышишь?”
Мир дизайна настолько огромен, что у него есть свой собственный язык.
От терминов, используемых для описания внешнего вида шрифта и различных этапов процесса дизайна веб-сайта, до того, что нужно для разработки веб-сайта, этот мир может быть очень пугающим для новичков.
Дизайн и маркетинг работают рука об руку. Когда вы работаете в мире маркетинга, каждый должен, по крайней мере, знать основы дизайна, чтобы легко общаться со своим дизайнером и клиентом.
Неспособность эффективно общаться со своими дизайнерами крайне неэффективна и может поставить под угрозу успех любого маркетингового проекта.
Ниже приведены 26 дизайнерских терминов, которые помогут вам стать рок-звездой в мире дизайна.
1. Выравнивание
Выравнивание элементов (например, текста, изображений и т. д.) в вашем дизайне для достижения баланса, порядка и более логичной компоновки. Существует четыре типа выравнивания:
Left - даже с левой стороны
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla arcu velit, преддверие vel tortor in, maximus molestie ligula. Nam scelerisque augue in ante maximus, Fermentum aliquet nulla convallis.
Center - центрируется в документе, обычно добавляется неравномерное поле к тексту.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla arcu velit, преддверие vel tortor in, maximus molestie ligula. Nam scelerisque augue in ante maximus, Fermentum aliquet nulla convallis.
Право - даже с правой стороны
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla arcu velit, преддверие vel tortor in, maximus molestie ligula. Nam scelerisque augue in ante maximus, Fermentum aliquet nulla convallis.
Justified - равномерно растянуто от начала до конца документа
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla arcu velit, преддверие vel tortor in, maximus molestie ligula. Nam scelerisque augue in ante maximus, Fermentum aliquet nulla convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla arcu velit, вестибулум.
2. Обрезать
Когда вы удаляете внешние части изображения, чтобы улучшить кадрирование, размер и т. д.
3. CSS (каскадная таблица стилей)
Фрагмент кода, который используется для описания того, как элементы должны отображаться на экране, на бумаге или на другом носителе. Другими словами, код, который управляет тем, как вы хотите, чтобы все выглядело (т. е. цвет, шрифт, выравнивание, интервал и т. д.)
4. Тень
Вот так это и звучит. Это тень позади вашего объекта, которая придает ему объем. Обычно его используют для отделения объекта от фона. Обычно это используется, чтобы выделить изображение или раздел.
5. Рамка
Фреймворк определяется как «пакет, состоящий из структуры файлов и папок стандартизированного кода (документы HTML, CSS, JS и т. д.)». Технически это набор программных инструментов, которые помогают людям проще создавать веб-сайты.
(Примеры: Bootstrap, Skeleton)
6. Градиент
Градиент - это постепенное изменение цвета от одного тона к другому, от одного цвета к другому или от одного цвета к прозрачному. Существует два типа градиентов: линейный и радиальный.
7. Сетка
Рамка, состоящая из равномерно разделенных пересекающихся столбцов и строк (как миллиметровая бумага в старшей школе). Сетки - лучшие друзья дизайнеров, они помогают им равномерно выравнивать и располагать элементы.
8. HTML
HTML, сокращение от языка гипертекстовой разметки, - это язык, используемый для создания документов во всемирной паутине. HTML определяет структуру и макет документа, используя различные теги и атрибуты. Проще говоря, это код, который описывает базовую структуру большинства веб-сайтов.
9, 10, 11. Кернинг, интерлиньяж и отслеживание
Все эти термины используются для описания изменений, которые вы можете внести в свой шрифт.
Кернинг обозначает расстояние между двумя конкретными буквами.
Tracking означает равномерное расстояние между всеми буквами в заданном фрагменте текста.
Leading - это пространство между строками текста, также известное как высота строки.
12. Макет
Макет - это реалистичное представление того, как будет выглядеть продукт. Для большинства веб-дизайнеров это последний этап процесса проектирования перед началом разработки, и он используется для изучения решений по визуальному дизайну. В отличие от каркаса, он почти точно показывает, как будет выглядеть сайт, когда он будет запущен. Он включает в себя брендинг, фотографии, контент и т. д.
13, 14. Сироты и вдовы
Сирота - это одно слово в конце абзаца, обычно называемое «вешалкой».
Вдова - это слово или строка текста, расположенная отдельно в начале столбца или страницы.
15, 16. Отступы и поля
Padding - это пространство между границей и объектами внутри нее.
Маржа - это пространство между границей и объектами вокруг нее.
17. Разрешение
Это количество точек или пикселей, составляющих изображение. Традиционно он измеряется в DPI (точек на дюйм), но сейчас его чаще называют PPI (пиксель на дюйм).
Изображения, предназначенные только для Интернета, должны иметь разрешение 72 dpi (точек на дюйм), а для изображений для печати необходимо разрешение только 300 dpi (точек на дюйм).
Причина использования только 72 точек на дюйм для Интернета заключается в том, что это максимальное разрешение мониторов, а при печати процесс печати обеспечивает гораздо большую детализацию.
18. Адаптивный
Вы, наверное, часто слышите и читаете это. Адаптивность означает, что дизайн автоматически адаптируется к разным размерам экрана.
19, 20. Гарнитура и шрифт
Это обычно сбивает с толку многих людей.
Typeface - это дизайнерская коллекция символов, включая буквы, цифры и знаки препинания. (То, что вы обычно называете «шрифтом»)
(Примеры: Times New Roman, Lato, Roboto)
Font на самом деле представляет собой набор текстовых символов определенного стиля и размера. (Это включает в себя размер, семейство шрифтов и т. д.)
Примеры:
Сварливые волшебники готовят ядовитый напиток для злой Королевы и Джека.
Times New Roman, размер шрифта 11
Сварливые волшебники готовят ядовитый напиток для злой Королевы и Джека.
Times New Roman, размер шрифта 14, жирный
21, 22. Шрифт с засечками и без засечек
Шрифт с засечками - это шрифт с небольшими декоративными линиями, добавленными к основной форме символа. Этот шрифт выглядит профессионально и традиционно.
Шрифт без засечек - шрифт без мелких декоративных линий. Этот шрифт выглядит более современным и чистым.
23, 24. Пользовательский интерфейс и UX
Пользовательский интерфейс - это фактический внешний вид дизайна; что видят пользователи на странице.
User Experience - это ход и поведение дизайна; как люди с ним взаимодействуют.
25. Пробел
Пробелы в терминах веб-дизайна - это «пространство между графикой, столбцами, изображениями, текстом, полями и другими элементами». Он не всегда на самом деле белый; это просто способ описать тот факт, что он пуст. Некоторые могут также назвать это «негативным пространством».
26. Каркас
И последнее, но не менее важное: каркас - это базовый макет, такой как схема или чертеж. В нем нет никаких элементов дизайна. Это первый реальный конкретный визуальный процесс проекта.
Знайте все вышеперечисленное и ознакомьтесь с этой инфографикой, в которой есть еще кое-что, что поможет вам преодолеть языковой барьер между вами и вашим дизайнером.