Design As A Solution

К слову, о дизайн-менеджменте. Опубликовал на Medium статью-гайд, которая поможет понять, что нет универсального стиля руководства, который бы подходил всем и всегда, и при чем тут уровни рабочей зрелости. Это вольная интерпретация книги «Одноминутный Менеджер и Ситуационное Руководство». Статья будет полезна не только тимлидам, но и дизайнерам, которые хотят качаться в сторону менеджмента, но как и я, не слишком любят специальную литературу. https://medium.com/@artemkutcher/ситуационное-лидерство-27ef4e8bc4f2

Максим Кононов написал о 13 базовых цветовых токенах (без токенов для ховеров). — Блоки в интерфейсе — контейнеры для элементов и других блоков. Они должны выделяться на фоне родительского блока, создавая структуру слоёв; — View (1) — блок, на котором отображается контент. Navigation (2) — блок с навигацией, который управляет тем, какие View отображаются; — Border (3) может отделить два находящихся рядом блока, а также обвести немодальный блок, находящийся поверх остальных (плюс тень); — Если блок модальный, для затемнения лежащего ниже контента — полупрозрачный Overlay (4); — Элементы — всё остальное: текст, иконки, кнопки, поля ввода. Они управляют вниманием пользователя, выделяя важное, показывают состояние элемента; — За внимание отвечают цвета элементов: Primary (5), Secondary (6) и Accent (7), перебивающий Primary; — Характер задают: Danger (8), Success (9), Warning (10); — Для фона кнопки — Background (11); — Указанные выше яркие цвета можно применить не к тексту или иконке в кнопке, а к её фону. Тогда для её содержимого потребуется OnAccent (12); — Кнопка в состоянии фокуса может иметь обводку с цветом Accent (с небольшим отступом, чтобы не сливаться, если у кнопки такой же фон), а в заблокированном состоянии — красить содержимое в цвет Disabled (13); — Он же пригодится для плейсхолдера в поле ввода (логичнее было бы его назвать просто Tertiary); — Также в статье есть о том, как подобрать цвета для этих токенов для светлой и тёмной темы. Да, в заголовке статьи написано о 12 токенах, но это ошибка. #color #design_system

1000 подписчиков на канале! Спасибо огромное, что читаете, подписываетесь и активно реагируете на посты! Ваши комментарии и реакции реально мотивируют двигаться дальше. Кто я? Меня зовут Саша, мне 25, я продуктовый дизайнер из Москвы. Начинал младшим дизайнером в студии, сейчас — старший дизайнер в СберДевайсах. Мой продукт Сейчас я отвечаю практически за весь магазин умных устройств Сбера. Что делаю Помимо макетов, занимаюсь: — Развитием продукта в разных направлениях; — Выстраиванием продуктовых процессов в команде; — Налаживанием взаимодействия со смежными дизайн-командами и подрядчиками; — Много чего пушу по личной инициативе; Чем горжусь и чему радуюсь За полгода работы в Сбере не потерял энтузиазм: продолжаю пробивать креативные решения в продакшн, несмотря на «особенности» бигтеха. Стараюсь находить компромиссы, когда приходится согласовывать решения с кучей департаментов. Кайфую от того, что в моем продукте можно сделать супер креативное решение, от части отстранившись от редполитики, дизайн-системы, шаблонных паттернов и прочих ограничений. Почему стоит читать мой канал? Потому что здесь честный взгляд на то, как всё устроено в продуктовом дизайне бигтеха. Я пишу про реальную внутреннюю кухню и бытовуху. Стараюсь писать живые мысли, а не пост ради поста. Интересные посты 8 советов, которые я дал бы самому себе, когда уходил из студии в продукт Как защищать свой дизайн Важность дизайн-ревью в продуктовом процессе Вечный студент Как адаптировать задачи под портфолио Умение делегировать Профдеформация Коллаборейшн Я открыт к предложениям придти на подкаст, интервью, публичное выступление. Любая движуха — велкам! @kuznetsovvvaleksandr

