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

Графический дизайн иконок и концептов, руководство

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

Подробнее о вакансии здесь  https://papavector.com/vacancy

Вы научитесь:

— размножать иконки по шаблонам:

• editable stroke 
• glyph
• chalk 
• color
• flat color

— сохранять иконки в 5 форматах;

— размножать концепты;

— сохранять концепты.

— размножать брошюру по образцу.

I. Начало работы

1. Скачайте ai файл.

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

2. Следуйте инструкциям в гайде.  

* Вам необходимо пройти полный цикл работы с иконками, концептами  и брошюрой : от размножение в разных стилях по шаблонам до сохранения в 5 форматах ai, eps, jpeg, svg и png. 

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

3. Для нас важны временные показатели, поэтому зафиксируйте время затраченное на выполнение т.з. Рекомендуем для точности использовать таймер. 

Рекомендации для  успешного прохождения т.з. :

• Ознакомьтесь с примерами работ студии  https://www.iconfinder.com/bsd555   
• Прочитайте статью по покраске иконок https://support.iconfinder.com/en/articles/2620425-colors 
• Узнайте, что является плагиатом в стоковом графическом дизайне.

II. Размножение иконок

Ваша задача:

1.  Переделать четыре иконки в разные стили по образцу (editable stroke, glyph,chalk,color, flat color).
2.  Сохранить иконки в 5 форматах (ai, eps, jpeg, svg, png)
3.  Построение композиции.

В исходном файле вы найдете 4 иконки, которые расставлены в один ряд. Прежде чем приступить к размножению иконок вам нужно собрать сет 2*2 (симметрично отображать иконки не нужно). 

Пожалуйста, при формировании сета, учитывайте “однобокость иконок”. 

Однобокость иконки — это загруженность деталями иконки с какой-либо стороны. Пример:

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

Ниже приведен пример сета 2*2. Если иконка симметричная, то ее можно ставить в любой угол. 

Размножение по шаблонам

После того, как вы собрали сет из иконок, приступайте к размножению по шаблонам.

1. Шаблон editable stroke 

Шаблон editable stroke  — это линейные иконки, так и остаются в том виде, в котором вы их получили в исходном файле (не разобранные для форматов ai, eps и jpeg).

Для этого шаблона нужно: 

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

 

2)  При сохранении соло иконок, для форматов ai, eps и jpeg добавляем полосочку 

 

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

 

 2. Шаблон glyph 

Шаблон glyph — это выдавливание разобранного контура.

Для этого шаблона нужно: 

1) Сделать шаблон по видео “Шаблон glyph”

2) Только для общего сета покрасить одну иконку в два цвета (но потом соло иконки сохраняются черным все. Цветная иконка только в сете)

Пример

3) Округлить внешние углы. Вот пример округления внешних углов. Красным помечены – все, которые нужно округлить (внешние углы, которые выпирают из иконки). А зеленым — те углы, которые не нужно округлять, они внутри иконки).

3. Шаблон chalk 

Шаблон chalk — это имитация мела. 

Для этого шаблона нужно: 

1) Сделать шаблон по видео “шаблон chalk”

2) Сделать подложку (только для AI, Eps, Jpeg) просто прямоугольником. Цвет подложки #262626. Для форматов Png и Svg — подложки не нужно, там белое на белом.

Пример

3) Убрать колючки. острые колючки — это торчки, которые сильно искажают форму, например, вот так. Их нужно аккуратно убрать, переместив точки или постирать

4) Кисть Feather

 4. Шаблон color 

Покраска color — это покраска всего сета в одном стиле с использованием бликов и теней. 

Для этого шаблона нужно: 

1. Подобрать референсы по смыслу темы и выбрать палитру.
2. Палитра должна быть реалистичной. Не нужно красить малиновым деньги, или зеленым собак.
3. Палитра не должна быть грязной или сильно яркой. Она должна привлекать потенциального покупателя к сету, но и не быть агрессивной. 
4. Покрасить весь сет в 3-4 цвета + цвета теней или бликов.
5. Можно менять цвет обводки.
6. Желательно не оставлять неокрашенные части иконки.

Пример:

Чего следует избегать: 

