Первая часть

Телеграм

Открываешь профиль: «Senior Product Designer. Эксперт по дизайн-системам. Ментор. Помогаю бизнесу расти».
Смотришь на аватарку: пацан 22 лет с макбуком в наклейках, на фоне — съёмная однушка в Мытищах.
Считаешь в уме: дружище, в 14 ты играл в CS:GO, в 18 поступил на «менеджмент» в региональный универ, который бросил на третьем курсе. А 8 месяцев назад скачал Figma по туториалу с Ютуба.

Но для тебя эти 8 месяцев — «Путь Самурая».
Ты уже не просто дизайнер. Ты — Титан Индустрии, блядь. Мама в шоке, что ты «в айти», папа на заводе гордится, а ты уже менторишь «джунов» в Телеграме за 15к в месяц.

Давай разберем этот цирк, потому что рынок трещит по швам от таких «гениев».

🔥 1. Портфолио из параллельной вселенной
Твои кейсы — это цифровой онанизм:
— Редизайн ВКонтакте (потому что оригинал делали дебилы).
— Концепт криптобиржи с неоновым угаром (которая никогда не запустится, потому что ты не умеешь даже Тильду верстать).
— Приложение для доставки шаурмы (потому что «нужно мыслить нестандартно»).

Ни одного живого клиента. Ни одного реального проекта. Ни одной задачи, где нужно было вписаться в бюджет 50 тысяч, угодить заказчику из Воронежа, который хочет «как у Apple, но дешевле», и заставить это работать на убитом Samsung с плохим интернетом.

Ты не дизайнер. Ты художник блять любитель, который играет в работу, пока мама вареники приносит.

🔥 2. Синдром «Диванного Искусствоведа»
Но настоящая комедия начинается, когда этот «Сеньор» заходит в комменты под работой реального дизайнера. Под проектом, который, о ужас, реально работает и приносит клиенту деньги.

И наш гений пишет с видом всезнающего оракула:
«Блеать, какой колхоз. Шрифтовая пара не сочетается. Отступы "гуляют" на 2 пикселя. Это даже не дизайн, это позор профессии. Где тут UX?!»

Давайте переведем это с " дизайнерского" на русский:
🔹 «Где тут UX?» — UX там, где пользователь нашел кнопку и купил. А не там, где ты нарисовал стрелочки в Word, сидя в общаге и питаясь дошираком.
🔹 «Я бы сделал иначе» — Но ты не сделал. И никто тебя не просил. Твой «идеальный» макет висит мертвым грузом на Behance с 0 просмотров, потому что кроме твоей мамы его никто не видел.

🔥 3. Ценник как у топового агентства, а скиллы как у стажера
Ты просишь 150 000 ₽ за лендинг. Почему? Потому что ты «Сеньор». Потому что ты прочитал статью про «дизайн-мышление» в Телеграм-канале и теперь считаешь, что понимаешь психологию продаж лучше, чем маркетолог, который 10 лет впахивает.

А когда тебе указывают на реальную ошибку (например, на нечитаемый шрифт или кривой адаптив), включается режим «Обиженной Принцессы»:
— «Вы не понимаете высокую эстетику!»
— «Это тренды 2026 года!»
— «Со мной так нельзя, я творческая личность!»
— «Я учился у наставника из Москвы!»

Коллега, ты не Пикассо. Ты не пишешь картину для Лувра. Ты делаешь инструмент для бизнеса. И если этот инструмент не работает, потому что ты решил «поиграть со шрифтами» вместо того, чтобы решить задачу, — ты профнепригоден. Точка.

Твой макбук в кредит, твои кроссовки за ползарплаты, твои «курсы по дизайн-мышлению» за 30к — всё это пиздец, потому что ты не умеешь делать то, за что платят деньги. Ты умеешь только говорить про это.

В чем главная трагедия?

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

Потому что реальный дизайнер знает: идеального дизайна не существует. Существует работающий дизайн.

Критиковать макет, не видя брифа, не зная ограничений бюджета и требований ЦА — это как критиковать ремонт в квартире, не зная, что у хозяев есть кот, который дерет обои, а бюджет был 30 тысяч рублей и мастер — брат жены.

Хочешь критиковать? Сделай лучше. Запусти свой проект. Получи реальные отзывы от реальных пользователей. Заставь это приносить деньги. А пока твои «гениальные правки» существуют только в твоей голове и в комментариях под чужими работами — заткнись и учись.

Честный джун, который говорит «я не знаю, но я разберусь», стоит в сто раз дороже, чем лживый «сеньор», который продает воздух, упакованный в англицизмы и макбук в кредит.


👨‍💻 Дизайнеры: какой самый абсурдный или хамский комментарий вы получали под своими рабочими проектами? Делитесь скриншотами или текстом, посмеемся над «экспертами» вместе! 👇😂

