Егор Поляков
Основы графического дизайна. О применении векторной графики в веб-дизайне и рекламе. Теоретические лекции
Термины и определения
Для изучения лекций начнем с терминов и определений.
Брендбук – это корпоративный документ публичного коммерческого предприятия, в котором последовательно представлена концепция и философия бренда, а также сформулирована ценность компании для потребителей, визуальные атрибуты бренда, указаны группы основных потребителей, в совокупности формирующие целевую аудитории (в английской литературе: target auditory).
Брендбук определяет коммерческое позиционирование компании на рынке товаров и услуг и другие сопутствующие требования к представлению бренда, которыми следует пользоваться отделу рекламы, маркетинга и руководителям корпоративных подразделений данной компании для стратегического построения визуальных коммуникаций с потребителями и развития бизнеса компании в целом.
Верстка дизайна веб-страницы – это создание структуры гипертекстового документа на основе HTML-разметки с использованием каскадных таблиц стилей CSS и клиентских сценариев, в идентичном отображении функциональных элементов дизайна аналогично заданному макету.
Гарнитура – это совокупное семейство шрифтов одного стиля и наименования, различных по начертанию. Начертание может быть тонким, курсивным, жирным, широким, узким. Например, Open Sans – это гарнитура, в которой шрифты с начертаниями Open Sans Regular, Open Sans Italic, Open Sans Bold и другие. У классификации шрифтов есть базовый и профессиональный уровни. Каждый шрифт по-своему уникален, и в мире постоянно создаются новые их вариации.
Глифы – это векторные символы, используемые для визуальной связи между рекламодателем (или владельцем цифрового продукта) и потребителями. Функциональное значение символов (глифов) – это ключевая часть семантического звена иллюстративного содержания рекламного макета. Функциональная роль глифов в установлении связи между потребителем (точнее зрителем) и его автором посредствам рекламного сообщения с помощью визуально-понятного символа, чтобы побудить зрителя к действию, представленному в рекламной иллюстрации.
Дизайн-система – это комплекс компонентов, правил, предписаний и инструментов для повышения качества и скорости разработки продуктов, а также эффективной поддержки существующих. Это условная модель взаимодействия дизайнера при работе с материалами для публикации в публичных источниках в рекламных целях.
Композиция иллюстрации в рекламе – это сложный структурированный дизайн-макет, исполненный в соответствии с заданными требованиями и правилами, применяемыми к выпуску рекламной продукции.
Логотип – это графический знак в значении визуального идентификатора государственной, коммерческой или социальной организации для улучшения узнаваемости и распознаваемости в обществе.
Рекламная иллюстрация – это графический способ визуальной коммуникации между поставщиком товаров (и услуг) и их потребителями.
Формат SVG (сокращенно от Scalable Vector Graphics) – это векторный формат для хранения, обработки и применения масштабируемой графики. Дословно переводится как масштабируемая векторная графика. Формат SVG имеет широкое применение в различных направлениях деятельности от полиграфии до веб-интерфейсов.
Перейдем далее к рассмотрению первой лекции.
Лекция №1. Введение в основы графического дизайна
Вступление
Современный мир в развитии постоянно сопряжен с технологическим прогрессом. Повседневная работа графического дизайнера совмещает в себе инженерный подход с художественным подходом к визуализации семантического значения и графического сообщения зрителю в заданном формате.
Выделим специализации графического дизайна по направлениям деятельности:
– дизайнер-иллюстратор книг, журналов и других периодических изданий;
– дизайнер веб-интерфейсов, мобильных приложений, веб-ресурсов и других цифровых продуктов;
– дизайнер интерьеров по стилистическому оформлению жилой и коммерческой недвижимости;
– 3D-дизайнер в области трехмерной визуализации объектов и композиции в инженерно-проектировочной, рекламной и иных сферах деятельности.
В зависимости от выбранной специализации графический дизайнер должен уметь проектировать и воспроизводить решения визуализации объектов и композиции изображений с заданной точностью в двухмерной и трехмерной графике.
Освоение основ графического дизайна
Принципиально графический дизайн способствует в работе коммерческих предприятий для вывода на рынок новых продуктов, успешной конкуренции среди аналогов в борьбе за выбор потребителей.
В основе теории графического дизайна:
– изучение цветовых палитр, модульных сеток;
– правила форматирования текста;
– верстка в дизайне и многое другое.
Все что сможет освоить дизайнер на первых шагах, станет вкладом в успех его практической работы в выбранной специализации. Теория способствует рациональному мышлению в дизайне и выбору правильных решений в практических задачах.
Назначение цветовых палитр в дизайне
Стандартно графика для веб-ресурсов, отображаемых в интернет-браузерах, воспроизводится в палитре RGB. Это необходимо учитывать при сохранении графических элементов дизайна веб-интерфейса. Зафиксируем это в памяти: графика для веба в палитре RGB.
Фактически графические файлы (компоненты) для оформления в композиции веб-интерфейса по умолчанию сохраняются с цветовым профилем в палитре RGB. Соответственно цвета задаются числовыми индикаторами. Например, черный цвет в RGB имеет соответствующую запись: (0,0,0). Аналогично задается в шестнадцатиричном формате (HEX) записью: #000.
В отличие от веб-ресурсов функционально в полиграфии, то есть в печатной продукции, требуется от графических дизайнеров соблюдение базового правила: сохранения графических файлов, дизайн-макетов с цветовым профилем в палитре CMYK.
Черный цвет будет иметь числовую запись в палитре CMYK в формате (0,0,0,100), то есть по четырем индикаторам тональности для точного воспроизведения цвета на плоскости печатного носителя.
Что характерно веб-разработчики используют в работе собственно отличительные цветовые решения по заданному значению: либо из палитры безопасных цветов, либо из фирменного стиля для точного воспроизведения цветов в дизайне цифрового продукта. Безопасные цвета из открытых источников допустимо использовать, когда не указан по техническому заданию фирменный стиль для дизайна веб-страниц.
В полиграфическом дизайне, что отличительно от веб-разработки дизайнеры рекламной продукции, зачастую используют так называемые вееры Pantone с выбором цвета по оттиску на типовой мелованной бумаге, чтобы точно указать номер цвета в дизайн-макете с учетом его воспроизведения по тону и насыщенности. Pantone допустимо использовать аналогично таблицам безопасных цветов только в случае, когда не задан фирменный стиль для дизайна, диктующий выбор номеров цветов по умолчанию.
Модульные сетки в дизайне
В графическом дизайне работа специалиста по созданию любого дизайн-макета требует действий в горизонтальном или вертикальном формате заданного размера в пикселях для веб-ресурсов или в миллиметрах, сантиметрах для полиграфии. Поэтому применение модульной сетки является базовым правилом проектирования четкого и сбалансированного дизайн-макета.
В зависимости от назначения дизайн-макета задается модульная сетка. Так, например, для веб-дизайна интерфейса модульные сетки задаются специально с учетом шага деления в определенном размерном формате, чтобы дизайнеру было легко задать отступы от краев экрана и отступы между функциональными элементами с учетом правил размещения инфоблоков и навигации.