🧾 Контракт компонентов: как сделать решения проверяемыми

Нейтан Кёртис разбирает, зачем дизайн-системам нужны формальные контракты компонентов. В них фиксируют свойства, состояния, зависимости и правила поведения, чтобы разные платформы одинаково понимали замысел компонента. Автор предлагает строить такие контракты на основе схемы. Она помогает проверять структуру данных, автоматически находить ошибки и генерировать большую часть кода. Хороший контракт должен быть типизированным, неповторяющимся, независимым от конкретной платформы, проверяемым, детерминированным, недорогим в поддержке и готовым к изменениям. Внутри: – Чем контракт компонента отличается от обычного описания или файла в Markdown; – Почему каждое решение нужно хранить в одном месте; – Как сделать контракт независимым от Фигмы, веба, iOS и Android; – Зачем нужны схемы, автоматическая проверка и детерминированная генерация; – Как менять контракты через ADR, версии и понятные правила совместимости. ➡️ Читать статью ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

🧱 Спецификации компонентов как общий язык Фигмы и кода

Нейтан Кёртис показывает, как превратить спецификации компонентов в рабочий центр дизайн-системы. Они собирают решения из Фигмы, прототипов и кода, а затем помогают переносить их между этими средами без потери деталей. Для этого нужны структурированные данные, схемы, версии и понятные правила. ИИ может помогать собирать требования и превращать их в код, но важные решения должны оставаться видимыми, проверяемыми и доступными для ревью. В такой системе инженеры тоже влияют на дизайн: находят проблемы с доступностью, уточняют поведение и возвращают эти решения в общую модель. Внутри: – Почему спецификация становится связующим слоем между дизайном, кодом и документацией; – Какие данные стоит описывать для каждого компонента; – Зачем разделять сгенерированные правила и требования, написанные людьми; – Как переносить решения между Фигмой, прототипами и разными платформами; – Почему ИИ лучше работает со структурированными контрактами, чем с разрозненными макетами. ➡️ Читать статью ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Высота строчных в одной гарнитуре разного веса

К теме оптических компенсаций: сравнение высоты строчных в Futura Light и Futura Extra Bold рядом, одним кеглем. Верх h у обеих на одной линии, а строчные x и p у жирной заметно выше серой полосы. Высота строчных в одной семье не постоянна: с весом она растёт. Каталонская учебная схема с Викисклада, 2010. Источник: Alturax familia.png Изображение: Mercetorres (CC BY-SA 3.0) #шрифт #типографика #latin

🎨 Как подобрать палитру и не отдать решение нейросети