💼 Заказчики: признавайтесь, нанимали таких «титанов с 6-месячным стажем»? Чем закончилась история? 💸

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

Сдаю макет. Клиент смотрит на экран ровно четыре секунды (дольше его мозг не вывозит без тиктока), делает умное лицо и выдаёт перл:

«Слушай, а я тут скормил твой макет ChatGPT, и он сказал, что дизайн слабоват».

Давайте на секунду представим этот сюрреалистичный пиздец.

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

Это как прийти к онкологу с опухолью, а он тебе: «Слушай, я тут спросил у Алисы, и она сказала, что ты не так дышишь. Слабоват пациент, иди вон».

Самое смешное? Клиент даже не скинул скриншот того, что именно сказал бот.

Потому что ChatGPT, скорее всего, выдал свою стандартную дипломатичную хуйню: «Дизайн выглядит профессионально, но можно улучшить контрастность для повышения синергии и вовлечённости».

Перевод с нейросетевого на человеческий: «Я нихуя не вижу, я просто текст генерирую, но звучит умно, держи».

Вы можете скормить ChatGPT «Чёрный квадрат» Малевича, и он выдаст: «Интересное решение, но можно добавить больше синевы для повышения эмоционального воздействия».

Но клиент-то поверил!

Знаете, в чём трагедия? Клиент не платит за мою экспертизу. Он платит за то, чтобы я подтвердил его галлюцинации. А когда у него не хватает яиц сказать прямо: «Мне просто не нравится эта зелёная какашка», он прячется за фартук искусственного интеллекта.

«Это не я тупой и не разбираюсь в продукте, это ЖПТ так сказал!»

Блядь, гениальная защита. Уровень: бог.

Поэтому вот вам мой профессиональный совет на будущее.

В следующий раз, когда клиент начнёт эту хуйню, просто кивни, улыбнись и скажи:

«Отличная идея. Давай я передам проект твоему новому арт-директору. ChatGPT не спит, не выгорает, не просит предоплату и не задаёт тупых вопросов. А я пока спрошу у нейросети, как мне тратить твои деньги. Она сказала, что можно не платить. Слабоват клиент, бюджет урезан».

Дизайн делают для людей, а не для чат-ботов. Если ваш главный критерий качества — одобрение алгоритма, который думает, что банан — это телефон, идите к нему и работайте.

Он, кстати, делает это бесплатно. И без правок. Пока вы не обанкротитесь.

---

P.S. А у вас бывало, что клиент приходил с «а вот нейросеть сказала» или «мне друг-айтишник посоветовал»? Как отправляли обратно в реальность? Делитесь в комментах, мне нужно знать, что я не один в этом аду. 👇

Итак, вы хотите сделать сайт, который ПРОДАЁТ? Запоминайте формулу успеха, которую вам продадут на любом курсе за 50 000 ₽:

🔴 Шаг 1. Берем огромный заголовок на весь экран: «ЛИДЕРЫ РЫНКА С 2005 ГОДА». Почему лидер? Потому что так написано у всех. Почему с 2005-го? Потому что цифра должна быть внушительной.

🔴 Шаг 2. Обязательно добавляем таймер обратного отсчета. «АКЦИЯ ЗАКАНЧИВАЕТСЯ ЧЕРЕЗ 2:43:17!». И плевать, что этот таймер перезапускается при каждом обновлении страницы. Клиент не должен знать правду.

🔴 Шаг 3. Желтая кнопка «КУПИТЬ СЕЙЧАС» размером с пол-экрана. И рядом еще одна — «ЗАКАЗАТЬ!». И третья — «УЗНАТЬ ПОДРОБНЕЕ!». Главное, чтобы пользователь растерялся и нажал хоть куда-нибудь.

🔴 Шаг 4. Блок отзывов с фотографиями стоковых людей из фотостоков. «Марина, 34 года, Москва: "Я не верила, но это работает!"». Неважно, что Марина существует только на Shutterstock.

🔴 Шаг 5. Форма заявки с 15 полями. Имя, телефон, email, индекс, кличка кота, группа крови. Чем больше полей — тем более «квалифицированный» лид, да?

Поздравляю! Вы только что сделали сайт, который продает... желание закрыть вкладку через 3 секунды.

Узнали свой сайт или сайт конкурента? Ставьте 🔥, если тоже устали от этих желтых кнопок и фейковых таймеров.

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

Плюс я всегда заготавливал анимации для кликабельного прототипа. Для нас это важно: мы показываем клиенту на этапе дизайна все возможности сайта.

Зачем я её сделал

Мы в студии в основном делаем промо-проекты и интернет-магазины. Наша задача – быстро применить фирменный стиль, за счёт этого уникализировать проект и начать собирать страницы.

