Что есть иконки?
Иконки – это графический элемент или совокупность элементов, используемая для навигации, систематизации, унификации или стандартизации коммуникации продукта и потребителя.
Задача иконок состоит в том, чтобы упростить восприятие текстовой информации.
Хорошая иконка не нуждается в объяснении, а с первого взгляда дает понимание о том, что поясняется в тексте, куда покупателю идти и что такое перед ним.
Для чего могут понадобиться иконки?
- для презентационных слайдов;
- для страниц и разделов сайта или интернет-каталога;
- для сегментации и навигации в офисе, магазине, аэропорту или ином помещении;
- для интерфейса приложения, фавикона сайта или компьютерной программы.
Какие виды иконок могут быть:
- одноцветные, двуцветные или многоцветные;
- фронтальные или с применением перспективы;
- контурные или с использованием заливок;
- с использованием градиентов и без них;
- плоские или объемные;
- со скруглениями линий или без;
- с разрывами линии или без;
- с дополнительной версией при наведении и статичные;
- минимально детализированные (хорошо масштабируемые) и максимально.
- для презентационных слайдов;
- для страниц и разделов сайта или интернет-каталога;
- для сегментации и навигации в офисе, магазине, аэропорту или ином помещении;
- для интерфейса приложения, фавикона сайта или компьютерной программы.
Какие виды иконок могут быть:
- одноцветные, двуцветные или многоцветные;
- фронтальные или с применением перспективы;
- контурные или с использованием заливок;
- с использованием градиентов и без них;
- плоские или объемные;
- со скруглениями линий или без;
- с разрывами линии или без;
- с дополнительной версией при наведении и статичные;
- минимально детализированные (хорошо масштабируемые) и максимально.
Примеры разработанных нашими дизайнерами иконок
Дизайн уникальных иконок для серии упаковок b2b сливок и молока бренда «Чудское озеро», сет из пяти контурных иконок, разграничивающих область применения продукта на кухне: для соусов, для коктейлей, для кофейной пенки и др.
Дизайн уникальных иконок для серии упаковок b2b сливок и молока бренда «Чудское озеро», сет из пяти контурных иконок, разграничивающих область применения продукта на кухне: для соусов, для коктейлей, для кофейной пенки и др.
Создание иконок для серии инфографики-инструкции по использованию порошков и отбеливателей бренда «ACE». Это серия из объемных, цветных иконок, сочетающих в себе иконки с перспективой и фронтальные.
Разработка иконок для дизайна упаковки кормов для кошек и собак «LAZZARO», обозначающая преимущества кормов для питомцев. Иконки выполнены с использованием заливок, одного цвета и плавных линий. В последствии нанесены на упаковке при помощи пантона.
Дизайн иконок-инструкций к использованию двойной уникальной упаковки в проекте по дизайну упаковки семечек «Семивкусово».
А также иконки для дизайна упаковки кальянных углей COCOTIGER.
А также иконки для дизайна упаковки кальянных углей COCOTIGER.
Как можно получить иконки?
Если для вашего бренда, компании или проекта нужны иконки, то их можно разработать с нуля или найти подходящий сет с минимальной доработкой деталей или без нее. Разработка иконок с нуля строится по принципу: описание смысла для передачи (постановка задачи), отрисовка вариантов-концепций (с разными характерами и стилями), согласование и выбор варианта Заказчиком, финализация и детализация.
Какие пути получения иконок есть?
Если для вашего бренда, компании или проекта нужны иконки, то их можно разработать с нуля или найти подходящий сет с минимальной доработкой деталей или без нее. Разработка иконок с нуля строится по принципу: описание смысла для передачи (постановка задачи), отрисовка вариантов-концепций (с разными характерами и стилями), согласование и выбор варианта Заказчиком, финализация и детализация.
Какие пути получения иконок есть?
- Вы можете найти и скачать сет иконок с открытой лицензией на использование;
- Есть вариант, в котором мы подбираем на стоках изображения, лицензию на коммерческое использование которых нужно будет купить. Мы можем найти наиболее подходящий сет, доработав детали иконок.
- И наиболее безопасный вариант – отрисовка нашими иллюстраторами уникальных иконок по вашему техническому заданию. Вопрос лицензирования в этом способе не нуждается в разрешении, и вы получаете наиболее подходящий вариант иконок именно вам. Однако, это самый затратный способ.
Рисовать иконки можно и удобно в следующих программах: Adobe Illustrator, Sketch, Adobe Photoshop, Adobe Experience Design (или Adobe Xd) и в Figma.
Иконки рисуются в векторе.
Иконки рисуются в векторе.
Растр – тип изображения, который как мозаика складывается из цветных мини-фигур – пикселей.
Чем выше разрешение растровой картинки, тем больше пикселей на единицу площади содержит картинка. Например, растровая иконка 400х300px – это иконка, высота которой 400 пикселей, а ширина – 300 пикселей.
При масштабировании картинки на большую площадь человеческому глазу будет виден неровный «пиксельный» край линий. Растр дает большую цветопередачу плавных переходов в отличие от вектора.
Поэтому линейные одноцветные иконки для лучшей масштабируемости принято рисовать в векторной графике.
Вектор – тип изображения, который строится по принципу опорных точек и кривых между ними. Кривые между точками задаются по формулам линий. Изображение «в векторе» называют также «в кривых».
Векторное изображение можно растрировать, а растровое прекратить в вектор автоматически нельзя.
Чем выше разрешение растровой картинки, тем больше пикселей на единицу площади содержит картинка. Например, растровая иконка 400х300px – это иконка, высота которой 400 пикселей, а ширина – 300 пикселей.
При масштабировании картинки на большую площадь человеческому глазу будет виден неровный «пиксельный» край линий. Растр дает большую цветопередачу плавных переходов в отличие от вектора.
Поэтому линейные одноцветные иконки для лучшей масштабируемости принято рисовать в векторной графике.
Вектор – тип изображения, который строится по принципу опорных точек и кривых между ними. Кривые между точками задаются по формулам линий. Изображение «в векторе» называют также «в кривых».
Векторное изображение можно растрировать, а растровое прекратить в вектор автоматически нельзя.
Что учитывает дизайнер и проверяет арт-директор при создании иконок?
Перечислим правила, которых должен придерживаться дизайнер при создании иконок.
Перечислим правила, которых должен придерживаться дизайнер при создании иконок.
- Важно учитывать одинаковый визуальный вес или оптическую массу иконок, чтобы при отдалении и прищуривании иконки выглядели одинаковыми по массе пятнами.
- Отслеживать, чтобы у иконок была одинаковая степень детализации.
- Внутри одного сета должны быть выверены размеры промежутков линий, скруглений, толщин линий, наличия разрывов линии и общий минимальный размер промежутка, который должен равняться толщине линии.
- В иконке должен быть минимум графического шума. Это достигается путем отсечения лишнего и удаления повторяющихся и очевидных элементов.
- Информативная и простая иконка должна быть легкой, для этого можно убрать или не использовать рамки, контуры, фон и т.п.
- Создавая сет нужно придерживаться выбранного стиля и характера иконок. Они должны все соответствовать выбранным параметрам, то есть все иконки сета должны быть либо фронтальными, либо с использованием перспективы; либо контурными, либо с заливками; либо с использованием одной толщины линии, либо с несколькими толщинами.
- При создании иконок рекомендуется использование гайдов и сетки. По ним финально проверяются разработанные изображения. И соблюдать минимальную ширину пикселя.
- Чтобы иконки были комфортно масштабируемыми, лучше использовать стандарт размера сетки: 24-х и 48-пиксельная сетка. Также важно не забывать проверять линии иконок при помощи функции "Preview on CPU" на разблюренность. Для построения удачных иконок можно использовать "Pixel perfect" верстку, если иконки разрабатывается для дальнейшей HTML-верстки сайта.
- Иногда, работая с разными формами, например, треугольник, круг и квадрат, выстроенными ровно по сетке, вы заметите, что оптическая масса фигур будет разниться. Мы советуем делать выбор в пользу визуального равенства масс, а не в пользу торжества пиксельной сетки. Интересный вебинар на эту тему можно посмотреть у Skillbox.
Что можно передать посредством иконки?
Помните, одна иконка – один смысл, максимум – два.
В идеале – одно существительное или один призыв к действию (глагол в повелительном наклонении).
Пусть иконка означает «экспорт», «коктейль», «музыка», «пристегнись», «внимание», «календарь» и др.
Одно существительное (о чем, ком одет речь) + Одно прилагательное (какой, какая, какие).
Например, «бережный уход» или «неровная дорога», «особенный день» или «яркий свет» и др.
Второй смысл должен быть простым и считываемым.
Как точно передать смысл посредством иконки?
Помните, одна иконка – один смысл, максимум – два.
В идеале – одно существительное или один призыв к действию (глагол в повелительном наклонении).
Пусть иконка означает «экспорт», «коктейль», «музыка», «пристегнись», «внимание», «календарь» и др.
Одно существительное (о чем, ком одет речь) + Одно прилагательное (какой, какая, какие).
Например, «бережный уход» или «неровная дорога», «особенный день» или «яркий свет» и др.
Второй смысл должен быть простым и считываемым.
Как точно передать смысл посредством иконки?
1. Прочтите абзац текста, к которому нужна иконка. Это может быть пункт преимущества компании или бренда; пункт меню; целый абзац описания чего-либо и др.
2. Вычлените суть в 1-2 словах, о чем идет речь. О том, например, что компания доставляет «быстро», что товар подходит «для варки» и др.
3. Отрисуйте скетч-визуализацию того, что возникает у вас в голове при этих словах. Например, часы с заливкой 5 минут или кастрюлю с кипящей водой и крышкой. Если сразу к вам в голову не приходят ассоциации к смыслу, их можно подобрать при помощи сайтов-генераторов ассоциаций.
4. Отнесите свои скетчи двум-трем, а лучше пяти коллегам и дайте им возможность без подсказки отреагировать на то, что они увидели на этой иконке. Можете отправить им уже эскизы в графике по электронной почте или в мессенджере. Если они считали то, что закладывалось вами при отрисовке – отлично! Вы у цели.
5. Согласуйте стилистику отрисовки иконок с Заказчиком и смыслы, которые вы вычленили из текстов (так, на всякий случай).
6. И творите!)
В рамках услуги по разработке иллюстраций
наши дизайнеры могут разработать для вашего бренда сет (коллекцию) уникальных иконок. Минимальный сет состоит из 7 иконок.
Иконки, как и другие иллюстрации, разрабатываются поэтапно: бриф, эскиз, финализация и детализация, адаптация. Об этапах разработки иллюстраций вы можете прочитать на нашем сайте.
Также предлагаем вам изучить работы, проделанные нашим Агентством и содержащие услугу разработки иллюстраций. Если вас заинтересовала возможность разработать иконки с нашим Агентством или у вас есть иная задача по креативу, созданию сайта, дизайну упаковки или фирменного стиля, то вы можете связаться с нашими менеджерами по телефону +7 (495) 722-40-44 или +7 (495) 799-40-44 или написать на почту zakaz@style-you.ru.
Иконки, как и другие иллюстрации, разрабатываются поэтапно: бриф, эскиз, финализация и детализация, адаптация. Об этапах разработки иллюстраций вы можете прочитать на нашем сайте.
Также предлагаем вам изучить работы, проделанные нашим Агентством и содержащие услугу разработки иллюстраций. Если вас заинтересовала возможность разработать иконки с нашим Агентством или у вас есть иная задача по креативу, созданию сайта, дизайну упаковки или фирменного стиля, то вы можете связаться с нашими менеджерами по телефону +7 (495) 722-40-44 или +7 (495) 799-40-44 или написать на почту zakaz@style-you.ru.
Комментарии