211 ссылок июля лежат и ждут, что их посмотрят 🥂 Меньше слов, больше дела, поэтому прошу к исследованию этих прекрасных алмазных шахт. 🔽🔽🔽 Все ссылки здесь (🌎 VPN-шпаги наголо) https://go.gruzdev.one/july-links-24 https://go.gruzdev.one/july-links-24 https://go.gruzdev.one/july-links-24 🔘🔘🔘 В кучу Чеклисты 6 Коллекции 12 Бесплатно 9 Гайды 9 Списки 14 Спецпроекты 4 Шаблоны 3 Тексты 5 Советы 23 Тулзы 11 Видео 30 Дизайн-менеджмент Дизайн-менеджмент 1 Дизайн-процесс 15 Ревью 3 Дизайн-система 5 Организация 5 Знания Книги 2 Кейсы 17 Курсы 4 Обучение 4 Презентирование 3 Редизайны 4 Софты 4 По ИИ ИИ 44 Промты 3 ChatGPT 3 Околографдиз 3D 8 Анимация 10 Шрифты 5 Генеративное 6 Стоки 4 Типографика 6 Продуктовое Приложения 8 Автоматизация 2 Анализ данных 3 Разработка 7 Фреймворки 5 Локализация 6 Майндмэпы 2 Продукт-менеджмент 11 Исследования 6 ToV 3 Воркфлоу 4 Работа Карьера 14 Интервью 3 Поиск работы 11 Продуктивность 5 Фигмошная Фигма 17 Фигма-файлы 4 Плагины 7 Что там у кого Альфа 2 Авито 4 Контур 2 Сбер 2 Т-Банк 2 Яндекс 2 UI Иконки 4 UI 13 UX Проектирование 3 Психология 11 UX исследования 4 Вайрфреймы 2 💎 💎💎 Нашли полезное для себя? Дайте мне лайкотоплива — поддержите реакцией, сделайте репост друзьям или в свой канал 🙌

Фигма опубликовала интересную статью на Shortcut о процессе создания нового брендирования компании. Мне нравится, что для ребрендинга была выбрана аналогия с детскими игровыми площадками, с их яркими цветами и причудливыми формами. Эта метафора круто отражает идею о том, что люди с творческим мышлением объединяются в одном пространстве, чтобы придумывать, строить, экспериментировать, коммуницировать и самовыражаться. https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/

Сижу опухший после удаления мудрых зубов, наткнулся на лум: моя презентация айдентики для модного салона массажа лица в Лиссабоне. Работу делали с Альбертом 🖤, который никак не соглашается идти к нам артдиром!.. Хотим тебя на грядку, Альберт, чтоб вырастить в креадира! Но вернемся к делу… Не обращайте внимания на мою фривольность в видео. Клиенты — мои друзья. Обратите внимание на другое, форму презентации или фреймворк. Мы изобрели, так называемый, УмныйМудборд (УМ), штука для метчинга клиента с метафорами и дизайн-логикой проекта. Про УМ я планирую рассказывать много, в том числе на инглише в СанФранциско (переезжаю в 25м году), поэтому решил выйти в свет и пооббивать изобретение об студии/продукты и артдиров. Так что комментируйте, обкладывайте калом, входите в спор, обсуждения, предложения и тд. Зачем мы изобрели Умный Мудборд? Обычно мудборды – это масса бесполезных картинок. Конечно не всегда, так дизайнеры синхронизируют ощущения с клиентом. НО! Давайте по чесноку посмотрим на мудборды для клиентов и итоговый результат, как часто оно метчится? То-то и оно, клиент и дизайнер на уровне мдборда часто ведут себя безответственно, не сужают воронку пайплайна проекта почти никак. По УМу мы начинаем насаживать рефы на логику (в данном примере она базовая – от простого к сложному) и формировать гипотезы внутри данной логики. Каждая гипотеза – меткий реф или набросок, которые наглядно строят стратегический образ и ощущения будущего проекта в головах клиента дизайн-команды. А что делают студии после мудбордов? Разрабатывают несколько проработанных концепций с пачкой носителей. Зачем!? Ведь львиная доля этой работы пойдет в стол. Мы же выходим из УМа с четким направлением/задачей дизайн-команде и сформированными ожиданиями со всех сторон, почти всегда это ОДНА концепция. УмныйМудборд — по сути продуктовый подход к креативным задачам, когда быстро двигаешь клиента вперед без дорогих и долгих исследований и лишних проработок концептов. Стоит подобная преза от 300К 2 недели в зависимости от проработки. А финальная айдентика выходит около 1млн и зачастую сопровождается эскизами экранов сайта. В общем, открываю новую главу Умных Мудбордов! На этой неделе выложу более наглядный пример УМа (в приведенном видеопримере мы слишком увлеклись концепцией-выводом), а пока посмотрите ужатое видео с фривольным Дергачевым.

