🇦🇪 Дизайн-система для арабского языка

Александр Щеблыкин рассказал, как команда 2ГИС разработала мультиязычную дизайн-систему для рынков Ближнего Востока. Оказалось, что арабский интерфейс — это не просто перевод текста, а полная смена логики: всё читается справа налево, иконки отражаются, а знак вопроса пишется зеркально.

Саша обнаружил множество неочевидных нюансов. Например, арабский текст визуально меньше латиницы, поэтому его нужно увеличивать на 10%. Цифры при этом читаются слева направо, даже внутри арабского текста. А слово «Назад» в ОАЭ и Саудовской Аравии пишется по-разному, хотя это один язык.

Внутри:
– Почему арабский текст нужно увеличивать на 10% для визуальной компенсации;
– Какие иконки отражать, а какие оставить как есть;
– Как переменные позволяют переключать интерфейс одним кликом;
– Почему запятая в арабском повёрнута хвостиком вверх;
– Как организовать словарь переводов для всех проектов;
– Зачем нужны отдельные коллекции иконок для LTR и RTL.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы

🔔 Inspiration #153

Подборка лендингов и сайтов для вдохновения на предстоящую неделю 🔥

– metamask.io
– jordanrosenberg.com
– craftwork.design/studio
– 247artists.com
– yummygum.com

———

– nataliealmosa.ca
– madebynull.com
– friend.com
– altergeneva.com
– ryry.io

———

– tally.so
– finethought.com.au
– thesmile.tv
– dedcool.com
– multi.app

———

– aaa24.a24films.com
– heynds.com/en
– nlc.obys.agency
– tux.co/en
– hellodani.co

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы

👥 Как Авито превратили матрицу DACI в продукт для всех команд

Команда Авито столкнулась с проблемой: сотрудники не понимали свои роли в проектах. Дизайнеры не знали, что должны сами утверждать стиль, редакторы удивлялись, почему текст написали без них. Решением стала матрица DACI — таблица с четырьмя ролями: Driver (организатор), Approver (заказчик), Contributor (исполнитель) и Informed (информированный).

Первая версия получилась слишком сложной: 70+ процессов в громоздкой таблице. Команда переработала концепцию: вместо ролей в основу положили должности (их проще найти), а для визуальной метафоры выбрали глаза разной формы для каждой роли. Проект превратился в самостоятельный продукт с лендингом, 3D-персонажами и возможностью создать свою матрицу.

Внутри:
– Почему 36 сотрудников из 6 департаментов провели воркшопы по Double Diamond;
– Как переход от ролей к должностям упростил поиск информации;
– Зачем каждой роли нарисовали глаза разной формы;
– Как промоматериалы с 3D-персонажами помогли продвижению;
– Почему древние люди на лендинге ловят мамонта;
– Какие сценарии кастомизации предусмотрели для других компаний.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы

Как я пилю свой продукт. Часть 18

Последний месяц был долгим в плане кода по двум причинам. Первая: я в путешествии, вторая: делал hirehi PRO.

Сервис полгода был бесплатным для всех без ограничений. Были доступны все функции (мэтч, генерация сопроводительных, проверки сиви и так далее). Этим воспользовались тысячи людей и это очень радует. Но все эти процессы затратные и требуют значительных ресурсов. Поэтому hirehi теперь можно купить. Он остаётся бесплатным для вакансий, имеет некоторые лимиты для фич, но если вы хотите пользоваться без ограничений и получать доступ ко всем новым фичам (которые будут требовать затрат), то можно купить PRO версию.

Это был челлендж для меня, потому что я никогда такого не делал с кодом. Нужно было интегрировать платёжный экварйинг, всю апишку, предусмотреть кейсы оплат, сроки, обнуление, активацию и так далее. Супер сложная задачка для меня и аишки, но мы справились. И ещё нужно было предусмотреть массу состояний для бесплатных лимитов, а когда они кончаются показывать другие блоки в зависимости от этого. Ну и отрисовать новый фронт для подписки, красивую модалку оплаты, виджеты PRO и так далее.