1. Не делайте кашу из цветов, лучше меньше, но аккуратно подобранная палитра, чем много оттенков.
2. Все иконки должны быть окрашены одной палитрой, а не каждая иконка со своими цветами.
3. Издалека покраска тоже должна восприниматься привлекательно, должны быть видны тени и блики. Попробуйте примерить на какой-либо сайт ваши окрашенные иконки. 

 5. Шаблон flat color 

flat color — это покраска, как color, только без линий обводки. Получается, что вы красите только контуры, а обводку нужно убрать

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

Пример иконок 

Сохранение иконок

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

По итогу должна получиться следующая структура папок. 

В основной папке Insurance-and-protection-icons у вас будет 5 папок с названием темы и названием шаблонов (в них сохраняются пары файлов форматов eps и jpeg).  

И отдельная папка Insurance-and-protection-icons-AI-PNG-SVG в которой вы повторяете всю структуру 5 папок, где будут файлы в форматах AI-PNG-SVG

Все названия папок и файлов писать через одну черточку, без пробелов.

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

Очень важен порядок файлов! 

Это значит, что с именем Insurance-and-protection-icons-editable-stroke-1 должен идти общий сет, потом с именем Insurance-and-protection-icons-editable-stroke-2 должна идти иконка, которая в сете в левом верхнем углу, дальше с именем Insurance-and-protection-icons-editable-stroke-3 должна идти иконка, которая в сете в правом верхнем углу и т. д.

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

Все форматы вы сохраняете вручную.

Все файлы: 

• цветовой режим RGB 
• разрешение среднее 150

AI формат нужно выбрать Иллюстратор 10

 

Формат eps — 10 EPS

 

 Формат jpeg 

Формат svg 

Форматы png

Сохранение editable stroke: 

AI, Eps, Jpeg

• иконки не разбираются
• общий сет с заголовком
• соло иконки с подписью (под подписью имеется ввиду — полоска «Editable stroke»)
• цвет линий иконок #333333
• размер артборда 5000*5000 для сета и для соло
• каждая иконка сгруппирована

Png и Svg

• иконки разобраны (проверить с помощью вектор инспектор про, он должен показывать 0)
• сет без заголовка
• соло иконки без подписи
• цвет контуров #333333
• размер артборда 4000*4000
• каждая иконка сгруппирована

! Оценивается размещение сета и соло иконок на артборде.  

!! Следите за расстояниями, отступами, как в заголовках, так и самого сета. 

Сохранение glyph:

AI, Eps, Jpeg, Png и Svg

• иконки разобраны (проверить с помощью вектор инспектор про, он должен показывать 0)
• сет без заголовка
• соло иконки без подписи
• цвет контуров #000000
• размер артборда 5000*5000 (для AI, Eps, Jpeg). Размер артборда 4000*4000 (Png и Svg).
• каждая иконка сгруппирована

! Оценивается размещение сета и соло иконок на артборде. 

!! Следите за расстояниями, отступами, как в заголовках, так и самого сета. 

Сохранение chalk: 

• сет без заголовка
• соло иконки без подписи

AI, Eps, Jpeg

• иконки разобраны (проверить с помощью вектор инспектор про, он должен показывать 0)
• цвет контуров иконок белый
• цвет подложки #262626
• кисть Feather
• убраны колючки, и мусор мелкий
• размер артборда 5000*5000 для сета и для соло
• каждая иконка сгруппирована

Png и Svg

• иконки разобраны (проверить с помощью вектор инспектор про, он должен показывать 0)
• цвет контуров иконок белый
• подложку не нужно, получается белая иконка на пустом артборде
• кисть Feather
• убраны колючки, и мусор мелкий
• размер артборда 4000*4000 для сета и для соло
• каждая иконка сгруппирована

! Оценивается размещение сета и соло иконок на артборде.  

!! Следите за расстояниями, отступами, как в заголовках, так и самого сета. 

Сохранение color:

AI, Eps, Jpeg, Png и Svg

• иконки разобраны (проверить с помощью вектор инспектор про, он должен показывать 0)
• сет без заголовка
• соло иконки без подписи
• размер артборда 5000*5000 (для AI, Eps, Jpeg). Размер артборда 4000*4000 (Png и Svg).
• каждая иконка сгруппирована

! Оценивается размещение сета и соло иконок на артборде. 

!! Следите за расстояниями, отступами, как в заголовках, так и самого сета. 

 Сохранение flat color:

AI, Eps, Jpeg, Png и Svg

• иконки разобраны (проверить с помощью вектор инспектор про, он должен показывать 0)
• сет без заголовка
• соло иконки без подписи
• размер артборда 5000*5000 (для AI, Eps, Jpeg). Размер артборда 4000*4000 (Png и Svg).
• каждая иконка сгруппирована

! Оценивается размещение сета и соло иконок на артборде.  

!! Следите за расстояниями, отступами, как в заголовках, так и самого сета. 

III. Размножение концептов

Ваша задача:

1. Переделать апп скрины : перекрасить исходные апп скрины, создать из исходных двух апп скринов пару, перекрасить пару.
2. Сохраните концепты по инструкции.
3.  Построение композиции.

В исходном файле найдите два апп скрина из 3 страниц каждый.

1 апп скрин 2 апп скрин

1. Составьте пару (самостоятельно соедините эти два апп скрина, чтобы сделать 1 сет из 6 страниц — 3 страницы сверху, 3 страницы снизу). И перекрасьте пару в одну покраску (сделать цвет обводки как в верхнем апп скрине и поменять цвета).

2. Вытяните иконки с кружочками и подписями и переделайте их в синий шаблон (в синем шаблоне 5 страничек, а вам нужно три. Поэтому нужно лишние убрать странички и поправить подложку. Также проследить, чтобы по периметру был одинаковый отступ. Цвета взять из шаблона).

3. Из синих тоже сделайте двойку, как в примере.

4. Вытяните отдельно иконки в кружочках с подписями из исходных концептов. И вытяните отдельно иконки с подписями из голубого варианта.

5. Сделайте сет из иконок из исходных апп скринов, и точно такой же сет из голубых апп скринов. Добавьте заголовок “Future office concepts” по ширине сета.

 

VI.  Построение композиции

Ваша задача:

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

   Особенности:

1.  Страница брошюры-симмиляра — составить композицию из иконок первой страницы и можно добрать из 4 страницы исходника. Перенести заголовок с первой страницы
2.  Страница брошюры-симмиляра — вставить иконки и заголовок с исходной 2 страницы. Перенести заголовок со второй страницы
3.  Страница брошюры-симмиляра — вставить иконки и заголовок с исходной 3 страницы. Перенести заголовок с третьей страницы.
4.  Страница брошюры-симмиляра — вставить иконки и заголовок с исходной 4 страницы (если останутся лишние иконки с исходника — можно в композицию первой страницы вставить).Перенести заголовок с четвертой страницы.

 

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

Пример готовой работы: 

   -исходная брошюра

 -переделанная брошюра

 

Сохранение концептов

После того, как вы закончили с размножением концептов, приступаем к сохранению.

По итогу должна получиться следующая структура папок. 

Future-office-app-screens: 

1. сохраняются просто исходные апп скрины и пара из них 
2. иконки и текст должны быть разобраны (вектор инспектор про должен показывать 0). Сами подложки страничек — не нужно разбирать
3. размер артборда 3000 по меньшей стороне
4. сохранить в 5 форматах, с такими же параметрами, как при размножении иконок

Future-office-app-screen-similars: 

1. сохраняются просто голубые апп скрины и пара из них 
2. иконки и текст должны быть разобраны (вектор инспектор про должен показывать 0). Сами подложки страничек — не нужно разбирать
3. размер артборда 3000 по меньшей стороне
4. сохранить в 5 форматах, с такими же параметрами, как при размножении иконок

Future-office-app-screen-concepts: 

1. это именно иконки с подписями из исходных апп скрина и сета
2. можно подтянуть подпись ближе к иконке
3. расположить иконки на артборде, так чтобы иконка занимала 70% пространства
4. для форматов Ai, Eps, Jpeg  — сохраняется соло иконка с подпись и подпись перекрашивается в цвет обводку. Иконка не разбирается. Текст — разбирается. Размер артборда 5000*5000

1. для форматов Svg и Png — соло иконки без полосочки. И все разобрано. Размер артборда 4000*4000

Future-office-app-screen-concept-similars

1. это именно иконки с подписями из переделанных голубых апп скринов и сет
2. можно подтянуть подпись ближе к иконке
3. расположить иконки на артборде, так чтобы иконка занимала 70% пространства
4. для форматов Ai, Eps, Jpeg  — сохраняется соло иконка с подписью и подпись перекрашивается в цвет обводки. Иконка не разбирается. Текст — разбирается. Размер артборда 5000*5000

