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

# Spacing Audit Check a layout against a 4/8pt spacing scale, report every value that is off the grid, and snap it to the nearest correct step. The goal is consistent, predictable rhythm that is easy to hand off and maintain. ## The scale Base unit is 8. Use 4 only as a half-step for tight, component-internal spacing. Allowed values: 0, 4, 8, 12, 16, 24, 32, 40, 48, 56, 64, 80, 96. - 8, 16, 24, 32, 48, 64: structural spacing (section gaps, card padding, layout margins). - 4, 12, 20: fine spacing inside a component (icon-to-label, chip padding, tight stacks). - Anything not a multiple of 4 is off-grid and should be flagged. - A multiple of 4 that is not a multiple of 8 at the layout level (e.g. section gap of 20 or 28) should be flagged as "consider 8pt step" but is not a hard error. ## What to check Inspect auto-layout frames and spacing between elements: - Padding inside frames (top, right, bottom, left). - Item spacing / gap between children. - Gaps between sections and between grouped blocks. - Margins around content within a frame. ## How to audit 1. Walk the selected frame (or the whole page if nothing is selected) top-down. 2. For each spacing value, compare it against the allowed scale. 3. For each off-grid value, choose the nearest allowed step. When exactly between two steps, round to the one closer to the surrounding rhythm of that group. 4. Prefer consistency within a group over per-element correctness. If three cards use 14, 16, 16, align all three to 16. ## Rules - Do not change layout structure, sizing behavior (hug/fill), content, or styling. Only adjust spacing values. - Preserve intentional exceptions and do not flag them: 1px borders and hairlines, optical alignment offsets, values driven by hug/fill, and spacing set by a variable or token. - If spacing is already bound to a variable or token, leave it and note it instead of overwriting. - Round icon-to-label and other fine gaps to 4 or 8, not to larger steps. - When a whole group is uniformly off-grid on purpose (e.g. a deliberate 6pt system), flag it once and ask before mass-changing. ## Output 1. Return an audit summary first, before changing anything: - Total elements checked. - A before / after list of every off-grid value, grouped by frame, in the form `Card padding: 14 -> 16`. - Any values you left untouched, with the reason (token, hairline, optical). 2. Apply the fixes only after showing the summary. 3. End with a one-line rhythm note: the dominant step the layout now uses (e.g. "layout now on an 8pt rhythm, fine spacing on 4pt"). ## Do not - Do not resize elements or reflow content to hit a number. - Do not invent a new scale. Stick to the 4/8pt steps above. - Do not touch corner radius, stroke, or type unless the user explicitly asks.

Внимание: это письмо счастья.

Если вы получили его, значит, где-то рядом есть графдизайнер, который прямо сейчас: 🔸 пытается понять, что означает правка «не хватает вау»; 🔸 превращает «сделайте современно, но не слишком» в визуальную концепцию;  🔸 спасает макет от пятого акцентного цвета;  🔸 объясняет, что белое пространство — это не пустота; 🔸 ищет логотип в папке «финал_точно_последний_2»; 🔸 делает задачу «на пять минут», на которую уже ушёл третий день; 🔸 услышал фразу «надо просто сделать красиво» и всё равно сумел сформулировать задачу;  🔸 получил пять разрозненных референсов и нашёл между ними общее; 🔸 заметил лишний пиксель, неправильный перенос и не тот оттенок раньше всех остальных;  🔸 защитил идею, когда хотелось просто открыть четвёртый вариант и согласиться со всеми правками;  🔸 превратил проект из «ну, нормально» в «вот теперь это похоже на нас». Не игнорируйте это сообщение ‼️ Чтобы письмо сработало, перешлите его дизайнеру, чью работу вы цените. Отправьте пост в рабочий чат, коллеге или другу, который знает, что кегль, сетка и отступы — это не мелочи. В течение ближайших 24 часов он может получить: 🔸 понятный бриф;  🔸 одного согласованта, принимающего финальное решение;  🔸 тексты до начала вёрстки;  🔸 один список правок вместо восьми сообщений в разных чатах;  🔸 логотип в хорошем качестве; 🔸 аккуратно собранные исходники;  🔸 правки с аргументами;  🔸 хотя бы один созвон, который можно было заменить сообщением; 🔸 как минимум одно честное: «Спасибо, это сильное решение». Игнорирование письма может привести к появлению в проекте Comic Sans, случайного градиента и просьбы сделать логотип ещё больше. С Днём дизайнера-графика, коллеги! 🎉 [Фабрика Дизайна]
Video is not supported