Вчера, когда я деплоил, было очень боязно, что всё отлетит (хоть я и прогнал на тест-стенде все сто раз), но все работает и я этому очень рад. Тут нет планов заработать миллионы, это скорее больше как донат для меня и жизни сервиса и челлендж такое сделать.

Плюсом к этому я сделал раздел оплат для себя в админке и теперь там есть аналитика, статусы оплат, можно выдавать, можно обнулять. И да, никакой автоматической подписки нет. После оплаты ничего не спишут неожиданно, да и я не стал с этим заморачиваться пока.

Сейчас небольшая передышка и дальше буду уже делать продуктовые фичи, улучшать UI и исправлять баги 😍

Приходите смотреть вакансии, рассказывайте друзьям и знакомым, кто ищет работу) Я продолжаю получать много позитивного фидбека в личку и это безумно радует.

Если у вас есть что сказать, фидбек, пожелание, ошибка или что сервис не очень (и такое есть тоже), приходите в личку

➡️ Смотреть вакансии
➡️ Смотреть вакансии
➡️ Смотреть вакансии

ч.17 | ч.19

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы

🎙️ Как Perplexity создаёт голосовые интерфейсы будущего

Гуннар Грей, ведущий дизайнер мобильных устройств Perplexity, рассказал о создании голосового режима, который прошёл через три крупные итерации. От простой синусоидальной волны команда дошла до сферы из частиц, созданной с помощью металлических шейдеров, которая меняет форму и цвет в зависимости от состояния системы.

Главное открытие: в эпоху AI граница между дизайном и инженерией размывается. Грей научился писать шейдеры с помощью Cursor, хотя у него нет технического образования. Он подчёркивает, что инструменты вроде Cursor снижают барьер входа в программирование, позволяя дизайнерам задавать вопросы и получать объяснения прямо в процессе работы.

Внутри:
– Почему кнопка «нажать, чтобы говорить» решила проблемы с задержкой;
– Как визуализатор из точечной сетки создаёт обратную связь;
– Зачем дизайнеру учиться писать код и работать с шейдерами;
– Почему специалисты широкого профиля ценятся в стартапах с AI;
– Как голосовой режим работает в режиме громкой связи;
– Какие инструменты помогают быстро прототипировать динамичные интерфейсы.

➡️ Смотреть интервью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы

😍 Как правильно работать с UI/UX-дизайнерами и не сломать продукт

Сергей Галан из Utopia и Елена Рнае из Софториума создали подробный гайд по взаимодействию с дизайнерами. Главная мысль: 80% проблем в проектах возникают не из-за отсутствия таланта у дизайнеров, а из-за сбоев в коммуникации между командой и постановщиками задач.

Авторы разбирают частые ошибки: менеджеры перегружают senior-дизайнеров контролем или бросают джунов без опоры, ставят задачи в духе "красиво как у Apple", не фиксируют критерии готовности. В результате проект буксует, а команда получает красивые, но технически нереализуемые макеты или работающий, но неудобный интерфейс.

Внутри:
– Как оценить уровень дизайнера и выбрать модель взаимодействия;
– Структура эффективного брифа с расшифровкой референсов;
– Почему архитектору важно видеть дизайн на старте;
– Что проверять на демонстрации с участием всей команды;
– Какие состояния интерфейса должен передать дизайнер;
– Чем плохая работа с компонентами обернётся дорогим обслуживанием.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы

😮 Победа DNS над интерфейсным хаосом

Света, дизайнер интерфейсов DNS, рассказала о трансформации внутреннего продукта DNS REDACTOR. На одной странице насчитывалось 6 типов кнопок, каждый дизайнер рисовал страницы по-своему, а разработчики верстали как считали нужным. За 6 месяцев команда создала полноценную дизайн-систему, которая изменила не только интерфейсы, но и процессы работы.

Самым сложным компонентом оказался Select, который пришлось переделывать 4 раза. Зато благодаря ему появились подробные гайды использования с описанием всех возможных сценариев. А новый компонент Aside-header освободил пространство сверху экрана, что критично для продукта, где основа интерфейса — таблицы.

