Дизайн-система Material Minimal.

• Улучшенная версия классического Material Design
• Основа для библиотек MDBootstrap и Tailwind Elements

#design_system

Открыть в Figma

👨 Дизайн-телега

Шаблоны постов для соц.сетей.

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

#design #tamplate

Открыть в Figma

Источник

👨 Дизайн-телега

Бо Кибза и Лёха Макаренко (дизайнеры дизайн-систем Альфа-Банка, Самоката и Почтатеха) рассказали о развитии системы цветов в ДС Туту.

— Легаси-ДС не дорабатывали, чтобы нигде ничего не отвалилось. Команды с большой автономностью локально допиливали компоненты под свои нужды;
— Хотели консистентности, единых стандартов и при этом пространства для свободы;
— Одним из требований к системе цветов была отзывчивость к изменениям, так как компания ребрендилась;
— В этом случае, если минимизировать возможность кастома, бардак накопится не в продукте, а в ДС, где его проще прибрать;
— Обычно делают слои токенов: палитра → семантика (подложки, обводки, текст) → компоненты (текст на кнопке);
— Ради скорости дизайна и разработки компонентов отказались от семантического слоя. Условие: не использовать цвета палитры напрямую, не оверрайдить цвета в покрашенных компонентах;
— Подход даёт очень много компонентных переменных, а также много мелких разночтений (вроде немного отличающихся подложек в чипе и лейбле);
— Зато дизайнеры успели попробовать компоненты в макетах и понять, что нужно единое решение для контрастных элементов и компоновки On white / On gray;
— On white больше подходит для коммуникационных экранов, On gray — для более интерфейсных, с формами и карточками;
— On gray экраны нельзя просто перевести в тёмную тему — бекграунд светится ярче, чем форграунд, и в интерфейсе появляются дыры;
— Можно завести в светлой теме 2 background и 2 panel цвета, которые в тёмной теме станут 1 background и 1 panel. Но как объяснить дизайнерам, какой из 2 цветов использовать?
— В итоге завели мод для переключения On white / On gray, и в светлой теме оставили 1 background и 1 panel;
— Мод On gray кроме цвета подложки может устанавливать, например, более тёмный цвет текста, чтобы сохранять контраст на более тёмном фоне;
— Также через мод Contrast (low, high) реализовали возможность делать отдельные элементы более контрастными;
— Таким образом, семантика построена на основе конкретных продуктовых запросов;
— Палитру всегда можно доделать потом;
— Удобно, когда семантические цвета в палитре находятся на одном уровне: можно сразу увидеть ошибку и в целом запомнить, что цвет текста — это 500;
— Также удобно иметь отдельную палитру для тёмной темы с интерпретированными цветами (можно оставить только те, что точно используются).

#color #design_system

Рейтинг-метр для панели управления.

• 4 уникальных состояния: высокий, средний, низкий и отключенный
• Идеально подходит для интеграции в темные и светлые темы
• Отлично подойдет для улучшения панелей управления и визуализации данных
• Легко настраиваемые элементы для разнообразных проектов

#rating #dashboard #design #visualization

Открыть в Figma

Набор иконок.

• Набор открытых нейтральных иконок, созданных для дизайнеров и разработчиков
• Все иконки бесплатны для личного и коммерческого использования
• Все иконки представлены в виде компонентов Figma с базовым стилем заливки
• Легко найти иконки через панель Assets
• Автор делится этим набором как поклонник, все права принадлежат команде Remix Design

#icons #remix #open-source #design

Открыть в Figma

The Brand Identity зафичерили наш проект с прошлогодним дропом мерча Manychat.

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

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

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

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

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

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

И так я познакомился с Мелконом, который делает стритвир бренд Berq.

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

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

Я помню, как мы на офисном принтере печатали цветные М-ки для худии, и булавками примеряли их к конкретным местам, созваниваясь параллельно из разных стран по зуму (оказалось, что этот момент запечатлен на фото и выложен в комменты под линкедин постом).

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

И забавно, что одна из ценностей компании звучит как “care intensely”. И кажется, что в этом проекте она прямо даже перевыполнилась ))

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

И мы захотели запечатлеть этот момент. Но мы не хотели снимать студию, искать моделей. Мы поставили наших сотрудников, тех кто носит этот мерч, в центр и сделали их моделями.

Мы сделали спонтанную фотосессию в городе с нашей подругой и охрененным фотографом Алисой Полозовой.

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

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

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