1. для форматов Svg и Png — соло иконки без полосочки. И все разобрано. Размер артборда 4000*400.

Brochure-similars

1. Сохранить брошюру-симмиляр в отдельную папку. Папку назвать “Brochure-similars”
2. Разобрать брошюру ( текст и иконки — должны быть контурами, никаких линий обводки).
3. Брошюру-симмиляр сохранить отдельно в тех же форматах, что и апп скрины. Размер артборда 2600px по высоте (а по ширине — сохранить соотношение сторон).  

 

Отправка тестового задания

Чтобы отправить  тестовое задание, перейдите по ссылке https://papavector.com/vacancy , выберите раздел Отдел графики → вакансия — Графический дизайнер, симилярист → Отправить заявку → Прикрепить архив.

Тестовое присылайте в одном файле ZIP, если размер файла более 50 Мб — в поле “комментарий” указывайте ссылку на файл на гугл/яндекс диске. Также в  поле  “комментарий” укажите, пожалуйста, ссылку на портфолио и сколько времени в часах/минутах заняло у вас выполнение всего тестового задания.

 

Изучаем основы дизайна иконок с Адрианом Коке

‍Узнаем о том, как создавать иконки в Adobe Illustrator, у французского графического дизайнера Адриана Коке.

Иконки, входящие в обширную коллекцию Адриана в Noun Project, выглядят дружелюбными, забавными и округлыми.

Адриан Коке — графический дизайнер из Франции, 7 лет работающий на фрилансе. Ему нравится свобода, которую дает удаленная работа, поскольку он может посвятить свободное время различным творческим проектам: от типографики до создания музыки, хотя в первую очередь сейчас он увлекается дизайном иконок. В посте мы узнаем о том, как именно Адриан создает простые единообразные иконки в Adobe Illustrator.

Привет, Адриан! Расскажи немного о себе — как ты оказался там, где ты есть сейчас?

Графический дизайнер Адриан Коке

Закончив колледж, я начал изучать фармацевтику, однако вскоре понял, что моя душа жаждет творчества. В свободное время я открывал для себя Photoshop, Illustrator и FL Studio, программу для создания музыки. Мне кажется, что у производства музыкальных композиций и дизайна есть множество общих черт, так как в обоих случаях вам необходимо соединить множество маленьких кусочков в единое целое, чтобы достичь определенного результата.

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

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

Шрифт Адриана Panama

Я понял, что мне нравится создавать контент для людей и наблюдать за тем, как они его используют. Однажды я наткнулся на Noun Project и подумал, почему бы не попробовать создавать иконки?

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

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

Когда я впервые прочитал девиз Noun Project “создаем глобальный визуальный язык, который объединяет людей”, он сразу нашел у меня отклик, и я понял, что должен принять участие в этом проекте.

Как ты решаешь, какие иконки создавать, и какие темы тебя интересуют больше всего?

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

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

Какие инструменты ты используешь для создания иконок? Поделись какими-нибудь хитростями.

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

В процессе разработки иконок я преимущественно пользуюсь 2 инструментами — “Создание фигур” (Shape Builder) и “Обработка контуров” (Pathfinder). Вместо сеток я использую направляющие. 

Расскажи нам, из каких шагов состоит процесс создания иконки.

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

Вот как я разрабатываю иконку бегущего человека:

(1) Создайте основные линии и формы, соединяя точки с помощью инструмента “Перо” (Pen Tool — клавиша P). Нажмите P еще раз, чтобы начать новую линию, или щелкните исходную точку, чтобы замкнуть контур и создать форму.

‍(2) Затем, выделив линию или форму, добавьте более толстую обводку со скругленными концами и углами (нажмите на кнопку “Обводка” в панели инструментов, чтобы увидеть соответствующие параметры). Это поможет понять, как в конечном итоге будет выглядеть иконка.

‍(3) Я также добавлю заливку того же цвета для областей вроде туловища, которые должны быть заполнены.

(4) Продолжайте корректировать каждую опорную точку с помощью инструмента “Прямое выделение” (Direct Selection), пока конечности не будут выглядеть наиболее естественно.

