Полное (я надеюсь) руководство по созданию набора плоских иконок
Для ботанов, которые прочли мою статью по визуальному весу и оптическому выравниванию. Минимум слов, максимум картинок.
(Мы продолжаем переводить цикл статей по визуальному дизайну. Полную подборку советов можно найти в коллекции «Основы дизайна»)
Вы читаете перевод статьи “Hopefully, the Ultimate Guide to a Flat Icon Set”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.
1. Пользуйтесь оптической сеткой
Все иконки в интерфейсе, как правило, сводятся к шести базовым формам: вертикальный прямоугольник, диагональный прямоугольник, горизонтальный прямоугольник, квадрат, круг, треугольник. Если размыть картинку, получатся примерно одинаковые кляксы — значит, у всех фигур один и тот же визуальный вес.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook | Instagram, Telegram
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
В зависимости от формы иконки, впишите ее в соответствующую рамку оптической сетки. К примеру, квадратные иконки более компактные, чем треугольные или вытянутые.
Чем компактнее иконка, тем меньше ей нужно места. А вот иконки с множеством острых углов и мелких деталей занимают больше места на артборде.
Не становитесь рабом собственной сетки. Она должна помогать, а не ограничивать. Если какие-то элементы торчат и иконка при этом выглядит круто — то пусть себе торчат!
2. Помните о пиксельной сетке
Чтобы иконки выглядели четко на экранах без ретины, пользуйтесь пиксельной сеткой. Для контурных иконок лучше использовать границы шириной в 2 пикселя. Если отцентровать такую границу относительно контура, силуэт получится достаточно толстым и четким.
Если использовать границу шириной в 1 пиксель, ее нужно выровнять либо по внутренней стороне, либо по внешней — но не по центру.
Если выровнять границу в 1 пиксель по центру контура, то иконка в 100% масштабе будет выглядеть размытой, хотя в приближении все выглядит достаточно четко.
Устанавливайте начальные и конечные точки диагоналей в соответствии с сеткой. Диагонали с углами 45°, 30° и 60° выглядят четче, чем диагонали в нестандартными углами (к примеру, 13.7° или 81°).
3. Придерживайтесь определенной детализации
При работе над набором иконок, лучше начинать с самой сложной. Она определит уровень детализации, от которого вы будете отталкиваться при создании остальных иконок — важно, чтобы у всех иконок в наборе был одинаковый визуальный вес.
Если не придерживаться этого правила, то более детальные иконки будут выглядеть тяжелее и перетягивать на себя внимание пользователей.
4. Следите за размерами промежутков
Расстояние между соседними элементами иконки не должно быть слишком маленьким либо “гулять”. Определите минимальный размер промежутков и придерживайтесь его, чтобы контуры не “слипались”.
Для контурных иконок, минимальный размер промежутка должен равняться толщине линии. Линии нужно либо явно отделить, либо аккуратно соединить — почти соединенных линий быть не должно.
5. Уберите повторяющиеся детали
В наборах иконок часто бывают повторяющиеся детали. Лучше их убрать, чтобы сделать упор не на сходства, а на различия иконок. Это как сокращение дробей. Чем меньше графического шума — тем проще понять суть.
Если целевой пользователь понимает, с чем он или она имеет дело, не нужно повторять это снова и снова. К примеру, в почтовом приложении не нужно постоянно использовать иконку письма.
То же касается и разных украшений — рамок, фонов и т.п.— вокруг иконки. Если они не помогают понять смысл иконки, то, считайте, мешают.
6. Выберите единый стиль и придерживайтесь его
Не нужно комбинировать фронтальные иконки и иконки с перспективой. Когда стиль согласован, пользователям проще распознавать иконки и судить об их значимости интерфейсе.
Тот же принцип применим, когда мы говорим о контурных иконках и иконках с заливкой. Если использовать и те, и другие в рамках одного набора, люди могут подумать, что они отличаются по важности или статусу. Хотя, возможно, вы специально так задумали? Тогда да, иконка с заливкой может обозначать, например, основное действие, а контурные иконки — все прочие действия.
Или еще вариант: иконки с заливкой можно использовать для наведенного состояния, а в обычном состоянии иконки пусть будут контурными. В этом случае нужно отрисовать каждую иконку в двух вариантах.
7. Используйте размеры, кратные двум
В большинстве интерфейсов используется 8-пиксельная сетка и 12-колоночный лейаут, поскольку они более гибкие, чем те, что построены на десятичных размерах. 12 можно разделить на 2,3,4 и 6. Поэтому 24-х и 48-пиксельные размеры иконок уже стали стандартом. Такие иконки при необходимости легко можно масштабировать.
8. Следите за точностью и чистотой силуэтов
Перфекционизм — не самоцель. Идеальные линии нужны не ради идеальных линий. Они нужны, чтобы финальная иконка выглядела профессионально и без искажений. Следите, чтобы не было лишних опорных точек и пробелов между смежными элементами.
Та же история с бесящими размерами: “8.999 px” или “100.001 px”. Если расставить опорные точки правильно, края иконки будут четкими. Если впоследствии вам придется объединять фигуры, у вас не будет лишних опорных точек и пробелов.
9. Очищайте SVG-файлы от мусора
Многие редакторы (например, Sketch) сохраняют SVG-файлы с артефактами — ненужными группами, цветовыми слоями и масками. Давайте посмотрим. В Sketch все выглядит хорошо:
Открываем SVG в другом редакторе (например, в Adobe Illustrator) и видим пустые слои, ненужные группы и даже маски. Из-за этих лишних штук может быть куча проблем — например, при создании шрифтовых иконок или при добавлении SVG на веб-страницу.
Весь этот мусор нужно удалить.
Вы увидите, что у SVG из Sketch (picture.svg) и SVG, отредактированной в иллюстраторе (picture_new.svg), будут разные превьюшки в файловом менеджере.
Если у вас есть идеи, о чем еще можно рассказать в этом руководстве, напишите мне. Давайте сделаем этот материал полнее. Если какое-то правило сломало у вас в дизайне что-то важное, его можно пропустить.
Пишите мне где угодно: Dribbble, Behance, SlideShare, Instagram.
Если вам понравилась статья и перевод, дайте нам знать — нажмите 👏 (можно “хлопать” несколько раз!)
А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Ольга Жолудова и Ринат Шайхутдинов.
Мобильное приложение «Заметки о психике» | Mental Notes
Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
