🪁 Дизайн-система начинает работать, когда вокруг неё договорились

Рома из Туту рассказывает, как их дизайн-система 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

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

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

➡️ Тестировать сайт по этой ссылке И в целом, напишите, пожалуйста, как вам проект, как думаете, достоен ли он получить награды 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 Буду рад, если заглянете — хочется снова попасть в рекомендации. Ссылка выше. Обнял вас и приятного просмотра!

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

Остались последние правки по промосайту. Зацените, что получилось (смотреть лучше с компа) 🤗 ➡ Смотреть готовый сайт ➡ Смотреть готовый сайт Также записал короткое видео (приложил к этому посту), где поясняю, как устроены механики по промосайтам и какие правки я даю последними. Сейчас планируем отправлять сайт на международные конкурсы (AWWWARDS, CSS Design Awards, СSS Winner, Design Nominees и т.д.). Напишите, что думаете: проект достоин международного уровня? 😊 Проект сделан Валерией Еолян (@Valeria_Eolyan) и Никитой Кисилевым (@Nikita_Kisilyov) на курсе с моим персональным обучением "Ultra UI: уровень Арт-дирекшн". В рамках этой программы мы создаем проекты высочайшего класса — от идеи самого продукта до его упаковки в формате айдентики, промоматериалов и сайта. ➡ Узнать больше о курсе у коллег в @uprock_hello

→ Database — маппинг слоев в фигме с backend данными из JSON, CSV, вставка картинок по https// ссылкам. → Tokens — применение, экспорт, поддержка более 35 типов токенов: number, sizing, spacing, dimenstion, typography, transition, image, color, fill, shadow, glass и другие. → Генерация component и componentSet из JSON (через ИИ можно конвертировать любой компонент (VUE3, React) в JSON и на основе этого кода сгенерировать в Figma точно такой же компонент) → Интеграция дизайна в Storybook → Экспорт переменных из JSON в CSS, Swift, Kotlin прямо из плагина → Поддержка GitHub и GitLab → Поддержка Dev Mode для Frontend разработчиков → Восстановление связей с master компонентом или подключение открепленных инстансов к мастер компоненту → Поддержка Remote соединения с Agent AI Install plugin