‍(5) Как только каждый из элементов фигуры оказался на своем месте, нажмите “Объект” (Object) > “Контур” (Path) > “Преобразовать границы обводки” (Outline Stroke), чтобы получить единый составной контур.

(6) Решите, какие части следует объединить в одну фигуру. В этом нам поможет инстурмент “Создание фигур” (Shape Builder). Я хочу, чтобы передняя нога визуально выделялась на фоне остальной фигуры. Я выделяю туловище и переднюю ногу, выбираю инструмент “Создание фигур” (Shift + M), щелкаю и перетаскиваю курсор, чтобы объединить их.

(7) Затем я добавляю обводку серого цвета к получившейся форме и нажимаю “Выровнять по внешней стороне” (Align to Outside) в окне настройки обводки. Так я смогу видеть, какую часть иконки вырезать, чтобы оставить пространство между ногами.

‍(8) Я снова нажимаю “Объект” (Object) > “Контур” (Path) > “Преобразовать границы обводки” (Outline Stroke), и обводка превращается в самостоятельный контур.

(9) Чтобы “вычесть” серую форму и оставить промежуток между ногами, выберите дальнюю от нас ногу и серую фигуру, снова нажмите на инструмент “Создание фигур” (Shift + M), но на этот раз удерживайте Alt (или Option на Mac). Это позволит вычесть серый цвет, оставив нужный пробел. Вуаля!

Вот еще несколько полезных приемов, которые я часто использую в Illustrator:

Какие ошибки ты чаще всего встречаешь в дизайне иконок?

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

Что должен сделать каждый дизайнер, чтобы создать более гармоничную профессиональную коллекцию иконок?

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

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

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

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

Мне нравится просматривать работы на Behance, ведь там можно найти множество отличных дизайнов.

Хотя это и не связано с иконками, я большой поклонник творчества Romain Trystram, особенно серии работ “Огни большого города”, где он использует яркие неоновые цвета в сочетании с темными оттенками.

Мне также очень нравятся цветные эмоциональные изображения лиц, которые создает Alberoner.

Что ты собираешься делать дальше?

Я буду продолжать творить и пытаться день ото дня улучшать свои навыки. У меня все еще множество идей, которые я должен попробовать реализовать. Я благодарен Noun Project и всем, кто поддерживает меня и присылает положительные комментарии о моей работе. Это заставляет меня двигаться дальше!

Полезные советы по созданию отличного дизайна значков приложений

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

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

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

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

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

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

Краткая история дизайна иконок

Графический дизайнер Сьюзен Каре широко известна как пионер пиксель-арта и современного дизайна иконок. Ее работа восходит к началу 1980-х годов в Apple, где она проектировала элементы интерфейса и вносила свой вклад в шрифты Apple.

Сьюзан разработала все значки и шрифты Apple на миллиметровой бумаге, прежде чем рисовать их попиксельно на Mac, и это не что иное, как сложные инструменты дизайна UX, которые у нас есть сегодня! К 1984 году Сьюзен перешла на первую версию MacPaint, что значительно упростило создание иконок.

Иконки Сьюзен Каре. Источник.

Некоторые из ранних значков Сьюзен Кэр включают ножницы («вырезать»), палец («вставить»), кисть и карандаш .

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

Некоторые рекомендации по дизайну значков:

• Попробуйте сделайте ваши значки максимально простыми с минимальным количеством деталей. Многие иконки живут в мире 24×24 пикселей. Итак, если у вас слишком много деталей, ваши значки будут выглядеть как бессвязные капли.
• Не пытайтесь заново изобретать колесо для универсально узнаваемых значков, таких как шестеренка для настроек или сердце для . При разработке набора иконок важно проявлять творческий подход, но не забывайте поддерживать подход, ориентированный на пользователя. В UXPin вы можете свободно использовать готовые иконки Material Design, которые ждут вас в готовых библиотеках.
• Единообразие — это то, что отличает средний набор иконок от отличного. Если вы работаете в команде, вы должны разработать руководство для всех. Например, сохраняя угловой радиус 5 пикселей для каждого штриха.
• Вам также необходимо убедиться, что ваши значки соответствуют бренду и соответствуют системе дизайна проекта.

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

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

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

