10 способов использования значков и изображений в цифровом дизайне

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

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

Давайте начнем.

Как успешно использовать иконки
—

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

Прочтите, чтобы узнать о пяти отличных способах использования значков в визуальном контенте.

1. Укажите ключевые моменты

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

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

2. Обозначьте диаграммы или графики

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

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

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

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

3. Показать последовательность

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

Иконка

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

Вот пример, который поможет продемонстрировать, почему эта последовательность так важна:

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

Цвет значка

Другой важный аспект согласованности значков — это цвет. Хотя в определенных контекстах требуется, чтобы значки сохраняли «логические» цвета (см. Морковь и салат в нашем предыдущем примере), иногда бывает интереснее проявить творческий подход. Один из способов сделать это — сопоставить цвет значка с виджетом данных, в котором они отображаются (или общей цветовой схемой), например, следующий набор согласованных цветов между статистикой и соответствующим значком.

Размер значка

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

4. Добавить фон

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

5. Добавление анимации

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

Как максимально раскрыть свой имидж-потенциал
—

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

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

1. Взломайте урожай

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

2. Используйте изображения в качестве фона

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

3. Вырезы

Нравится главный элемент изображения, но не фон? Нарежьте ненужные кусочки в вырезанное изображение (см. Пончик). Этот метод дает вам гораздо больше свободы, поскольку вы можете вставить его главную функцию в свой дизайн, не беспокоясь о том, что края квадратной / прямоугольной фотографии будут неудобными. Это также открывает ваш сайт, чтобы охватить пустое пространство. Проявите творческий подход и посмотрите, сколько похожих изображений вы можете использовать. Вы можете даже поместить вырезанное изображение поверх части текста, чтобы придать дизайну больше глубины.

4. Коллажи

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

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

5. Добавьте простой переход

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

Пора сделать решительный шаг
—

Иконки и изображения могут быть небольшими дополнениями к вашему дизайну, но они могут иметь огромное влияние. С помощью этих 10 советов вы можете начать интегрировать их в свои проекты, чтобы вывести их на новый уровень. Не уверены, какой тип значка или изображения подойдет вам? Лучший подход к совершенствованию цифрового дизайна — экспериментировать. Выбор правильных значков и изображений и обучение тому, как манипулировать ими, чтобы соответствовать эстетике бренда вашей мечты, — это процесс, и угадайте, что — это весело!

Об авторе

Хлоя — менеджер по контент-маркетингу в Visme, онлайн-программе для графического дизайна. Она любит писать о цифровом маркетинге и дизайне и находить новые способы привлечь аудиторию с помощью контента. Хлоя живет в Чарльстоне, Южная Каролина, где она любит исследовать свой город со своим сыном.