🛠️ Как дизайнер запускает ИИ-продукты

Привет, ребят! 👋🏼 Принёс вам новую порцию красивого дизайна. Немного затянул с публикацией статьи про лучший сайт мая по версии CSS Design Awards. Но сегодня наконец-то собрался и закончил её. Работы было много в агентстве, поэтому руки до статьи всё никак не доходили. И мы все еще ищем редактора в команду, чтобы такие статьи писать )) Если это ты — пиши мне в личку Как обычно, пересмотрел всех номинантов и собрал свой топ-5. В этот раз есть несколько проектов, которые меня очень впечатлили. Я прям разбирал их поэранно на референсы. Предлагаю сначала почитать статью. Большая просьба, поставьте лайк, чтобы материал попал в рекомендации. ➡️ https://dsgners.ru/ancora/46381-css-designawards-daydjest-sayt-mesyatsa-may-26 Завтра опубликую всех номинантов мая, чтобы вы могли посмотреть, какие проекты в этом месяце боролись за звание сайта месяца. Приятного чтения! Если что-то особенно понравится — обязательно пишите в комментах и делитесь статьёй. Буду признателен. Обнял. Развиваем насмотренность вместе!

copy-paste-css.com

Рома из Туту рассказывает, как их дизайн-система Kite выросла из старого UI-кита Order. Раньше компоненты жили отдельно на вебе, iOS и Android, дизайн догонял разработку, общей системы токенов не было, а масштабные визуальные изменения превращались в боль. В какой-то момент стало понятно, что просто иметь набор атомарных компонентов мало. Нужны общие правила, связанные токены, понятный процесс и договорённость между дизайном, разработкой и продуктовыми командами. Хорошо видно, что дизайн-система в большой компании это не библиотека кнопок. Это продукт внутри продукта. Там есть архитектура токенов, сборка под разные платформы, документация, миграции, поддержка команд, white-label сценарии, редизайны и постоянный торг между строгостью и гибкостью. Если всё сделать слишком свободным, каждый снова соберёт свой интерфейс. Если всё закрутить слишком жёстко, продуктовые команды начнут обходить систему стороной. Внутри: – Почему UI-кит без связи с дизайном быстро упирается в потолок; – Как Туту перешёл от Dev-to-Design к Design-to-Dev подходу; – Зачем дизайн-системе нужна глубокая система токенов; – Почему готового сборщика токенов может хватить на старт, но не на сложную систему; – Как CSS-переменные помогли с темами, скоупами и платформенными ограничениями; – Зачем Туту сделали собственную генерацию токенов под веб, iOS, Android и MailKit; – Как дизайн-система помогла быстрее делать white-label решения для партнёров; – Почему после запуска важны документация, внедрение в продуктовые команды и автоматизация через ИИ. ➡️ Читать статью ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Того, кто берёт задачу, пишет код и доводит до прода. Предстоит отвечать за клиентскую часть продукта и сквозную доставку фич ⚙️ Что предстоит делать: → разрабатывать SPA на Reac/Vue — компоненты, роутинг, состояние → верстать по макетам (адаптив, кросс-браузер) → интегрировать фронт с API — запросы, кэш, обработка ошибок → делать webview для мобилок, изредка Canvas/WebGL/WebAR → backend/BFF на Node: свои эндпоинты, работа с данными → доводить фичи до прода — ревью, фиксы и поддержка релиза 💬 Взаимодействия: — работаешь в паре с бэкендером по API-контрактам, — реализуешь UX по дизайну и говоришь дизайнеру, что реально, а что — фантастика 📝 Ждём: — уверенный JS/TS + React/Vue с продакшн-опытом — HTML / CSS, адаптивная вёрстка — интеграция REST/GraphQL — базовый Node (эндпоинт/BFF) — cамостоятельно взять фичу и довести её до результата — Middle+ / Senior ➕Будет плюсом: — Canvas/WebGL/Three.js — WebAR, webview и гибриды — опыт с webview и гибридными мобильными приложениями — Docker/CI-CD — опыт агентской работы и ведения нескольких проектов параллельно 🤩 Условия: — удалёнка или гибрид (СПб / Мск) — старт парт-тайм, в дальнейшем фуллтайм — проекты: корпоративный веб, игры, мобильные игры — оплата — по итогам собеседования ⚙️ Кратко о нас REB8T — студия дизайна и геймификации от SETTERS. Помогаем растущим бизнесам и крупным компаниям делать продукты и сервисы понятными и вовлекающими. №1 по геймдизайну в России (РР), ТОП-10 разработчики сайтов в РФ (workspace) откликнуться → job@rebooot.me

Плагин для создания различных диаграмм на основе своих данных из CSV или JSON ‍ Скачать плаги👨🎨 #plugin

Amit Sheen пишет о проблеме, которую легко не замечать по привычке: мы всё ещё часто проектируем адаптивность от ширины экрана, хотя современные интерфейсы давно живут компонентами. Один и тот же блок может оказаться в ленте, сайдбаре, модалке, карточке дашборда или внутри другого компонента. В такой ситуации глобальный брейкпоинт часто отвечает не на тот вопрос. Вместо постоянных условий «если экран шире 768px, сделай так» автор предлагает начинать с более гибких решений в CSS. Сетка может сама набирать столько колонок, сколько помещается. Отступы и шрифты могут плавно меняться через clamp(). Компонент может смотреть на размер своего контейнера, а не всего окна. А медиазапросы лучше оставить для того, где они правда нужны: возможности устройства, наличие ховера, точность указателя, пользовательские настройки и режим отображения. Внутри: – Почему брейкпоинты хорошо работали для страниц, но хуже подходят для компонентных систем; – Как auto-fit и minmax() помогают строить сетки без ручного числа колонок; – Зачем использовать плавные значения вместо скачков между размерами; – Как clamp() заменяет несколько медиазапросов для шрифтов и отступов; – Почему контейнерные единицы полезнее ширины экрана для переиспользуемых компонентов; – Когда контейнерные запросы нужны для реального изменения структуры; – Почему медиазапросы не исчезают, а меняют роль; – Как такой подход делает адаптивный интерфейс проще для поддержки. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

🥉3 место среди разработчиков игр — новый для нас рейтинг ⬆️ В сводном рейтинге поднялись на 16 строк и теперь занимаем 41, дальше — больше ⬆️ +1 позиция вверх и 10 место среди самых награждаемых агентства на Awwwards ⬆️ 13 место среди самых награждаемых агентства на CSSDA ⬆️ +12 позиций и 8 место в среди самых награждаемых агентства на фестивале СРЕДА

В панели Align добавили кнопку одновременного выравнивания объектов по горизонтали и вертикали. Команду можно назначить на клавишу через Edit → Keyboard Shortcuts… → Menu Commands → Object → Align. Чем заменить в старых версиях 1. Записать экшен из двух действий: выровнять по горизонтальному центру + по вертикальному. 2. Те же действия вызвать через скрипт. А если добавить новую команду для v30.5, то получится универсальный скрипт для CS6–2026. (function (){ var aiVers = parseFloat(app.version); if (aiVers >= 30.5) { app.executeMenuCommand('Horizontal && Vertical Align Center'); } else if (aiVers >= 16) { app.executeMenuCommand('Horizontal Align Center'); app.executeMenuCommand('Vertical Align Center'); } })(); В Keyboard Shortcuts вариантов клавиш меньше, поэтому мне скрипт удобнее, так как могу назначить любую комбинацию через сторонние утилиты. Официальный список изменений

В новом материале — результаты второго опен-колла. Его шрифтами были Maregraphe Mega Compressed и Maregraphe Mega Extended студии CSTM Fonts, а темой — Ok. P.S. Сейчас мы принимаем плакаты на июньский опен-колл. Его тема — тревожность, а шрифт —  Flicker Дарьи Карпенко!

➡️ Тестировать сайт по этой ссылке И в целом, напишите, пожалуйста, как вам проект, как думаете, достоен ли он получить награды Awwwards, CSS Design Awards и др.? Готовимся отправлять сайт на все международные конкурсы. Проект сделан Валерией Еолян (@Valeria_Eolyan) и Никитой Кисилевым (@Nikita_Kisilyov) на курсе "Ultra UI: уровень Арт-дирекшн". В этой программе я лично даю фидбэки, плюс есть закрепленный куратор, который еженедельно созванивается с вами по процессу. Такой вот роскошный максимум от Uprock 😊

Моя статья про Лучший сайт месяца на CSSDesignAwards на главной странице Дизайнерс. Рекомендовано площадкой! 🏆🔥❤️

CSS Design Awards. Друзья, давно не публиковал дизайн-дайджесты по CSS Design Awards. Те самые, где разбираю номинантов на сайт месяца. Немного выпал из формата после нового года. Работы было много, разъездов, задач, но это так себе оправдание. Поэтому возвращаю публикации с офигенными проектами. В апреле было 9 номинантов на Сайт Месяца. Я, по традиции, собрал свой топ-5 — проекты, на которые точно стоит посмотреть: по типографике, по смыслам, и по цифровому сторителлингу. В статье можно узнать, кто в итоге забрал награду и посмотреть этот сайт Публикация уже вышла на Designers. 👉🏼 https://dsgners.ru/ancora/45019-dizayn-daydjest-css-design-awards-sayt-mesyatsa-aprel-26 Буду рад, если заглянете — хочется снова попасть в рекомендации. Ссылка выше. Обнял вас и приятного просмотра!

Каждый день получаю бесконечное удовольствие. 8 из 10 человек не верят, что всё это сделано в две руки без команды разработки, девопсов и других ребят) Час времени и список листом готов и в проде) А еще выгрузка откликов в CSV в профиле и чуть аккуратные иконки глазика и избранного. И не надо ни с кем ничего согласовывать 10 раз и обсуждать) Приходите: hirehi.ru и пишите фидбек в чат 😍 ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Когда вы кодите с LLM, проблема обычно не в том, что модель совсем ничего не умеет. Она умеет слишком правдоподобно угадывать. Поставит 12px там, где у вас должно быть 8px, выберет «почти тот» синий, придумает токен, которого в системе нет, и на каждом новом сеансе начнет делать это заново. По отдельности всё выглядит нормально. Вместе получается интерфейс, который расползается уже через несколько итераций. Здесь предлагают довольно жесткую, но рабочую схему: не надеяться на память модели, а дать ей опору в виде спецификаций, закрытого слоя токенов и автоматического аудита. То есть вынести дизайн-систему в структуру, которую LLM может читать как источник истины, а не как намек. Тогда она не выдумывает значения, а берет их из ограниченного набора, а любое отклонение ловится скриптом до ревью. Внутри: – Почему LLM плохо держат дизайн-систему в голове даже в рамках одного проекта; – Какие три ограничения модели быстрее всего разваливают консистентность интерфейса; – Зачем делать отдельные spec-файлы для foundations, tokens, components и patterns; – Почему закрытый слой токенов лучше, чем набор «примерно правильных» значений; – Как аудит по CSS ловит хардкод и не дает визуальному дрейфу копиться; – Зачем связывать инструкции для агента, токены и CI в одну систему; – Почему такой подход особенно важен для больших прототипов и длинных AI-сессий; – Как именно структура дизайн-системы превращается из знания в голове в рабочую инфраструктуру. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы