Иконка дизайн: Иконки графический дизайн — 50,375 бесплатных иконок

26.07.2023 alexxlab

Содержание

Пиктограмма или иконка

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

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

Иероглиф Cexam, или пустынный заяц (слева). Иероглиф справа от зайца до сих пор остаётся не расшифрованным

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

За последние 10 000 лет пиктограмма (или иконка) проделала удивительный эволюционный путь. Люди научились доносить смысл через неё так точно, что скорость усвоения информации увеличилась во много раз относительно его вербального выражения. Подумайте и ответьте: на что водитель быстрее среагирует, на надпись «снизьте скорость, здесь иногда бегают дети» или на белый треугольник с изображением двух бегущих человечков?

ПИКТОГРАММА, КАК ЕДИНИЦА ИНФОРМАЦИИ

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

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

Не последнюю роль в становлении жанра сыграли швейцарские дизайнеры, апологеты так называемого «интернационального стиля» (Swiss International). Им к 70-м годам удалось сформулировать проектные принципы, которые легли в основу модели профессии графического дизайнера, это:

геометризм
минимализм
диктатура сетки

Посмотрите на эту лисичку родом из 70-х. Согласитесь, что она идеальна?

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

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

Я очень люблю этот проект системы визуальных коммуникаций культурного центра в Лиссабоне. Он завораживает именно своим минимализмом. Ты смотришь на эти пиктограммы и понимаешь, что дизайнер упростил изображения до такой степени, что упрости ещё – картинка превратится в геометрическую абстракцию и потеряет свою информационно-коммуникативную сущность.

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

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

Отл Айхер, 1972

Один из них был Отл Айхер, которого организаторы летних Олимпийских игр 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, там я постоянно делюсь лучшими экземплярами из своей коллекции. А на сегодня у меня всё. Творческих успехов и делайте дизайн, делайте его простым и понятным.

Если вы присматриваетесь к профессии графического дизайнера, но пока не решили: «моё — не моё», «потяну — не потяну», рекомендую вам пройти тест на выявление ваших скрытых способностей. Точность прогноза моего теста составляет около 90%, то есть, после его прохождения я с 90% уверенностью могу вам сказать, стоит вам начинать учиться дизайну, или вы впустую потратите время .

Тест бесплатный.

Действуйте!

Мои видео лекции на Youtube>>> Перейти в YouTube

семь принципов удачного дизайна иконок

Дизайн
9 мин на чтение
5486

Создание семейства иконок высокого качества требует вдумчивого подхода, «насмотренности», немного повторения и многочасовой практики. В материале — семь принципов для создания высококачественных иконок и много примеров.

Ясность

Основная задача иконки — быстро донести идею.

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

Расставим их по уровню ясности:

Когда в иконке использована незнакомая метафора, её сложно понять. Символ с напоминанием о ремне безопасности (третий слева) буквально отображает действие, пользователь может быстро считать её. «Сигнал системы электроусилителя руля» (крайний справа) намного неопределённей.

Часто непонятная иконка просто разочаровывает. Неверная трактовка предупреждающих символов может быть опасна для вождения.

Вот несколько значков, которые кажутся наиболее знакомыми — иконки «Любовь», «Предупреждение», «Музыка» и «Вверх/вперёд»:

Стрелка — сильный символ, который используется, чтобы показать направление:

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

Помните, что сама по себе иконка может быть не самым понятным решением, если представляемая идея слишком абстракта. В этом случае можно добавить текстовую метку или найти альтернативу.

Удобочитаемость

Когда есть понятный символ, необходимо убедиться, что он удобочитаемый:

Иконку Station в приложении Amtrak (первая строчка) сложно рассмотреть, потому что у неё много мелких деталей.

В приложении Transit есть похожая проблема. Значок клипборда читается как пятно, потому что пространство между планшетом и зажимом слишком мало:

Небольшая корректировка значительно улучшит иконку:

При работе с несколькими фигурами оставляйте достаточно места между ними. Большое количество тонких линий делает иконку перегруженной и трудной для чтения.

Google Maps прекрасно справился с задачей — иконки для обозначения времени в пути хорошо читаются при маленьком размере:

Выравнивание

Чтобы убедиться, что каждая иконка выглядит сбалансированной, сделайте оптическое выравнивание её элементов:

В этой иконке Play треугольник находится в центре круга, но пользователю кажется, что он смещён. Левая часть треугольника кажется «тяжелее» и смещается влево.

Точно так же дизайнеры шрифтов точно настраивают оптический баланс в гарнитуре (обратите внимание на смещённые от центра точки над буквами «i» и «j» и выступы у буквы «о»):

Дизайнеры иконок делают аналогичные корректировки, чтобы сбалансировать значок. Чтобы исправить приведённый выше пример, немного сдвинем элементы:

Урок: не слепо доверяйте цифрам, а проверяйте свою работу «на глаз».

Краткость

Идея, выраженная несколькими словами, выглядит эффективнее и элегантнее. Посмотрите на утверждение: «Обучение других тому, что вы знаете, укрепляет ваше собственное понимание предмета».

Можно более кратко выразить эту мысль, как это сделал писатель Роберт Хайнлайн: «Когда один учит, два учатся». Прекрасно.

Material Design хорошо показывает принцип краткости в своём руководстве по иконкам. Вместо того, чтобы говорить:

Скажите просто:

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

В пользовательских интерфейсах упрощение позволяет разъяснить смысл и освободить место для контента. Иконки Telegram лаконичные и приятные:

Иногда иконки в интерфейсах больше похожи на иллюстрации. Многоцветные иконки Yelp — восхитительные изображения популярных продуктов. Креветка в иконке тайской кухни прелестна:

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

Последовательность

Чтобы достичь гармонии для семейства иконок, соблюдайте одни стилистические правила. Apple использовала для iOS 13 всевозможные штрихи, заливки и размеры:

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

Недавно Apple выпустила введение в SF Symbols, которое включает стиль иконок в девяти весах и трёх масштабах (возможно, немного сложное, но подробное руководство). Иконки выглядят более гармонично.

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

Набор иконок Phosphor, созданный автором этого материла и Тобиасом Фридом, включает более 700 значков. Хотя каждый из них имеет разную форму, у иконок одинаковый вес и они хорошо смотрятся вместе:

Индивидуальность

Каждый набор иконок особенный. Что делает его уникальным? Что он может рассказать о бренде? Какое настроение создаёт?

Интерфейс Waze во многом опирается на иконки. Эти красочные иконки как будто говорят: «Мы причудливые!».

Иконки Twitter мягкие, лёгкие и чёткие:

Иконки Sketch утончённые и воздушные:

Иконки Freemojis милые:

Наборы иконок для Android предназначены для разных тем домашнего экрана. Ниже представлены иконки в абстрактном, пиксельном, пузырьковом и неоновом стилях:

Простота использования

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

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

Организация

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

Создание документов

Сформулируйте основные принципы семейства иконок. Например, принципы иконок Phosphor:

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

Перечислите технические правила. Например, для Phosphor это:

Холст 48×48 px.
Обводка по центру 1,5 px.
Закругленные концы.
Непрерывные линии, кроме случаев, когда ломаные сегменты необходимы для понимания.

Прямые сегменты, идеальные изгибы и приращение угла 15° там, где это возможно.
При необходимости отрегулируйте кривые, чтобы следовать принципам дизайна.
По возможности используйте целые, чётные числа, уменьшите до 1 px и 0,5 px при необходимости.
Придерживайтесь контурам линий: 28×28 px круг, 25×25 px квадрат, 28×22 px альбомная ориентация, 22x28px портретная ориентация.
Сохраняйте область обрезки толщиной 6 px.

Можете сделать документацию общедоступной, например:

Иконки Material System.
Руководство по иконкам IBM.
Иконки Shopify Polaris.
Руководство по иконкам Atlassian.

Тестирование

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

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

Специальные инструменты

Наконец, если у вас есть возможность, создайте инструменты, облегчающие использование иконок. Material Design делает иконки легкодоступными с помощью собственной библиотеки. Найдите нужную иконку и загрузите разные стили, цвета и размеры в выбранном формате файла:

Набор иконок — живое существо. Подарите ему любовь и инструменты, необходимые для успеха и роста.

Ресурсы

Библиотеки иконок:

Feather — набор более 200 минималистичных иконок, которые хорошо масштабируются.
Material system icons — более 1000 утилитарных иконок для интерфейса в пяти стилях.
Nucleo — набор более 30 тысяч иконок в трёх стилях.
Streamline — прекрасно нарисованный набор более 30 тысяч иконок в трёх «весах».

Агрегаторы иконок:

Noun Project — отличный способ найти вдохновение в разных стилях и метафорах.

Менеджеры иконок:

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

Источник: vc.ru

#дизайн
#дизайн иконок
#иконки
#принципы
#статья

Статьи по теме

Вот как создать иконку с нуля [шаг за шагом]

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

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

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

Этот пост разделен на две части:

Семь золотых правил создания иконки
Как создать иконку с нуля (шаг за шагом)

Готовы? Давайте погрузимся!

В этом разделе мы рассмотрим семь ключевых моментов, которые следует учитывать при разработке значков.

1. Помните о сетке

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

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

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

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

2. Сначала осмотритесь

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

Обратите внимание на маленькое увеличительное стекло с надписью «искать», которое мы видим повсюду. Увеличительные стекла — не единственный предмет, на котором может быть написано «поиск». Однако мы использовали их так часто, что теперь они стали стандартным значком поиска. Использование другого значка требует от пользователя изучения чего-то нового, что в результате замедляет его работу. Это не очень способствует плавному взаимодействию с пользователем!

Перед созданием значка осмотритесь и определите стандарты, которые вам, возможно, придется учитывать при работе. Значит ли это, что нет места творческой свободе? К счастью, это не так! Если значок не представляет функциональность, регулируемую стандартами, мы можем дать волю своим творческим сокам. Если это так, мы все еще можем дать ему творческий поворот. Пока значок и его функция по-прежнему узнаваемы, вы можете добавить свой собственный стиль дизайна!

3. Не увлекайтесь деталями

Мы часто размещаем значки в крошечных местах, например, на панели вкладок на iPhone. Когда вещи становятся маленькими, слишком много деталей начинает теряться.

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

4. Будьте последовательны

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

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

5. Следите за зазором

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

6. Проверьте свою работу

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

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

7. Сборка из простых форм

Все можно разбить на основные формы. Помните нашу иконку дома выше? Мы разработали с двумя прямоугольниками и треугольником.

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

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

Я буду использовать Sketch. Однако вы можете повторить следующие шаги в другом программном обеспечении для проектирования, таком как Figma. Если вы не можете определиться с инструментом, посмотрите это сравнение Figma и Sketch.

Шаг 1: Ознакомьтесь с объектом съемки

Для начала давайте познакомимся с тем, как выглядят камеры. Самый простой способ сделать это — найти в Google то, что вы собираетесь проектировать. Я погуглил «камера» и получил следующие результаты:

Мои результаты показывают множество камер, все разных форм и размеров. Однако у них есть несколько общих определяющих характеристик:

Большой объектив посередине корпуса
Вспышка
Кнопка, позволяющая сделать снимок

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

Шаг 2: Разбейте

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

Я нашел следующее:

Корпус камеры может быть выполнен в виде прямоугольника со скругленными углами.
Объектив и вспышку можно воссоздать с помощью кругов.
Кнопка может быть прямоугольной.

Это будут наши строительные блоки.

Шаг 3: Начни строить!

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

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

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

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

Шаг 4: Проверка!

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

Шаг 5: Приведите в порядок

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

Шаг 6. Экспорт

Сохраните свою работу и экспортируйте ее, чтобы поделиться ею со всем миром!

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

Удачного проектирования! Если вы хотите узнать больше о дизайне пользовательского интерфейса, ознакомьтесь со следующими статьями:

32 Элементы пользовательского интерфейса для дизайнеров пользовательского интерфейса: ваш полный глоссарий
Изучаем эскиз для дизайна пользовательского интерфейса? Избегайте этих распространенных ошибок
С чего начать дизайн пользовательского интерфейса: руководство из 5 шагов