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

Что такое графический дизайн: понятие, цели и задачи

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

Пример дизайна инфографики на Вайлдберриз: слишком много всего и нет акцента, элементы сливаются

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

• выделить отличия, подчеркнуть преимущества. Графический дизайнер делает акцент на основных плюсах компании, товара, услуги, сайта, выгодно выделяя их на фоне конкурентов с помощью оттенков, фирменных графики и типографики, верстки;
• способствовать развитию ассоциативного восприятия. Созданный образ в подсознании клиента ассоциируется с определенным брендом или местом. Например, желтая машина – это обязательно такси Яндекс, красная банка с белыми надписями – Coca-Cola, фиолетовый и все его оттенки – Wildberries. Видя знакомый цвет или шрифт, клиент будет вспоминать о компании или товаре, что стимулирует его отказаться от предложений конкурентов. Конечно, графический визуал – только начало, ведь уровень запоминания определяют масштаб рекламной кампании, количество лояльных клиентов, качество реализации идеи дизайнера;
• обеспечить совместимость с любыми носителями. Логотипы, фразы и другие компоненты должны хорошо читаться на любых носителях – от упаковки или листовки до промо-роликов на главных экранах страны;
• предоставить информацию. Графический дизайн – это не только о красоте, но и об удобстве. Возьмем для примера инструкцию к телевизору: если она не дополнена картинками по подключению и настройке или имеет блеклый и трудно читаемый шрифт, то потребитель столкнется со сложностями, что в результате вызовет недовольство;
• эмоциональное воздействие. Через графический дизайн бизнес может донести до аудитории собственные цели и философию. Именно поэтому многие производители бытовой химии и косметики дополняют логотипы зелеными листами или приставками «Эко», Natural и аналогичными. С помощью таких приемов выстраиваются правильные ассоциативные цепочки, поэтому клиенту не приходится углубляться в историю или философию компании: графика рассказывает обо всем без лишних слов.

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

Так выглядит схема Московского метрополитена

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

Где и как используется графический дизайн, кому он нужен

Создание фирменного стиля

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

• название и логотип компании;
• цветовая палитра и товарный знак;
• слоган, шрифты и типографика;
• персонаж, олицетворяющий бизнес

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

Фирменный стиль в дизайне упаковки

Дизайн упаковки

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

• стеклянные и пластиковые бутылки, обертки и сумки;
• полиэтиленовые и бумажные пакеты;
• жестяные банки, флаконы, тюбики;
• коробки из дерева, пластика, металла;
• пакеты «подушка» для чипсов и снеков, блистеры – для таблеток;
• канистры, бочки и другие виды тары, в зависимости от специфики бизнеса.

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

Дизайн упаковки от Додо Пиццы

Графика для офлайн-рекламы

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

• печатная полиграфия – это листовки, баннеры, флаеры и другие носители рекламной информации, которые распространяют промоутеры. Может использоваться скрытый маркетинг, при котором на кофейный одноразовый стаканчик, пакет или даже одежду наносятся рекламные материалы: они выглядят ненавязчиво, но стимулируют визуальное запоминание и повышают охват;
• наружная реклама – от билбордов до световых коробов, а также объявлений на транспорте. Применяется на открытой местности, для оформления зон вокруг офисов и магазинов, в торговых центрах и других местах, где могут быть сосредоточены потенциальные клиенты. Транспорт выступает в качестве динамичного носителя;
• подарочные буклеты, календари, ежедневники. Используются во время промо-кампаний, их вручают посетителям различных мероприятий и партнерам в качестве подарков. Это могут быть не только календари, но и ручки, футболки, кепки, брелоки и другие изделия, дизайн которых разрабатывают графики.

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

Нестандартный дизайн визитки, реализованный за счет шрифта и цвета

UI-дизайн