В итоге получилась такая коллаборативная фотосессия, где видно проявление разных взглядов и подходов к съемке, к позированию к сюжетам. И это получилось лучшим подтверждением еще одной нашей ценности “win together”, которая тут раскрылась как нельзя кстати!

Если вам хочется получить/приобрести какие-то из будущих дропов или перевыпусков, напишите слово “MERCH”, в комментариях к этому посту — https://www.linkedin.com/posts/sergey-andronov_brand-branding-branddesign-activity-7384166218720727041-2U5Y

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

• Бесплатная лицензия: указание авторства не требуется.
• Настраиваемые рисунки: можете настроить их так, как хочется, с помощью плагина Blush!
• Профессиональные рисунки: созданы талантливыми художниками со всего мира.

#illustration #design

Открыть в Figma

Harmonizer — генератор доступных цветовых палитр. Плагин для Figma и веб-приложение от Evil Martians для создания гармоничных палитр, одинаково хорошо работающих в светлых и тёмных темах. Использует цветовую модель OKLCH и формулы контраста WCAG или APCA, чтобы сохранять равномерную яркость и контраст между оттенками. #design #a11y

https://harmonizer.evilmartians.com/

Илья Безделев написал, что делать с дизайн-долгом (papercuts).

— Дизайн-долг — места в интерфейсе, где что-то получилось криво по незнанию или неумению или где срезали углы, чтобы сделать быстрее;
— По отдельности проблемы вроде лишнего шага или немного кривой валидации формы не смертельны, как порез бумагой;
— Но если нанести слишком много порезов, может случиться «death by a thousand papercuts» — продукт перестанет приносить пользователям радость;
— В каждом цикле планирования выделяйте время на исправление мелких недочётов;
— Их можно закидывать в планы с низким приоритетом как бонусные задачи. Сделал большое дело, можно заняться мелочью;
— В командах с полноценными онколл-ротациями у разработчиков может быть свободное время онколла, когда не надо тушить пожары. Они могут заниматься papercuts;
— Хакатон-фиксатон — на неделю отложить работу над фичами и заняться фиксом дизайн-долга.

#design_debt

Дизайн-система Bento DS.

• Полный автоматический макет.
• Новые свойства.
• Более 60 компонентов.
• Более 740 вариантов.
• Готовые шаблоны макетов.

#UIk #design_system

Открыть в Figma

It’s hard to justify Tahoe icons.

#article #design #ux
@thedevs

https://thedevs.link/mtqyvP

Keep: бесплатная дизайн-система.

• 10000+ компонентов и вариантов
• 435+ глобальных стилей
• Логотипы и значки популярных брендов
• Более 1550 функциональных иконок с готовыми вариантами размеров
• и многое другое

#design_system #UIk

Открыть в Figma

Андрей Богданов написал книгу «Дизайн-стройка. Как создать команду мечты за 90 дней», и вот что там было о ревью макетов лидом и другими дизайнерами:

— Созваниваться с дизайнером и вместе пробегаться по макетам оказалось плохой идеей;
— Если макеты оформлены плохо, дизайнер может их пояснить, но всем остальным придётся иметь дело с непонятным артефактом;
— Непроработанные ветки сценариев, корнер-кейсы, используемые компоненты во время беседы выпадают из фокуса внимания;
— Из-за невозможности как следует подумать рекомендации иногда получаются необдуманными;
— В некоторых компаниях встречается кросс-ревью (дизайн-чек в Альфа-Банке), когда макеты смотрит не лид, а другие дизайнеры (в том числе из других команд);
— Эта практика позволяет разгрузить лида и прокачать навыки ревью у дизайнеров;
— Но она не должна замещать ревью дизайн-лида, так как последний отвечает за качество дизайна в своей команде. Без ревью он теряет связь с продуктом и выпадает из контекста;
— Если будете внедрять кросс-ревью, подумайте, как обеспечить ответственный подход ситуативных ревьюеров и разумный контроль со стороны лида.

#design_check #management

Под капотом: CSS-архитектура редизайна. Брехт де Рёйте рассказывает о каскадных слоях для приоритета стилей, трёхуровневой системе дизайн-токенов, функции light-dark() для переключения тем, нормализации стилей через :where(), выражениях от контейнера для адаптивных компонентов, логических свойствах и прогрессивном улучшении через @supports. #css #design

https://utilitybend.com/blog/under-the-hood-a-closer-look-at-the-css-architecture-behind-the-redesign

Таня Двенадцатова написала о прожарке.