Внутри:
– Почему внутренние продукты — это лицо компании внутри неё;
– Как семантические цвета с альфа-каналом решили проблему 50 оттенков серого;
– Зачем фильтры переместили в шапку таблицы;
– Какие требования к макетам стали обязательными;
– Почему визуальное тестирование добавили в процесс QA;
– Как система статусов помогает управлять компонентами.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы

🔔 Inspiration #154

Подборка лендингов и сайтов для вдохновения на предстоящую неделю 🔥

– generalproximity.bio
– clay.earth/start
– vvisual.biz
– junioneda.com
– documenso.com

———

– native.inc
– supermotion.co
– lo2s.com
– wattenberger.com
– kenfulk.com

———

– iessi.fr
– coder.com
– thisispam.com
– nativemind.app
– studiovanadium.com

———

– clutch.security
– neverhack.com/en
– dock.us/product/order-forms
– shop.a24films.com
– nativecontent.com

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы

🆒 Почему азиатские интерфейсы такие перегруженные

Автор исследовал, почему интерфейсы в Азии кардинально отличаются от западных. Оказывается, дело в холистическом мышлении: азиаты воспринимают мир как единое целое, а не набор отдельных элементов. То, что европейцу кажется хаосом, для азиата это удобный и информативный интерфейс, где чем больше информации, тем выше доверие к продукту.

В статье разбираются суперприложения вроде WeChat, который заменяет китайцам банк, госуслуги, такси и десятки других сервисов. Или японский Yahoo! с дизайном из нулевых, который до сих пор лидирует на рынке. Автор объясняет это через призму культуры контекста: в Азии не принято говорить прямо, поэтому пользователям нужно больше информации для принятия решений.

Внутри:
– Почему в Китае достаточно трёх приложений для всей цифровой жизни;
– Как красные конверты стали универсальным паттерном бонусов;
– Зачем японские лендинги добавляют боковые меню навигации;
– Почему корейцы ищут информацию в отзывах, а не на сайтах;
– Как QR-коды заменили терминалы оплаты во всём Китае;
– Почему российский UX движется в сторону азиатского.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы

🎯 Оживляем интерфейс с помощью Lottie-анимаций

Саша Гончаров из 2ГИС рассказал, как они добавляют анимации в картографическое приложение, сохраняя баланс между красотой и производительностью. Оказывается, при работе с интерфейсными анимациями нужно забыть 90% возможностей After Effects и научиться создавать магию с помощью простых шейпов и градиентов.

Главное правило, которое вывел автор: «дели на два». Если анимация кажется готовой, нужно уменьшить все эффекты вдвое. В интерфейсах классические принципы анимации работают не в полную силу, и то, что хорошо смотрится в рекламе или играх, будет раздражать при ежедневном использовании приложения.

Внутри:
– Почему из всех инструментов выбрали именно Lottie;
– Как различать утилитарные и эмоциональные сценарии анимации;
– Почему растровые изображения пришлось перерисовывать в векторы;
– Как один кадр анимации может занимать 20 мегабайт видеопамяти;
– Зачем нужны градиенты для создания иллюзии объёма и теней;
– Как сделать бесшовный переход между слайдами в онбординге.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы

📱 Генерация мобильных интерфейсов с помощью ИИ

Владимир Макеев из Surf протестировал генерацию UI-компонентов в Claude 4 по методу one-shot UI. Простые компоненты вроде кнопок ИИ создаёт без ошибок, экономя до 80% времени. Сложные интерфейсы требуют доработки, но всё равно ускоряют работу на 25-30%.

Главное открытие: без контекста ИИ выдаёт хаотичный код. Модель не понимает, что делает, а просто оперирует вероятностями. Поэтому нужен метод one-shot UI: загрузить максимум ограничений сразу, чтобы получить чистый результат с первой попытки. Автор описывает пять шагов: от загрузки правил и подключения линтеров до использования MCP для Figma и golden-тестов.

Внутри:
– Почему без контекста ИИ открывает десятки файлов и выдаёт случайный результат;
– Как правила и линтеры доводят код до стандарта команды;
– Зачем нужен master rule для повторяющихся задач;
– Как MCP для Figma передаёт точные стили и размеры;
– Почему golden-тесты помогают достичь pixel perfect;
– На сколько процентов ИИ ускоряет работу с разными типами задач.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы

💭 Почему проектирование ужасных решений делает вас лучшим дизайнером

Автор в статье предлагает контринтуитивный подход: намеренно создавать плохие решения, чтобы лучше понимать границы проблемы. Когда его команда застряла с переработкой сложного воркфлоу, он попросил создать намеренно ужасную версию. Неожиданно в «плохих»решениях обнаружились элементы, решающие проблемы, которые команда даже не идентифицировала.

Главная идея основана на эффекте якорения из психологии. Без плохого референса невозможно понять, что делает решение действительно хорошим. Автор приводит систематические вопросы для создания плохого дизайна: что сделает интерфейс полностью непригодным, как спрятать ценность, как разрушить доверие пользователей.

Внутри:
– Почему изучение только «приемлемых» решений создаёт ложную эффективность;
– Как эффект якорения работает в дизайне;
– Шесть вопросов для систематического создания плохих решений;
– Чем границы отличаются от ограничений в дизайне;
– Почему избегание риска убивает инновации;
– Как внедрить метод за 7 минут в следующем проекте.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы

🔔 Inspiration #155

Подборка лендингов и сайтов для вдохновения на предстоящую неделю 🔥

– springsummer.dk
– euveka.com
– hhhusher.com
– voicenotes.com
– intercom.com/support-for-customers/ai-agent

———

– menuxl.fr
– nbijan.design
– moremud.co
– techspeed.com
– nanuelectrics.com

———

– year-in-review.inthememory.com
– mallardandclaret.com
– kast.xyz
– shopify.com/editions/winter2023
– sketch.com/blog

———

– linear.app/quality
– martinbriceno.xyz
– dapper.agency
– lightspark.com
– svz.io

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы

🧠 Как бренды используют когнитивные искажения в дизайне

Команда KISLOROD разобрала популярные когнитивные искажения на примерах Apple, IKEA и других брендов. Эффект IKEA заставляет людей выше ценить мебель, которую они собрали сами — в эксперименте участники переплачивали за собранные игрушки Lego, думая, что другие оценят их так же высоко.

Apple использует сразу несколько приёмов: эффект эстетичности (красивый дизайн кажется более удобным) и эффект приманки. iPhone 15 с устаревшими характеристиками продаётся рядом с iPhone 14, создавая иллюзию выбора. При этом каскад доступной информации через постоянные упоминания в СМИ закрепляет убеждение в превосходстве бренда.

Внутри:
– Почему люди переплачивают за товары, которые частично создали сами;
– Как Apple продаёт старые технологии под видом инноваций;
– Зачем маркетплейсам социальные доказательства и отзывы;
– Почему резкий редизайн может уронить конверсию на 80%;
– Как работает эффект якоря со старой ценой;
– Почему потеря 500 рублей обиднее, чем находка 1000.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы

Анимация в Фигме

Если вы не знали, как подступиться к тому, чтобы начать анимировать макеты, а АЕ для вас космолёт, который никак не освоится, то решение есть — Magic Animator

Они ещё тут и обновились сегодня до версии 2.0

Что нового:
–Генерация стала быстрее;
– Качество анимаций лучше;
– Обновили интерфейс;
– Можно получить бесплатные кредиты;

Как работает:
Один клик = 4 варианта анимации. Никаких промптов и сложностей. Потом можно отредактировать результат в полноценном редакторе.

Короче, пушка. Без костылей каких-то

➡️ Пробовать тут

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы

💫 Микропроцессы в дизайне: как Voximplant внедрили дизайн-ревью без страха

Команда Voximplant рассказала о микропроцессах — небольших адаптациях больших методологий под нужды конкретной компании. Главным страхом при внедрении дизайн-ревью было создание «бутылочного горлышка»: один дизайнер в отпуске, второй болеет, третий завален, а релиз фичи задерживается.

Решением стал компромиссный микропроцесс «Пост дизайн-ревью». Если проверка не происходит за 24 часа или есть острая бизнес-необходимость, задача идёт в продакшен, но автоматически создаётся тикет на проверку в следующем спринте. В результате 95% задач проходят обычное ревью, 100% проверяются в итоге, а количество багов на продакшене сократилось в 1,5 раза.