Готовы ли AI-агенты к реальной работе дизайнера?🤷‍♂🤷‍♂🤷‍♂

Просишь Claude или GPT собрать экран, а в ответ получаешь набор компонентов, который потом все равно приходится переделывать руками. Цвета не из палитры, отступы не по сетке, у кнопок нет состояний. После пары таких попыток легко решить, что агенты пока не готовы к нормальной работе. Но тут есть нюанс: возможно, дело не только в самой модели, а в том, как мы ее используем. 😇 20 августа Pixel Perfect проведут бесплатный эфир: возьмут большую дизайн-систему банка и прямо в Figma попробуют собрать по ней новые экраны. Сначала попробуют собрать экраны без каких-либо настроек, а потом подготовят среду специально под эту задачу. И сравнят два результата. Заодно покажут, как дизайн-система попадает в среду, почему ее нельзя просто закинуть агенту целиком и как потом проверить результат. А еще посмотрят, где агент уже справляется сам, а где все-таки приходится вмешиваться руками. Все скиллы с эфира можно будет забрать и использовать в своих задачах, даже если большой дизайн-системы у вас нет. ↗20 августа, 18:00 мск. Эфир пройдет в телеграм канале, подписывайся!

Закончил версию портфолио 1.0: задизайнил макеты в Figma → завайбкодил в Cursor c моделькой по дефолту Composer 2.5 Fast и с помощью того же Cursor за пару команд залил на GitHub. Ещё подключил простенькую аналитику кстати, тоже в пару команд — кайф.

