Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Иконка индивидуальный подход: Подход – Бесплатные иконки: разнообразный

Содержание

Принципы отрисовки новых иконок в шрифтовую пару на Авито — Дизайн на vc.ru

Привет, меня зовут Максим Аксёнов, я дизайнер интерфейсов в Авито. В этой статье я расскажу про новые иконки Авито. Расскажу про основы отрисовки иконок, сформированные принципы, правила, которые выработал в процессе и о самом процессе.

4495 просмотров

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

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

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

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

Затем с командой Дизайн-системы разделили отрисовку по приоритету, в зависимости от важности/популярности места, в котором они располагались. И я начал первый подход.

Метод и принципы отрисовки нового сета иконок

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

Есть часто используемые размеры шрифта — 14 и 16, в дизайн-системе обозначены как S и M, такие же название дал и иконкам, чтобы понятен был принцип пары.

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

Принцип 1. Единая базовая линия

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

Принцип 2. Задаем сетку(грид/лэйаут) и контейнер для построения символа

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

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

Для этого я сделал сетку, которая мне в этом поможет.

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

Принцип 3. Придерживаемся концепции пиксель перфектум (pixel perfect)

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

Базовая линия иконки толщиной 1px для иконок размера S

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

Базовая линия иконки толщиной 1,3px для иконок размера M

Таким образом даже в растре мы получаем желаемый эффект — плотность и четкий силуэт.

Линия иконки толщиной 1,3px для иконок размера M после переноса в растр

Также не стоит забывать про диагональные линии и проверять их отображение в растре.

Принцип 4. Направляем нецельные пиксели горизонтальных и вертикальных линий

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

Принцип 5. Придерживаемся единого стиля скруглений для иконок в наборе

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

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

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

Принцип 6. Плоская фронтальная форма без перспективы

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

Принцип 7. Дружим иконку и шрифт общими рифмами

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

Принцип 8. Упрощаем иконку и устраняем лишнее нагромождение

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

Принцип 9. Не усложняйте знак и метафору

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

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

Принцип 10. Упаковываем иконку в индивидуальный контейнер

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

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

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

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

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

В заключение

После работы по созданию сета иконок сочетающихся с текстом, получилось сформировать два сета — S и M для соответствующих шрифтовых стилей. В каждом по 170 иконок. Каждая иконка отрисована вручную и подгонялась под шифт и другие иконки. Много внимания было уделено деталям, в некоторых случаях для знака был подбор из трех и более метафор, чтобы найти простой и понятный символ отображающий нужный раздел или действие.

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

И спасибы

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

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

Благодарю Виктора Лушина за помощь в разработке начальной концепции и дальнейшей поддержке.

Благодарю команду дизайна Авито за приятный фидбек и интерес к сету иконок.

«ТД «ЭлектроМах» — Качество по доступной цене

шнайдер легранд gauss ABB

Индивидуальный подход к каждому клиенту

Обеспечение гарантийных обязательств

Комплектация заказа

Доставка в любую точку РФ любым видом транспорта

Низкие цены

Обеспечение технической документацией

Исполнение заказов в оптимальные сроки

Налаженная связь с отечественными и зарубежными производителями

Комплектация заказов любой сложности на 100

  • Новинка
  • Сезонный

Новинка

Светильник светодиодный ДКУ 4001 120Ш 5000К IP65 GENERICA LDKU1-4001-120-5000-K03-G

Артикул: LDKU1-4001-120-5000-K03-G
Бренд: GENERICA

На складе 90 шт.
Обновлено 20.05.2023

Цена:

2 464.28 / шт.

Купить

Новинка

Светильник светодиодный ДКУ 4001 80Ш 5000К IP65 GENERICA LDKU1-4001-080-5000-K03-G

Артикул: LDKU1-4001-080-5000-K03-G
Бренд: GENERICA

На складе 50 шт.
Обновлено 20.05.2023

Цена:

1 671.74 / шт.

Купить

Новинка

Светильник светодиодный ДКУ 4001 60Ш 5000К IP65 GENERICA LDKU1-4001-060-5000-K03-G

Артикул: LDKU1-4001-060-5000-K03-G
Бренд: GENERICA

На складе 198 шт.
Обновлено 20.05.2023

Цена:

1 238.33 / шт.

Купить

Новинка

Светильник светодиодный ДСП 4020 200Вт 6500К IP65 GENERICA LDSP0-4020-200-6500-K02-G

Артикул: LDSP0-4020-200-6500-K02-G
Бренд: GENERICA

На складе 36 шт.
Обновлено 20.05.2023

Цена:

3 285.43 / шт.

Купить

Новинка

Светильник светодиодный ДСП 4020 200Вт 4000К IP65 GENERICA LDSP0-4020-200-4000-K02-G

Артикул: LDSP0-4020-200-4000-K02-G
Бренд: GENERICA

На складе 30 шт.
Обновлено 20.05.2023

Цена:

3 285.43 / шт.

Купить

Новинка

Светильник светодиодный ДСП 4020 150Вт 6500К IP65 GENERICA LDSP0-4020-150-6500-K02-G

Артикул: LDSP0-4020-150-6500-K02-G
Бренд: GENERICA

На складе 70 шт.
Обновлено 20.05.2023

Цена:

2 509.49 / шт.

Купить

Новинка

Светильник светодиодный ДСП 4020 150Вт 4000К IP65 GENERICA LDSP0-4020-150-4000-K02-G

Артикул: LDSP0-4020-150-4000-K02-G
Бренд: GENERICA

На складе 100 шт.
Обновлено 20.05.2023

Цена:

2 509.49 / шт.

Купить

Новинка

Светильник светодиодный ДСП 4020 100Вт 4000К IP65 GENERICA LDSP0-4020-100-4000-K02-G

Артикул: LDSP0-4020-100-4000-K02-G
Бренд: GENERICA

На складе 50 шт.
Обновлено 20.05.2023

Цена:

1 846.34 / шт.

Купить

Новинка

Светильник светодиодный ДСП 1104 32Вт 6500К IP65 1200мм GENERICA LDSP0-1104-032-6500-K01-G

Артикул: LDSP0-1104-032-6500-K01-G
Бренд: GENERICA

На складе 281 шт.
Обновлено 20.05.2023

Цена:

523.39 / шт.

Купить

Сезонный

Светильник светодиодный уличный на солнечн. батарее аккум. NiMh 500мА.ч (уп.2шт) КОСМОС KOC_SOL107

Артикул: KOC_SOL107
Бренд: КОСМОС

На складе 17 упак.
Обновлено 20.05.2023

Цена:

381.27 / упак.

Купить

Сезонный

Светильник светодиодный SLR-G03-200M садовый нить 200LED мультицвет садовый с колышком солнечная батарея ФАZА 5036406

Артикул: 5036406
Бренд: ФАZА

На складе 45 упак.
Обновлено 20.05.2023

Цена:

903.31 / упак.

Купить

Сезонный

Светильник светодиодный SLR-G01-100M садовый гирлянда 100LED мультиколор садовый с колышком солнечная батарея ФАZА 5033405

Артикул: 5033405
Бренд: ФАZА

На складе 47 упак.
Обновлено 20.05.2023

Цена:

764.08 / упак.

Купить

Сезонный

Насос вибрационный НВ-10В Ресанта 77/8/1

Артикул: 77/8/1
Бренд: Ресанта

На складе 5 шт.
Обновлено 20.05.2023

Цена:

2 308.20 / шт.

Купить

Сезонный

Насос канализационный КН-500 Вихрь 68/9/2

Артикул: 68/9/2
Бренд: Вихрь

На складе 6 шт.
Обновлено 20.05.2023

Цена:

16 704 / шт.

Купить

Сезонный

Насос дренажный ДН-350 Вихрь 68/2/8

Артикул: 68/2/8
Бренд: Вихрь

На складе 6 шт.
Обновлено 20.05.2023

Цена:

3 279.60 / шт.

Купить

Сезонный

Насос дренажный ДН-1100 Вихрь 68/2/7

Артикул: 68/2/7
Бренд: Вихрь

Под заказ
Обновлено 20.05.2023

Цена:

5 549.40 / шт.

Купить

Сезонный

Бензопила БП-6220 Ресанта 70/6/17

Артикул: 70/6/17
Бренд: Ресанта

На складе 3 шт.
Обновлено 20.05.2023

Цена:

12 390 / шт.

Купить

Сезонный

Насос дренажный НД-15500П/35B Ресанта 77/2/4

Артикул: 77/2/4
Бренд: Ресанта

На складе 5 шт.
Обновлено 20.05.2023

Цена:

5 090.40 / шт.

Купить

Новый год

Комплект DIY (5050RGB60-8-IP65-220В 5м + драйвер) IEK LSR5-RGB-060-65-2-05-S0

Артикул: LSR5-RGB-060-65-2-05-S0
Бренд: IEK

Под заказ
Обновлено 20. 05.2023

8 (495) 849-27-39

Уточнить цену

Новый год

Комплект DIY (2835R120-8-IP65-220В 5м + драйвер) IEK LSR5-R-120-65-2-05-S0

Артикул: LSR5-R-120-65-2-05-S0
Бренд: IEK

Под заказ
Обновлено 20.05.2023

8 (495) 849-27-39

Уточнить цену

Новый год

Комплект DIY (2835G120-8-IP65-220В 5м + драйвер) IEK LSR5-G-120-65-2-05-S0

Артикул: LSR5-G-120-65-2-05-S0
Бренд: IEK

Под заказ
Обновлено 20. 05.2023

8 (495) 849-27-39

Уточнить цену

Новый год

Комплект DIY (2835B120-8-IP65-220В 5м + драйвер) IEK LSR5-B-120-65-2-05-S0

Артикул: LSR5-B-120-65-2-05-S0
Бренд: IEK

Под заказ
Обновлено 20.05.2023

8 (495) 849-27-39

Уточнить цену

Новый год

Комплект DIY (2835W120-8-IP65-220В 5м + драйвер) IEK LSR5-2-120-65-2-05-S0

Артикул: LSR5-2-120-65-2-05-S0
Бренд: IEK

Под заказ
Обновлено 20. 05.2023

8 (495) 849-27-39

Уточнить цену

Новый год

Комплект DIY (2835WW120-8-IP65-220В 5м + драйвер) IEK LSR5-1-120-65-2-05-S0

Артикул: LSR5-1-120-65-2-05-S0
Бренд: IEK

Под заказ
Обновлено 20.05.2023

8 (495) 849-27-39

Уточнить цену

Новый год

Фигура светодиодная «Елочная верхушка Звезда» ENGEV-02 21см 220В Эра Б0056008

Артикул: Б0056008
Бренд: Эра

Под заказ
Обновлено 20. 05.2023

8 (495) 849-27-39

Уточнить цену

Новый год

Гирлянда светодиодная «Неоновые звезды» ЕGNIG-ST занавес 8 реж. 2.4х0.8м тепл. свет IP20 Эра Б0051877

Артикул: Б0051877
Бренд: Эра

Под заказ
Обновлено 20.05.2023

8 (495) 849-27-39

Уточнить цену

Новый год

Гирлянда EGNIG — RI занавес «Неоновые кольца» 2.4х0.65м 520LED мультиколор IP20 220В 8 режимов Эра Б0051878

Артикул: Б0051878
Бренд: Эра

Под заказ
Обновлено 20. 05.2023

8 (495) 849-27-39

Уточнить цену

Каталог товаров

Высоковольтное и щитовое оборудование

Генераторы электроэнергии и элементы питания

Изделия для электромонтажа

Инструменты, техника

Кабеленесущие системы

Кабели, провода и аксессуары

Климатические и инженерные системы

Низковольтное и промышленное электрооборудование

Освещение

Связь, телекоммуникации

Устройства и средства безопасности

Электроустановочные изделия

Показать все категории

Новости

Все новости

Теплый пол с пожизненной гарантией

Теплые полы «Теплолюкс ProfiMat» на базе двухжильного экранированного кабеля от «Завода ССТ ТП» имеют безукоризненное качество и пожизненную гар…

Светодиодные занавесы от Uniel

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

Светильники с олеофобным покрытием стекла

Компания «Световые Технологии» приступила к выпуску светильников с новым технологичным покрытием защитного стекла на своих изделиях…

Безгалогеновый кабельный короб WDKH

При прокладке кабеля в помещениях общественного назначения необходимо использовать материалы, не имеющие в своем составе галогенов (соединений хлор…

Войти