Внутри:
– Почему процессы команды это её внутренние продукты;
– Как Intercom адаптировал JTBD через Job Stories;
– Какие страхи мешают внедрению дизайн-ревью;
– Как работает алгоритм «Пост дизайн-ревью»;
– Почему 1 дизайнер успевает делать ревью для 5 фронтендов;
– Какие процессы появились после успешного внедрения.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы

Точка Банк ищет арт-директора на их главный сайт

Точка Банк — финтех-компания, которая создаёт онлайн-банк и экосистему сервисов для бизнеса. 

📍 Сколько платят и формат
От 300 000 ₽. Удалёнка или работа в офисе, они есть в 20 городах по всей стране. 

Сайт Точка Банка — главный канал привлечения, развиваемый как самостоятельный продукт. Ищут арт-директора, который возьмёт на себя визуальную стратегию сайта и поведёт команду вперёд.

✔️ Что делать: 
— ​​Создать и внедрить новый визуальный стиль сайта, используя подходы эмоционального дизайна. 
— Развивать приёмы, которые будут повышать конверсию и узнаваемость бренда. 
— Контролировать визуальную целостность всех создаваемых страниц.
— Координировать дизайн-процессы и менторить команду дизайнеров. 

⭐️ Ты подойдёшь, если:
— Есть опыт в дизайне от 5 лет, опыт в роли арт-директора или дизайн-лида. 
— Умеешь создавать визуал, который вызывает «вау-эффект», и превращать его в продукт, работающий на бизнес. 
— Разбираешься в UX/UI, адаптивном дизайне и основах вёрстки. 
— Знаешь, как выстраивать процессы, оптимизировать работу и организовывать взаимодействие с другими командами. 

➡️ Узнать больше и откликнуться
➡️ Узнать больше и откликнуться
➡️ Узнать больше и откликнуться

🤖 Как использовать AI в дизайне через продвинутые техники промптинга

Илья Каназин и Марина Чернышова показали, как правильные промпты превращают AI из генератора случайных идей в полноценного помощника дизайнера. Разница между «Как улучшить онбординг?» и детальным запросом с контекстом может дать в 10 раз более полезный результат.

Ребята подчёркивают, что промптинг это не просто написание инструкций, а проектирование мышления. Они делятся шестью техниками, которые проверили на реальных задачах: от декомпозиции через Jobs To Be Done до симуляции кросс-функциональной команды. Каждая техника подходит для конкретных ситуаций, и их можно комбинировать как модульные инструменты.

Внутри:
– Как разбивать задачи через Jobs To Be Done с чекпоинтами для самопроверки;
– Зачем использовать Tree of Thought для UX-аудита конкурентов;
– Как превратить AI в интеллектуального оппонента через Memory Update;
– Что такое мета-промптинг и как он помогает писать промпты для UI-генераторов;
– Как проводить когнитивный walkthrough с разными типами пользователей;
– Почему мульти-роль промптинг симулирует обратную связь от всей команды.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы

💡 Как внедрить дизайн-систему, когда ты единственный дизайнер

Саша рассказала о своём пути от графического дизайнера до продуктового, работая над ERP-платформой. Будучи единственным дизайнером на проекте без опыта работы с большими продуктами, она столкнулась с хаосом из сотен экранов без консистентности и структуры.

Главной проблемой стало отсутствие базовых инструментов: переменных, системы отступов, методологии. Она самостоятельно освоила современные возможности Figma через YouTube-ролики и эксперименты, создав Systematic Color Workflow с 400+ токенами. Правда, позже поняла, что можно было ограничиться только реально используемыми стилями и не усложнять работу фронтенда.

Внутри:
– Как создать Color Mixer для формирования консистентной палитры;
– Почему текстовый компонент может перегружать макеты при сотнях экранов;
– Зачем сразу определять правила отступов и брейкпоинты;
– Как Variants, Boolean и Auto Layout ускоряют работу;
– Почему пришлось аргументировать переход на платную версию Figma;
– Какие ошибки можно было избежать с опытным ментором.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы