изображение в форме пиктограмм
Доступ к +6.0M векторных изображений и стикеров
Скачивайте бесплатные значки и стикеры для своих проектов. Ресурсы, созданные дизайнерами для дизайнеров. Форматы PNG, SVG, EPS, PSD и BASE 64..
Воспользуйтесь Черной пятницей
Скидка более 55% OFF на годовой план
Eжегодный 55% OFF
Иконки
Крупнейшая база значков, доступных в форматах PNG, SVG, EPS, PSD и BASE 64.
Стикеры
Откройте для себя более 6,000 стикеров для WhatsApp, Instagram и Facebook, доступных в форматах PNG и SVG.
Значки интерфейса
Более 3,000 значков, разработанных специально для интерфейсов и совместимых с популярными библиотеками значков.
Шрифты-значки для любого проекта, большого или маленького
+3,000векторных иконок, оптимальных для SVG и �еб-шрифта, для веб-приложений и приложений для iOS и Android.
Инструменты, которые помогут сделать вашу работу более профессиональной
Бесплатные аксессуары, которые позволят вам организовать свои дизайнерские творения и создавать их, экономя при этом время
Создайте несколько коллекций, чтобы упорядочить иконки, и скачайте их в нужном вам формате. Посмотреть еще
Отредактируйте цвет своих иконок, измените размер и скачайте их во всех форматах: SVG, PNG, EPS. Посмотреть еще
Используйте иконки в Google Документах и Презентациях легко, быстро и бесплатно. Посмотреть еще
Создавайте эффектные изображения для своих историй в Instagram, заголовков в Facebook, презентаций, блогов или веб-сайтов. Посмотреть еще
Создайте несколько коллекций, чтобы упорядочить иконки, и скачайте их в нужном вам формате. Посмотреть еще
Отредактируйте цвет своих иконок, измените размер и скачайте их во всех форматах: SVG, PNG, EPS. Посмотреть еще
Используйте иконки в Google Документах и Презентациях легко, быстро и бесплатно. Посмотреть еще
Создавайте эффектные изображения для своих историй в Instagram, заголовков в Facebook, презентаций, блогов или веб-сайтов. Посмотреть еще
Что нового в Flaticon
Узнайте о последних обновлениях сайта, новых функциях и инструментах и извлеките максимум пользы из работы с Flaticon.
О пиктограммах в интерфейсах и не только
Как правило, в защиту пиктограмм говорит тот факт, что ее смысл очевиден и понятен для носителей разных языков. Отсюда причина частого спора о том понятен или непонятен всем пользователям какой-то символ. В общем-то этот спор занятие довольно бесполезное и отчасти повторение исторического соревнования культур при создании письменности. Иероглифы VS Алфавит. При относительно небольшом лексиконе, очевидным был факт изображения слов описывающих вещи в виде этих самих вещей. Но чем мудрёней становились понятия, тем сложнее было придумать очевидный графический образ. В итоге все сошлось к тому, что смысл не всегда очевиден, но есть логика понимания, какие-то правила считывания. И даже те же древние египтяне и современные китайцы в конце концов стали использовать иероглифы для фонетической записи слов используя их не только как символы-существительные, прилагательные и глаголы, но и слоги и просто отдельные частицы слов.
Рис.6 — В иконку без подписи пользователь будет более тщательно целиться, неосознанно воспринимая границы изображения за границы активной области.
Рис.7 — Кнопки справа нажимать удобней, видна область, можно даже тапнуть или кликнуть где-то довольно далеко от центра и быть уверенным в попадании. Но те, что слева более концептуальны. Впрочем, как показывает опыт последних лет скрытая активная область элементов вполне неплохо работает там, где нет скученности информации. Плюс облегчает в целом визуальное восприятие. Клавиатуры в мобильных интерфейсах без границ активных областей работают даже лучше. А вот в одном мессенждере кнопка «отправить» не имеет визуальной границы и так близко расположена к полю ввода сообщения, что порой у пользователя случается ситуация, в которой он не знает, попадет ли он в поле для редактуры сообщения или отправит его.
Рис.8 — Примеры того как совместно работают надпись и пиктограмма. Словами передается точный смысл, а пиктограмма способствует быстрому нахождению нужной опции.Кроме того в таком случае не требуется искать какой-то очень точный образ для иконки. Пиктограммы на геймпаде Sony Playstation. Они просто визуально разные и хорошо отличимы глазом. Хотя дизайнер, спустя годы, выдавал версию с обоснованием, но это скорее всего легенды.
Рис.9 — Геймпад для Сони Плейстейшн. Запомнить комбинацию быстрее, чем с помощью буквенных маркировок.
Иконки часто используются для акцентирования внимания. И это верное решение, но в разумных пределах. Как я писал в первых строках не надо превращать интерфейс в древнеегипетское творчество. До начала эпохи скевоморфизма и первый период его царствования, на стоках и в свободном доступе иконок было не так уж много. Некоторые 3д-дизайнеры или векторные иллюстраторы бывало специализировались исключительно на создании иконок под конкретный проект и процесс был трудоемким и уникальным. Когда человечество удовлетворило свое стремление оцифровать окружающий мир и наигралось со стеклянными и металлическими кнопками, бликами и отражениями, пиктограммы приняли свой традиционный минималистичный вид, популяризированный плоским дизайном. Технически создавать такие иконки стало проще, поисковый запрос на тему выдает массу вариантов. Отсюда засилье иконок в современном дизайне. С одной стороны тренд, с другой соблазн без особых усилий этому тренду следовать. Например, если где-то пишут адрес или номер телефона, то тут же снабжают его пиктограммой локации и телефонной трубки соответственно, чаще всего лишь по причине «а почему бы и нет». Иногда кажется, дай волю и иконка будет предварять каждое слово. Фактически пиктограммы превращаются в какие-то декоративные элементы а сайты в усыпальницы фараонов со всей своей пафосной бессмысленностью. Но в отличие от пирамид, эти сайты вряд-ли продержатся несколько тысяч лет и станут культурной ценностью.Если вы размещаете пиктограммы только для красоты, то хорошо подумайте а стоит ли? Возможно такими действиями вы лишь удешевляете вид вашего дизайна. Ведь всем ясно, что это не авторская работа а стоковые изображение по копеечной цене, а то и полученные бесплатно. Если пиктограмма не улучшает восприятие, то она не нужна. Использование пиктограмм обуславливается даже не модой, а тем, что их просто много и они дешевые.
Рис.10 — Пиктограммы не используются в меню, так как категорий слишком много, предпочтение отдано сортировке по алфавиту.Говоря о моде, стоит затронуть тему художественного исполнения пиктограмм в интерфейсах. Сейчас это преимущественно условные изображения без объема, часто выполненные в тонких линиях. Кто-то скажет, что это просто веяние моды. Но на самом деле такой вид обусловлен прежде всего техническими возможностями. Проще говоря, сейчас делают так, потому что это стало возможным, а не потому что у какого-то художника-первооткрывателя случилось озарение. И по большому счету, поговорка, что «новое это хорошо забытое старое» как нельзя кстати.Появление пиктограмм в интерфейсах фактически и было появление самого графического интерфейса. Нарисованные попиксельно графические элементы имели грубую точечную структуру. Разрешающая способность экранов не позволяла сделать детальные изображения с плавными контурами. Размер пикселя был велик относительно всей иконки. В наше время изображения стилизованные под графику той эпохи называют пиксель-артом либо как угодно с приставкой «восьмибиный».
Рис 15- Скевоморфные иконки предыдущих версий MacOs
Просматривая пиктограммы, иконки, знаки которые были 30, 50, 100 лет назад всегда можно найти какое-то повторение того, что уже было. В развитии дизайна всегда присутствует некая цикличность декад. Спустя десятилетия мы видим возвращение например музыкальных или модных предпочтений прошлых лет, но уже на базе новых технологий.
При создании образа иконки надо хорошо подумать кто является целевой аудиторией и какой уровень ее подготовки. Кому доверить обучение пользователя: обществу, рекламе, интерфейсу или предложить пользователю приобрести свой собственный опыт. Пытаться делать пиктограммы которые расскажут пользователю все о системе чревато тем, о чем предупреждает один из известных законов Мерфи «сделай понятное дураку и этим будут пользоваться только дураки». Энциклопедическое описание понятия пиктограммы использует слово «узкоспециализированное изображение». Чтобы исключить недопонимание, пиктограмму всегда можно подписать. Не стоит размещать иконки в дизайне только для украшательства. Такой дизайн все равно выглядит, как бижутерия.
Если пиктограмма совершенно не функциональна то она не нужна. Под функциональностью может быть помощь в быстром поиске нужного, привлечение внимания, форматирование и структурирование информации. Мобильные интерфейсы в силу того, что имеют довольно мало места с физической точки зрения для пользователя (диагонали экранов 5-10 дюймов) как бы намекают на использование пиктограмм, а вот веб и другие направления графического дизайна такой необходимостью вовсе не обременены, поэтому и злоупотреблять этим не стоит. В случаях когда пиктограмма выполняет роль иллюстрации, лучше и делать полноценную иллюстрацию, более детальную, чем лаконичный значок, например как это традиционно делает DropBox (Рис. 17)
Рис. 17 Пример иллюстрации с сайта Dropbox
ROMASHIN DESIGN SCHOOL. Авторская школа А. Ромашина
Онлайн обучение графическому дизайну, типографике и брендингу
ПИКТОГРАММА ИЛИ ИКОНКА?
Когда в околопрофессиональных разговорах или статьях о графическом дизайне я слышу слово «иконка», меня немного коробит. Я невольно представляю такую маленькую пластмассовую икону, которую набожные автолюбители приклеивают к торпеде своего «Мегана» или «Приоры».
Дело в том, что то, что сейчас большинство называет «иконкой», в моей дизайнерской юности называлось пиктограммой, или знаком визуальных коммуникаций. Так или иначе, я полагаю, вам понятно, о чём пойдёт речь дальше.
Иероглиф Cexam, или пустынный заяц (слева). Иероглиф справа от зайца до сих пор остаётся не расшифрованным
Визуальные знаки, способные кодировать и передавать информацию, появились во времена, когда человечество ещё не изобрело письменность, предположительно в эпоху Голоцена. Тогда наш грязный, волосатый пращур, макнув свою пятерню в красную глину, оставил отпечаток на стене пещеры. Это первое сообщение переводилось как «я тут», или «я есть», или что-то в этом роде.
За последние 10 000 лет пиктограмма (или иконка) проделала удивительный эволюционный путь. Люди научились доносить смысл через неё так точно, что скорость усвоения информации увеличилась во много раз относительно его вербального выражения. Подумайте и ответьте: на что водитель быстрее среагирует, на надпись «снизьте скорость, здесь иногда бегают дети» или на белый треугольник с изображением двух бегущих человечков?
ПИКТОГРАММА, КАК ЕДИНИЦА ИНФОРМАЦИИ
В современной дизайн-доктрине высшим качеством становится эффективная коммуникация, эффективность которой, в свою очередь, обуславливается однозначностью восприятия передаваемой информации.
Создание пиктограммы если не искусство, то, однозначно, высокое ремесло. И, как во всяком ремесле, внутри профессии сосуществуют уважаемые мастера и безымянные халтурщики. Критерии оценки качества сложились примерно к 70-м годам прошлого века, в первую очередь, благодаря Олимпийскому движению. У Олимпийского комитета возникла реальная потребность в том, чтобы эффективно диспетчеризировать большую массу народа посредством визуальных сообщений, потому что далеко не все гости Олимпиады понимали английский. Второй не менее важный момент тот, что к 70-м годам в силу коммерциализации Олимпийских игр у комитета появились возможности инвестировать серьёзные деньги, в том числе и в системы визуальных коммуникаций.
Не последнюю роль в становлении жанра сыграли швейцарские дизайнеры, апологеты так называемого «интернационального стиля» (Swiss International). Им к 70-м годам удалось сформулировать проектные принципы, которые легли в основу модели профессии графического дизайнера, это:
Посмотрите на эту лисичку родом из 70-х. Согласитесь, что она идеальна?
Геометризм – это представление любого сложного по форме изображения в виде геометрических примитивов – круга, квадрата и треугольника. Мастерство графического дизайнера состояло в том, чтобы, упрощая и геометризируя форму, не потерять связь с изображаемым предметом.
Минимализм – это культ самоограничения, в рамках которого графический дизайнер стремится использовать ровно столько изобразительного материала, сколько необходимо для донесения смысла высказывания, и не на точку больше. На профессиональном сленге это звучит как «минимакс» — максимальная содержательность при минимализме формы.
Я очень люблю этот проект системы визуальных коммуникаций культурного центра в Лиссабоне. Он завораживает именно своим минимализмом. Ты смотришь на эти пиктограммы и понимаешь, что дизайнер упростил изображения до такой степени, что упрости ещё – картинка превратится в геометрическую абстракцию и потеряет свою информационно-коммуникативную сущность.
Третье – диктатура сетки. Сетка — это невидимые глазу, но улавливаемые нами на тонком уровне вертикальные и горизонтальные связи между графическими элементами, логический способ организации композиционного пространства+.
Таким образом, к началу 70-х, дизайнеры вооружились теорией, вдохновились немалыми гонорарами от Олимпийского комитета и энергично приступили к работе.
Один из них был Отл Айхер, которого организаторы летних Олимпийских игр 1972 года в Мюнхене попросили стать главным дизайнером. Айхер был фигурой культовой, он считался одним из пионеров корпоративного брендинга и к началу 70-х в его творческом портфолио уже имелись фирменные стили компании Braun и авиакомпании Lufthansa.
Олимпийские пиктограммы Айхера явились квинтэссенцией «интернационального стиля». Построенные по жёсткой сетке, очищенные 
от несущественных деталей, сознательно лишённые пола и эмоций, они стали абсолютным шедевром модульного минималистского дизайна. Его система визуальных коммуникаций была столь хороша, что ещё много лет спустя Олимпийский комитет продолжал её использовать на других международных спортивных состязаниях. Айхеровские изображения видов спорта эксплуатируются и до сего дня, иногда порой в сильно мутировавшем виде. Вот эту фотографию прислала мне моя ученица из Финляндии типа «поржать».
Работа моей ученицы Евгении Белухи (США)
На моих тренингах по айдентике «Айхеровским человечкам» отводится та же роль, что и гаммам при обучении игре на фортепиано. Студенты копируют пиктограммы, разбирают по частям, а потом из получившегося конструктора составляют свой собственный рассказ о своей жизни. Через этот тренинг они, во-первых, лучше узнают друг друга, во-вторых – постигают тайную доктрину модульного дизайна. Сплошная выгода!
СССР НАСТУПАЕТ НА ПЯТКИ
В 1980 году достойную лепту в развитие жанра внесли наши соотечественники — Валерий Акопов, Василий Дьяконов, Михаил Аникст, Александр Шумилин и Борис Трофимов. Им в руки попал огромный заказ на разработку системы визуальных коммуникаций Московской Олимпиады. Впоследствии за эту работу дизайнеры получили золотую медаль в Брно.
Валерий Акопов, Василий Дьяконов, Михаил Аникст, Александр Шумилин, Борис Трофимов, 1980 г.
Разумеется, приступив к работе, они не могли не воспользоваться находками того же Айхера, но кое-что им пришлось изобретать с нуля. Задача отличалась от Айхеровской тем, что нашим спортивным чиновникам понадобилось огромное количество пиктограмм, любое действие или потребность они захотели визуализировать в виде значка. В списке были: ремонт зажигалок, зонтов и чемоданов, химчистка, отдельно — для синтетики и отдельно — для трикотажных тканей, баня русская и баня финская, блинная, пельменная, чебуречная, шашлычная, пирожковая — для этого всего требовались разные знаки. Борис Трофимов вспоминает:
«Чтобы показать трикотажность, мы разделили изображение рубашки наискосок на полоски — как бы она состоит из нитей. Для иллюстрации действия, такого как ремонт, была придумана рука. Она держит различные предметы в зависимости от назначения ремонта: клубок в знаке «Ремонт трикотажа», отвертку в «Ремонте зажигалок» и так далее».
Лично для меня, студента Худпрома, в середине 80-х этот проект Дьяконова, Аникста, Шумилина и Трофимова был ответом на вопрос «какой должен быть современный дизайн?». И ответ был таков: дизайн должен быть несущим смысл и предельно простым. Для меня, тогда ещё начинающего дизайнера, это определило вектор развития на будущее, я пронёс это через годы занятий графическим дизайном, это же я проповедую своим ученикам в меру своих сил.
Тогда же, в начале 80-х, предпринимается попытка осмыслить пиктограмму с точки зрения её типологии. Появляется разделение на 3 типа по способу означения, это:
Подробнее о типологии пиктограммы можно узнать из моего вебинара «ПОНЯТЬ ЗА ПОЛСЕКУНДЫ»
НАЧАЛО ЦИФРОВОЙ ЭПОХИ
С конца 80-х годов в графическом дизайне начинается компьютерная эпоха. Не нуждается в доказательствах тот факт, что появление персонального компьютера стало таким же цивилизационным прорывом, как изобретение печатного станка в XV веке и радио в XIX. Великий Стив Джобс компьютер не изобретал, он придумал и реализовал бизнес-концепцию, содержательным смыслом которой было сделать компьютер массовым, приучить к нему обывателя – человека, не владеющего языком программирования. До этого человек общался с компьютером посредством командной строки. Языком общения машины и человека был код, понятный только профессиональному меньшинству.
Задача создать новый язык команд, интуитивно понятный и домохозяйке, и школьнику, выпала совсем юной Сьюзан Каре. Девушка только что закончила художественный колледж, когда ее пригласили в Apple. Поскольку специального графического приложения для создания иконок в то время еще не было, ей выдали тетрадь с миллиметровкой, в нём она и создавала первые эскизы графического наполнения интерфейса. Одна клеточка на расчерченной бумаге равнялась одному пикселю на мониторе.
Сьюзан Каре, эскиз иконки, 80-е
Сложность состояла ещё и в том, что Сьюзан пришлось придумывать иконки к ситуациям, которые не имели аналогов в физическом мире, а существовали только в компьютерном. Ну как изобразить, например, что ваш компьютер «завис» или ваш файл «битый»? Всё делалось тогда, в 90-е, интуитивно, но ценность гениальных людей для прогресса состоит в том, что при отсутствии эмпирического опыта интуиция, тем не менее, их не обманывает.
История работы Сьюзан Каре с Apple вошла в недавно изданную биографию Стива Джобса, которая за несколько месяцев с начала продаж стала в США бестселлером. Появление книги подхлестнуло интерес к полузабытой Сьюзан Каре, и титул «бабушки иконки» по праву вернулся к ней.
С экспериментов Сьюзан Каре в Apple началась новая эпоха в развитии пиктограммы, именно тогда и вошло в обращение это слово «иконка» (от англ. icon), с этого момента пиктограмма становится интерактивной.
Больница. Токио, 2000-е
Интерактивность предполагала ещё более высокую скорость считывания информации. Значки должны были стать практически незаметными для пользователя, превратившись, по сути, из картинки в единицу информации. Пользователь не должен был отвлекаться на дизайн. Все эти новые требования диктовались маркетингом, который к 2000-м годам становится «главным» в ситуации постановки задач и принятии решений при создании систем визуальных коммуникаций. С этого момента появляется ещё одно технологическое требование: теперь иконка должна умещаться в квадрат размером 32 пикселя. Если не умещается – то вы в пролёте…
В 2000-х технологические ограничения, связанные с проектированием иконки, начали распространяться и на проектирование логотипов. Развитие и изощрённость маркетинговых технологий привело к пониманию того, что потребителя легче обучить распознаванию максимально 
простого знака, нежели сложного и многословного. Законодателем моды становятся гигантские коммуникационные компании типа Facebook или Instagram, они задают прогрессу ускорение и формируют тренды, в том числе и в айдентике. Лого такой компании — это иконка — максимально простой, запоминающийся, выдерживающий любое масштабирование графический элемент. Так, две родственных профессии – дизайнер иконки и дизайнер айдентики — в наше время пересеклись в одной точке взаимных интересов и оплодотворили друг друга.
СТРАСТЬ КОЛЛЕКЦИОНИРОВАНИЯ
Я люблю повозиться с иконками. Это хорошая трёпка для мозгов. Это и тренинг, и удовольствие. Вот, например, эта картинка «Работаю за алкоголь» была сделана мной во время очередного кризиса в 2009 году, расползлась по Рунету и стала настоящим мемом. Отдельно хочется остановиться и рассказать о моей коллекции пиктограмм и дорожных знаков. Что-то удаётся сфотографировать самому, вот, например, эта смешная девочка с Чупа-чупсом – дорожный знак из Польши. Или эти эпические штаны, сфотографированные мной в Албании. Много всякой занятной визуальной всячины присылают мне мои коллеги и ученики. Кстати, всех интересующихся коммуникативным дизайном, приглашаю в свой Instagram, там я постоянно делюсь лучшими экземплярами из своей коллекции. А на сегодня у меня всё. Творческих успехов и делайте дизайн, делайте его простым и понятным.