UI-дизайн – это пользовательские интерфейсы, с которыми взаимодействуют посетители на сайте или в мобильном приложении. Разработка UI-дизайна начинается с тщательного проектирования: все элементы должны гармонировать друг с другом, быть удобными и легко помещаться на одном экране как компьютера, так и смартфона. В структуру UI входят кнопки, меню, поля и другие компоненты, необходимые для аудитории. Качество UI-дизайна оказывает влияние на ключевые параметры – от процента отказов на сайте до конверсий. Например, дизайнер создал форму обратной связи с 4-5 полями, куда клиенту нужно ввести имя, адрес электронной почты, телефон и другие данные, иначе подписаться или зарегистрироваться будет невозможно. Такая форма может сразу отсеять более 50% лидов – люди банально ленятся заполнять все поля или не хотят предоставлять много данных.

Дизайнер-график в сфере UI тесно сотрудничает с UX-специалистом, который отвечает за функциональность интерфейса. Уровень ответственности между дизайнерами разделяется в зависимости от проекта: UX важен в создании дашбордов и CRM, UI – на сайтах, в мобильных приложениях и играх, имиджевых проектах. Профессионал в области UI свободно владеет HTML, CSS и JavaScript, он понимает, почему важна адаптивность, и имеет опыт использования хотя бы одного языка программирования. Может выполнять разработку с нуля или использовать готовые шаблоны, где реализованы готовый дизайн и верстка. Такие шаблоны можно редактировать и изменять, чтобы адаптировать их под требования технического задания заказчика.

Реклама, визуальный контент и другие задачи в e-commerce

В области e-commerce графика приобрела наиболее широкое распространение, что связано с активной диджитализацией бизнеса. Дизайн используется комбинированно для интернет-проектов и в офлайне – это упаковка, визитки, рекламные листовки и многое другое. Рассмотрим основные сферы применения инструментов графического дизайна в интернет-пространстве:

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

Стильная инфографика на Озон

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

Какие виды графического дизайна существуют

К основным видам графического дизайна относятся:

• айдентика – фирменный стиль, куда входят логотипы, шрифты, цвета, оформление сайта, визитки, корпоративные бланки и другие элементы;
• рекламная графика, применяющаяся и в онлайн, и в офлайн-сферах;
• UI-дизайн пользовательских интерфейсов на сайтах, в мобильных приложениях, играх;
• дизайн публикаций (печатные издания). Сюда входят журналы, газеты, книги, каталоги и прочая печатная продукция. Публикации могут быть физическими (в офлайне) и цифровыми, особенно в изданиях, агентствах и других компаниях, которые совмещают разные каналы коммуникации с аудиторией и распространения продукции;
• моушн-дизайн – графика в движении. Речь идет об анимации, видеоэффектах, картинках, 3D-объектах. Моушн-дизайн используется только в цифровой среде, приобрел популярность в сфере телевидения, видеохостингов, веб-контента. Применяется для анимации презентаций и логотипов, объявлений, рекламных материалов, игровой и мультипликационной среды, видеороликов;
• дизайн окружения. Самый понятный пример – дорожные знаки или вывески и указатели, которые помогают людям ориентироваться на незнакомой местности. Дизайнеры-графики окружения создают брендинг торговых залов, оформляют стадионы, создают удобные схемы для навигации, стилизуют офисы, учебные заведения, торговые центры, пространство для мероприятий. Специалисты в этой сфере должны иметь понимание архитектурных планов и пространственного ориентирования;
• иллюстрации. Одно из наиболее творческих направлений, сочетающее в себе инструменты иллюстрации и графики. Дизайнер использует медиафайлы и современные программы, иногда обращается к художникам, чтобы получить необходимые элементы.

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

Иллюстративная графика

Принципы и основы графического дизайна

Графический дизайн изучают в высших учебных заведениях и колледжах, альтернатива – онлайн-курсы или же самостоятельная подготовка, для чего потребуется профессиональный софт и минимум 2-3 часа в день на освоение теоретической базы. Дальнейший успех предопределяют 2 фактора: насмотренность (визуальный опыт) и практика, которая помогает «набить» руку и правильно трактовать текущие тренды ниши. Графический дизайнер должен уметь понимать клиента: иногда технического задания нет, а идеи существуют только в голове заказчика. В начале обучения нужно познакомиться с основными принципами графики – разберем самые важные.

Иерархия и визуальный вес

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

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