Но перед этим хотим сказать, что для нас самое важное — это вы! Все, кто читает наши каналы и рассылки, кто пришёл на митап, слушал, шутил и задавал вопросы. Для нас это очень много значит. И, конечно, отдельное спасибо ВКПБ — студиям Deza и Lovemedo, которые всё это организовали. Кстати, на митапе волшебным образом у нас случилась 105% явка. Вот такая шрифтовая магия получается •ᴗ• А теперь сами материалы! Пойдём в порядке лекций: 🐶 Лично от Дениса Васильева: 🌞Большая коллекция бесплатных шрифтов 🌞«Что делать, если нет бюджета на шрифты»  🌞Статья о том, как бесплатно попробовать шрифты 🌞Большая статья о шрифтовых лицензиях 🐶 Красота от Томы Стрельцовой: 🌞О двух техниках древнерусской каллиграфии 🌞Декоративный шрифт Red Klin 🌞Шрифт на основе кириллических букв Сергея Чехонина Список книг, который Тома обещала: 🌞Книга про буквы от Аа до Яя, Юрий Гордон 🌞Designing type, Karen Chang 🌞Основа стиля в типографике, Роберт Брингхерст 🌞Живая типографика, Александра Королькова 🌞The stroke theory of writing, Gerrit Noordzij 🌞Про леттеринг, Джессика Хиш 🌞Искусство каллиграфии, Дэвид Харрис 🌞The origin of the serif, Edward Katich 🐶 Шрифтовая магия от Саши Корольковой: Для начала красивая мысль, с которой Саша начала свою лекцию. Любая достаточно развитая технология неотличима от магии — Артур Кларк 🐶 Глава 1: Нестандартная вариативность 🌞«Тёмная сторона шрифта» — суперлонгрид о технической стороне шрифта (иногда нужен VPN) 🌞Вариативные гротески: Pragmatica Next Circe Contrast 🐶 Глава 2: Оптические размеры Шрифт наполовину состоит из оптических иллюзий 🌞Шрифты с оптическими размерами: Bodoni PT Simon Kudry (с бесплатным начертанием Kudry Weird Headline Stapel Stem PT Sans (бесплатный) PT Serif (бесплатный) 🌞Волшебные слова: Caption — до 12 пт Text — 12-18 Subhead — 18-48 Headline — 48-72 Display — 60+ Poster — 96+ 🐶 Глава 3: Шрифт переодевается 🌞Деликатный геометрический гротеск с большим набором стилистических сетов: Hint Включить сет Grotesque Round в CSS: font-feature-settings: "ss03"; 🌞Статья о Хинте и его стилистических сетах 🐶 Глава 4: внимание к деталям 🌞Шрифт с пропорциональными и моноширинными маюскульными и минускульными цифрами: Bodoni PT Как включить поднятие регистрозависимой пунктуации на all caps в CSS: font-feature-settings: "case"; 🌞Статья о том, как включать стилистические сеты в Фигме и CSS 🐶 Глава 5: странные вещи, которые может шрифт 🌞Шрифт Mojito, который может имитировать почерк и содержит ~1400 знаков 🌞#player">Первая в мире видеоигра в шрифте 🐶 Глава 6: Микротипограф — «что-нибудь полезное» 🌞Микротипограф в шрифте — что это такое и как он работает 🌞Плагин-типограф для Фигмы 🌞Типограф студии Лебедева 🐶 Глава 7: шрифт и нейросети 🌞В шрифт встроили нейросеть 🐶 И на всякий эсэмэмщица напоминает: 🌞«Как разобраться в кириллице» — статья 🌞«Как разобраться в кириллице» — бесплатный курс 🌞Используйте ТЕСТОВЫЕ ВЕРСИИ Главный хайлайт встречи — Саша разрешила произносить Circe как Цирце 👀 Пересматривайте, перечитывайте, пробуйте. А мы всегда на связи: тут в канале или по почте fonts@paratype.com P.S. В комментариях ещё опубликуем несколько фотографий с митапа

Тема: Глобальная проблема переработки пластиковых отходов. То есть задача — буквально сделать интерактивный арт-проект из бутылок. Его делают Николай (@nick_kudrya) и Наташа (@natalydesign) под моим чутким контролем и с персональными фидбэками. Попросил их рассказать о проекте, сейчас они на этапе концепта. Ребята еще поделились подробнее текстом о процессе и себе: Пару слов о нас. Я — Николай, человек, который решил уйти в дизайн после того, как ему исполнилось 33 года. До этого занимался спортивным маркетингом, пробовал себя в стартапах, где, не имея особых знаний в дизайне, отрисовал свой первый интерфейс приложения. В процессе обучения и перехода в индустрию дизайна мне удалось продать себя как арт-директора в одной из дизайн-студий в Ташкенте, где я, по сути, набирался опыта и набивал шишки. После ухода из этой студии мы вместе с коллегой открыли собственную дизайн-студию, которая функционирует уже чуть больше двух лет. Мой соавтор проекта на курсе "Ultra UI: Уровень Арт-дирекшн" — Наталья. Более 10 лет она работала художником, а сейчас — Lead UI/UX-дизайнер с опытом более 8 лет в digital. Художественный бэкграунд помогает ей создавать сильные визуальные концепции, работать с идентичностью проектов и выстраивать эстетику, а опыт в digital — проектировать продуманный UX и управлять дизайн-процессами. Вот такую небольшую команду собрал Евгений в рамках курса. Все рассказывают истории успеха, а я, пожалуй, кратко расскажу о тех вызовах, с которыми нам пришлось столкнуться: 1. Работа в команде Она сильно отличается от индивидуальной. Это всегда поиск общего решения, которое подойдет обоим, ведь проект учебный. Например, список тем, одинаково интересных нам обоим, заметно меньше. По сути, это очень похоже на работу с реальным проектом, где тему выбирает клиент. 2. Постоянная связь Практически каждый день мы стараемся созваниваться, несмотря на текущие рабочие задачи. Каждый созвон занимает от 20 до 60 минут. Нам повезло: мы живём в одном часовом поясе и можем найти время для общения практически в любое время суток. 3. Выбор темы Женя предупреждал, что в какой-то момент мы можем захотеть остановиться и начать всё заново — так и случилось. Изначально мы выбрали, как нам казалось, очень классную тему — студию традиционных ремёсел Японии. Мы прошли большой путь: анализ, референсы, мудборды, сторителлинг, раскадровку, интеграцию текста, даже начали генерировать материалы — но в итоге остановились и сменили направление. 4. Понимание механик Важный момент, который донёс Женя и к которому мы пришли далеко не сразу. Даже в фестивальных сайтах работает принцип «делай проще». Конечно, на Awwwards полно кейсов с невероятными 3D-моделями, сложными переходами и очень креативными решениями. Но лучший способ двигаться в любом деле — идти последовательно. Вооружившись этими вводными и спотыкаясь о хотелки вроде «надо сгенерировать видеосеквенцию» или «может, сделать простенькое 3D», мы в итоге пришли к простой CSS-анимации. Ну и если кто-то дочитал до конца — ловите наши соцсети. К сожалению, ни у меня, ни у Натальи нет собственных Telegram-каналов. «Запретграм» у нас больше про жизнь, чем про работу, поэтому делимся рабочими инструментами. ● Николай: Behance / Linkedin ● Наталья: Behance / Linkedin

Дима Бороухин @dmboro — в прошлом дизайнер и веб-разработчик. После потери зрения объединил свои технические знания с личным опытом и стал консультантом по цифровой доступности. — Ты пробовал использовать Claude или ChatGPT со скринридером или с клавиатуры — как это работает на практике? Я пробовал ChatGPT, однако по удобству взаимодействия мне больше понравился Gemini. Его интерфейс вполне доступен: элементы управления имеют корректные роли, имена и состояния, что позволяет скринридеру считывать структуру страницы. В своей работе я активно применяю AI для подготовки HTML-страниц для презентаций — чтобы показывать командам типичные проблемы доступности. Грамотный промпт позволяет сгенерировать страницу, где один элемент оформлен эталонным кодом, а остальные имеют аналогичный дизайн, но содержат критические ошибки — например, невозможность установить фокус. Визуально всё выглядит одинаково, но при взаимодействии через клавиатуру или скринридер различия становятся очевидными. Также я использую AI для подбора цветовых схем и помощи в написании CSS-кода. — Ты знаешь кейсы, где AI улучшил доступность продукта? или хотя бы часть? Комплексных кейсов, где AI улучшил доступность продукта, в моей практике не встречалось. Вижу нейросети лишь в точечных задачах — как в примере с описанием изображений, о котором расскажу дальше. — Есть ли риск, что AI-инструменты для доступности обучены на данных, которые не отражают реальный опыт людей с ограниченными по здоровью? Риск, безусловно, есть. AI может отлично знать теорию и стандарты, но их всегда нужно проверять на практике. Реальные сценарии взаимодействия со вспомогательными технологиями часто сложнее, чем их описывают в документации. Пример из жизни: недавно я просил AI создать примеры недоступных кнопок. Модель предположила, что «поломанная» кнопка будет полностью неработоспособна для скринридера. Однако на практике скринридер NVDA умеет эмулировать нажатие даже там, где код реагирует только на клик мыши. В итоге для пользователя скринридера кнопка может сработать, а для человека, использующего только клавиатуру, она останется недоступной. Я не разработчик нейросетей, но как консультант по цифровой доступности могу сказать: чтобы ситуация изменилась, в данные для обучения моделей нужно включать больше примеров реального поведения ассистивных технологий. Важно, чтобы AI видел не только идеальный код, но и понимал нюансы взаимодействия разных групп пользователей с интерфейсом. — 70% новых приложений создаётся на low-code и no-code платформах. Люди без технической базы делают продукты для миллионов. AI научит их паттернам доступности? Теоретически — может, но на практике всё зависит от того, как сформулирован запрос. Если создатель продукта не осведомлен о принципах доступности, он просто не включит эти требования в задачу для AI. А без явного запроса модель проигнорирует эти нюансы ради скорости разработки. Важно помнить: доступность — это не только формальное соответствие ГОСТу или WCAG. Прежде всего это про пользовательский опыт. Можно создать приложение, которое формально пройдет все автоматизированные тесты, но при реальном использовании окажется неудобным. — В России активно пользуются технологиями с Ai — зарубежные скринридеры, программы по типу Open your eyes, есть ли надежда, что подобные сервисы будут разрабатываться российскими разработчиками? Это уже реальность. Я постоянно пользуюсь отечественными решениями. Например, «Умная камера» Яндекса — незаменимая вещь в быту: она помогает отличить бутылку молока от кефира в холодильнике, когда упаковки идентичны. Недавно я показывал зарубежным коллегам функцию описания изображений в Яндекс Браузере. В одном онлайн-магазине одежды вместо внятных alt-текстов были маркетинговые названия коллекций. Нейросеть Яндекса точно описала суть: состав комплекта, цвета, фасон. Это тот случай, когда AI исправляет ошибки контента «на лету». Так что — большой респект и спасибо команде инклюзии Яндекса за их работу!

cssauthor

Якуб Крехель показал набор мелких приёмов, которые по отдельности почти незаметны, но в сумме сильно меняют ощущение от интерфейса. Он прошёлся по типографике, радиусам скруглений, анимациям и другим визуальным деталям, а главное — показал, как именно их улучшить на практике, с конкретными CSS-свойствами и примерами. #статья@zhurnalus_lite

А пока делимся с вами важными ссылками с субботней лекции Саши на UX/UI Conf о шрифтах в вебе. В подборке есть и книги, и записи других лекций, и статьи. Надеемся, каждый найдёт для себя что-то интересное. ⚡️ Пара мыслей с лекции, которые могут выручить вас — Иногда шрифтовые дизайнеры добавляют прямо в название шрифта подсказку, в каких размерах его использовать — смотрите картинку к посту. — Если вы собираетесь использовать шрифт в мелком кегле, особенно на экране — межбуквенные расстояния должны быть достаточно просторными, в этом случае может помочь разрядка (положительный трекинг). — Если вы собираетесь использовать шрифт в крупном кегле, отрицательный трекинг допустим, но обязательно проверяйте его на сложных сочетаниях типа «ух», «кл», «гт» — не давайте буквам слипнуться! — Если вы хотите попробовать использовать на сайте новый для себя шрифт, обязательно посмотрите на прототип из Windows с самого старого монитора, какой найдёте, чтобы проверить экранное отображение. ⚡️ Шрифты, о которых спрашивали во время лекции (ими была сделана презентация): Роскошный Hint Эксцентричная Helsa У нас на сайте появились тестовые версии, не забывайте скачивать и примерять шрифты ⚡️ Бесплатные шрифты, которые участвовали в лекции 🐶 Текстовые: Commissioner Geologica Golos Text Golos UI IBM Plex Sans Onest PT Root UI Tilda Sans 🐶 Не совсем текстовые Lanze Martian Grotesk 🐶 Совсем не текстовые Ambidexter Kudry Weird Headline ⚡️ Статьи, курсы, инструкции и коды: 🔸Большая подборка шрифтов без бюджета с приличной кириллицей  🔸«Как разобраться в кириллице» — статья 🔸«Как разобраться в кириллице» — бесплатный курс 🔸Статья ABCDinamo о встраивании вариативных шрифтов на сайт (на английском) ⚡️ Примеры кода для вариативных шрифтов с codepen.io 🔸Изменение жирности по ховеру 🔸Анимация изменения формы независимо от курсора 🔸Анимация изменения ширины независимо от курсора 🔸Изменение жирности в той части надписи, где курсор 🔸Изменение ширины и жирности в той части надписи, где курсор ⚡️ Ещё немного полезного: 🔸Статья о микротипографе, который мы встроили в шрифт 🔸Статья о том, как включить возможности OpenType в CSS и Фигме 🔸«Тёмная сторона шрифта» суперлонгрид о технической стороне шрифта (иногда нужен VPN) 🔸Статья о том, как бесплатно попробовать шрифты 🔸Статья о многоязычных шрифтах 🔸Большая статья о шрифтовых лицензиях ⚡️ Приложения: Фонтоскоп — бесплатное приложения для теста почти всей библиотеки Паратайп в Ai, Ps, Id, Figma Инструкция по установке ⚡️ Книги (их не было на лекции, но они будут полезны): 🔸Живая типографика, Александра Королькова 🔸 Облик книги, Ян Чихольд 🔸Новая типографика. Руководство для современного дизайнера, Ян Чихольд 🔸Основы стиля в типографике, Роберт Брингхерст 🔸Мой путь к типографике, Вольфганг Вайнгарт 🔸Типографика. Порядок и хаос, Владимир Лаптев ⚡️ Лекции: 🔸Вся правда о шрифтовых парах 🔸Шрифтовая магия Буквы не то, чем кажутся

🔶 Httpster — примеры сайтов и интерфейсов, где можно найти нестандартные решения для UX и UI 🔶 CSS Design Awards — проекты, отмеченные премией как самые красивые и оригинальные 🔶 Brutalist Websites, если нужен брутализм 🔶 Dribbble — сообщество графических дизайнеров, веб-дизайнеров, иллюстраторов и 3D-визуализаторов 🔶 Minimal Gallery — библиотека сайтов в минималистическом стиле 🔶 One page love — подборка одностраничных сайтов и шаблонов 🔶 Lapa Ninja — тысячи примеров сайтов, а также бесплатные ресурсы для работы 🔶 HUDS+GUIS — здесь можно изучать интерактивный дизайн 🔶 FWA (Favourite Website Awards) — площадка премии, которая отмечает классные работы в области цифрового дизайна и инноваций в дизайне 🔶 Dark Mode Design — царство тёмного режима 🔶 Site see — галерея сайтов с удобной фильтрацией контента по цвету и направлению [Фабрика Дизайна]

После релиза кабинета рекрутера 2 февраля я почти не вылезал из кода. Основной фокус был не на «добавить кнопки», а на то, чтобы всё это держало нагрузку, не сыпалось и работало быстро. Коротко: докрутил рекрутерскую часть, сильно ужал расходы на инфраструктуру и снизил количество лишних запросов в Redis (примерно х10 раз), что сэкономит мне денег за месяц. 🔘 Что сделал: – Стабилизировал кабинет рекрутера: поправил гонки в БД, доработал логику откликов/чатов, метки прочитанного, статусы, ограничения и защиту API; – Причесал страницы рекрутера: список вакансий и детальная стали удобнее, добавил CTR, копирование ссылки, slug-ссылки, адаптив и кучу мелких UX-фиксов; – Сильно переработал кеши: Redis + request-scoped кеши + negative cache + gzip для данных поиска/вакансий, чтобы меньше долбить БД и API; – Снизил нагрузку на БД: батчинг аналитики и событий, буферизация через Redis, фоновые флаши и дневные агрегаты; – Подкрутил инфраструктуру: Gunicorn, CPU на проде, таймауты и health-check Redis; – Разнес монолитный главный файл на модульную структуру (bootstrap/blueprints), чтобы дальше не утонуть в хаосе; – Обновил стратегию кеширования фронта; – Добавил PWA-базу (иконки/manifest/service worker + offline fallback). Теперь можно добавить сайт на домашний экран и пользоваться как приложением; – Доработал проверку резюме и PDF: асинхронная генерация, кеш, улучшения по мобильному UI. Ну и теперь проверка резюме даёт более подробную информацию чуток) – Разбил большой css файл на 24 маленьких и ничего не сломал)) – Поработал чуть по SEO и вывел в поиск 1000+ страниц по разным параметрам, посмотрим, какой эффект это даст. 👀 Что по цифрам: – Были рекордные показы по SEO из гугла и яндекса, а также клики (всё это за 0 рублей); – Рекорд по выручке за последние 30 дней; – DAU приближается к 4к пользователей (шок). Цель 10к DAU; – Каждый день 200+ регистраций. – Сотни сопроводительных и проверок CV каждый день; – 200+ откликов добавляют в менеджер откликов ежедневно; За последний месяц, чтобы вы понимали рост, я до сих пор не осознаю пока: – Сопроводов сгенерировано на 138% больше, чем за прошлый период; – Сиви проверено на 103% больше; – Мэтчей на 133%; – Поисковые запросы на сайте на 58%; – Откликов добалвено на 103% больше; – Рост регистраций на 117%; 🌐 Из важного ещё Я научился хорошо парсить Linkedin (его не просто парсить, ибо у них закрытое апи и в целом хреновый поиск), поэтому теперь вакансий с прямым контактом будет ещё больше. Ну и расширяю сетку рекрутеров тоже. И я почти полностью ушёл от HH. Теперь их вакансий на сайте меньше 5% и только по дизайну (редко). В скором времени откажусь ещё от пары агрегаторов, чтобы давать только прямые контакты. Пришлось немного улучшить машинку, которая тянет всё это дело, ибо старая стала подтупливать) Теперь всё гуд. Сейчас цель простая: продолжать усиливать рекрутерский контур и доводить путь вакансия → отклик → чат → оффер до максимально бесшовного состояния. Весь упор сейчас буду делать на рекрутеров, чтобы привлекать их в сервис. Пока не знаю как, если есть идеи — пишите. Спасибо каждому, кто пишет фидбек в личку. Это реально помогает делать продукт лучше каждый день. А его я получаю ежедневно с массой благодарности. Спасибо!!! Если у вас есть вопросы, пожелания, предложения, приходите в лс ➡️ Смотреть вакансии ➡️ Смотреть вакансии ➡️ Смотреть вакансии ч.25

Вот что мы подготовили на этой неделе: • Цитаты из книги Кайла Чайки «В поисках минимализма. Стремление к меньшему в живописи, архитектуре и музыке» • Прогноз трендов от Pinterest на 2026 год • Обзор акцидентных шрифтов с кириллицей в Google Fonts. Вторая часть • Опенсорсная библиотека для создания «впуклых» углов на чистом CSS • Как правильно использовать информационные подсказки в интерфейсах • Простой способ начать работу с переменными в Figma • Как слоты в Figma упрощают работу с дизайн-системой и делают архитектуру чище • Как формировать культуру команды и сохранять идентичность. Советы пяти студий • Принципы подбора шрифтов. От технических параметров до эмоционального воздействия • Как писать промты для агентов при работе с кодом • 10 главных ИИ-трендов, которые повлияют на развитие технологий и IT-компании • Очень эстетичный набор карточек с советами для музыкантов

Сегодня пришло письмо от CssDesign Awards о том, что надо выбрать сайт года! Буду на выходных смотреть номинантов. Очень интересно самому, кто там оказался. А на следующей неделе буду готовить статью про номинантов.