Определяясь, в чём вайбкодить под свои требования (pixel-perfect, внимание к сетке, отступам и типографике), спросил совета у Gemini, он рекомендовал Cursor. В апреле пробовал ту же задачу с Claude, результат тогда «не зашёл», поэтому появилось сразу два аргумента в пользу Cursor. Общее ощущение напомнило работу с живым фронтендером, что меня реально порадовало: пишешь тз, спеки, описываешь задачу, даёшь гайды и макеты. Получаешь неидеальный макет, но зато где-то додуманный в правильном и нужном русле, а где-то нет и начинаешь точечно править, постепенно приходя к нужному результату. Прям вспомнил, как верстали сайты в 2000-х по макетам из Фотошопа, вот времена то были 😄 Что Cursor сделал круто: ✅ Интегрировал скрипт мобильного меню, который я не успел ему описать в ТЗ, а он додумал его сам, попав в стиль дизайна и даже добавил плавную анимацию раскрытия; ✅ С пары слов понял и добавил мобильную галерею с горизонтальным скроллом; ✅ Делал всё точь-в-точь по описанию там, где оно было, без самодеятельности. Что было НЕ круто: ❌ Border-radius, spacers и margins он никак не хотел собирать в едином ключе на всех страницах, но с пятой попытки сделал (скорее всего я криво напромтил, но в других местах он меня отлично понимал). Попутно, спросил у GPT, может надо было выбрать что-то вместо Cursor и тот посоветовал Claude. Мне пока ближе Cursor, буду экспериментировать ещё. Портфель пока не хочу показывать, хочу ещё допилить кое-что, прастити 😊 🌊🌊
как уйти от тестинга тулов и стать ai-native спецом — делится лид продуктового дизайна ⚪️ лева ловушка
ценный тейк: эволюция начинается тогда, когда ты переходишь к сборке системной ai-архитектуры. разгоним, как применить этот подход на уровне ежедневных задач: ⚪️ память (оцифровка): превращай лучшие кейсы, рефы, правки, чаты и звонки в структурированный набор данных. лева использует для созвонов talat, а на каждый чих — obsidian и маркдаун-файлы. так ии станет ассистентом, который знает твой вкус и контекст проектов. ⚪️ интерпретация (аналитика): заставь ии делать выводы из накопленного. пиши промпты для сверки: пусть модели чекают логику ваших макетов, подсвечивают ошибки в сценариях или анализируют интерфейсы конкурентов, сравнивая их с вашим подходом. ⚪️ агентность (персональные инструменты): собирай микро-агентов под конкретную рутину. например, ресерч-агента (собирать скриншоты рынка), текстового (писать копи в нужном стиле) или арт-директора, который перед сдачей проверит компоненты и отступы по чек-листу. дальше вся эта экосистема уходит в прогнозирование и адаптацию, когда нейронки начнут сами перестраивать процессы под тебя. кстати, подробнее о том, как мы сливали на подписки 300к автоматизируем процессы с нейронками ⚪️ лева недавно рассказал на Сбер Дизайн Фесте.
🏆пока вы смотрели финал, мы разбирали 184 страницы брендбука FIFA World Cup 2026⚽️
8 млрд зрителей. 48 команд. 16 городов. 3 страны. один бренд. как управлять идентичностью такого масштаба? 184 страницы технической документации FIFA — это учебник по системному брендингу. 🌠 главная идея: единство через разнообразие не «melting pot», а #WeAre26 — признание различий как силы. 3 страны, 48 команд, 16 городов. каждый со своей идентичностью внутри единой системы. на стр. 18-19 в разделе «brand positioning» FIFA противопоставляет 2 концепции: «Melting pot» (плавильный котёл) — старая американская идея, где все культуры «сплавляются» в одну однородную массу, теряя свою уникальность. vs. «We Are 26» — новая философия, где различия сохраняются и празднуются. не «все становятся одинаковыми», а «все разные, и это наша сила» цитата из брендбука: A new vision of America — not a melting pot, but a place where different cultures, communities and people are recognized and celebrated. 😜 крутые решения: 😆эмблема-скульптура кубок в ультрареалистичном 3D с встроенными PSD-линками. не абстракция — фотореализм. плюс 138 версий под разные сценарии: от вышивки 15мм до билборда 6м. 😆модульная геометрия 2026 разложен на 48 модулей (по числу участников). квадраты + четверть-круги = отсылка к полю и мячу. 😆16 городов = 16 палитр впервые в истории ЧМ каждый город получил уникальную цветовую идентичность. 😆адаптивная типографика кастомный FWC26™ (6 начертаний) + бесплатный Noto Sans. 😆техническая педантичность ✦ отдельные файлы для печати/вышивки/гравировки/экрана ✦ размерные диапазоны XS-XL с готовыми артворками ✦ реверсивные версии под светлые/тёмные фоны ✦ металлические версии с градиентами (золото/серебро/бронза) ✦ сетка 16 колонок с отступами 4% от длинной стороны ✦ Legal Notice™ масштабируется отдельно (мин. 3pt) 👀 что взять в свои проекты: ➽ вместо однотонных заливок — фирменные паттерны (узнаваемость × 3) ➽ контурные версии логотипа для тиснения и гравировки ➽ чек-лист согласования перед печатью — экономит 40% правок (стр. 172) ➽ регламент: 10 дней на утверждение любого макета — нет хаоса «вчера надо было» ➽ готовые шаблоны презентаций и документов — сотрудники не «творят» в дизайне ⚽️ решения FIFA: ✦ 6 форматов эмблемы под задачи ✦ точные CMYK/RGB/Pantone/RAL/NCS раскладки ✦ артворк-библиотека на все случаи ✦ автоматизация контроля качества результат: дизайнер в Мехико и подрядчик в Ванкувере создают материалы в единой стилистике без вашего участия. 📌 главный вывод брендбук — это не расход. это инфраструктура. бренд без системы = маркетинг без аналитики = продажи без CRM. стартап с выручкой $500K и размытым брендом выглядит на $50K. тот же стартап с системным брендом — на $5M. FIFA вкладывает миллионы в 184 страницы правил не просто так — каждый $ в систему возвращается десятью в узнаваемости, лицензионных доходах и стоимости прав. вопрос не «нужен ли брендбук?» вопрос: «сколько я теряю каждый месяц без него?» FIFA управляет идентичностью на 8 млрд зрителей через жёсткую систему. 😋 а мы в aic.ru — создаём системы, которые превращают хаос в прибыль! ➡️ скачать брендбук можно в комментариях
Изображение канала: Retro Figma
Плагин «DesignDoc» by gm Плагин визуализирует интервалы, поля, отступы и размеры компонентов
🏁 Установить плагин 🏁 #plugin
Изображение канала: Дизайнер, привет
🧱 Адаптивность не обязана держаться на брейкпоинтах
Amit Sheen пишет о проблеме, которую легко не замечать по привычке: мы всё ещё часто проектируем адаптивность от ширины экрана, хотя современные интерфейсы давно живут компонентами. Один и тот же блок может оказаться в ленте, сайдбаре, модалке, карточке дашборда или внутри другого компонента. В такой ситуации глобальный брейкпоинт часто отвечает не на тот вопрос. Вместо постоянных условий «если экран шире 768px, сделай так» автор предлагает начинать с более гибких решений в CSS. Сетка может сама набирать столько колонок, сколько помещается. Отступы и шрифты могут плавно меняться через clamp(). Компонент может смотреть на размер своего контейнера, а не всего окна. А медиазапросы лучше оставить для того, где они правда нужны: возможности устройства, наличие ховера, точность указателя, пользовательские настройки и режим отображения. Внутри: – Почему брейкпоинты хорошо работали для страниц, но хуже подходят для компонентных систем; – Как auto-fit и minmax() помогают строить сетки без ручного числа колонок; – Зачем использовать плавные значения вместо скачков между размерами; – Как clamp() заменяет несколько медиазапросов для шрифтов и отступов; – Почему контейнерные единицы полезнее ширины экрана для переиспользуемых компонентов; – Когда контейнерные запросы нужны для реального изменения структуры; – Почему медиазапросы не исчезают, а меняют роль; – Как такой подход делает адаптивный интерфейс проще для поддержки. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение канала: Дизайнер, привет
AI и большая дизайн-система
Знакомая боль: просишь агента собрать экран по твоей ДС. На первый взгляд всё аккуратно. Потом смотришь ближе: компонент не из библиотеки, цвет левый, отступы странные, состояние придумано на ходу. И уже проще руками пересобрать, чем чинить за ним. С маленькой библиотекой это ещё можно пережить. В большой ДС начинается цирк: сотни компонентов, варианты, токены, состояния, правила. Команда годами всё это собирала, а агент ведёт себя так, будто открыл первый попавшийся файл и начал импровизировать. Без подготовки он просто угадывает. Ему нужно нормально объяснить систему: где компоненты, какие состояния существуют, какие правила важны, что брать в первую очередь. Иначе зрелая дизайн-система превращается для AI в красивую папку, которую он почти не понимает. 😇 24 июня в 18:00 мск Даниил Шишко из Pixel Perfect покажет, как это настроить. Возьмёт одну из самых больших публичных дизайн-систем, подключит её к агенту и соберёт экраны прямо на эфире. Тем, кто будет онлайн, Даниил отдаст скилл, который сканирует дизайн-систему и готовит её к работе с агентом. То есть можно будет взять свою ДС и повторить у себя. Если у вас агент тоже каждый раз «немного дизайнер» и тащит в макет свои компоненты, я бы посмотрел. AI-навыки уже всё чаще всплывают в вакансиях, и лучше разобраться с этим сейчас, пока все ещё пытаются понять, как оно вообще должно работать. 🔠 Эфир в канале 🔠 Эфир в канале
Изображение канала: Retro Figma
В Figma есть возможность быстро изменять значения полей, таких как размер, отступы, углы и другие, с помощью шорткатов: удерживайте Shift и нажимайте стрелки вверх/вниз.
Video is not supported
Изображение канала: Retro Figma
Полезный шорткат
Нажми Shift + M, чтобы измерять отступы. Так проще настроить высоту строки и размеры авто-лейаута.
Video is not supported
Изображение канала: Дизайнер, привет
#12 Фигма Make лезет в реальный код
Фигма 28 мая выкатила важный апдейт Make: теперь инструмент можно подключить к локальной кодовой базе. Открываешь существующий проект, выбираешь элемент на экране, правишь свойства, отступы, цвет, размер, раскладку, а агент уже находит нужное место в коде и вносит изменения. Пока это ограниченная бета в десктопном приложении для Mac. И сама Фигма честно пишет, что лучше всего это подойдёт дизайнерам, у которых уже есть доступ к кодовой базе компании. Раньше вайбкодинг в дизайне чаще был про быстрый черновик. Собрал экран, показал идею, выбросил половину, что-то утащил в работу. Вроде полезно, но всё равно чуть отдельно от настоящего продукта. А теперь Фигма Make пытается работать с тем местом, где продукт уже живёт. Самый важный вопрос теперь: кто имеет право двигать кнопку, если эта кнопка уже в коде? Потому что визуальная правка реального интерфейса звучит очень соблазнительно. Увидел, что отступ кривой, выбрал блок, поправил. Текст не тот, поменял. Цвет уехал, вернул. Не надо писать разработчику «можешь тут 8 пикселей вместо 12», ждать, объяснять, показывать скрин, потом снова смотреть, что получилось. Но чем ближе дизайнер подходит к коду, тем быстрее появляются взрослые вопросы: 1. кто проверяет такие изменения 2. что считается безопасной правкой 3. где начинается логика, а где просто внешний вид 4. кто отвечает, если агент поменял не тот компонент 5. как откатиться, если всё поехало Фигма это понимает, поэтому делает не «пуш в прод», а нормальный путь через разработку. Изменения сначала лежат как локальные коммиты. Можно создавать ветки, смотреть историю, откатываться, а потом открыть пулл-реквест, чтобы инженеры проверили правку как обычное изменение в коде. И это, по-моему, правильная часть новости. Не сам факт, что дизайнер может подвигать блок в живом проекте. А то, что Фигма пытается встроить это в нормальный процесс разработки. Через ветки, коммиты, проверку и возможность отката. Потому что без этого будет весело примерно два дня. Потом кто-то визуально поправит карточку, агент заденет общий компонент, уедет ещё десять экранов, разработчик откроет код и спросит, кто вообще это сделал. Но я бы не хотел, чтобы это стало режимом «дизайнеры теперь сами чинят фронт». Скорее это должно быть как быстрый слой для понятных UI-правок. Поправить отступ. Проверить состояние. Подкинуть вариант. Открыть пулл-реквест. Дальше уже обычная проверка. Ещё важная штука: Фигма разрешает копировать экраны из Make обратно на холст как слои, обсуждать с командой и потом приносить решения назад в код. Это уже похоже на нормальный круг: продукт живёт в коде, команда думает на холсте, изменения возвращаются через понятный процесс. Если Фигма сможет удержать этот круг без бардака, будет сильно. Потому что дизайнеру часто не нужен ещё один генератор красивого прототипа. А вот дизайн-ревью проводить и за качеством прода следить гуд, ибо разработчики лажают оч часто. ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение канала: Дизайнер, привет
🤖 Почему ИИ-помощник каждый раз заново ломает ваш UI Kit
С AI в разработке почти у всех один и тот же цикл. В первой сессии он быстро собирает красивый экран, во второй начинает придумывать новые токены, в третьей путает отступы, а к десятой у вас уже ощущение, что продукт собирали три разные команды. Проблема не в том, что модель «плохая», а в том, что она не читает дизайн-систему так, как читает ее человек. В статье предлагают довольно практичный подход: сделать дизайн-систему понятной для LLM через спецификации, закрытый слой токенов, обязательный аудит и инструкции для каждой новой AI-сессии. То есть не надеяться, что модель сама догадается, какой у вас синий, какой радиус у кнопки и как должен собираться layout, а дать ей это в явном виде. На примере с Atlassian после такого подхода убрали 418 хардкодных значений из 28 файлов и свели их к системе токенов и спецификаций. Внутри: – Почему LLM не мыслят дизайн-системами и постоянно начинают с нуля; – Как из-за этого в прототипах копятся сотни мелких визуальных расхождений; – Зачем проекту нужны spec-файлы, которые модель читает в каждой сессии; – Почему закрытый слой токенов лучше, чем «разумные» догадки модели; – Как аудит ловит хардкодные цвета, отступы и другие нарушения до коммита; – Зачем связывать AI-инструкции, токены и CI в одну систему; – Как устроена структура спецификаций: foundations, tokens, components, patterns; – Почему такой подход особенно важен для больших прототипов и длинных AI-итераций. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение канала: Tilda Publishing News
🆕 Рубрика «Вопрос-ответ»
В журнале Tilda Education появилась новая рубрика «Вопрос-ответ». Теперь вы можете не только изучать образовательные материалы, но и задавать интересующие вас вопросы экспертам. Как это работает: вы задаёте вопрос, а мы передаём его специалисту, который разбирается именно в вашей теме. Получаем ответ и публикуем его в рубрике: https://tilda.education/questions 🚩 Небольшое уточнение: Вы можете задавать вопросы на темы: веб-сайтов, дизайна, маркетинга, фриланса и предпринимательства. Если у вас есть технический вопрос — лучше сразу обратиться в поддержку. ✅«Почему другим дизайнерам платят больше», «Какую стратегию продаж выбрать», «Стоит ли нанимать маркетолога» ⛔️ «Что делать, если не работает сайт», «Как настроить отступы в этом блоке», «Что делать, если я не могу зайти в личный кабинет»
Изображение канала: Дизайнер, привет
🤩 Дизайн-токены это не формальность для дизайн-системы, а способ не утонуть в хаосе потом
Пока в проекте живут цвета вроде #0055FF и отступы, прописанные руками, все кажется нормальным ровно до первого большого изменения. Потом начинается боль: что где используется, что можно трогать, как менять тему, почему один и тот же цвет называется тремя разными способами. В этот момент токены перестают быть «темой для системщиков» и становятся базовой гигиеной продукта. Дима очень хорошо раскладывает это через три слоя: примитивы, семантику и компонентные токены. Самое полезное здесь не теория, а логика: семантика отвечает на вопрос «зачем», компонентный слой на вопрос «где», а правильный нейминг делает систему понятной и для дизайнеров, и для разработчиков. Плюс есть нормальный блок про темную тему, deprecated-токены и версионирование, то есть не только про создание, но и про жизнь системы после запуска. Внутри: – Как устроена трехслойная архитектура токенов и зачем нужен каждый слой; – Чем семантические токены отличаются от компонентных; – Как собирать нейминг от общего к частному, чтобы не путаться потом; – Какие категории и свойства чаще всего используются в системе токенов; – Почему состояние default обычно не нужно писать явно; – Как токены помогают нормально поддерживать светлую и темную темы; – Что делать с устаревшими токенами, чтобы не ломать прод; – Почему без токенов любая масштабируемость быстро превращается в технический долг. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение канала: Дизайнер, привет
🧪 Дизайн-ревью это момент, когда фича либо становится цельной, либо рассыпается на мелочах
На макете всё почти всегда выглядит хорошо. Проблемы начинаются уже в реализации: экран открылся не той анимацией, скелетон мигнул, чекбокс нажимается только в крошечной зоне, тень обрезалась, текст поехал, в темной теме картинка стала чужой. По отдельности это мелочи. Вместе именно они создают ощущение сырого продукта. В этом гайде ребята из Т-Банка хорошо разложили, как смотреть на дизайн-ревью системно, а не просто сверять экран с макетом. Не только статичное состояние, но и весь опыт целиком: переходы, загрузка, скролл, нажатия, выходы с экрана, типографика, иконки, поведение в светлой и темной теме. Внутри: – Как проверять переход к экрану и не путать типы презентации; – На что смотреть в загрузке: лоадеры, скелетоны и смену состояний; – Почему скролл и нажатия часто ломают впечатление от готовой фичи; – Какие жесты выхода должны работать по умолчанию; – Как сравнивать реализованный экран с макетом через скриншоты в Figma; – Что проверять в отступах, размерах, скруглениях и тенях; – Какие ошибки чаще всего всплывают в цветах и темной теме; – Почему типографика и редполитика тоже часть дизайн-ревью; – Что важно проверить в иконках, графике и видео до релиза. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение канала: Дизайнер, привет
💚 Duolingo обновили основные вкладки и подняли вовлеченность без просадки учебных метрик
По отдельности вкладки работали нормально, но вместе интерфейс разваливался на детали: разные заголовки, слабая иерархия текста, неровные отступы. Критичной ошибки нет, но ощущение цельного продукта теряется именно так. Лиа Ли и Локеш Фулфагар показали, как команда перешла от разрозненных экранов к единой системе. Сначала сделали короткий спринт с четырьмя крайними направлениями, потом собрали рабочий баланс между целостностью и задачей конкретной вкладки. Результат уже вышел на iOS, Android в процессе. Внутри: – Какие четыре направления тестировали на старте: Punchy, Soft, Modular, Flat; – Почему единый стиль без функции может ухудшать восприятие; – Как они балансировали простоту интерфейса и ясность сценария; – Как собрали систему заголовков по уровням важности вкладок; – Как пересобрали типографику в минимальный, но управляемый набор стилей; – Почему убрали лишние контейнеры и сделали ставку на осознанные отступы; – Как внедрили совместный QA с разработкой и проверку через дизайн-оверлеи; – Какие продуктовые результаты получили после релиза на iOS. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение канала: Дизайнер, привет
🧩 Figma Make не заработает нормально, пока не подключите библиотеку компонентов
Команды редко тормозят на этапе рисования экранов. Обычно проблема в другом: нужно быстро проверить идею, а потом не разгребать хаос. Сделали экран в Фигме, ушли в AI-инструмент, получили прототип, вернулись и начали менять случайные кнопки и отступы на свои. Полдня ушло. Ромина Кавчич хорошо объясняет, почему так происходит. Проблема не в AI, а в потере контекста. Figma Make дает результат, когда работает внутри вашего файла с дизайн-системой: компонентами, вариантами, переменными и правилами нейминга. Плюс можно подтянуть требования и контент из Notion, GitHub, Jira и других источников, чтобы прототип собирался не по догадкам. Внутри: – Почему без подключенной библиотеки Figma Make почти всегда генерирует общий и нерелевантный UI; – Что нужно сделать перед первым промптом: включить библиотеки, выписать точные имена компонентов, определить границы прототипа; – Как писать промпты, чтобы инструмент использовал ваши компоненты и состояния, а не придумывал новые; – Зачем сразу требовать состояния загрузки, пустого экрана, ошибки и успеха; – Как итерироваться быстрее: править по одному изменению за раз и не копить правки в один запрос; – Как подключать внешний контекст из Notion и GitHub вместо копипаста требований; – Когда есть смысл использовать живые данные и API, чтобы проверить плотность контента и крайние случаи; – Какие варианты выхода есть после сборки: оставить в Фигме, экспортировать код как референс или дать демо-ссылку. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение канала: Как это сверстано
Рабочие истории
Верстаю вторую книжку Андрея Шапиро, называется «Рабочие истории». О макете: 1. Первая книжка, «Карта процесса-опыта», получилась немного похожей на альбом, потому что сами карты потребовали увеличенного формата. В этот раз автор захотел, чтобы книжка была похожа на книжку и «честный труд». 2. Основной текст идет сплошняком, без искусственного разделения на страницы и развороты. Для монолитности я заменил швейцарский абзац на абзацный отступ и, немного посомневавшись (гротеск всё-таки), выключил основной текст по ширине. При этом «дополнительные» тексты внутри основного — примеры и списки — выровнены по левому краю. 3. На каждой странице есть широкое левое поле, куда встают заголовки, сноски, нумерация примеров (собственно «историй»), картинки и некоторые другие блоки. 4. От прошлого макета остался шрифт Formular, текстовые стили, ну и общий вайб (боже, что я несу). Планируем сдать в печать в апреле-мае.
Изображение поста
Изображение канала: Yuloo Studio | Инвест.дизайн
Как не ошибиться с расположением мебели в квартире?
Кажется, что это простейшая задача — ну что мы, в самом деле не разберемся, куда кровать поставить? А не понравится, так передвинем! Но реальность быстро возвращает на землю. Когда вы начинаете раскладывать мебель в реальных габаритах, всплывают ограничения: розетки оказываются за шкафом, бра некуда подключить, выключатель перекрывается пеналом, а проход между диваном и кухней внезапно превращается в «боком протиснуться». Это как покупать продукты для сложного блюда без списка — вроде взяли то что нужно, но ошиблись с % жирности у масла или сливок, и результат совсем не тот. Да и передвинуть мебель часто не так-то просто — если уже выведены розетки и светильники, уложен тёплый пол, заказана встроенная мебель или кухня — любое смещение тянет за собой переделки, дополнительные расходы и потерю времени. На эту тему у меня есть два полезнейших материала в Потрясных находках: урок по теории планировок на 1,5 часа и гайд с перечнем стандартного наполнения каждой комнаты, чтобы ничего не забыть. Буквально как список покупок В уроке вы узнаете: • какие принципы лежат в основе эргономичной планировки, а не «интуитивной расстановки»; • какие минимальные проходы и отступы действительно критичны; • как учитывать открывание дверей, фасадов и сценарии движения по квартире; • как правильно привязать мебель к электрике и освещению; • как читать план БТИ и определить масштаб помещения, даже если у вас на руках только базовый чертёж; • как проверить планировку до начала ремонта, чтобы не платить за переделки. И также список приложений, в которых вы можете применить знания и сделать планировку понятной для строителей У всех есть бесплатный доступ, а также платная подписка для использования широкого функционала. Подойдет как для новичков, так и для среднячков и старичков Присоединиться к каналу можно по ссылке - https://u.to/TJOpIA А в комментариях оставлю список таймкодов из полного видео, чтобы вы увидели, насколько много вопросов закрывает ОДИН урок из канала 👇🏻
Video is not supported