Дизайн

Проектирование дизайна как создание объяснения Прошу своих студентов придумать, как должна выглядеть и работать следующая версия их продукта. Они пишут, мол, там будет то и сё, и надо будет учесть это и это. Кажется, они думают, что они всё понимают, а я всё никак не удовлетворюсь их ответами. Периодически даже звучат слова вроде «давай мы сделаем прототип или даже навайбкодим тебе». А я говорю, да погодите, вы мне объясните сперва! Я верю в идею «кто ясно мыслит, тот ясно излагает», поэтому если вы правда способны сделать прототип, то значит вы понимаете, как всё должно работать, и можете это рассказать. По моему опыту, многие дизайнеры даже не осознают того, что у них в голове нет целостной картины продукта. При этом иногда чтобы что-то придумать, нужно какое-то время порисовать или попрограммировать, как бы пощупать задачу разными способами — это я понимаю. Я не против никаких промежуточных прототипов, если так удобнее думать, но в качестве результата я хочу описание системы. В общем, наша переписка продолжается какое-то время. Они уже пишут подробный текст, но им всё ещё моя просьба кажется удивительной: «Неужели тебе правда это удобнее, чем макет или прототип? На макете же сразу видно, где что!» Да, но не видно, почему! Какой толк от прототипа? Ведь из я прототипа ничего не пойму. Я буду видеть, что что-то как-то сработало, но я не увижу внутренних причин. У меня всю жизнь так было, я терпеть не мог прототипы, потому что я с ними как слепой. Как мне увидеть и осмыслить саму систему, а не отдельные её случайные проявления, до которых я докликал? За прототипом очень легко спрятать, что у вас ничего не продумано. После прочтения Дойча я понимаю, почему так: прототип — не объяснение. Что толку физику от результатов опыта, если у него нет объяснительной теории, которую эти опыты подтверждают или опровергают? Это же просто рандомные факты, вызывающие лишь недоумение. Чтобы понимать, почему они такие, мне нужно открыть, то есть придумать закон, который бы их объяснил. Но если мне самому нужно придумывать закон, глядя на эффекты его воплощения в прототипе, то в чём тогда была работа дизайнеров? Я ж как раз изначально попросил их придумать этот закон! А в итоге вынужден его придумывать я. Если вы его реально придумали, так просто расскажите. А если у вас только прототип, то вы его, скорее всего, просто не придумали. Это всё снова показывает, насколько качественное проектирование близко к придумываю законов физики.

Илья Бирман нашел твит американского дизайнера Тобайаса ван Шнайдера: As a Designer, if you care about making well-designed things, you should surround yourself with well designed things in your life. You'll absorb more than you think. The watch you wear, your furniture, the car you drive, the software you use... everything you passively use throughout the day becomes a reference point, or think of it as a baseline of the standard you hold yourself to in your own work. And no, this doesn't mean only buying expensive things. Well designed doesn't necessarily mean costly, it just means well considered. Live among things made by people who deeply cared, because its contagious (: Но я не согласен. Если будешь окружать себе аккуратными вещами, то и будешь вариться в своем пузыре и производить многократно переваренные смыслы. Дизайн — уникальная профессия, в которой _вредно_ сидеть в своей студии, потому что это профессия в первую очередь про людей. Так что нужно идти, смотреть, впитывать, читать книги, слушать музыку, смотреть пьесы, читать стихи, смотреть на картины. Худшее, что может сделать дизайнер — окружить себя продуктами жизнедеятельности других дизайнеров. Дизайн про людей, а людей в студии не найдешь.

ReDesign Превращает плоское изображение в редактируемый дизайн • восстанавливает текст, векторные фигуры, изображения • собирает группы и z-порядок • использует агентную декомпозицию для разбора структуры • Требует GPU с минимум 55 ГБ памяти для Qwen-Image-Layered • Использует VLM-контроллер (например, Gemini-3-flash) • Работает с несколькими GPU для ускорения обработки • Параллельная обработка через несколько воркеров Набор инструментов: PaddleOCR для текста, Qwen-Image-Layered для слоев, GroundingDINO и SAM 2 для сегментации, VTracer для векторизации. Есть встроенный верификатор качества каждого шага. Работает через API-ключ к LLM-модели Гитхаб #design #image2vector #image2layers

Заметка из 2015, но всё ещё актуальна. И вместо Мака ещё можно подставить Сафари с тем же успехом Поддержка Мака обязательна для хорошего дизайна Предположим, вы обратились к хорошему дизайнеру за помощью с вашим веб-продуктом, а ваша аудитория использует Виндоус. На этапе разработки выясняется, что на Маке у вас всё глючит и тормозит. Дизайнер жалуется и просит поправить. Но оптимизация под Мак требует дополнительных ресурсов. Вы считаете, что эффективнее тратить ресурсы на полировку того, что видят ваши пользователи, а не ваш дизайнер. У вас не будет хорошего дизайна. Большинство хороших дизайнеров сидят на Маке. Если дизайнер постоянно будет видеть говно, и вы не будете его чинить, веря, что на Виндоусе-то у вас всё хорошо, то вы даже никогда не узнаете, хорошо ли у вас на Виндоусе. Проверять качество будут ваши программисты, а не дизайнер, и дизайн получится на их уровне. Нанимать дизайнера, который даже не может посмотреть, что получается — вот где неэффективная трата ресурсов. Тут может возникнуть вопрос: не должен ли дизайнер поглядывать из-под Виндоуса сам, раз делает продукт для его пользователей? Хорошо бы, чтобы поглядывал. Но дизайнер — не тестировщик. Если он будет сидеть и внимательно прокликивать свои интерфейсы, запустив фаерфоксы и обложившись андроидами, то у него не останется времени на основную работу. Поэтому важно, чтобы дизайнер мог видеть продукт в том браузере, который у него и так открыт. При этом, когда дизайнер объясняет разработчикам, что и как починить, у разработчиков повышается разрешение и понимание того, как всё должно быть, поэтому они сами лучше реализуют во всех браузерах. Если вы позвали дизайнера и хотите дизайн, то считайте, что с этого момента важная часть вашей аудитории использует Мак.

Взламывание яркости Это не про ИИ, но про цвет, яркость, HDR и цветовые профили. Это настолько интересный лайфхак, если не сказать джейлбрейк, что я переведу с иврита оба поста. "Я листал ленту, и вдруг логотип Wiz буквально засиял. Не просто выглядел ярким - он действительно излучал свет, словно за экраном включили лампочку. Вся остальная лента выглядела нормально, а они прямо горели. Сначала я подумал, что у меня сломался экран. Поэтому я скачал файл логотипа и проанализировал его. Никакого фильтра, никакого эффекта свечения, никакой анимации. Совершенно обычная плоская картинка. Но внутри файла спрятан цветовой профиль: «Rec2020 Gamut with PQ Transfer». Это HDR-профиль. Тот самый PQ, который используется в фильмах Dolby Vision и позволяет кодировать яркость вплоть до 10 000 нит. И вот в чем весь трюк. Фон логотипа закодирован примерно на уровне 60 нит - поэтому он остается темным и приглушенным. А белые буквы? Они декодируются с яркостью 4 000 нит и выше. Это примерно в 50 раз ярче обычного текста. Пока ваш экран показывает белый цвет с яркостью около 200 нит, буквы Wiz просто пылают поверх него. В результате на любом HDR-экране - то есть практически на любом современном iPhone или MacBook - логотип излучает свет сильнее, чем белый интерфейс самого LinkedIn. Глаз просто не может туда не посмотреть. На него даже немного больно смотреть - и именно поэтому его невозможно игнорировать. А самое красивое заключается в том, что на скриншоте или обычном экране логотип выглядит просто тусклым, скучным и фиолетовым. Магия существует только вживую и только на подходящем устройстве. Поэтому почти никто не замечает, что именно здесь происходит. Люди просто чувствуют, что логотип притягивает их взгляд. Это не баг. И это не «сломавшийся» HDR. Это блестящее использование особенности стандарта, который LinkedIn явно никогда не рассчитывал увидеть в логотипе компании, чтобы заполучить самый дорогой ресурс в ленте: ваше внимание. Инженеры думают о производительности. Дизайнеры думают об эстетике. А кто-то в Wiz подумал о физике света - и обошел и тех, и других. Обновление: с обычной фотографией профиля это не работает. Эффект работает только с изображениями страниц и компаний - LinkedIn не подвергает изображения бизнес-страниц дополнительной обработке. Продолжение: Половина из вас увидела совершенно другую картину. На iPhone и MacBook логотип сиял. А пользователи Windows и мониторов Dell писали мне: «Выглядит грязно». «Похоже на сбой». «Размазанный текст посередине». «Низкое разрешение». И это был один и тот же файл. Получился обратный эффект. И вот о какой стороне этой истории никто не говорит: этот «гениальный» трюк делает ставку на экран человека, который смотрит на изображение. Половина ленты получает сияние. Вторая половина получает баг. Один из комментаторов описал это идеально: все это напоминает времена, когда мы использовали лазейки в старых браузерных движках рендеринга, чтобы выжать из них дополнительную производительность. Когда ваша аудитория сидит за рабочими Windows-мониторами, вы можете транслировать слово «поломка» именно тем людям, которых больше всего хотели впечатлить. Лично я считаю этот эффект совершенно невыносимым. К тому же он ломает контраст всей ленты. Так что вот код и инструкции для установки. Одна команда - и ваш логотип горит. Правда, только на правильной половине экранов." https://gal.tidhar.org.il/blog/hdr-glow-logo/ Сорс @cgevent