Автор разбирает подбор цветов от задачи проекта до промптов для генерации изображений. Сначала нужно понять характер бренда, аудиторию, конкурентов и носители. Потом выбрать цветовую схему, определить роли оттенков и проверить, сохраняется ли контраст в чёрно-белом варианте. Для генерации одной красивой картинки достаточно общего описания. Для серии в едином стиле нужно заранее зафиксировать цвета, HEX-коды, насыщенность, яркость и назначение каждого оттенка. Иначе нейросеть начнёт менять палитру от изображения к изображению. Внутри: – Чем отличаются RGB, CMYK, HEX и HSB; – Как использовать монохромные, аналоговые, комплементарные и триадные схемы; – Зачем нужно правило 60–30–10; – Как проверить контраст и понять, куда падает внимание; – В каком порядке описывать палитру, объекты и сюжет в промпте. ➡️ Читать статью ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Как протестировать коллекцию при помощи ИИ ещё до производства👇🏻
▪️ Мне кажется, мы всё ещё слишком часто воспринимаем нейросети как инструмент для создания красивых картинок. Хотя для fashion-бизнеса гораздо интереснее другое: ИИ позволяет значительно дешевле проверять продуктовые гипотезы. Представьте классическую схему. ➡️ Дизайнер придумал коллекцию, разработал модели, сделал лекала, закупил материалы, отшил образцы, организовал съёмку. И только после довольно серьёзных вложений наконец показывает продукт покупателю и узнаёт: а ему вообще это нужно? Сейчас часть этого пути можно перевернуть. Сначала мы формулируем идею и целевую аудиторию. Собираем ассортимент, цветовую палитру и материалы. Создаём эскизы и технические рисунки. ➡️ А затем при помощи ИИ превращаем всё это в виртуальную коллекцию. Можно увидеть изделия фотореалистично, примерить их на женщину именно нашей целевой аудитории, собрать полноценные образы, сделать кампейн, показать разные ракурсы и даже создать рекламное видео. И уже с этим материалом идти к потенциальному покупателю. Например, сделать несколько вариантов одной модели и посмотреть, какой выбирают чаще. Проверить цвет. Сравнить длину. Запустить несколько рекламных креативов. Посмотреть клики и заявки. Собрать лист ожидания. В некоторых моделях бизнеса можно протестировать и предзаказ. 🔸 То есть вместо: идея → производство → маркетинг → узнаём, нужен ли продукт 🟠 получаем: идея → виртуальный продукт → тест спроса → корректировка → образец → производство. Конечно, виртуальный тест не заменяет реальный образец. Картинка ничего не говорит нам о посадке, технологии, качестве пошива или реальном поведении ткани. И большое количество лайков ещё не означает большое количество продаж. Но ИИ позволяет сделать главное: отсеять слабые гипотезы до самых дорогих этапов разработки. И вот это для меня гораздо интереснее бесконечной генерации картинок. В FVD CLUB мы как раз идём по этому пути практически: создаём коллекцию с нейросетями от идеи и ЦА до моделей, кампейна и видео, разбираем промпты и собираем весь процесс в одну систему. Если хочется не просто играть с ИИ, а встраивать его в реальную работу fashion-специалиста, присоединяйтесь к клубу. ВСТУПИТЬ В КЛУБ
4. Кроме обычных примеров (сканов и скринов), будут еще вот такие схемы с конструкциями. #курсовоздухе
Есть одна вещь, которую я вижу снова и снова у дизайнеров, которые начинают работать с нейросетями👇🏻
Они отлично стартуют. И где-то посередине , застревают. Расскажу, почему это происходит. И где именно провисает цепочка. ▪️Начало дизайна : нейросети работают блестяще Концепция, мудборд, поиск образов, цветовые решения, референсы, здесь ИИ настоящий партнёр. ChatGPT генерирует идеи за минуты. Midjourney и Nano Banana создают атмосферу коллекции. То, на что раньше уходили недели поиска, теперь несколько итераций промптов. Старт всегда выглядит вдохновляюще. Финал - нейросети снова на высоте Предпродажная подготовка, контент, маркетинговые материалы, карточки товаров, виртуальный лукбук, анимация здесь ИИ закрывает задачи, на которые раньше нужны были фотограф, модель, студия и бюджет. Aidentika, NewArc, Kling всё это работает. Результат убедительный. А вот посередине - провал Между вдохновляющей концепцией и красивым контентом есть один этап, который нейросети не закрывают. Технический рисунок. Перевод идеи в производственный документ. Тез док где каждый шов на своём месте, каждая застёжка выполнима, каждая деталь обработана технологически корректно. Этого не умеет ни одна нейросеть. Ни ChatGPT, ни Fermat, ни Style3D при всех своих возможностях. Потому что это не визуальная задача. Это инженерная. ❕ И именно здесь обученный специалист с Adobe Illustrator становится незаменимым звеном цепочки. Тем, кто берёт красивую картинку и превращает её в документ, по которому реально можно сшить. Схема выглядит так: ИИ → концепция и образы → дизайнер + Illustrator → технический рисунок и тех пак → ИИ → контент и визуализация Уберите среднее звено - и цепочка рвётся. Именно об этом я буду говорить на ближайшем вебинаре - как выстроить рабочую связку ИИ и профессиональных инструментов так, чтобы каждый из них делал то, что умеет лучше всего. Регистрация 👉🏻 ССЫЛКА
Границы возможного / немного про вайб-кодинг
На прошлой неделе я писал, что собираю внутреннюю систему финансового учёта для агентства. Собираю её с помощью ИИ-агентов и вайб-кодинга. За неполные две недели эта система из эксперимента превратилась во вполне рабочий инструмент, которым я сейчас активно пользуюсь и заполняю. Погружение во все процессы более детально привело меня к определенным выводам. 🔖 Главный инсайт, который я вынес ⚫️Если правильно определить границы MVP, то такой подход реально позволяет очень быстро собрать рабочий продукт. ⚫️В MVP надо оставить 5-6 основных сценариев для теста, а не 100500. В таком случае можно достаточно быстро прийти к работающему результату. За эти две недели я собрал то, чего мне не хватало ни в Excel, ни в Notion: удобный визуальный финансовый дашборд, импорт банковских выписок, автоматический учёт подписок и списаний за них. А ещё интегрировал Telegram-бота, которому можно голосом рассказать, куда потратил деньги или откуда пришёл доход. Система сама структурирует информацию и заносит её в нужную учётную схему. 🔔 Но есть нюансы Пока речь идёт об интерфейсе, логике и новых фичах, такой подход реально очень сильно ускоряет процесс. Но как только появляются чувствительные данные, сложные бизнес-сценарии, интеграции по API, вопросы безопасности, вынос базы данных, регулярное резервное копирование — всё. Здесь уже нужен головастый разработчик. При этом эксперимент мне очень зашёл. Токенов я, конечно, сжёг дохера. но даже с этим инструмент получился гораздо быстрее классического процесса разработки. Если представить весь привычный путь — аналитика, проектирование сценариев, продумывание логики, дизайн, разработка, внедрение — это легко могло бы занять овердохера времени на MVP. Здесь же всё происходит гораздо оперативнее. 🎯 Диджитал пришел к довольно интересной модели: ИИ и агенты не отменяют разработку, но очень сильно меняют правила самого процесса. Эксперимент продолжается. Ну и в обложке пара скринов моего дашборда.
🧪 Что проверять в прототипе до начала разработки
Екатерина Соловьёва собрала подробный гайд по тестированию прототипов. Ранняя проверка помогает найти проблемы в сценариях и навигации до того, как решения попадут в код и станут дорогими в исправлении. Бумажные наброски подходят для проверки общей идеи и структуры. Интерактивные схемы помогают пройти основные сценарии, а подробные прототипы нужны для проверки текстов, визуала и мелких взаимодействий. Во время тестов стоит фиксировать успешность задачи, время, ошибки и места, где пользователь останавливается или уходит. Внутри: – Как выбрать детализацию прототипа под задачу исследования; – Когда использовать юзабилити-тесты, интервью и экспертную оценку; – Как подготовить сценарии, метрики и участников; – Какие ошибки команды допускают при проведении тестов; – Как проверять доступность интерфейса ещё до разработки. ➡️ Читать статью ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Полезный вебинар для тех, кто работает с городской средой и сообществами – 11 августа в 15:00 Городской университет 2.0 проведет открытый вебинар: «Как собрать команду и партнеров для городского проекта, который не развалится после первого события».
Обещают очень предметный разговор: → Какие роли нужны проекту и где искать под них людей → Как найти и привлечь первых партнёров с конкретным алгоритмом → Как объединять ресурсы и экспертизу разных людей, сохраняя управление → Как превращать зрителей и разовых участников в сообщество, которое продолжает жить своей жизнью → Пять рабочих схем кооперации, которые помогают проектам выживать и расти в небольших городах Своим опытом поделятся эксперты, которые прошли через городские проекты на практике: Святослав Мурунов — урбанист, социальный инженер, основатель сети Центров прикладной урбанистики. За плечами 40+ городов России и больше 300 тысяч человек, которые благодаря этой методологии запустили свои городские инициативы. Автор методологии «Сетевая модель города». Мария Романова — директор по развитию образовательных продуктов «Городского университета 2.0», организатор крупных мероприятий для IT-сообщества. Вебинар бесплатный, но для участия требуется предварительная регистрация. Реклама. АНО ВО «Городской университет 2.0» Erid:2VtzqvMdr11
Style Guide Generator
Плагин для удобного создания руководства по стилю с типографикой, цветовыми схемами и т.д. Install ️
Simpleflow Удобный плагин для создания блок-схем со стрелочками
Spectrum Art — готовые к использованию цветовые схемы веб-сайтов
Сервис "DGM"
Здесь вы сможете быстро создавать схемы, диаграммы и другие данные в формате зарисовок при помощи готовых шаблонов и инструментов. 🔍Глянуть сервис🔍 #сервисы
Если попросите меня рассказать о чем-то, то я скорее всего нарисую схему или таблицу — так что сделала таблицу-обзор на дизайн в России
Сейчас прохожу карьерный курсик, и там было задание собрать компании, продукты и команды, с которыми хотелось бы поработать. Я не ищу работу, но строю долгосрочный нетворк, задание подтолкнуло систематизировать для себя, все что я знаю о брендинговом\графическом рынке Так появилась ❤️ экселька ❤️ Внутри: 👉 Важные премии и фестивали, через которые удобно находить сильных авторов, в том числе начинающих и нишевых (со ссылками) 👉 Рейтинги студий и агентств (тоже ссылочками) 👉 Единый список студий из этих рейтингов со ссылками на сайты (на сайтах вакансии, проекты и ссылки на соцсети) ❤️ и отдельно мои любимые студии, за которыми я слежу и которыми вдохновляюсь. Отрываю от сердца свой секретик. Что бы вы добавили в эту таблицу?
Наш новый большой и крутой дизайн-кейс! 💡
Недавно я рассказывал, что мы с командой готовим большой кейс об одном из наших проектов. И вот сегодня мы наконец его опубликовали 🔛 В прошлом году в агентстве мы создали мобильное приложение для крупной международной компании, разрабатывающей инновационные препараты для эстетической медицины и косметологии. Приложение предназначено для специалистов-косметологов: оно помогает быстро ориентироваться в ассортименте препаратов, подбирать подходящие решения для различных зон лица и тела и получать всю необходимую информацию в одном интерфейсе. Работа над проектом оказалась для нас супер интересной. Мы изучили огромное количество профессиональных материалов, разбирались в препаратах, схемах применения, глубинах введения, анатомических зонах и специализированной терминологии. Всё для того, чтобы создать действительно удобный инструмент, которым специалисты пользуются каждый день. Сегодня приложение успешно работает в App Store и Google Play, а мы наконец готовы показать, как создавался этот проект. ➡️ https://dprofile.ru/case/187898/palitra-fillers-app Отдельное спасибо 💡 Маше за огромную работу над кейсом — получилось очень круто. Много анимации, интересных решений и внимания к деталям. Кейс уже опубликован на 🔥 https://dprofile.ru/case/187898/palitra-fillers-app">Dprofile. Буду признателен за поддержку лайками — это поможет нам попасть в рекомендации. ❤️ @ancora_design
Design Handoff Tools & Annotations — удобные инструменты для создания эффективных схем и конструкций
🔁 Макет не должен созревать в одиночестве
Авторы рассказывают, как команда ушла от процесса, где дизайнеры долго полировали прототипы, а разработчики подключались только после передачи макетов. В старой схеме всё выглядело понятно, но на практике ломалось: дизайн тянулся бесконечно, разработчики теряли контекст, прототипы воспринимались как финальный интерфейс, а важные вопросы всплывали слишком поздно. Итеративный подход помог разделить работу на более короткие циклы. Сначала грубая схема и логика, потом интерактивный прототип, потом крайние случаи, ошибки, состояния и уже после этого финальный визуал. На некоторых проектах пошли ещё дальше: брали одну небольшую user story на спринт, быстро собирали прототип, отдавали в разработку и к концу недели показывали заказчику работающий кусок продукта. Это не всегда комфортно, особенно если привык показывать только вылизанный результат, зато команда раньше видит проблемы и дешевле меняет направление. Внутри: – Почему детальные прототипы часто начинают мешать разработке; – Как раннее подключение разработчиков снижает количество переделок; – Зачем начинать с грубой общей картины, а не с polished-макета; – Чем отличаются большие продуктовые итерации от коротких недельных спринтов; – Почему пользователю и заказчику важно заранее объяснять, что они смотрят не финальный дизайн; – Как Design Decision Records помогают не терять причины старых решений; – Когда стоит остановить прототипирование и перейти дальше; – Почему для перфекциониста итеративность может снижать тревогу, а не усиливать её. ➡️ Читать статью ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Курируемая галлерея «Обманчивых схем» или Deceptive patterns. Видимо это ребрендиг dark patterns?
Основная идея проекта — собирать, классифицировать и документировать такие практики, а также показывать, какие компании их используют и какие законы с ними борются. Например: Confirmshaming — стыдят пользователя за отказ ("Нет, спасибо, я не хочу экономить деньги"). Hard to cancel — подписаться легко, отменить очень сложно. Fake urgency — "осталось 2 минуты", хотя это неправда. Fake scarcity — "осталось 3 товара", хотя ограничения нет. Hidden costs — скрытые комиссии в конце оформления. Preselection — галочки уже проставлены за пользователя. Trick wording — запутанный текст, из-за которого человек ошибается. Nagging — постоянные всплывающие окна и просьбы. Visual interference — визуально прячут важные опции или выделяют выгодные компании действия. https://deceptive.design
Курируемая галлерея «Обманчивых схем» или Deceptive patterns. Видимо это ребрендиг dark patterns?
Основная идея проекта — собирать, классифицировать и документировать такие практики, а также показывать, какие компании их используют и какие законы с ними борются. Например: Confirmshaming — стыдят пользователя за отказ ("Нет, спасибо, я не хочу экономить деньги"). Hard to cancel — подписаться легко, отменить очень сложно. Fake urgency — "осталось 2 минуты", хотя это неправда. Fake scarcity — "осталось 3 товара", хотя ограничения нет. Hidden costs — скрытые комиссии в конце оформления. Preselection — галочки уже проставлены за пользователя. Trick wording — запутанный текст, из-за которого человек ошибается. Nagging — постоянные всплывающие окна и просьбы. Visual interference — визуально прячут важные опции или выделяют выгодные компании действия. https://deceptive.design