В процессе поиска я посмотрел кучу примеров: Material Design от Google, Taiga UI (тот, что в продуктах Тинькова) и много других из Figma Community. Но во всех случаях мне не хватало гибкости и простоты изменения стилей.

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

✅ Первое – система стала отличным регламентом для дизайна в студии. Я заложил туда не только готовые элементы, но и правила: кратность четырём, сетки, базовые размерности. Новички перестали страдать гигантизмом, не забывают про адаптивы и тратят меньше времени на анимации для прототипа.

✅ Второе – я сильно сократил время запуска проектов. Раньше на подготовку UI могла уйти неделя (и больше). Сейчас – запустить проект можно за один день. Подобрал цвета, подобрал гарнитуры, закинул в дизайн-систему – получил готовый UI-кит.

Не люблю долго ходить вокруг да около – ссылка на дизайн-систему: https://www.figma.com/community/file/1623663606281890998/free-ui-kit-design-system-ecommerce-website-template-ompletely-free-for-figma. А дальше – небольшой разбор с пояснениями, что я такого сделал.

Стили – с чего начинается система 🎨

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

Я распределил логику иначе:

• Базовая палитра серых оттенков – используется повсеместно.

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

• Цвета текста вынес отдельно – чтобы можно было независимо менять цвет текста и фона.

Это всё получено эмпирическим путём. Я остановился на таком варианте, и, как по мне, под наши задачи он подходит идеально.

С текстами то же самое: у нас есть заголовки, тело письма, а также отдельные стили под UI-элементы (кнопки, табы). Почему я их добавил? Потому что в работе мне не хватало гибкости именно с элементами интерфейса.

Скомпоновав стили, я добился главного – можно очень быстро уникализировать проект.

UI – только нужные элементы 🔧

В разделе UI – необходимый набор, чтобы сделать сайт. Да, в других системах вы увидите очень много компонентов. Но я решил сконцентрироваться на другом: мы не рисуем дашборды и личные кабинеты веб-приложений, мы делаем сайты. Поэтому я заготовил элементы, которые чаще всего нужны именно на сайтах.

И ещё важный момент: несколько вариантов стилизации одних и тех же элементов.

• Кнопки можно уникализировать скруглениями.

• Для полей ввода (Input) я заготовил несколько стилей:– стандартный (как в Bootstrap)– в духе старого Material Design– поле с нижним подчёркиванием (для брутальных ресурсов, где внешний вид важнее удобства)

• Почти во всех элементах заготовлены светлая и тёмная темы. Почему? Потому что на сайтах часто бывают и светлые, и тёмные секции. Перекрасить одной кнопкой не получится – проще перекрашивать элементы внутри.

Компоненты – готовые элементы с UX-логикой и анимациями 🧩

В дизайн-системе несколько разделов с компонентами:

• Базовые

• Для каталога

• Для интернет-магазина

• Для блога

Они названы не от балды. Скажу по секрету: мы разрабатываем сайты на своей платформе (в планах выпустить её бесплатно). Так вот, эти разделы соответствуют папкам с компонентами у разработчиков в проекте.

Один и тот же компонент (например, из каталога) может использоваться и в личном кабинете – поэтому он сделан в одном месте.

У всех компонентов я постарался предусмотреть анимации для кликабельного прототипа. Этого очень не хватает в дизайн-системах, которые я находил в интернете.

Вставив компонент, вы сразу можете показать клиенту логику и работу элемента. И разработчику – тоже.

Вишенка на торте – готовый шаблон интернет-магазина 🍒

Я сделал базовый шаблон интернет-магазина. Конечно, для многих клиентов нужен уникальный функционал – без проблем, мы создаём уникальные компоненты и встраиваем их в систему.

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

Плюс я заготовил все необходимые страницы – у начинающих дизайнеров теперь меньше шансов что-то забыть нарисовать.

Что в планах?

• Развивать шаблон дальше. Уже есть два варианта блога (плитка и лента).

• Добавить другие варианты оформления заказа: постраничный, упрощённый, масштабный.

Но базис уже есть. А при любом строительстве главное – надёжный фундамент.

Финал 😉

Свою дизайн-систему я уже опубликовал в Figma Community. Буду честен: хотелось не просто поделиться бесплатно, но и получить немного внимания. Однако чуда не случилось – она довольно легко затерялась среди других.

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

Самая крутая оценка моей работы – если вы будете ею пользоваться и оцените возможности, которые я туда заложил.

И ещё: подпишитесь на мой телеграм-канал. Я заготовил интернациональную версию системы, но в студии мы используем русскую версию – с русским UX, текстами и логикой. Она у меня есть. Если будете подписываться и просить – это подтолкнёт меня опубликовать и её. Поверьте, вы даже не представляете, сколько времени вы сократите на написание текстов и логику.

А пока – спасибо, что дочитали. Пользуйтесь на здоровье.

Adios, amigos!

Дизайнер просто мастер золотые руки