В мире разработки приложений, будь то веб или десктоп, использование иконок является неотъемлемой частью пользовательского интерфейса. Векторные иконки предпочтительнее растровых, так как они масштабируются без потери качества. Одной из популярных коллекций векторных иконок является Bootstrap Icons, содержащая более 2000 готовых иконок. Хотя коллекция Bootstrap Icons доступна как npm-пакет bootstrap-icons и ориентирована на веб-разработку, её можно эффективно использовать в десктопных приложениях.

Создадим с нуля контрол BootstrapIcon для удобного использования двухцветных векторных иконок в приложениях на Avalonia/WPF. Сами изображения, в основном берем из SVG-файлов библиотеки bootstrap-icons, отсюда и название нашего контрола.

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

🔗 Полученные контролы BootstrapIcon для Avalonia и WPF с примерами использования размещены на GitHub.

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

Привет, Хабр! Я Маша, продуктовый дизайнер в ОТП Банке. Наш банк последнее время активно развивает дизайн, сегодня хочу поделиться опытом работы с иконками. Сразу скажу, большинство перечисленных принципов вам скорее всего знакомы, но есть некоторые неочевидные нюансы, на которые стоит обратить внимание 👇

Привет! Меня зовут Анна, я JS-разработчик в компании SimbirSoft. Сегодня расскажу об интересном кейсе на одном из наших проектов, а именно, речь пойдет об отображении favicon сторонних сайтов в нашем приложении. 

Меня зовут Игорь Пешков, я дизайнер в KODE — IT-компании, которая занимается коммерческой разработкой. Хочу рассказать вам, как исправлял проблемы с контрастом в дизайн-системе одной крупнейшей в своей области экосистемы IT-продуктов (сами понимаете — NDA). 

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

Привет, Хабр! Меня зовут Артём Поморцев. Я фронтенд-разработчик компании «Криптонит» и хочу поделиться своим опытом создания набора иконок (icon pack).

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

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

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

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

Как организовывала IT-сходку для EdTech проекта.

В одном из проектов была задача: организовать встречу студентов и выпускников EdTech проекта по обучению айти специальностями. Визуализировала я её так: Ребята общаются в неформальной барной обстановке. Студенты расспрашивают выпускников о трудоустройстве, общаются о компаниях и мире IT.

Эта статья подробно описывает создание небольшого скрипта на Node.js для выгрузки векторных иконок из Figma в проект, а также универсального компонента для разных видов иконок, который удобно использовать в своём приложении.

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

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

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

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

Создал мини курс по программе для векторной графики Inkscape в 2022.

Разработал методические материалы для изучения темы «Кодирование и обработка графической и мультимедийной информации» в школьном курсе информатики.

«Векторные графические редакторы позволяют пользователю создавать и редактировать векторные изображения непосредственно на экране компьютера, а также сохранять их в различных векторных форматах, например, CDR, AI, EPS, WMF или SVG». «Inkscape - редактор векторной графики, аналогичный по своим возможностям таким программам, как Adobe Illustrator, Corel Draw и другим».

Проверяя html-макеты верстальщиков и разработчиков наблюдаю проблемы с добавлением иконок на сайт. Они их добавляют чёрт пойми как… Могут добавить их как png изображения, а могут вообще использовать не иконки из макета, а похожие иконки, использовав, к примеру, FontAwesome. Это жестко, скажу я вам.

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

Я UX/UI-дизайнер, уже два года работаю в ISPsystem. Одной из глобальных моих задач все это время было сделать нашу дизайн-систему удобной для использования.Полноценная дизайн-система — с гайдами, состояниями и борьбой с разработчиками — испытание не только для новичка в дизайне, но и для опытного проектировщика. Сейчас мы на пути к идеальной дизайн-системе, но решили поделиться опытом ее проработки - кому-то может помочь избежать наших ошибок :)

Для чего все затевается

ISPsystem создает программное обеспечение для управления IT-инфраструктурой: физическим оборудованием, серверной виртуализацией, веб-сервером и сайтами. Сейчас существует четыре продукта со схожей дизайн-системой (VMmanager, DCImanager, ISPmanager и BILLmanager) и один — со своей собственной (billix).

История вопроса

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

Мне уже давно и прочно нравится мир Vue. Особенно завораживает скорость, с которой в нём рождаются новые возможности писать код более лёгким и понятным. Недавно появились Composition API, VueUse, Vite… По ходу освоения этих новых инструментов я нашёл шаблон Vitesse, буквально насыщенный удобными средствами — и для управления макетами (layout), и для маршрутизации, и для локализации и ещё для много чего… Возможно, есть смысл написать отдельный обзор этого арсенала по русски (чего в Интернете пока ещё нет). Но сейчас речь не об этом.

В данной статье я покажу и расскажу, как можно сгенерировать аватарки как на Github.