Далее вам нужно решить, будете ли вы проектировать числа, кратные 8 или 10? Большинство наборов иконок кратны 8 с размерами 16, 24, 32, 40, 48 и так далее.

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

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

Stay On-Pixel

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

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

Заполнять или не заполнять

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

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

Технические правила

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

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

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

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

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

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

Следуйте правилам дизайна значков

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

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

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

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

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

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

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

Если вы используете цвет, убедитесь, что вы тестируете дизайн своих значков на фоне вашего проекта, так как иногда значки трудно увидеть без правильного контраста.

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

Культурное значение

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

Белое пространство

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

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

Iconic…icons

Символ @, возможно, является одним из наиболее часто используемых значков сегодня. Его можно найти в адресах электронной почты и использовать для пометки учетных записей в социальных сетях, но он имеет древнюю историю. Знак @ восходит к началу 1300-х годов, когда он использовался для заглавной буквы «А» в слове «Аминь».

Знак мира — еще одна общепризнанная икона, впервые использованная в 1958 за антиядерный протест в Англии. Джеральд Холтом разработал символ, используя буквы N и D (обозначающие ядерное разоружение) из алфавита семафоров.

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

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

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

UXPin также позволяет очень легко настроить сетку для вашего дизайна значков. Вот пример создания 24-пиксельных иконок в UXPin.

1. Выберите холст или создайте собственный. Для этого примера мы использовали холст размером 340×720.
2. Установите СЕТКУ КОЛОНН на 10 столбцов, ширину 24 пикселя, отступ 10 пикселей, смещение 5 пикселей.
3. Установите для BASELINE GRID автоматические столбцы, высоту 24 пикселя, отступ 10 пикселей, поле 0 пикселей.

Отрегулируйте ширину и высоту в соответствии с вашими требованиями к дизайну значков. Попробуйте сами! Начните создавать иконки в UXPin сегодня с 14-дневной бесплатной пробной версией.

Нашли это полезным? Поделиться с

Журнал ICON — Журнал ICON

Под названием «Взрывная мода: от 2D к 3D-анимации» и «Зеркало-зеркало — мода и психика» выставки исследуют тайну процесса проектирования одежды и то, как одежда формирует личность

Дизайн

29. 11.22

Преступления против дизайна: пластиковый пакет для покупок

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

Мнение

28.11.22

Познакомьтесь с практикой разработки фотосинтетического текстиля

Что, если бы мода могла улавливать углерод, а не вносить основной вклад в мировые выбросы? Дизайнер Post Carbon Lab DJ Lin рассказывает об исследованиях студии тканей на основе водорослей

Дизайн

23.11.22

Баскетбольная площадка Альваро Баррингтон в Бетнал-Грин, инициированная Лондонскими львами

Сочетание искусства и баскетбола помогает району Восточного Лондона с самым высоким уровнем детской бедности

Архитектура

22.11.22

Дизайн

Архитектура

Сочетание искусства и баскетбола поможет району Восточного Лондона с самым высоким уровнем детской бедности

Архитектура

22. 11.22

Margent Farm сотрудничает с экологически сознательным социальным предприятием для строительства доступного крошечного дома

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

Архитектура

21.11.22

FRAMA создает минималистский интерьер торгового зала в Вильямсбурге

Дизайнерский бренд из Копенгагена преобразил современный бутик 7115 by Szeki в центре Бруклина, используя натуральные и вторичные материалы

Архитектура

18.11.22

Города

Дизайн

Под названием «Взрывная мода: от 2D к 3D-анимации» и «Зеркало-зеркало — мода и психика» выставки исследуют тайну процесса проектирования одежды и то, как одежда формирует личность

Дизайн

29. 11.22

Познакомьтесь с практикой разработки фотосинтетического текстиля

Что, если бы мода могла улавливать углерод, а не вносить основной вклад в мировые выбросы? Дизайнер Post Carbon Lab DJ Lin рассказывает об исследованиях студии тканей на основе водорослей

Дизайн

23.11.22

Линия плотников в Японском доме в Лондоне демонстрирует 1300-летнюю историю мастерства деревообработки Хида

Новая выставка исследует искусство мастеров деревообработки из известного региона Японии, освещая как традиционные, так и современные практики

Дизайн

15.11.22

Видео

Мнение

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

Мнение

28.11.22

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

Проектировать на местном уровне непросто.