Маргарита Романова написала первую статью из серии об эффективном прототипировании в Фигме. — Нелинейный прототип позволяет пользователю отойти от идеального сценария, совершить ошибки. Взаимодействие становится реалистичнее, а инсайты — качественнее; — Можно проверить интерфейсы, в которых к цели ведут несколько путей; — В Фигме есть экшен Navigate to, но его лучше использовать для переходов между страницами, а не состояниями одной и той же страницы. Иначе получится куча связанных фреймов, и редактировать такой прототип больно; — Для возвращения назад используйте экшен Back, он сразу добавляет обратную анимацию; — Экшен Change to переключает инстанс компонента в заданное состояние. Его достаточно, когда взаимодействие ограничено этим инстансом. Например, пользователь навёл курсор на кнопку, и она изменила цвет; — С помощью переменных, привязанных к слоям и компонентам, можно сделать так, чтобы действие запускало событие (экшен Set variable), которое будет определённым образом модифицировать эти слои и компоненты; — Но в этом случае без Smart animate, только Instant; — Один триггер (например, нажатие на элемент) может приводить к комбинации экшенов. Например, Navigate to и Set variable; — Популярная ошибка: с помощью Change to настроить, чтобы нажатие на чекбокс ставило или снимало флаг. Если в конкретном сценарии нажатие на него должно делать что-то ещё (разблокировать кнопку), будет 2 конкурирующих набора экшенов, срабатывающих на один триггер (нажатие на чекбокс); — В этом случае сработают экшены инстанса в сценарии, то есть кнопка в форме разблокируется, а флаг в чекбоксе не появится; — Решение: сделать интерактивный компонент, но логику привязать к переменной, а не триггеру. #figma #prototype

Руководство по дизайну таблиц — 20 нюансов по представлению датасетов в интерфейсах. Читать статью #ui #ux #советы_и_хитрости #таблицы

15 ЖИРНЫХ ЧЕК-ЛИСТОВ ДЛЯ АГЕНТСТВА В этом посте собрал чек-листы, регламенты и полезные документы, которые помогут вам при ведении проектов и в работе агентства: 🔴 Тут краткая история о чек-листах, зачем они нужны и как их оформлять: https://habr.com/p/755616/ 🔴 Чек-лист по проведению ретроспективы в компании: https://habr.com/ru/p/757106/ 🔴 Чек-лист для подготовки кейса: https://habr.com/ru/p/767158/ 🔴 Чек-лист предпроектной аналитики: https://habr.com/p/752148/ 🔴 Чек-лист по тестированию дизайна проекта: https://habr.com/ru/p/755182/ (он в серединке, смотрите внимательно) 🔴 Чек-лист внутренней приемки дизайн-концепции: https://habr.com/ru/p/772798/ 🔴 Топ-книг, которые нужно прочесть дизайнеру: https://habr.com/ru/p/759438/ 🔴 Регламент по написанию еженедельного отчета клиенту: https://vc.ru/life/1097337 🔴 Регламент по ежедневному планированию в календаре: https://vc.ru/life/1101552 🔴 Чек-лист по подбору подрядчика на разработку: https://vc.ru/hr/1110419 🔴 Опрос удовлетворенности заказчиков: https://vc.ru/marketing/1115027 🔴 Чек-лист с вопросами после расставания с сотрудником: https://vc.ru/hr/1156280 🔴 Регламент по организации онлайн-доклада: https://vc.ru/life/1183202 🔴 Пример таблицы скоринга лидов: https://vc.ru/money/1213099 🔴 Как внедрить грейды и пример таблицы: https://vc.ru/hr/1230225 Все документы удобно расположены в конце статьи, но чтобы вы их внедряли с умом, рекомендую прочитать и сами материалы 📎 Здесь не все регламенты, еще много интересных можно получить в боте: https://t.me/regulations_pyro_bot Все для вас, мои любимые. Сохраняйте в закладки, пишите боту и внедряйте 🙂

Ребзи из Pixel Point (делали дизайн huly.io) начали постить туториалы, как сделать такие мощные свечения и т.п. https://youtube.com/@pixelpoint-io?si=2RezeFuHhk3Fraz4