AI Design How-to Со студентами доводим до продакшена несколько сервисов и везде стоит вопрос дизайна. Все эти нейрослоповые веб-сервисы с зелено-фиолетовыми цветами и квадратиками всплывающими уже набили оскомину. Поэтому советую им такой вариант по росту сложности, но и потенциальному эффекту. 1. Поставить дизайн-скилл. Есть несколько хороших, мне нравятся https://github.com/Leonxlnx/taste-skill https://github.com/Nutlope/hallmark https://github.com/nextlevelbuilder/ui-ux-pro-max-skill Можно ставить все 3, можно выбрать лучший для ваших задач (не только сайты, но и документы и презентации, например) 2. Использовать Stitch от гугла для дизайна https://stitch.withgoogle.com/ Очень гибкая система с огромными лимитами на постройку/переделку сайтов/приложений 3. Просить сгенерировать дизайн ChatGPT Это один из лучших генераторов картинок на текущий момент и плюс - можно сгенерировать например сотню разных вариантов и потом выбрать лучшие идеи. Лимитов практически нет. Потом просто закинуть в ИИ-ку и попросить сделать вот так 4. Claude Design Вариант скорее для продакшн и больших студий с готовым брендбуком. Старается максимально следовать вашим гайдам и делать хорошо не только сайты, но и презентации Но для маленьких сервисов и презентаций "на выкинуть" скорее оверил, жрущий лимиты. Ну и в целом советую поглядывать или закидывать свои задачи на DesignArena и выбирать модель, что работает с вашими типа графики/визуализации лучше. Вот что на текущий момент получается: Веб-девелопмент (фронтенд) - GPT Sol Веб-девелопмент (фулстек) - Fable, Opus Гейм-девелопмент - Fable Android dev - Opus React Native - Opus SVG - Fable и спец-модель Arrow ASCII-ART - Fable Слайды - Fable и Manus Картинки/графика всех видов - GPT Image и Reve 2.1 Видео - Gemini Omni Flash Аудио - Gemini Сервисы для создания приложений с нуля - Replit (неожиданно), Emergent, Anything и только потом Lovable и прочие, в том числе где-то в серединке Figma Make и Canva https://www.designarena.ai/leaderboard

Наткнулся в LinkedIn на пост чувака, который предлагает "a little more breathing room" дизайну главного экрана Революта. Объясню в чем проблема таких Dribble концептов. Этот экран генерирует миллиарды долларов выручки. Со стороны, не зная метрик этого экрана и остальных, на которые он разводит дальше, ты никогда не сможешь понять где есть проблемы и точки роста. Ты просто галлюцинируешь. Дизайн как "я нарисовал красивое" умер еще лет 5-10 назад. Сейчас это такая же инженерная профессия, как и большинство других в продуктовой разработке. Ты должен глубоко понимать метрики продукта, клиентские сегменты, конкуренцию по рынкам. В противном случае ты будешь рисовать картинки, которые никому уже не нужны.