— Она помогает улучшать разрабатываемые фичи и синхронизировать команды. Она похожа на совместное проектирование;
— Это еженедельная встреча на 1–1,5 часа. Лучше выбрать время в начале дня, когда все ещё свежи (самое то для креативных и аналитических задач);
— Докладчики записываются заранее: указывают, какую задачу решали, и добавляют ссылку на артефакт;
— На встрече они презентуют своё решение и отвечают на вопросы и критические замечания зрителей (обычно выстраивается очередь из поднявших руки);
— Вопросы и комментарии лучше не добавлять заранее. Так и комментирующие не тратят на это много времени, и дискуссия получается более живой;
— Обычно участвуют дизайнеры, исследователи, продакты и UX-редакторы, но заглядывают и представители бизнеса, методологи, маркетологи;
— Полезно фиксировать, о чём договорились во время прожарки, чтобы потом учесть это при доработке фичи;
— Участие в прожарке (и необходимость успешно её пройти) можно сделать обязательным шагом в процессе. Для прохождения прожарки может потребоваться несколько итераций;
— По отдельным фичам (незначительное влияние на клиентский путь, регуляторка) можно ограничиться прожаркой и не проводить пользовательское исследование, если зрителям всё было понятно;
— Важно донести, что это не повинность, а полезный процесс. Также это маркер атмосферы и культуры в коллективе.

#design_check

В Фигме появились слоты.

— Это области в компонентах, позволяющие вставить любое содержимое в инстансы этих компонентов;
— Они упрощают компоненты со списками элементов внутри вроде аккордеонов, меню и дропдаунов. В них можно размещать любое количество элементов (не надо заранее закладывать какой-то максимум) и легко менять их порядок;
— Проще работать с компонентами с высокой вариативностью содержимого. В компоненте карточки можно задать стиль подложки и заголовка, расположение контролов, а её содержимое — добавлять через слот;
— Алексей Бычков записал видео о слотах;
— В блоге Фигмы [English] также предлагают использовать их для работы с лейаутом страниц: фиксировать в компоненте меню, хедер и футер, а содержимым конкретной страницы управлять через слот;
— Забавно, что они противопоставляют слоты детачу или созданию сложных многовариантных компонентов. Раньше такую же задачу решали добавлением dummy-компонентов и их свапом в инстансах на локальные компоненты с нужным контентом. Но со слотами, конечно, удобнее;
— Консультант по дизайн-системам Нейтан Кёртис написал, как внедрять слоты в библиотеку компонентов [English];
— Как понять, где слоты будут полезны, какие компоненты снабжать слотами первыми (где чаще всего детач), какие настройки применять (без контента, с контентом, списком предпочитаемых компонентов и без него);
— Правила лейаута слотов: не задавать цвет, обводку, скругление углов, паддинги. Паддинги лучше задавать в контейнерах, в которых будут располагаться слоты. Слот должен отвечать за лейаут, направление, отступы между элементами и изменение размеров.

#figma #design_system

Алексей Макаренко рассказал об автоматизации доставки логотипов разработчикам.

— Старый порядок: экспорт ×4 в формате png, оптимизация через приложение ImageOptim, переназывание, загрузка в общую папку с логотипами;
— Со временем появились папки для тёмной и светлой темы, для лого, вписанных в квадрат;
— В Фигме через плагин SVG Export цветные логотипы экспортировали с дефолтным пресетом (просто чтобы сжать), а монохромные — с пресетом Correct color (чтобы разработчики могли красить их в любой цвет);
— Новый порядок: собственный плагин, который смотрит на свойства компонента с изображением логотипа и называет экспортируемый файл, например, avrora_color_dark_compact_square, экспортирует архив с png и svg;
— Дизайнер сохраняет архив в репозиторий, где хранятся логотипы, и запускает bash-скрипт. Он раскрывает архив, оптимизирует файлы (такие же алгоритмы, как в ImageOptim и SVG Export), раскладывает по папкам и называет logo.png и logo.svg;
— Иерархия папок учитывает, что логотипы могут быть цветными и монохромными, цветные варианты нужны для тёмной и светлой темы, также они могут быть широкими и компактными, а компактные — вписанными в круг, квадрат и без формы;
— Вписанный в квадрат логотип компании Avrora для тёмной темы в формате png доступен по адресу logos/avrora/color/dark/compact/square/logo.png;
— Разработчики используют компонент логотипа и обращаются к конкретному файлу в папке.

#image #figma #design_system

Яркий анимированный сайт дизайн-фестиваля в Уругвае.

superlocaldesign.com

#design #fest

Жженая бумага.

• Легко использовать и адаптировать для своих проектов
• 5 бесплатных текстур

#burntedge #textures #paper #design

Открыть в Figma