• пространство;
• группировка элементов;
• комбинация цветов;
• текстуры.

. Для правильного расположения элементов применяются 3 формулы:

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

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

Симметрия в графике

Шрифты

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

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

Шрифт Halloween Regular часто применяют в преддверии Хэллоуина

Акценты

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

Размер

Неправильно подобранный размер – основная проблема новичков-дизайнеров. Если размер некорректный, то на финише изображения будут размытыми или же они повлекут за собой медленную загрузку сайта из-за очень высокого разрешения. При расчете, если речь идет о дизайне для последующей печати, нужно использовать следующую формулу: размер объекта в дюймах х 300. Для изображения размером 7х8 дюймов идеально разрешение 2100х2400 пикселей. Создание дизайна под дисплей – более сложная задача, здесь важна гармония между мегабайтами (вес графического объекта) и пикселями (размер дисплея). Современные программы для графики имеют инструменты для достижения идеального баланса, но без утраты исходного качества.

Использование правильных элементов

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

• линии. Бывают прямыми, изогнутыми, вертикальными и горизонтальными – все зависит от целей и композиции. С помощью линий создается контент, разграничиваются шаблоны и формируется логика. Для эффективного использования линий стоит привлекать сетку – это направляющие, они есть в каждом графическом редакторе;
• цвет. Количество оттенков, их сочетаемость и даже яркость прямо влияют на конечного потребителя, взаимодействующего с графикой. Например, компоновка черного и красного навевает грустные мысли, фиолетовый считается тревожным, а чистый белый – слишком холодным. Правильно объединяя цвета, дизайнер может достичь интересных результатов, но нужно предварительно познакомиться с теорией и психологией оттенков;
• текстуры. В графическом дизайне они не просто создают иллюзию, а передают физические параметры изображенного объекта. Необработанная древесина, фарфор или корм для животных – все выглядит реально и кажется, что предмет можно пощупать;
• значение. Для понимания этого принципа стоит вспомнить о градиенте – плавном перетекании от темного к светлому, как контрастного, так и оттенков одного цвета. Значение наполняет графику глубиной, с его помощью можно достичь 3D эффекта и устранить плоскость, делающую объекты нереальными.

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

Пример сетки в Photoshop

Объем и контраст

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

Единый стиль

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

Недооцененная простота

Новички часто стараются создать «красивый» дизайн, в котором используется все и сразу. Вариативность цветов, многочисленные объекты на одной картинке, разные шрифты – в результате получается перегруженная и эстетически непривлекательная графика. В течение последних 5 лет на пик популярности восходит простота, в которой применяются 1-2 нейтральных цвета и минимум лишнего. Эффекта белого пространства достаточно для придания логотипу или другой графике профессионального вида. В приоритете читабельность и минимализм, которые лояльно воспринимает аудитория.

Простой, но эффектный логотип Сбербанка

Развитие насмотренности

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

Какие инструменты использовать для самостоятельного создания графики - ТОП-5 сервисов

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

Adobe Illustrator

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

Flyvi

Конструктор ориентирован на создание разных видов дизайнов, часть функций доступна бесплатно, если инструментарий нужно расширить – можно подключить платный тариф. В бесплатном пакете есть 2,5 тысячи шаблонов, 10000 фото и GIF-анимаций, 5000 вариантов фонов и шрифтов. Дизайны можно скачивать без ограничений, но на них будет нанесен водяной знак сервиса (в платных тарифах его нет). Можно создавать:

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

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

Что предлагает конструктор Flyvi: шаблоны

Wilda

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

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

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

Wondercard 

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

Возможности Wondercard

Pixlr X

Редактор Pixlr X подходит для работы с изображениями, предлагает возможности для оформления иконок и обложек, постов в социальных сетях, создания коллажей и других видов цифрового контента. В каталоге представлены шаблоны для любой тематики, основное ориентирование – на онлайн-игры, контент для маркетплейсов и социальных сетей. Часть функций доступна бесплатно, но и есть несколько платных тарифов с разными условиями.

5 правил графического дизайна для создания контента, привлекающего внимание

