Введение в графический дизайн: 4 основы дизайна

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

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

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

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

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

вы можете использовать

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

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

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

Dunkin Donuts menu
Контраст также может использоваться для руководства действиями людей; чтобы дать людям знать, что вы хотите, чтобы они сделали. Если вы хотите увеличить «переход по ссылке», убедитесь, что между кнопкой призыва к действию и остальной частью дизайна есть сильный контраст.

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

Color Wheel from DecoArt
Цвета также придают визуальным подсказкам значение. Например, зеленая кнопка обычно обозначает утвердительное действие, например «ОК» или «Принять». Но если бы вы спроектировали большую кнопку «Принять» и сделали ее красной, это могло бы сбить пользователя с толку, а в некоторых случаях результаты могли бы быть катастрофическими.

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

Красный может вызывать сильные эмоции — как положительные, так и отрицательные, создавая ощущение срочности — поэтому он эффективен для продаж. Он также стимулирует аппетит, поэтому его регулярно используют в секторе быстрого питания: вспомните KFC и Wendy’s.
Оранжевый цвет считается легким и веселым, поэтому он подходит брендам с менее «корпоративным» настроением. Более темные оттенки оранжевого ассоциируются с осенью, что подходит для более «земных» брендов. Примером может служить The Home Depot.
Зеленый цвет приятен глазу и ассоциируется со здоровьем. Поэтому вы часто увидите его в брендах, продвигающих товары для здоровья, например, фармацевтические препараты и пищевые бренды. Он также может быть связан с ростом или властью, например, с финансовыми или военными организациями. Это довольно широкий диапазон, от Whole Foods до BP.
Синий цвет успокаивает и является цветом разума, но также силы, мудрости и доверия. Это безопасный вариант цвета, но брендам нужно подумать, поможет ли он им выделиться в своем пространстве. Яркий пример — Facebook, теперь Meta.
Розовый цвет исторически использовался для изображения женственности, как в журнале

Cosmopolitan и в массивной

 

 

розовой окраске Барби. Теперь многие популярные бренды успешно используют его во многих отраслях, чтобы «сломать шаблон», например, Lyft. Он изображает молодость, но также вселяет комфорт и символизирует надежду.
Черный цвет ассоциируется с роскошью и властью. В сочетании с ярким цветом он может добавить энергии изысканности. Черный хорошо подходит для таких отраслей, как спорт и мода, но не для других, например, для здравоохранения. Некоторые примеры включают Apple и Nike.
Белый и серебристый олицетворяют чистоту и часто используются для современного вида и ощущения. Их нужно использовать осторожно, так как им может не хватать индивидуальности. Многие бренды используют белый цвет для дополнения другого, более доминирующего цвета. При хорошем исполнении, например, в контрасте с черным, добавление белого или серебристого цвета в ваш дизайн придает современный и упрощенный вид. Опять же, посмотрите на Apple и Nike.
2. Образность
Изображения хорошо смотрятся на цифровых носителях, но есть некоторые моменты, которые следует учитывать.

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

Introduction to Graphic Design: The 4 Design Fundamentals
Качество изображения также очень важно. Когда клиенты рассматривают возможность покупки онлайн, они хотят иметь возможность тщательно рассмотреть изображения, которые дают высокий уровень детализации. Люди часто покидают сайт электронной коммерции , потому что изображение продукта недостаточно высокого качества, чтобы помочь им принять решение. Когда вы выбираете изображения как часть дизайна, убедитесь, что они имеют высокое разрешение (HD) и подходят для устройства, которое будет использовать ваша аудитория. Они не должны быть растянутыми или пикселизированными.

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

Вот краткое руководство по выбору оптимальных размеров изображения для экранов разных размеров:

Изображение баннера: ширина 2000 пикселей и длина 800 пикселей

Слайдер: ширина 1920 пикселей, длина 890 пикселей
Значок: 300 пикселей в ширину и 300 пикселей в длину
Пост/Событие: 425 пикселей в ширину и 220 пикселей в длину
Портфолио: 1920 пикселей в ширину и 768 пикселей в длину
3. Типографика
А как насчет типографики или шрифтов, которые вы используете? При выборе шрифта для вашего визуального образа важно не пытаться сделать что-то совершенно иное.

Читатели ожидают увидеть Адрес пользователей базы данных Telegram
знакомые шрифты, такие как Arial, Helvetica или Roboto. Используйте максимум два-три семейства шрифтов на одной веб-странице и еще меньше для ваших объявлений и изображений.

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

Frank Chocolate: Pinterest
Что такое семейство шрифтов? Семейство шрифтов просто означает группу шрифтов, определяемых общими стилями дизайна. Например, Roboto — это семейство, которое имеет жирные, курсивные или тонкие стили.

Вам также встретятся шрифты с засечками и без засечек. Засечка — это небольшая декоративная линия, добавляемая к символу. Самый распространенный шрифт с засечками — Times Roman. Распространенный шрифт без засечек, или без засечек, — Helvetica.

Шрифты с засечками используются для улучшения читаемости текста в контенте, таком как блоги, статьи или газеты, и чаще используются в печати, чем в Интернете. Постарайтесь не использовать более 10 слов в каждой строке. Для заголовков рассмотрите возможность использования тяжелого шрифта без засечек большего размера. Убедитесь, что правильное ударение — или размер и «вес» — применяется к тексту в соответствии с его приоритетом.

Introduction to Graphic Design: The 4 Design Fundamentals
Также лучше не добавлять текст непосредственно на изображение, а вместо этого работать с вашей веб-командой, чтобы наложить адаптивный текст на изображение. Почему? Проблема с текстом на изображении в том, что он может отображаться слишком маленьким и нечитаемым на мобильных устройствах.

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

Introduction to Graphic Design: The 4 Design Fundamentals

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

Introduction to Graphic Design sab directory The 4 Design Fundamentals
« Помните, что именно сочетание изображения и вашего сообщения, а также того, как оно сформулировано, и даже шрифтов, которые вы используете, может стать решающим фактором успеха или неудачи в достижении вашей аудитории » .
–
Когда дело доходит до цифровой доступности , убедитесь, что вы учитываете путь клиента и различные точки соприкосновения в вашем дизайне. Такие элементы, как альтернативный текст для изображений, текст ссылки и цветовой контраст могут иметь огромное значение.

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

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

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

Introduction to Graphic Design: The 4 Design Fundamentals
Каждый элемент графического дизайна должен служить одной цели. Когда вы создаете дизайн, спросите себя: «Какова его цель?» Должен ли он побуждать пользователя к каким-либо действиям? Информировать его?»

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

Как использовать простоту в дизайне
Теперь давайте поговорим о силе простоты в вашем дизайне. Как говорит эксперт по UX Ник Бабич

«Минимализм заключается не в отказе от элементов, а в добавлении ровно столько, чтобы они могли рассказать вашу историю».

Есть два основных способа сделать дизайн простым и сохранить UX на переднем плане и в центре. Во-первых, убедитесь, что вы используете пустое пространство; и, во-вторых, удалите все, что не является абсолютно необходимым.

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

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

Medium screenshot