Как быстро превратить скучные иконки в настоящие шедевры

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

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

Принципы материального дизайна Google

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

1. Используйте простые геометрические фигуры и смелые цвета

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

2. Добавьте глубины с помощью тонких теней

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

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

3. Используйте цветовые оттенки вместо теней

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

Как вы тоже можете это сделать: пошаговые демонстрации

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

Ресурсы

• Проверьте полный бесплатный набор иконок от Google здесь.

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

1. Значок болта

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

2. Значок чата

На исходной иконке у нас есть намек на эффект тени в промежутке между двумя пузырями, где вы создадите тень.

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

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

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

3. Значок галочки

Мы создадим эффект сложенной бумаги.

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

Продублируйте левый сгиб и переместите его поверх правого.

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

4. Значок флага

Начните с закругления краев, затем извлеките основание флага.

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

5. Значок сердца

Дублируйте значок сердца.

Изолируйте левую половину фигуры.

Проведите диагональную линию вниз, идущую от верхней правой точки.

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

6. Значок горы

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

Создайте две треугольные формы из каждой кирки.

Переместите копию меньшего вправо и извлеките полученное пересечение как форму тени.

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

7. Значок «Люди»

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

8. Иконка с плавающим квадратом

Выберите нижнюю фигуру и переместите ее среднюю верхнюю точку вверх, пока она не станет похожа на ромб.

Дублируйте верхнюю форму ромба и переместите копию вниз на 10 или 20 пикселей.

Выберите две нижние фигуры и примените инструмент «Разделить» на панели «Обработка контуров».

Из получившихся пересекающихся фигур оставьте только две нижние части и удалите лишние точки.

Завершите его, применив три оттенка красного, назначив самый темный в середине.

9. Значок письма

Инструментом «Прямое выделение» (А) выберите вторую верхнюю точку формы конверта.

Добавьте точку на сегменте справа от него с помощью «Перо».

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

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

10. Значок торта

Выделите дублированную версию нижней части торта.

Уменьшите его ширину, переместив левый и правый края внутрь.

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

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

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

Улучшите внешний вид вашего набора иконок

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

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

Поделитесь с нами вашими мыслями! Пожалуйста, оставьте свои мысли, комментарии и отзывы ниже.

• • •

Дальнейшее чтение в блоге Toptal Design:

• Принципы дизайна и их важность
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры
• Изучение гештальт-принципов дизайна
• Adobe XD против Sketch — какой UX-инструмент вам подходит?
• 10 UX-результатов, которые используют лучшие дизайнеры