Выбор правильных цветов и контрастов

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

Синий – холодный, но спокойный, поэтому его используют для медицины, финансов, туризма, образования – практически универсальный вариант. Синий присутствует в оформлении сервисов для приема платежей ЮKassa и CloudPayments. Розовый – символизирует женственность или детство, поэтому его часто выбирают магазины детских товаров, а также проекты из fashion-индустрии. Черный – символ престижа, его привлекают для создания минималистических монохромных логотипов, если нужно несколько оттенков – подойдет сочетание с серебристым и золотым.

Пример логотипа косметики, оформленного с применением зеленых оттенков

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

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

Цветовой круг

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

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

Вся созданная графика должна иметь размер, который не будет замедлять загрузку сайта или же отображаться некорректно. С маркетплейсами все проще – достаточно выбрать формат, который платформа рекомендует и следовать инструкциям (доступны в базах знаний и технических справках). На сайтах и в социальных сетях эффективно работают изображения со стандартными пропорциями: 1:1 (квадрат), 4:3 (высокий прямоугольник), 3:2 (обычный прямоугольник) и 16:9 (низкий прямоугольник).

Если графика имеет вес 2-3+ мегабайта, то с загрузкой и отображением могут наблюдаться проблемы, оптимальным весом считаются 200-400 килобайт. При оформлении стоит тестировать несколько форматов графики, чтобы выбрать лучший вариант. Если переделывать готовые картинки и другой контент, например, изменять ширину сторон или же уменьшать вес, то качество снизится, а мелкие детали станут менее четкими. В случае, когда нужно показать миниатюрные элементы, например, фурнитуру на одежде или рисунок на обоях, то лучше добавить их отдельным кадром. Для корректировки параметров готового изображения лучше использовать Photoshop – самый щадящий вариант в вопросе отсутствия потери качества.

Баланс между дизайном и текстом

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

Оформление всплывающего окна: соблюдена цветовая и смысловая иерархия

Практическое использование пустого (отрицательного) пространства

Для создания графического дизайна используют два типа пространства:

• позитивное – здесь расположены компоненты дизайна;
• отрицательное (негативное) – свободное пространство вокруг позитивного.

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

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

Логотипы и графика с использованием отрицательного пространства

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

Выбор главного акцента, притягивающего первоочередное внимание

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

• тональный контраст. Картинка или интерфейс с 10-12 цветами может впечатлять художественной ценностью, но быстро утомляет взгляд. Нужна хорошая видимость темного на светлом и наоборот. Тональная контрастность не утомляет и с ней хочется взаимодействовать, она идеальна для графики, где используется много текста, или сайтов, с которыми пользователи работают на протяжении длительного времени;
• размер шрифта. Буквы разного размера работают эффективно, они помогают выделить главное предложение и раскрыть его, при этом основной посыл прописывается большими буквами, дополнительный – мелкими, но удобными для чтения. Текст можно выделять цветом, но только единого оттенка, например, ярко-красный и приглушенный алый;
• выделение основного объекта. Мозг человека отлично реагирует на закономерности, если какой-то объект выбивается из стандартного ряда, то его просто невозможно не заметить. Например, при указании скидки используется прием с выделением шрифтом: текущий дисконт, находящийся в числовом ряду, указывается большими цифрами и оттенен более ярким цветом, поэтому клиент сразу оценивает потенциальную выгоду;
• темное и цветное. Темный фон не слишком популярен, но при правильном использовании выглядит нестандартно. Его применяют в сферах развлечений и общественного питания в сочетании с контрастными буквами (розовые, ярко-фиолетовые, серебряные). Альтернатива – добавление одиночных темных фрагментов (часто используются на сайтах), чтобы выделить важный момент или структурировать данные на одном экране.

Отсутствие лишнего тоже может выполнять функцию акцента, один элемент презентуется в минималистическом оформлении, что позволяет акцентировать на нем внимание и сделать дизайн «чистым». Если посылов или объектов несколько на одном листе – легко разделить его на 2-4 прямоугольника, чтобы полноценно выделить каждый фрагмент.

В завершение

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